Merge pull request #1039 from vr-varad/fix/mobile_filter_title_bar_fix

Fix: Meshery-Cloud Filter Drawer Title

Author: amitamrutiya

src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx

@@ -4,7 +4,7 @@ import { useCallback, useState } from 'react';
 import { Box, Drawer, Typography } from '../../base';
 import { CloseIcon } from '../../icons';
 import { darkTeal } from '../../theme';
-import { SLIGHT_BLUE } from '../../theme/colors/colors';
+import { darkModalGradient, lightModalGradient } from '../../theme/colors/colors';
 import { CloseBtn } from '../Modal';
 import CatalogFilterSidebarState from './CatalogFilterSidebarState';
 import {
@@ -152,7 +152,15 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
                 styleProps={appliedStyleProps}
               />
             </Box>
-            <Box sx={{ backgroundColor: SLIGHT_BLUE, height: '5vh' }} />
+            <Box
+              sx={{
+                background:
+                  theme.palette.mode === 'light'
+                    ? lightModalGradient.fotter
+                    : darkModalGradient.fotter,
+                height: '5vh'
+              }}
+            />
           </Box>
         </Drawer>
       </FilterDrawerDiv>

src/custom/CatalogFilterSection/FilterSection.tsx

@@ -62,7 +62,13 @@ const FilterSection: React.FC<FilterSectionProps> = ({
           backgroundColor: styleProps.sectionTitleBackgroundColor
         }}
       >
-        <Typography variant="h6" fontWeight="bold" fontFamily={styleProps.fontFamily}>
+        <Typography
+          sx={{
+            fontSize: '1rem'
+          }}
+          fontWeight="bold"
+          fontFamily={styleProps.fontFamily}
+        >
           {(sectionDisplayName || filterKey).toUpperCase()}
         </Typography>
         {openSections[filterKey] ? <ExpandLessIcon /> : <ExpandMoreIcon />}

src/custom/CatalogFilterSection/style.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material/styles';
 import { Box, Button, ListItemButton } from '../../base';
-import { SLIGHT_BLUE } from '../../theme/colors/colors';
+import { darkModalGradient, lightModalGradient } from '../../theme/colors/colors';
 import { StyleProps } from './CatalogFilterSidebar';
 
 export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ styleProps }) => ({
@@ -46,12 +46,12 @@ export const FilterButton = styled(Button)(({ theme }) => ({
   }
 }));
 
-export const FiltersDrawerHeader = styled(Box)(() => ({
+export const FiltersDrawerHeader = styled(Box)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   padding: '0.5rem 1rem',
-  backgroundColor: SLIGHT_BLUE,
+  background: theme.palette.mode === 'light' ? lightModalGradient.header : darkModalGradient.header,
   height: '10vh'
 }));