use stroke color for icons

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) => ({