Skip to content

Commit 26cfafb

Browse files
dottharundottharun
committed
fix(ui): update new CatalogIcon from Brand
- revert previous color changes Signed-off-by: Tharun T <[email protected]>
1 parent d31376a commit 26cfafb

File tree

2 files changed

+33
-29
lines changed

2 files changed

+33
-29
lines changed

‎src/icons/CatalogIcon/CatalogIcon.tsx

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,63 @@
11
import { FC } from 'react';
22
import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
3-
import { CARIBBEAN_GREEN, CHARCOAL, KEPPEL, LIGHT_GRAY, useTheme } from '../../theme';
3+
import { CARIBBEAN_GREEN, DARK_SLATE_GRAY, KEPPEL, WHITE, useTheme } from '../../theme';
44
import { IconProps } from '../types';
55

66
type CatalogIconProps = {
77
primaryFill?: string;
88
secondaryFill?: string;
9+
tertiaryFill?: string;
910
} & IconProps;
1011

1112
export const CatalogIcon: FC<CatalogIconProps> = ({
1213
width = DEFAULT_WIDTH,
1314
height = DEFAULT_HEIGHT,
1415
primaryFill,
1516
secondaryFill,
17+
tertiaryFill = WHITE,
1618
style = {},
1719
...props
1820
}) => {
1921
const theme = useTheme();
22+
const themeMode = theme?.palette?.mode ?? 'light';
2023

21-
const themePrimaryFill = primaryFill ?? (theme.palette.mode === 'dark' ? LIGHT_GRAY : KEPPEL);
22-
const themeSecondaryFill =
23-
secondaryFill ?? (theme.palette.mode === 'dark' ? CARIBBEAN_GREEN : CHARCOAL);
24+
const themePrimaryFill = primaryFill ?? (themeMode === 'dark' ? KEPPEL : DARK_SLATE_GRAY);
25+
const themeSecondaryFill = secondaryFill ?? (themeMode === 'dark' ? CARIBBEAN_GREEN : KEPPEL);
2426

2527
return (
2628
<svg
2729
width={width}
2830
height={height}
2931
xmlns="http://www.w3.org/2000/svg"
30-
viewBox="0 0 18 16"
32+
viewBox="0 0 64 64"
3133
style={style}
3234
{...props}
3335
>
34-
<g clipPath="url(#clip0_12369_35348)">
35-
<path
36-
d="M9.00867 16C6.48449 16 3.96031 16 1.43613 16C0.76592 16 0.261084 15.6472 0.0695947 15.0474C0.0260744 14.8975 -3.77779e-05 14.7299 -3.77779e-05 14.5711C-3.77779e-05 12.0309 -0.00874184 9.48181 -3.77779e-05 6.94157C-3.77779e-05 6.72988 0.0347785 6.51819 0.0957069 6.31533C0.731103 4.33958 1.3665 2.37266 2.0019 0.405733C2.12375 0.0352812 2.17598 0 2.56766 0C6.81524 0 11.0628 0 15.3191 0C15.7021 0 15.7543 0.0352812 15.8675 0.388093C16.468 2.18743 17.0599 3.99559 17.6605 5.79493C17.7127 5.95369 17.7998 6.10364 17.852 6.2624C17.9129 6.47409 18 6.68578 18 6.89746C18.0087 9.47299 18.0087 12.0573 18 14.6329C18 15.3914 17.3907 15.9912 16.6247 15.9912C14.0831 16 11.5503 16 9.00867 16ZM11.5851 5.50386C13.3433 5.50386 15.0928 5.50386 16.8597 5.50386C16.8423 5.42448 16.8336 5.38038 16.8162 5.32745C16.3201 3.828 15.8239 2.33738 15.3365 0.837927C15.2843 0.670342 15.1798 0.652701 15.0406 0.652701C10.9758 0.652701 6.90228 0.652701 2.83749 0.652701C2.6634 0.652701 2.58507 0.714443 2.53284 0.882029C2.06282 2.36384 1.5841 3.84564 1.10538 5.31863C1.08797 5.38037 1.07056 5.44212 1.05315 5.51268C2.85489 5.51268 4.63923 5.51268 6.41486 5.51268C6.5019 6.19184 6.69339 6.36825 7.3636 6.36825C8.46031 6.36825 9.55702 6.36825 10.645 6.36825C11.2978 6.37707 11.5154 6.19184 11.5851 5.50386ZM6.53671 11.1665C6.59764 10.946 6.65857 10.7431 6.71079 10.5402C6.81524 10.1345 6.61505 9.75524 6.24948 9.64939C5.8665 9.54355 5.50963 9.74642 5.38778 10.1522C5.23981 10.6461 5.09184 11.1488 4.95257 11.6516C4.81331 12.1544 5.12665 12.5689 5.64019 12.5689C7.95547 12.5689 10.2621 12.5689 12.5773 12.5689C13.0299 12.5689 13.3694 12.1632 13.2475 11.7222C13.0822 11.1488 12.8907 10.5932 12.6905 10.0287C12.586 9.7376 12.3162 9.60529 12.0116 9.62293C11.733 9.64057 11.4806 9.8258 11.4197 10.0992C11.3849 10.2668 11.411 10.4432 11.4371 10.6196C11.4719 10.8049 11.5415 10.9724 11.6112 11.1665C9.89648 11.1665 8.234 11.1665 6.53671 11.1665Z"
37-
fill={themePrimaryFill}
38-
/>
39-
<path
40-
d="M8.93926 4.13678C11.0108 4.13678 13.0911 4.13678 15.1627 4.13678C15.2584 4.13678 15.389 4.13678 15.4499 4.1897C15.5282 4.26909 15.6066 4.41021 15.5979 4.51605C15.5892 4.69246 15.4499 4.78066 15.2845 4.78066C14.9451 4.78948 14.6056 4.78066 14.2661 4.78066C10.419 4.78066 6.58046 4.78066 2.73327 4.78066C2.68975 4.78066 2.64623 4.78066 2.60271 4.78066C2.3677 4.77184 2.21973 4.64836 2.21973 4.44549C2.21973 4.25144 2.3677 4.11914 2.61141 4.11914C3.6559 4.11914 4.70038 4.11914 5.74487 4.11914C6.80677 4.13678 7.86866 4.13678 8.93926 4.13678Z"
41-
fill={themeSecondaryFill}
42-
/>
43-
<path
44-
d="M8.91315 2.76074C10.8455 2.76074 12.7865 2.76074 14.7188 2.76074C14.8058 2.76074 14.8928 2.76074 14.9799 2.76956C15.154 2.79602 15.2584 2.89305 15.2671 3.07827C15.2758 3.2635 15.1714 3.37816 14.9886 3.42226C14.919 3.4399 14.8406 3.43108 14.771 3.43108C10.8455 3.43108 6.92863 3.43108 3.0031 3.43108C2.91606 3.43108 2.8029 3.4399 2.75068 3.3958C2.66364 3.3076 2.55919 3.16648 2.56789 3.06945C2.5766 2.96361 2.71586 2.86659 2.82031 2.7872C2.87253 2.75192 2.97698 2.76956 3.05532 2.76956C5.01373 2.76074 6.96344 2.76074 8.91315 2.76074Z"
45-
fill={themeSecondaryFill}
46-
/>
47-
<path
48-
d="M8.91261 2.04611C7.11957 2.04611 5.33524 2.04611 3.5422 2.04611C3.48127 2.04611 3.41164 2.05493 3.35071 2.03729C3.17663 2.00201 3.06348 1.88735 3.06348 1.70212C3.06348 1.5169 3.17663 1.41105 3.35941 1.37577C3.41164 1.36695 3.47257 1.36695 3.5335 1.36695C7.11957 1.36695 10.7056 1.36695 14.2917 1.36695C14.3526 1.36695 14.4049 1.35813 14.4658 1.37577C14.6399 1.41105 14.753 1.5169 14.7617 1.70212C14.7704 1.86089 14.6312 2.01965 14.4484 2.04611C14.3875 2.05493 14.3352 2.04611 14.2743 2.04611C12.4987 2.04611 10.7056 2.04611 8.91261 2.04611Z"
49-
fill={themeSecondaryFill}
50-
/>
51-
</g>
52-
<defs>
53-
<clipPath id="clip0_12369_35348">
54-
<rect width="18" height="16" fill="white" />
55-
</clipPath>
56-
</defs>
36+
<path
37+
d="m32.03,60H5.1c-2.38,0-4.18-1.23-4.86-3.33-.15-.52-.25-1.11-.25-1.67C0,46.11-.04,37.19,0,28.3c0-.74.12-1.48.34-2.19,2.26-6.92,4.52-13.8,6.78-20.68.43-1.3.62-1.42,2.01-1.42h45.34c1.36,0,1.55.12,1.95,1.36,2.14,6.3,4.24,12.63,6.38,18.92.19.56.5,1.08.68,1.64.22.74.53,1.48.53,2.22.03,9.01.03,18.06,0,27.07,0,2.66-2.17,4.75-4.89,4.75-9.04.03-18.04.03-27.08.03Zm9.16-36.74h18.75c-.06-.28-.09-.43-.15-.62-1.76-5.25-3.53-10.47-5.26-15.71-.19-.59-.56-.65-1.05-.65H10.08c-.62,0-.9.22-1.08.8-1.67,5.19-3.37,10.37-5.08,15.53-.06.22-.12.43-.19.68h19.06c.31,2.38.99,2.99,3.37,2.99h11.67c2.32.03,3.09-.62,3.34-3.03Zm-17.95,19.82c.22-.77.43-1.48.62-2.19.37-1.42-.34-2.75-1.64-3.12-1.36-.37-2.63.34-3.06,1.76-.53,1.73-1.05,3.49-1.55,5.25-.5,1.76.62,3.21,2.44,3.21h24.67c1.61,0,2.82-1.42,2.38-2.96-.59-2.01-1.27-3.95-1.98-5.93-.37-1.02-1.33-1.48-2.41-1.42-.99.06-1.89.71-2.1,1.67-.12.59-.03,1.2.06,1.82.12.65.37,1.23.62,1.91h-18.04Z"
38+
strokeWidth="0"
39+
fill={themePrimaryFill}
40+
/>
41+
<path
42+
d="m32.11,18.48h22.13c.34,0,.8,0,1.02.19.28.28.56.77.53,1.14-.03.62-.53.93-1.11.93-1.21.03-2.41,0-3.62,0H9.58c-.84-.03-1.36-.46-1.36-1.17s.53-1.14,1.39-1.14h11.14c3.78.06,7.55.06,11.36.06Z"
43+
strokeWidth="0"
44+
fill={themeSecondaryFill}
45+
/>
46+
<path
47+
d="m31.98,13.66h20.64c.31,0,.62,0,.93.03.62.09.99.43,1.02,1.08.03.65-.34,1.05-.99,1.2-.25.06-.53.03-.77.03H10.97c-.31,0-.71.03-.9-.12-.31-.31-.68-.8-.65-1.14.03-.37.53-.71.9-.99.19-.12.56-.06.84-.06,6.96-.03,13.9-.03,20.83-.03Z"
48+
strokeWidth="0"
49+
fill={themeSecondaryFill}
50+
/>
51+
<path
52+
d="m32,11.16H12.9c-.22,0-.46.03-.68-.03-.62-.12-1.02-.52-1.02-1.17s.4-1.02,1.05-1.14c.19-.03.4-.03.62-.03h38.25c.22,0,.4-.03.62.03.62.12,1.02.49,1.05,1.14.03.56-.46,1.11-1.11,1.2-.22.03-.4,0-.62,0h-19.06Z"
53+
strokeWidth="0"
54+
fill={themeSecondaryFill}
55+
/>
56+
<path
57+
d="m20.05,47.99h24.67c1.61,0,2.82-1.42,2.38-2.96-.59-2.01-1.27-3.95-1.98-5.93-.37-1.02-1.33-1.48-2.41-1.42-.99.06-1.89.71-2.1,1.67-.12.59-.03,1.2.06,1.82.12.65.37,1.23.62,1.91h-18.04c.22-.77.43-1.48.62-2.19.37-1.42-.34-2.75-1.64-3.12-1.36-.37-2.63.34-3.06,1.76-.53,1.73-1.05,3.49-1.55,5.25s.62,3.21,2.44,3.21Z"
58+
strokeWidth="0"
59+
fill={tertiaryFill}
60+
/>
5761
</svg>
5862
);
5963
};

‎src/theme/colors/colors.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const SAFFRON = '#EBC017';
2222
export const GRAY = '#696969';
2323
export const GRAY97 = '#f7f7f7';
2424
export const DARK_SLATE_GRAY = '#294957';
25-
export const LIGHT_GRAY = '#F0F0F0'; // same as tableBorder
25+
export const LIGHT_GRAY = '#d3d3d3'; // same as tableBorder
2626
export const STEEL_GRAY = '#525252';
2727
export const ALICE_BLUE = '#EBEFF1';
2828
export const LIMED_SPRUCE = '#3C494F';

0 commit comments

Comments
 (0)