From 4fa734895b294c85eeb08b4f1b3572521f9f6513 Mon Sep 17 00:00:00 2001
From: Jakub Sikora <j.sikora@livechatinc.com>
Date: Mon, 30 Sep 2024 15:58:40 +0200
Subject: [PATCH] fix(ProductSwitcher): Use color tokens (#1373)

---
 .../src/components/ProductSwitcher/ProductSwitcher.tsx   | 2 +-
 .../ProductSwitcher/components/ProductRow/ProductRow.tsx | 2 ++
 .../components/ProductTile/ProductTile.module.scss       | 2 +-
 .../components/ProductTile/ProductTile.tsx               | 9 ++++++++-
 .../src/components/ProductSwitcher/constants.ts          | 1 +
 .../src/components/ProductSwitcher/types.ts              | 1 +
 6 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.tsx b/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.tsx
index 33dd23764..8605b220e 100644
--- 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/packages/react-components/src/components/ProductSwitcher/components/ProductRow/ProductRow.tsx b/packages/react-components/src/components/ProductSwitcher/components/ProductRow/ProductRow.tsx
index c2c68eb0c..e97d577b2 100644
--- a/packages/react-components/src/components/ProductSwitcher/components/ProductRow/ProductRow.tsx
+++ b/packages/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/packages/react-components/src/components/ProductSwitcher/components/ProductTile/ProductTile.module.scss b/packages/react-components/src/components/ProductSwitcher/components/ProductTile/ProductTile.module.scss
index 739fb9f2f..05024477d 100644
--- a/packages/react-components/src/components/ProductSwitcher/components/ProductTile/ProductTile.module.scss
+++ b/packages/react-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/packages/react-components/src/components/ProductSwitcher/components/ProductTile/ProductTile.tsx b/packages/react-components/src/components/ProductSwitcher/components/ProductTile/ProductTile.tsx
index 4d2ee8bad..b533e66ad 100644
--- a/packages/react-components/src/components/ProductSwitcher/components/ProductTile/ProductTile.tsx
+++ b/packages/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
index ff5bd029f..a6ff45e1e 100644
--- 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
index 4b9f6d4ef..2c2363eb8 100644
--- 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 = {