Skip to content

Commit ff936b4

Browse files
amitamrutiyaamitamrutiya
committed
feat: make sistent card dark mode compitable
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent 6710d9b commit ff936b4

4 files changed

Lines changed: 96 additions & 88 deletions

File tree

‎src/custom/CustomCatalog/CustomCard.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
2-
import { Avatar, styled } from '@mui/material';
2+
import { Avatar, styled, useTheme } from '@mui/material';
33
import React, { useEffect, useState } from 'react';
44
import { Grid } from '../../base';
55
import { CloneIcon, CommunityClassIcon, OfficialClassIcon, OpenIcon, ShareIcon } from '../../icons';
66
import VerificationClassIcon from '../../icons/ContentClassIcons/VerificationClassIcon';
77
import DeploymentsIcon from '../../icons/Deployments/DeploymentsIcon';
88
import { DownloadIcon } from '../../icons/Download';
9+
import { DARK_TEAL } from '../../theme';
10+
import { SNOW_WHITE } from '../../theme/colors/colors';
911
import { CustomTooltip } from '../CustomTooltip';
1012
import {
1113
CardBack,
@@ -123,6 +125,7 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
123125
width: cardWidth,
124126
...cardStyles
125127
};
128+
const theme = useTheme();
126129

127130
const technologies = pattern.catalog_data?.compatibility || []; // an array
128131
const techlimit = 5;
@@ -197,7 +200,8 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
197200
<DesignDetailsDiv>
198201
<div
199202
style={{
200-
background: 'rgba(231, 239, 243, 0.40)',
203+
background:
204+
theme.palette.mode === 'light' ? 'rgba(231, 239, 243, 0.4)' : 'transparent',
201205
display: 'flex',
202206
alignItems: 'center',
203207
justifyContent: 'center',
@@ -211,26 +215,22 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
211215
</DesignDetailsDiv>
212216
{isDetailed && (
213217
<MetricsContainerFront isDetailed={isDetailed}>
214-
<MetricsDiv>
215-
<DownloadIcon width={18} height={18} />
216-
<MetricsCount>{pattern.download_count}</MetricsCount>
217-
</MetricsDiv>
218-
<MetricsDiv>
219-
<CloneIcon width={18} height={18} fill={'#51636B'} />
220-
<MetricsCount>{pattern.clone_count}</MetricsCount>
221-
</MetricsDiv>
222-
<MetricsDiv>
223-
<OpenIcon width={18} height={18} fill={'#51636B'} />
224-
<MetricsCount>{pattern.view_count}</MetricsCount>
225-
</MetricsDiv>
226-
<MetricsDiv>
227-
<DeploymentsIcon width={18} height={18} />
228-
<MetricsCount>{pattern.deployment_count}</MetricsCount>
229-
</MetricsDiv>
230-
<MetricsDiv>
231-
<ShareIcon width={18} height={18} fill={'#51636B'} />
232-
<MetricsCount>{pattern.share_count}</MetricsCount>
233-
</MetricsDiv>
218+
{[
219+
{ Icon: DownloadIcon, count: pattern.download_count },
220+
{ Icon: CloneIcon, count: pattern.clone_count },
221+
{ Icon: OpenIcon, count: pattern.view_count },
222+
{ Icon: DeploymentsIcon, count: pattern.deployment_count },
223+
{ Icon: ShareIcon, count: pattern.share_count }
224+
].map(({ Icon, count }, index) => (
225+
<MetricsDiv key={index}>
226+
<Icon
227+
width={18}
228+
height={18}
229+
fill={theme.palette.mode === 'light' ? DARK_TEAL : SNOW_WHITE}
230+
/>
231+
<MetricsCount>{count}</MetricsCount>
232+
</MetricsDiv>
233+
))}
234234
</MetricsContainerFront>
235235
)}
236236
</CardFront>

‎src/custom/CustomCatalog/EmptyStateCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ const EmptyStateCard: FC = () => {
77
const theme = useTheme();
88
return (
99
<CatalogEmptyStateDiv>
10-
<EmptyStyleIcon fill={theme.palette.secondary.contrastText} width="100px" height="100px" />
11-
<h3 style={{ color: theme.palette.secondary.contrastText }}>No match found</h3>
10+
<EmptyStyleIcon fill={theme.palette.text.default} width="100px" height="100px" />
11+
<h3 style={{ color: theme.palette.text.default }}>No match found</h3>
1212
</CatalogEmptyStateDiv>
1313
);
1414
};

‎src/custom/CustomCatalog/style.tsx‎

Lines changed: 64 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { styled, Typography } from '@mui/material';
2+
import { accentGrey, DARK_PRIMARY_COLOR, GRAY97, slateGray, WHITESMOKE } from '../../theme';
3+
import { charcoal, DARK_TEAL, SNOW_WHITE } from '../../theme/colors/colors';
24

35
type DesignCardProps = {
46
outerStyles: React.CSSProperties;
@@ -45,12 +47,13 @@ export const NoTechnologyText = styled('div')(() => ({
4547
}));
4648

4749
export const StyledInnerClassWrapper = styled('div')<StyledInnerClassWrapperProps>(({
48-
catalogClassName
50+
catalogClassName,
51+
theme
4952
}) => {
5053
const mapToColor: Record<string, string> = {
51-
community: 'rgba(122,132,142,.8)',
52-
official: '#EBC017',
53-
verified: '#00B39F'
54+
community: slateGray.main,
55+
official: theme.palette.background.cta?.default || '#EBC017',
56+
verified: theme.palette.background.brand?.default || '#00B39F'
5457
};
5558
return {
5659
font: 'bold 10px sans-serif',
@@ -67,7 +70,7 @@ export const StyledInnerClassWrapper = styled('div')<StyledInnerClassWrapperProp
6770
justifyContent: 'center',
6871
alignItems: 'center',
6972
backgroundColor: mapToColor[catalogClassName],
70-
color: '#fff'
73+
color: catalogClassName === 'official' ? theme.palette.common.black : theme.palette.common.white
7174
};
7275
});
7376

@@ -122,7 +125,7 @@ export const DesignType = styled('span')(({ theme }) => ({
122125
fontSize: '0.875rem',
123126
textTransform: 'capitalize',
124127
background: theme.palette.background.brand?.default,
125-
color: theme.palette.text.inverse,
128+
color: theme.palette.background.constant?.white,
126129
borderRadius: '0 1rem 0 2rem'
127130
}));
128131
export const MetricsCount = styled('p')(({ theme }) => ({
@@ -131,13 +134,13 @@ export const MetricsCount = styled('p')(({ theme }) => ({
131134
margin: '0rem',
132135
lineHeight: '1.5',
133136
textAlign: 'center',
134-
color: theme.palette.text.secondary,
137+
color: theme.palette.mode === 'light' ? DARK_TEAL : SNOW_WHITE,
135138
fontWeight: '600'
136139
}));
137-
export const DesignName = styled(Typography)(() => ({
140+
export const DesignName = styled(Typography)(({ theme }) => ({
138141
fontWeight: 'bold',
139142
textTransform: 'capitalize',
140-
color: '#000D12',
143+
color: theme.palette.text.default,
141144
fontSize: '1.125rem',
142145
marginTop: '2rem',
143146
padding: '0rem 1rem',
@@ -151,15 +154,13 @@ export const DesignName = styled(Typography)(() => ({
151154
fontFamily: 'inherit'
152155
}));
153156

154-
export const MetricsContainerFront = styled('div')<MetricsProps>(({ isDetailed }) => ({
157+
export const MetricsContainerFront = styled('div')<MetricsProps>(({ isDetailed, theme }) => ({
155158
display: 'flex',
156159
justifyContent: 'space-around',
157-
// borderTop: "0.851px solid #C9DBE3",
158160
fontSize: '0.2rem',
159-
color: 'rgba(26, 26, 26, .8)',
160-
// margin: "-0.8rem 0.7rem 0",
161+
color: theme.palette.mode === 'light' ? 'rgba(26, 26, 26, .8)' : theme.palette.text.default,
161162
padding: '0.9rem 0.1rem',
162-
background: '#E7EFF3',
163+
background: theme.palette.mode === 'light' ? '#E7EFF3' : DARK_TEAL,
163164
...(isDetailed && {
164165
position: 'absolute',
165166
bottom: '0px'
@@ -194,7 +195,7 @@ export const DesignDetailsDiv = styled('div')(() => ({
194195
}));
195196

196197
export const ImageWrapper = styled('div')(({ theme }) => ({
197-
background: theme.palette.mode === 'light' ? 'rgba(231, 239, 243, 0.40)' : '#212121',
198+
background: theme.palette.background.surfaces,
198199
display: 'flex',
199200
alignItems: 'center',
200201
justifyContent: 'center',
@@ -347,22 +348,34 @@ export const CardBack = styled('div')<CatalogProps>(({ isCatalog }) => ({
347348
})
348349
}));
349350

350-
export const CardFront = styled('div')<DesignCardDivProps>(({ shouldFlip, isDetailed, theme }) => ({
351-
...(shouldFlip && {
352-
position: 'absolute',
353-
boxShadow: `2px 2px 3px 0px ${theme.palette.background.brand?.default}`,
354-
background: `linear-gradient(to left bottom, #EBEFF1, #f4f5f7, #f7f7f9, white, white, white, white, white, white, #f7f7f9, #f4f5f7, #EBEFF1);`
355-
}),
356-
...(isDetailed && {
357-
boxShadow: `2px 2px 3px 0px ${theme.palette.background.brand?.default}`,
358-
background: `linear-gradient(to left bottom, #EBEFF1, #f4f5f7, #f7f7f9, white, white, white, white, white, white, #f7f7f9, #f4f5f7, #EBEFF1);`
359-
}),
360-
width: '100%',
361-
height: '100%',
362-
WebkitBackfaceVisibility: 'hidden',
363-
borderRadius: '0.9375rem',
364-
backfaceVisibility: 'hidden'
365-
}));
351+
const getBackground = (isLightMode: boolean) => {
352+
const lightGradient = `linear-gradient(to left bottom, ${WHITESMOKE}, ${GRAY97},white, white, white, white, white, white, white,white, $, ${WHITESMOKE}, ${GRAY97})`;
353+
const darkGradient = `linear-gradient(to right top, ${DARK_PRIMARY_COLOR}, ${accentGrey[30]}, ${accentGrey[20]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${charcoal[20]}, ${charcoal[10]}, black)`;
354+
355+
return isLightMode ? lightGradient : darkGradient;
356+
};
357+
export const CardFront = styled('div')<DesignCardDivProps>(({ shouldFlip, isDetailed, theme }) => {
358+
const isLightMode = theme.palette.mode === 'light';
359+
const background = getBackground(isLightMode);
360+
const boxShadow = `2px 2px 3px 0px ${theme.palette.background.brand?.default}`;
361+
362+
return {
363+
...(shouldFlip && {
364+
position: 'absolute',
365+
boxShadow,
366+
background
367+
}),
368+
...(isDetailed && {
369+
boxShadow,
370+
background
371+
}),
372+
width: '100%',
373+
height: '100%',
374+
WebkitBackfaceVisibility: 'hidden',
375+
borderRadius: '0.9375rem',
376+
backfaceVisibility: 'hidden'
377+
};
378+
});
366379

367380
export const DateText = styled('div')(() => ({
368381
fontSize: '0.875rem',
@@ -399,29 +412,24 @@ export const DesignAuthorName = styled('div')(() => ({
399412
}
400413
}));
401414

402-
export const CatalogEmptyStateDiv = styled('div')(({ theme }) => ({
403-
backgroundColor: theme.palette.common.white,
404-
textAlign: 'center',
405-
borderRadius: '1rem',
406-
width: '15rem',
407-
height: '18rem',
408-
display: 'flex',
409-
flexDirection: 'column',
410-
justifyContent: 'center',
411-
alignItems: 'center',
412-
[theme.breakpoints.down('lg')]: {
413-
height: '18.75rem'
414-
}
415-
}));
415+
export const CatalogEmptyStateDiv = styled('div')(({ theme }) => {
416+
const isLightMode = theme.palette.mode === 'light';
417+
const background = getBackground(isLightMode);
418+
const boxShadow = `2px 2px 3px 0px ${theme.palette.background.brand?.default}`;
416419

417-
export const EmptyStateDiv = styled('div')(({ theme }) => ({
418-
backgroundColor: theme.palette.common.white,
419-
textAlign: 'center',
420-
borderRadius: '1rem',
421-
width: '100%',
422-
padding: '1.5rem',
423-
display: 'flex',
424-
flexDirection: 'column',
425-
justifyContent: 'center',
426-
alignItems: 'center'
427-
}));
420+
return {
421+
background: background,
422+
boxShadow: boxShadow,
423+
textAlign: 'center',
424+
borderRadius: '1rem',
425+
width: '15rem',
426+
height: '18rem',
427+
display: 'flex',
428+
flexDirection: 'column',
429+
justifyContent: 'center',
430+
alignItems: 'center',
431+
[theme.breakpoints.down('lg')]: {
432+
height: '18.75rem'
433+
}
434+
};
435+
});

‎src/icons/ContentClassIcons/CommunityClassIcon.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { CustomIconProps } from '../types';
33
export const CommunityClassIcon: FC<CustomIconProps> = ({
44
width = '16',
55
height = '13',
6-
secondaryFill = '#293B43',
7-
primaryFill = '#647176',
6+
fill = '#293B43',
7+
secondaryFill = '#647176',
88
style = {}
99
}) => (
1010
<svg
@@ -16,27 +16,27 @@ export const CommunityClassIcon: FC<CustomIconProps> = ({
1616
>
1717
<path
1818
d="M12.2766 4.69141C11.656 4.69141 11.0624 4.85321 10.5497 5.12287C10.5446 5.20494 10.5356 5.28627 10.5228 5.36662C10.387 6.2221 10.594 7.73615 11.1773 8.37646C11.4175 8.64006 11.6242 8.93297 11.7909 9.24871H15.7032C15.8651 9.24871 16 9.11388 16 8.95208V8.38579C16 6.36332 14.3271 4.69141 12.2766 4.69141Z"
19-
fill={secondaryFill}
19+
fill={fill}
2020
/>
2121
<path
2222
d="M3.72344 4.69141C1.67285 4.69141 0 6.36331 0 8.41275V8.97905C0 9.14084 0.134907 9.27568 0.296796 9.27568H4.23609C4.40826 8.94965 4.62303 8.64795 4.87325 8.37773C5.45802 7.74624 5.64335 6.28753 5.48869 5.44087C5.46973 5.33709 5.45681 5.23097 5.45025 5.12287C4.91062 4.85321 4.34401 4.69141 3.72344 4.69141Z"
23-
fill={secondaryFill}
23+
fill={fill}
2424
/>
2525
<path
2626
d="M7.98491 2.99219C6.87867 2.99219 5.98828 3.88207 5.98828 4.98769C5.98828 6.09331 6.87867 6.9832 7.98491 6.9832C9.09115 6.9832 9.98154 6.09331 9.98154 4.98769C9.98154 3.88207 9.09115 2.99219 7.98491 2.99219Z"
27-
fill={primaryFill}
27+
fill={secondaryFill}
2828
/>
2929
<path
3030
d="M7.98516 7.54688C5.93457 7.54688 4.26172 9.21878 4.26172 11.2682V11.8345C4.26172 11.9963 4.39663 12.1311 4.55851 12.1311H11.4118C11.5737 12.1311 11.7086 11.9963 11.7086 11.8345V11.2682C11.7086 9.19182 10.0357 7.54688 7.98516 7.54688Z"
31-
fill={primaryFill}
31+
fill={secondaryFill}
3232
/>
3333
<path
3434
d="M12.2779 0.132812C11.1716 0.132812 10.2812 1.0227 10.2812 2.12832C10.2812 3.23393 11.1716 4.12382 12.2779 4.12382C13.3841 4.12382 14.2745 3.23393 14.2745 2.12832C14.2745 1.0227 13.3841 0.132812 12.2779 0.132812Z"
35-
fill={secondaryFill}
35+
fill={fill}
3636
/>
3737
<path
3838
d="M3.72319 0.132812C2.61695 0.132812 1.72656 1.0227 1.72656 2.12832C1.72656 3.23393 2.61695 4.12382 3.72319 4.12382C4.82943 4.12382 5.71982 3.23393 5.71982 2.12832C5.71982 1.0227 4.80245 0.132812 3.72319 0.132812Z"
39-
fill={secondaryFill}
39+
fill={fill}
4040
/>
4141
</svg>
4242
);

0 commit comments

Comments
 (0)