chore: use theme token

Signed-off-by: Amit Amrutiya <[email protected]>

Author: amitamrutiya

src/custom/CatalogSearchSort/CatalogSearch.tsx

@@ -1,7 +1,7 @@
-import { InputAdornment, SxProps, Theme } from '@mui/material';
+import { SxProps, Theme, useTheme } from '@mui/material';
 import React from 'react';
+import { InputAdornment } from '../../base';
 import { SearchIcon } from '../../icons';
-import { CHARCOAL } from '../../theme';
 import { CatalogSearchInput, InputAdornmentEnd } from './style';
 
 interface CatalogSearchProps {
@@ -29,6 +29,7 @@ const CatalogSearch: React.FC<CatalogSearchProps> = ({
   sx,
   endText
 }) => {
+  const theme = useTheme();
   return (
     <CatalogSearchInput
       type="search"
@@ -38,7 +39,7 @@ const CatalogSearch: React.FC<CatalogSearchProps> = ({
       onChange={handleTextFieldChange}
       startAdornment={
         <InputAdornment position="start">
-          <SearchIcon fill={CHARCOAL} />
+          <SearchIcon fill={theme.palette.background.neutral?.default} />
         </InputAdornment>
       }
       endAdornment={<InputAdornmentEnd position="end">{endText}</InputAdornmentEnd>}

src/custom/CatalogSearchSort/CatalogSortByMenu.tsx

@@ -1,6 +1,6 @@
-import { MenuItem, Select, SelectChangeEvent } from '@mui/material';
+import { SelectChangeEvent } from '@mui/material';
 import React from 'react';
-
+import { MenuItem, Select } from '../../base';
 interface Option {
   value: string;
   text: string;
@@ -9,7 +9,7 @@ interface Option {
 
 interface CatalogSortByMenuProps {
   sortOrder: string;
-  handleChange: (event: SelectChangeEvent<string>) => void;
+  handleChange: (event: SelectChangeEvent<unknown>, child: React.ReactNode) => void;
   showByLabel: string;
   options: Option[];
 }
@@ -37,6 +37,7 @@ const CatalogSortByMenu: React.FC<CatalogSortByMenuProps> = ({
         onChange={handleChange}
         displayEmpty
         inputProps={{ 'aria-label': 'Sort by' }}
+        variant="outlined"
       >
         <MenuItem value="" disabled>
           {showByLabel}

src/custom/CatalogSearchSort/style.tsx

@@ -1,9 +1,7 @@
-import { FormControl, styled } from '@mui/material';
-import { InputAdornment, OutlinedInput } from '../../base';
-import { CHINESE_SILVER, CULTURED, WHITESMOKE } from '../../theme';
+import { styled } from '@mui/material';
+import { FormControl, InputAdornment, OutlinedInput } from '../../base';
 
 export const CatalogSearchInput = styled(OutlinedInput)(({ style }) => ({
-  backgroundColor: WHITESMOKE,
   width: '100%',
   '@media (max-width: 590px)': {
     marginLeft: '0.25rem',
@@ -13,17 +11,17 @@ export const CatalogSearchInput = styled(OutlinedInput)(({ style }) => ({
   ...style
 }));
 
-export const InputAdornmentEnd = styled(InputAdornment)(() => ({
-  borderLeft: `1px solid ${CHINESE_SILVER}`,
+export const InputAdornmentEnd = styled(InputAdornment)(({ theme }) => ({
+  borderLeft: `1px solid ${theme.palette.border.normal}`,
   height: '30px',
   paddingLeft: '10px',
   '@media (max-width: 590px)': {
     paddingLeft: '0px'
   }
 }));
 
-export const CatalogSortBy = styled(FormControl)(() => ({
-  backgroundColor: CULTURED,
+export const CatalogSortBy = styled(FormControl)(({ theme }) => ({
+  backgroundColor: theme.palette.background.supplementary,
   borderRadius: '.25rem',
   minWidth: 'fit-content',
   '@media (max-width: 590px)': {