fix: catalog dialogue font family issue

Signed-off-by: Amit Amrutiya <[email protected]>
layer5io · Oct 16, 2024 · 7a53c92 · 7a53c92
1 parent 76af5dc
commit 7a53c92
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 24 deletions.
diff --git a/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx b/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx
@@ -38,13 +38,15 @@ export interface CatalogFilterSidebarProps {
   setData: (callback: (prevFilters: FilterValues) => FilterValues) => void;
   lists: FilterList[];
   value?: FilterValues;
+  styleProps?: StyleProps;
 }
 
 export type FilterValues = Record<string, string | string[]>;
 
 export interface StyleProps {
   backgroundColor?: string;
   sectionTitleBackgroundColor?: string;
+  fontFamily?: string;
 }
 
 /**
@@ -57,7 +59,8 @@ export interface StyleProps {
 const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
   lists,
   setData,
-  value = {}
+  value = {},
+  styleProps
 }) => {
   const theme = useTheme(); // Get the current theme
   const [openDrawer, setOpenDrawer] = useState<boolean>(false);
@@ -70,23 +73,29 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
     setOpenDrawer(false);
   }, []);
 
-  const styleProps: StyleProps = {
+  const defaultStyleProps: StyleProps = {
     backgroundColor:
       theme.palette.mode === 'light'
         ? theme.palette.background.default
         : theme.palette.background.secondary,
     sectionTitleBackgroundColor:
-      theme.palette.mode === 'light' ? theme.palette.background.surfaces : darkTeal.main
+      theme.palette.mode === 'light' ? theme.palette.background.surfaces : darkTeal.main,
+    fontFamily: theme.typography.fontFamily
+  };
+
+  const appliedStyleProps = {
+    ...defaultStyleProps,
+    ...styleProps
   };
 
   return (
     <>
-      <FiltersCardDiv styleProps={styleProps}>
+      <FiltersCardDiv styleProps={appliedStyleProps}>
         <CatalogFilterSidebarState
           lists={lists}
           onApplyFilters={setData}
           value={value}
-          styleProps={styleProps}
+          styleProps={appliedStyleProps}
         />
       </FiltersCardDiv>
       <FilterDrawerDiv>
@@ -126,7 +135,7 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
                 lists={lists}
                 onApplyFilters={setData}
                 value={value}
-                styleProps={styleProps}
+                styleProps={appliedStyleProps}
               />
             </Box>
             <Box sx={{ backgroundColor: SLIGHT_BLUE, height: '5vh' }} />

diff --git a/src/custom/CatalogFilterSection/FilterSection.tsx b/src/custom/CatalogFilterSection/FilterSection.tsx
@@ -55,9 +55,11 @@ const FilterSection: React.FC<FilterSectionProps> = ({
     <>
       <FilterTitleButton
         onClick={() => onSectionToggle(filterKey)}
-        style={{ backgroundColor: styleProps.sectionTitleBackgroundColor }}
+        style={{
+          backgroundColor: styleProps.sectionTitleBackgroundColor
+        }}
       >
-        <Typography variant="h6" fontWeight="bold">
+        <Typography variant="h6" fontWeight="bold" fontFamily={styleProps.fontFamily}>
           {(sectionDisplayName || filterKey).toUpperCase()}
         </Typography>
         {openSections[filterKey] ? <ExpandLessIcon /> : <ExpandMoreIcon />}
@@ -105,7 +107,7 @@ const FilterSection: React.FC<FilterSectionProps> = ({
 
                 {option.Icon && <option.Icon width="20px" height="20px" />}
 
-                <Typography>{option.label}</Typography>
+                <Typography fontFamily={styleProps.fontFamily}>{option.label}</Typography>
               </Stack>
               <Stack direction="row" alignItems="center" gap="0.35rem">
                 {option.totalCount !== undefined && `(${option.totalCount || 0})`}

diff --git a/src/custom/CatalogFilterSection/style.tsx b/src/custom/CatalogFilterSection/style.tsx
@@ -15,7 +15,8 @@ export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ stylePr
   backgroundColor: styleProps.backgroundColor,
   ['@media (max-width:900px)']: {
     display: 'none'
-  }
+  },
+  fontFamily: styleProps.fontFamily
 }));
 
 export const FilterDrawerDiv = styled('div')(() => ({

diff --git a/src/custom/CustomCatalog/custom-card.tsx b/src/custom/CustomCatalog/custom-card.tsx
@@ -190,16 +190,7 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
             <>
               <ClassWrap catalogClassName={pattern?.catalog_data?.content_class ?? ''} />
               <DesignType>{patternType}</DesignType>
-
-              <DesignName
-                style={{
-                  color: '#000D12',
-                  margin: '3rem 0 1.59rem 0',
-                  textAlign: 'center'
-                }}
-              >
-                {pattern.name}
-              </DesignName>
+              <DesignName>{pattern.name}</DesignName>
             </>
           )}
           <DesignDetailsDiv>

diff --git a/src/custom/CustomCatalog/style.tsx b/src/custom/CustomCatalog/style.tsx
@@ -134,20 +134,23 @@ export const MetricsCount = styled('p')(({ theme }) => ({
   color: theme.palette.text.secondary,
   fontWeight: '600'
 }));
-export const DesignName = styled(Typography)(({ theme }) => ({
+export const DesignName = styled(Typography)(() => ({
   fontWeight: 'bold',
   textTransform: 'capitalize',
-  color: theme.palette.text.default,
+  color: '#000D12',
   fontSize: '1.125rem',
   marginTop: '2rem',
-  padding: '0rem 1rem', // "0rem 1.5rem"
+  padding: '0rem 1rem',
   position: 'relative',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
   textAlign: 'center',
-  width: '100%'
+  width: '100%',
+  margin: '3rem 0 1.59rem 0',
+  fontFamily: 'inherit'
 }));
+
 export const MetricsContainerFront = styled('div')<MetricsProps>(({ isDetailed }) => ({
   display: 'flex',
   justifyContent: 'space-around',