fix(ui): update new CatalogIcon from Brand

- revert previous color changes Signed-off-by: Tharun T <[email protected]>
layer5io · Jun 7, 2024 · 5b1be17 · 5b1be17
1 parent d31376a
commit 5b1be17
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 29 deletions.
diff --git a/src/icons/CatalogIcon/CatalogIcon.tsx b/src/icons/CatalogIcon/CatalogIcon.tsx
@@ -1,59 +1,63 @@
 import { FC } from 'react';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { CARIBBEAN_GREEN, CHARCOAL, KEPPEL, LIGHT_GRAY, useTheme } from '../../theme';
+import { CARIBBEAN_GREEN, DARK_SLATE_GRAY, KEPPEL, WHITE, useTheme } from '../../theme';
 import { IconProps } from '../types';
 
 type CatalogIconProps = {
   primaryFill?: string;
   secondaryFill?: string;
+  ternaryFill?: string;
 } & IconProps;
 
 export const CatalogIcon: FC<CatalogIconProps> = ({
   width = DEFAULT_WIDTH,
   height = DEFAULT_HEIGHT,
   primaryFill,
   secondaryFill,
+  ternaryFill = WHITE,
   style = {},
   ...props
 }) => {
   const theme = useTheme();
+  const themeMode = theme?.palette?.mode ?? 'light';
 
-  const themePrimaryFill = primaryFill ?? (theme.palette.mode === 'dark' ? LIGHT_GRAY : KEPPEL);
-  const themeSecondaryFill =
-    secondaryFill ?? (theme.palette.mode === 'dark' ? CARIBBEAN_GREEN : CHARCOAL);
+  const themePrimaryFill = primaryFill ?? (themeMode === 'dark' ? KEPPEL : DARK_SLATE_GRAY);
+  const themeSecondaryFill = secondaryFill ?? (themeMode === 'dark' ? CARIBBEAN_GREEN : KEPPEL);
 
   return (
     <svg
       width={width}
       height={height}
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 18 16"
+      viewBox="0 0 64 64"
       style={style}
       {...props}
     >
-      <g clipPath="url(#clip0_12369_35348)">
-        <path
-          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"
-          fill={themePrimaryFill}
-        />
-        <path
-          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"
-          fill={themeSecondaryFill}
-        />
-        <path
-          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"
-          fill={themeSecondaryFill}
-        />
-        <path
-          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"
-          fill={themeSecondaryFill}
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_12369_35348">
-          <rect width="18" height="16" fill="white" />
-        </clipPath>
-      </defs>
+      <path
+        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"
+        strokeWidth="0"
+        fill={themePrimaryFill}
+      />
+      <path
+        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"
+        strokeWidth="0"
+        fill={themeSecondaryFill}
+      />
+      <path
+        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"
+        strokeWidth="0"
+        fill={themeSecondaryFill}
+      />
+      <path
+        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"
+        strokeWidth="0"
+        fill={themeSecondaryFill}
+      />
+      <path
+        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"
+        strokeWidth="0"
+        fill={ternaryFill}
+      />
     </svg>
   );
 };

diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts
@@ -22,7 +22,7 @@ export const SAFFRON = '#EBC017';
 export const GRAY = '#696969';
 export const GRAY97 = '#f7f7f7';
 export const DARK_SLATE_GRAY = '#294957';
-export const LIGHT_GRAY = '#F0F0F0'; // same as tableBorder
+export const LIGHT_GRAY = '#d3d3d3'; // same as tableBorder
 export const STEEL_GRAY = '#525252';
 export const ALICE_BLUE = '#EBEFF1';
 export const LIMED_SPRUCE = '#3C494F';