Enhancement on new created sistent component

src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx

@@ -3,6 +3,7 @@ import { useTheme } from '@mui/material/styles';
 import { useCallback, useState } from 'react';
 import { Box, Drawer, Typography } from '../../base';
 import { CloseIcon } from '../../icons';
+import { darkTeal } from '../../theme';
 import { CloseBtn } from '../Modal';
 import CatalogFilterSidebarState from './CatalogFilterSidebarState';
 import {
@@ -69,8 +70,12 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
   }, []);
 
   const styleProps: StyleProps = {
-    backgroundColor: theme.palette.background.default,
-    sectionTitleBackgroundColor: theme.palette.background.surfaces
+    backgroundColor:
+      theme.palette.mode === 'light'
+        ? theme.palette.background.default
+        : theme.palette.background.secondary,
+    sectionTitleBackgroundColor:
+      theme.palette.mode === 'light' ? theme.palette.background.surfaces : darkTeal.main
   };
 
   return (
@@ -89,7 +94,13 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
           <FilterText>Filters</FilterText>
         </FilterButton>
 
-        <Drawer anchor="bottom" open={openDrawer} variant="temporary" onClose={handleDrawerClose}>
+        <Drawer
+          anchor="bottom"
+          open={openDrawer}
+          variant="temporary"
+          onClose={handleDrawerClose}
+          style={{ zIndex: '1399' }}
+        >
           <Box sx={{ overflowY: 'hidden', height: '90vh' }}>
             <FiltersDrawerHeader>
               <Typography variant="h6" sx={{ color: theme.palette.text.default }} component="div">

src/custom/CatalogFilterSection/FilterSection.tsx

@@ -1,20 +1,11 @@
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useCallback, useState } from 'react';
-import {
-  Box,
-  Checkbox,
-  Collapse,
-  InputAdornment,
-  List,
-  OutlinedInput,
-  Stack,
-  Typography
-} from '../../base';
-import { SearchIcon } from '../../icons';
+import { Box, Checkbox, Collapse, List, Stack, Typography } from '../../base';
 import { InfoTooltip } from '../CustomTooltip';
+import { StyledSearchBar } from '../StyledSearchBar';
 import { FilterOption, FilterValues, StyleProps } from './CatalogFilterSidebar';
-import { FilterTitleButton, InputAdornmentEnd } from './style';
+import { EndAdornmentText, FilterTitleButton } from './style';
 
 interface FilterSectionProps {
   filterKey: string;
@@ -81,22 +72,13 @@ const FilterSection: React.FC<FilterSectionProps> = ({
           }}
         >
           {showSearch && (
-            <Box px={'0.5rem'}>
-              <OutlinedInput
-                type="search"
-                fullWidth
-                placeholder="Search "
+            <Box px={'0.5rem'} mb={'0.5rem'}>
+              <StyledSearchBar
                 value={searchQuery}
                 onChange={handleTextFieldChange}
-                startAdornment={
-                  <InputAdornment position="start">
-                    <SearchIcon />
-                  </InputAdornment>
-                }
+                placeholder="Search"
                 endAdornment={
-                  <InputAdornmentEnd position="end">
-                    Total: {searchedOptions.length}
-                  </InputAdornmentEnd>
+                  <EndAdornmentText> Total : {searchedOptions.length ?? 0}</EndAdornmentText>
                 }
               />
             </Box>

src/custom/CatalogFilterSection/style.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles';
-import { Box, Button, InputAdornment, ListItemButton } from '../../base';
+import { Box, Button, ListItemButton } from '../../base';
 import { StyleProps } from './CatalogFilterSidebar';
 
 export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ styleProps }) => ({
@@ -66,13 +66,8 @@ export const FilterTitleButton = styled(ListItemButton)(({ theme }) => ({
   justifyContent: 'space-between'
 }));
 
-export const InputAdornmentEnd = styled(InputAdornment)(({ theme }) => ({
-  borderLeft: `1px solid ${theme.palette.text.disabled}`,
-  height: '30px',
-  paddingLeft: '10px',
-  '@media (max-width: 590px)': {
-    paddingLeft: '0px'
-  }
+export const EndAdornmentText = styled('p')(({ theme }) => ({
+  color: theme.palette.text.tertiary
 }));
 
 export const FilterText = styled('span')(() => ({