Merge pull request #609 from ente-io/use-stroke-color-icons

Use stroke color icons

src/components/Form/ShowHidePassword.tsx

@@ -21,7 +21,8 @@ const ShowHidePassword = ({
             aria-label="toggle password visibility"
             onClick={handleClickShowPassword}
             onMouseDown={handleMouseDownPassword}
-            edge="end">
+            edge="end"
+            sx={{ color: 'stroke.secondary' }}>
             {showPassword ? <VisibilityOffIcon /> : <VisibilityIcon />}
         </IconButton>
     </InputAdornment>

src/components/Search/SearchBar/searchInput/valueContainerWithIcon.tsx

@@ -36,7 +36,7 @@ export const ValueContainerWithIcon: SelectComponents<
 >['ValueContainer'] = (props) => (
     <ValueContainer {...props}>
         <FlexWrapper>
-            <Box className="icon" mr={'12px'} color="rgba(255, 255, 255, 0.24)">
+            <Box className="icon" mr={'12px'} color="stroke.secondary">
                 {getIconByType(props.getValue()[0]?.type)}
             </Box>
             {props.children}

src/components/Sidebar/Header.tsx

@@ -12,7 +12,10 @@ export default function HeaderSection({ closeSidebar }: IProps) {
     return (
         <SpaceBetweenFlex>
             <EnteLogo />
-            <IconButton aria-label="close" onClick={closeSidebar}>
+            <IconButton
+                aria-label="close"
+                onClick={closeSidebar}
+                sx={{ color: 'stroke.secondary' }}>
                 <CloseIcon fontSize="small" />
             </IconButton>
         </SpaceBetweenFlex>

src/styles/search.ts

@@ -12,7 +12,6 @@ export const SelectStyles = {
         ':hover': {
             borderColor: '#1dba54',
             cursor: 'text',
-            '&>.icon': { color: '#1dba54' },
         },
     }),
     input: (style) => ({

src/themes/darkThemeOptions.tsx

@@ -2,16 +2,19 @@ import {
     createTheme,
     PaletteColor,
     PaletteColorOptions,
+    TypeText,
 } from '@mui/material/styles';
 
 declare module '@mui/material/styles' {
     interface Palette {
         accent: PaletteColor;
         danger: PaletteColor;
+        stroke: TypeText;
     }
     interface PaletteOptions {
         accent?: PaletteColorOptions;
         danger?: PaletteColorOptions;
+        stroke?: Partial<TypeText>;
     }
 
     interface TypographyVariants {
@@ -110,6 +113,13 @@ const darkThemeOptions = createTheme({
                 variant: 'filled',
                 margin: 'dense',
             },
+            styleOverrides: {
+                root: {
+                    '& .MuiInputAdornment-root': {
+                        marginRight: '8px',
+                    },
+                },
+            },
         },
     },
 
@@ -131,6 +141,11 @@ const darkThemeOptions = createTheme({
         danger: {
             main: '#c93f3f',
         },
+        stroke: {
+            primary: '#ffffff',
+            secondary: 'rgba(256,256,256,0.24)',
+            disabled: 'rgba(256,256,256,0.12)',
+        },
         background: { default: '#000000', paper: '#1b1b1b' },
         grey: {
             A100: '#ccc',