Skip to content

Commit 1920b06

Browse files
amitamrutiyaamitamrutiya
committed
chore: update filter theme in mobile devices
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent 6e26e94 commit 1920b06

3 files changed

Lines changed: 53 additions & 54 deletions

File tree

‎src/custom/CatalogCard/CatalogCard.tsx‎

Lines changed: 41 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ type CatalogCardProps = {
3333
// eslint-disable-next-line @typescript-eslint/no-explicit-any
3434
pattern: any;
3535
patternType: string;
36-
cardLink: string;
3736
cardHeight: string;
3837
cardWidth: string;
3938
cardStyles: React.CSSProperties;
@@ -64,7 +63,6 @@ const CatalogCard: React.FC<CatalogCardProps> = ({
6463
cardHeight,
6564
cardWidth,
6665
cardStyles,
67-
cardLink,
6866
onCardClick
6967
}) => {
7068
const outerStyles = {
@@ -73,49 +71,47 @@ const CatalogCard: React.FC<CatalogCardProps> = ({
7371
...cardStyles
7472
};
7573
return (
76-
<DesignCardUrl href={cardLink} onClick={onCardClick} target="_blank" rel="noreferrer">
77-
<DesignCard outerStyles={outerStyles}>
78-
<DesignInnerCard className="innerCard">
79-
<ClassWrap catalogClassName={pattern?.catalog_data?.content_class} />
80-
<DesignType>{patternType}</DesignType>
81-
<DesignDetailsDiv>
82-
<DesignName
83-
style={{
84-
margin: '3rem 0 1.59rem 0',
85-
textAlign: 'center'
86-
}}
87-
>
88-
{pattern.name}
89-
</DesignName>
90-
<ImageWrapper>
91-
<DesignIcon height={'118'} width={'120'} />
92-
</ImageWrapper>
93-
</DesignDetailsDiv>
94-
<MetricsContainerFront>
95-
<MetricsDiv>
96-
<DownloadIcon width={18} height={18} />
97-
<MetricsCount>{pattern.download_count}</MetricsCount>
98-
</MetricsDiv>
99-
<MetricsDiv>
100-
<CloneIcon width={18} height={18} fill={'#51636B'} />
101-
<MetricsCount>{pattern.clone_count}</MetricsCount>
102-
</MetricsDiv>
103-
<MetricsDiv>
104-
<OpenIcon width={18} height={18} fill={'#51636B'} />
105-
<MetricsCount>{pattern.view_count}</MetricsCount>
106-
</MetricsDiv>
107-
<MetricsDiv>
108-
<DeploymentsIcon width={18} height={18} />
109-
<MetricsCount>{pattern.deployment_count}</MetricsCount>
110-
</MetricsDiv>
111-
<MetricsDiv>
112-
<ShareIcon width={18} height={18} fill={'#51636B'} />
113-
<MetricsCount>{pattern.share_count}</MetricsCount>
114-
</MetricsDiv>
115-
</MetricsContainerFront>
116-
</DesignInnerCard>
117-
</DesignCard>
118-
</DesignCardUrl>
74+
<DesignCard outerStyles={outerStyles} onClick={onCardClick}>
75+
<DesignInnerCard className="innerCard">
76+
<ClassWrap catalogClassName={pattern?.catalog_data?.content_class} />
77+
<DesignType>{patternType}</DesignType>
78+
<DesignDetailsDiv>
79+
<DesignName
80+
style={{
81+
margin: '3rem 0 1.59rem 0',
82+
textAlign: 'center'
83+
}}
84+
>
85+
{pattern.name}
86+
</DesignName>
87+
<ImageWrapper>
88+
<DesignIcon height={'118'} width={'120'} />
89+
</ImageWrapper>
90+
</DesignDetailsDiv>
91+
<MetricsContainerFront>
92+
<MetricsDiv>
93+
<DownloadIcon width={18} height={18} />
94+
<MetricsCount>{pattern.download_count}</MetricsCount>
95+
</MetricsDiv>
96+
<MetricsDiv>
97+
<CloneIcon width={18} height={18} fill={'#51636B'} />
98+
<MetricsCount>{pattern.clone_count}</MetricsCount>
99+
</MetricsDiv>
100+
<MetricsDiv>
101+
<OpenIcon width={18} height={18} fill={'#51636B'} />
102+
<MetricsCount>{pattern.view_count}</MetricsCount>
103+
</MetricsDiv>
104+
<MetricsDiv>
105+
<DeploymentsIcon width={18} height={18} />
106+
<MetricsCount>{pattern.deployment_count}</MetricsCount>
107+
</MetricsDiv>
108+
<MetricsDiv>
109+
<ShareIcon width={18} height={18} fill={'#51636B'} />
110+
<MetricsCount>{pattern.share_count}</MetricsCount>
111+
</MetricsDiv>
112+
</MetricsContainerFront>
113+
</DesignInnerCard>
114+
</DesignCard>
119115
);
120116
};
121117

‎src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useCallback, useState } from 'react';
44
import { Box, Drawer, Typography } from '../../base';
55
import { CloseIcon } from '../../icons';
66
import { darkTeal } from '../../theme';
7+
import { SLIGHT_BLUE } from '../../theme/colors/colors';
78
import { CloseBtn } from '../Modal';
89
import CatalogFilterSidebarState from './CatalogFilterSidebarState';
910
import {
@@ -103,7 +104,11 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
103104
>
104105
<Box sx={{ overflowY: 'hidden', height: '90vh' }}>
105106
<FiltersDrawerHeader>
106-
<Typography variant="h6" sx={{ color: theme.palette.text.default }} component="div">
107+
<Typography
108+
variant="h6"
109+
sx={{ color: theme.palette.text.constant?.white }}
110+
component="div"
111+
>
107112
Filters
108113
</Typography>
109114
<CloseBtn onClick={handleDrawerClose}>
@@ -114,7 +119,7 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
114119
style={{
115120
height: '75vh',
116121
overflowY: 'auto',
117-
background: theme.palette.background.default
122+
background: theme.palette.background.surfaces
118123
}}
119124
>
120125
<CatalogFilterSidebarState
@@ -124,8 +129,7 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
124129
styleProps={styleProps}
125130
/>
126131
</Box>
127-
<Box sx={{ backgroundColor: theme.palette.border.strong, height: '5vh' }} />
128-
{/* Use theme-aware color */}
132+
<Box sx={{ backgroundColor: SLIGHT_BLUE, height: '5vh' }} />
129133
</Box>
130134
</Drawer>
131135
</FilterDrawerDiv>

‎src/custom/CatalogFilterSection/style.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { styled } from '@mui/material/styles';
22
import { Box, Button, ListItemButton } from '../../base';
3+
import { SLIGHT_BLUE } from '../../theme/colors/colors';
34
import { StyleProps } from './CatalogFilterSidebar';
45

56
export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ styleProps }) => ({
@@ -41,15 +42,13 @@ export const FilterButton = styled(Button)(({ theme }) => ({
4142
}
4243
}));
4344

44-
export const FiltersDrawerHeader = styled(Box)(({ theme }) => ({
45+
export const FiltersDrawerHeader = styled(Box)(() => ({
4546
display: 'flex',
4647
justifyContent: 'space-between',
4748
alignItems: 'center',
4849
padding: '0.5rem 1rem',
49-
backgroundColor: theme.palette.border.strong,
50-
height: '10vh',
51-
boxShadow: '0px 4px 4px rgba(0, 179, 159, 0.4)',
52-
marginBottom: '0.625rem'
50+
backgroundColor: SLIGHT_BLUE,
51+
height: '10vh'
5352
}));
5453

5554
export const CheckBoxButton = styled(ListItemButton)(({ theme }) => ({

0 commit comments

Comments
 (0)