feat(ProductSwitcher): adding platform, accounts and text logo

livechat · Jul 30, 2024 · 700a5ac · 700a5ac
1 parent 5d943f5
commit 700a5ac
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 7 deletions.
diff --git a/packages/icons/svg/text_accounts.svg b/packages/icons/svg/text_accounts.svg
diff --git a/packages/icons/svg/text_logo-full.svg b/packages/icons/svg/text_logo-full.svg
diff --git a/packages/icons/svg/text_platform.svg b/packages/icons/svg/text_platform.svg
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -15,7 +15,7 @@
   ],
   "scripts": {
     "dev": "run-p dev:*",
-    "dev:storybook": "storybook dev -p 6006",
+    "dev:storybook": "storybook dev -p 6006 --exact-port",
     "dev:lib": "vite build --mode development -w",
     "prebuild": "rimraf dist && mkdir dist",
     "build": "tsc && vite build",

diff --git a/packages/react-components/src/components/Icon/IconsShowcase/constans.ts b/packages/react-components/src/components/Icon/IconsShowcase/constans.ts
@@ -500,4 +500,7 @@ export const IconsData: Record<IconName, IconGroup> = {
   Stripe: IconGroup.Brands,
   Mailchimp: IconGroup.Brands,
   LayoutSidebarLeft: IconGroup.General,
+  TextAccounts: IconGroup.Brands,
+  TextLogoFull: IconGroup.Brands,
+  TextPlatform: IconGroup.Brands,
 };
diff --git a/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.module.scss b/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.module.scss
@@ -24,6 +24,7 @@ $base-class: 'product-switcher';
     gap: 4px;
     align-items: center;
     justify-content: center;
+    height: 19px;
     text-decoration: none;
     color: var(--content-basic-secondary);
   }

diff --git a/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.tsx b/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.tsx
@@ -1,6 +1,9 @@
 import { FC, MouseEvent } from 'react';
 import * as React from 'react';
 
+import { TextLogoFull } from '@livechat/design-system-icons';
+
+import { Icon } from '../Icon';
 import { Popover } from '../Popover';
 import { Tooltip } from '../Tooltip';
 import { Text } from '../Typography';
@@ -78,9 +81,11 @@ export const ProductSwitcher: FC<IProductSwitcherProps> = ({
             className={styles[`${baseClass}__footer-link`]}
           >
             <Text noMargin>powered by</Text>
-            <Text noMargin bold customColor="var(--content-locked-white)">
-              text|
-            </Text>
+            <Icon
+              size="xlarge"
+              source={TextLogoFull}
+              customColor="var(--content-locked-white)"
+            />
           </a>
         </div>
       </>

diff --git a/packages/react-components/src/components/ProductSwitcher/constants.ts b/packages/react-components/src/components/ProductSwitcher/constants.ts
@@ -1,11 +1,12 @@
 import {
-  AccountCircle,
   ChatBotMono,
   HelloMono,
   HelpDeskMono,
   KnowledgeBaseMono,
   LiveChatMono,
   OpenWidgetMono,
+  TextAccounts,
+  TextPlatform,
 } from '@livechat/design-system-icons';
 
 import { OpenWidgetLogoUri } from './openwidgetLogoUri';
@@ -83,7 +84,7 @@ export const ProductSwitcherProducts: IProductOption[] = [
   {
     id: 'platform',
     name: 'Platform',
-    icon: HelloMono,
+    icon: TextPlatform,
     iconColor: 'var(--content-locked-black)',
     backgroundColors: {
       main: 'var(--products-platform)',
@@ -95,7 +96,7 @@ export const ProductSwitcherProducts: IProductOption[] = [
   {
     id: 'accounts',
     name: 'Accounts',
-    icon: AccountCircle, // TODO - replace with proper icon
+    icon: TextAccounts,
     backgroundColors: {
       main: 'var(--surface-locked-white)',
       second: 'var(--products-livechat)',