fix(ProductSwitcher): Use color tokens (#1373)

livechat · Sep 30, 2024 · 4fa7348 · 4fa7348
1 parent dec83dc
commit 4fa7348
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 3 deletions.
diff --git a/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.tsx b/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.tsx
@@ -178,7 +178,7 @@ export const ProductSwitcher: FC<ProductSwitcherProps> = ({
                   <Icon
                     size="xlarge"
                     source={TextLogoFull}
-                    customColor="var(--content-locked-white)"
+                    customColor="var(--content-basic-primary)"
                   />
                 </a>
               </div>

diff --git a/...ages/react-components/src/components/ProductSwitcher/components/ProductRow/ProductRow.tsx b/...ages/react-components/src/components/ProductSwitcher/components/ProductRow/ProductRow.tsx
@@ -26,6 +26,7 @@ export const ProductRow: FC<IProps> = ({
     icon,
     iconColor,
     backgroundColors,
+    borderColor,
     notificationCount,
     name,
     url,
@@ -56,6 +57,7 @@ export const ProductRow: FC<IProps> = ({
             iconColor={iconColor}
             expired={expired}
             backgroundColors={backgroundColors}
+            borderColor={borderColor}
             notificationCount={notificationCount}
             withBorder={isActive}
           />

diff --git a/...-components/src/components/ProductSwitcher/components/ProductTile/ProductTile.module.scss b/...-components/src/components/ProductSwitcher/components/ProductTile/ProductTile.module.scss
@@ -5,7 +5,7 @@ $base-class: 'product-tile';
 }
 
 .outer-border {
-  border: solid 2px rgb(255 255 255 / 80%);
+  border: solid 2px var(--content-basic-primary);
   border-radius: 12px;
   padding: 3px;
 }

diff --git a/...es/react-components/src/components/ProductSwitcher/components/ProductTile/ProductTile.tsx b/...es/react-components/src/components/ProductSwitcher/components/ProductTile/ProductTile.tsx
@@ -10,7 +10,12 @@ import styles from './ProductTile.module.scss';
 
 type IProps = Pick<
   ProductOption,
-  'icon' | 'notificationCount' | 'backgroundColors' | 'expired' | 'iconColor'
+  | 'icon'
+  | 'notificationCount'
+  | 'backgroundColors'
+  | 'expired'
+  | 'iconColor'
+  | 'borderColor'
 > & {
   isMainProduct?: boolean;
   withBorder?: boolean;
@@ -23,6 +28,7 @@ export const ProductTile: FC<IProps> = ({
   iconColor,
   expired,
   backgroundColors,
+  borderColor,
   notificationCount,
   withBorder = false,
   isMainProduct = false,
@@ -55,6 +61,7 @@ export const ProductTile: FC<IProps> = ({
             background: expired
               ? 'var(--surface-moderate-default)'
               : backgroundColors.main,
+            border: borderColor ? `1px solid ${borderColor}` : '',
           }}
         >
           {notificationCount && !expired ? (

diff --git a/packages/react-components/src/components/ProductSwitcher/constants.ts b/packages/react-components/src/components/ProductSwitcher/constants.ts
@@ -92,6 +92,7 @@ export const ProductSwitcherProducts: ProductOption[] = [
     iconColor: 'var(--content-locked-black)',
     withDivider: true,
     url: '',
+    borderColor: 'var(--border-basic-secondary)',
   },
 ];
 

diff --git a/packages/react-components/src/components/ProductSwitcher/types.ts b/packages/react-components/src/components/ProductSwitcher/types.ts
@@ -71,6 +71,7 @@ export interface ProductOption {
   };
   withDivider?: boolean;
   url: string;
+  borderColor?: string;
 }
 
 export type ProductData = {