Merge pull request #771 from amitamrutiya/update-catalog-styling

update styling of search and filter for make consistent with the cloud
layer5io · Oct 25, 2024 · 18e0aea · 18e0aea
2 parents 98a5d96 + d32eaaf
commit 18e0aea
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx b/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx
@@ -100,7 +100,10 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
       </FiltersCardDiv>
       <FilterDrawerDiv>
         <FilterButton variant="contained" onClick={handleDrawerOpen}>
-          <FilterAltIcon height="20" width="20" fill={theme.palette.text.default} />
+          <FilterAltIcon
+            style={{ height: '28px', width: '28px' }}
+            fill={theme.palette.text.default}
+          />
           <FilterText>Filters</FilterText>
         </FilterButton>
 

diff --git a/src/custom/CatalogFilterSection/style.tsx b/src/custom/CatalogFilterSection/style.tsx
@@ -37,7 +37,7 @@ export const FilterButton = styled(Button)(({ theme }) => ({
   '&:hover': {
     backgroundColor: theme.palette.background.default
   },
-  height: '3.5rem',
+  height: '3.75rem',
   ['@media (max-width:450px)']: {
     minWidth: '0px'
   }

diff --git a/src/custom/StyledSearchBar/style.tsx b/src/custom/StyledSearchBar/style.tsx
@@ -8,7 +8,8 @@ export const StyledSearchInput = styled(OutlinedInput)(({ style, theme }) => ({
     paddingLeft: '0.25rem'
   },
   display: 'flex',
-  backgroundColor: theme.palette.background.surfaces,
+  backgroundColor:
+    theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.background.surfaces,
   ...style
 }));