Address feedback: use CDS 2.0 icons

linode · Nov 19, 2024 · 796bd32 · 796bd32
1 parent 55d86aa
commit 796bd32
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/packages/manager/src/assets/icons/visibilityHide.svg b/packages/manager/src/assets/icons/visibilityHide.svg
diff --git a/packages/manager/src/assets/icons/visibilityShow.svg b/packages/manager/src/assets/icons/visibilityShow.svg
diff --git a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx
@@ -182,7 +182,9 @@ export const ContactInformation = React.memo((props: Props) => {
                 }
                 sx={(theme) => ({
                   '& svg': {
-                    color: theme.palette.primary.main,
+                    '& path': {
+                      stroke: theme.palette.primary.main,
+                    },
                   },
                   marginRight: 2,
                 })}

diff --git a/packages/ui/src/components/VisibilityTooltip/VisibilityTooltip.tsx b/packages/ui/src/components/VisibilityTooltip/VisibilityTooltip.tsx
@@ -1,5 +1,6 @@
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import VisibilityShowIcon from 'src/assets/icons/visibilityShow.svg';
+import VisibilityHideIcon from 'src/assets/icons/visibilityHide.svg';
+
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
@@ -44,9 +45,9 @@ export const VisibilityTooltip = (props: Props) => {
     >
       <StyledToggleButton onClick={handleClick}>
         {!isVisible ? (
-          <VisibilityIcon aria-label="Show" />
+          <VisibilityShowIcon aria-label="Show" />
         ) : (
-          <VisibilityOffIcon aria-label="Hide" />
+          <VisibilityHideIcon aria-label="Hide" />
         )}
         {label}
       </StyledToggleButton>
@@ -58,13 +59,15 @@ const StyledToggleButton = styled(IconButton, {
   label: 'StyledToggleButton',
 })(({ theme }) => ({
   '& svg': {
-    color: theme.palette.grey[500],
-    fontSize: '0.875rem',
+    '& path': {
+      stroke: theme.palette.grey[500],
+    },
   },
   '& svg:hover': {
-    color: theme.palette.primary.main,
+    '& path': {
+      stroke: theme.palette.primary.main,
+    },
   },
-  fontSize: '0.875rem',
   marginLeft: theme.spacing(),
   minHeight: 'auto',
   minWidth: 'auto',