chore: revert info icon style fix from #655 due to upstream vanilla u…

…pdate Signed-off-by: Mason Hu <mason.hu@canonical.com>
canonical · Apr 3, 2024 · 5f4f919 · 5f4f919
1 parent c908da4
commit 5f4f919
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 15 deletions.
diff --git a/src/components/HelpLink.tsx b/src/components/HelpLink.tsx
@@ -12,7 +12,7 @@ const HelpLink: FC<Props> = ({ children, href, title }) => {
     <div className="help-link">
       {children}
       <a href={href} target="_blank" rel="noopener noreferrer" title={title}>
-        <Icon name="info--dark" className="help-link-icon" />
+        <Icon name="information" className="help-link-icon" />
       </a>
     </div>
   );

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -253,7 +253,7 @@ const Navigation: FC = () => {
                     >
                       <Icon
                         className="p-side-navigation__icon"
-                        name="info--light"
+                        name="information"
                       />{" "}
                       Documentation
                     </a>

diff --git a/src/components/forms/NetworkDevicesForm.tsx b/src/components/forms/NetworkDevicesForm.tsx
@@ -123,7 +123,7 @@ To change it, edit it in the profile or project it originates from,
 or remove the originating item"
                 position="btm-left"
               >
-                <Icon name="info--dark" />
+                <Icon name="information" />
               </Tooltip>
             ),
           });
@@ -168,7 +168,7 @@ or remove the originating item"
                 <>
                   custom network{" "}
                   <Tooltip message="A custom network can be viewed and edited only from the YAML configuration">
-                    <Icon name="info--dark" />
+                    <Icon name="information" />
                   </Tooltip>{" "}
                 </>
               ) : readOnly ? (

diff --git a/src/pages/instances/forms/CreateInstanceSnapshotForm.tsx b/src/pages/instances/forms/CreateInstanceSnapshotForm.tsx
@@ -137,7 +137,7 @@ const CreateInstanceSnapshotForm: FC<Props> = ({
                 message={statefulInfoMessage}
                 zIndex={TOOLTIP_OVER_MODAL_ZINDEX}
               >
-                <Icon name="info--dark" />
+                <Icon name="information" />
               </Tooltip>,
             ]
           : []),

diff --git a/src/pages/projects/forms/ProjectDetailsForm.tsx b/src/pages/projects/forms/ProjectDetailsForm.tsx
@@ -199,7 +199,7 @@ const ProjectDetailsForm: FC<Props> = ({ formik, project, isEdit }) => {
                       className="checkbox-label-tooltip"
                       message={`Allow profiles to enable custom${"\n"}restrictions on a project level`}
                     >
-                      <Icon name="info--dark" />
+                      <Icon name="information" />
                     </Tooltip>
                   </>
                 }
@@ -286,7 +286,7 @@ const ProjectDetailsForm: FC<Props> = ({ formik, project, isEdit }) => {
                   className="checkbox-label-tooltip"
                   message={`Custom restrictions are only available${"\n"}to projects with enabled profiles`}
                 >
-                  <Icon name="info--dark" />
+                  <Icon name="information" />
                 </Tooltip>
               </>
             }

diff --git a/src/sass/_pattern_icon.scss b/src/sass/_pattern_icon.scss
@@ -9,12 +9,7 @@
   }
 }
 
-.p-icon--info--light {
+.p-icon--info--notification {
   @extend %icon;
-  @include vf-icon-info($colors--dark-theme--icon);
-}
-
-.p-icon--info--dark {
-  @extend %icon;
-  @include vf-icon-info($colors--light-theme--icon);
+  @include vf-icon-info-coloured-themed;
 }
diff --git a/src/util/notifications.tsx b/src/util/notifications.tsx
@@ -9,7 +9,8 @@ export const severityOrder = [
 
 export const iconLookup = {
   positive: ICONS.success,
-  information: ICONS.information,
+  // custom name for info icon to override default color from vanilla
+  information: "info--notification",
   caution: ICONS.warning,
   negative: ICONS.error,
 } as const;