Merge pull request #285 from deriv-com/michio/update-quill-icons-design

deriv-com · Dec 22, 2023 · 3bc6321 · 3bc6321
2 parents 45a3b26 + 38730d0
commit 3bc6321
Show file tree

Hide file tree

Showing 22 changed files with 15,895 additions and 16,731 deletions.
diff --git a/apps/deriv-hk/next.config.js b/apps/deriv-hk/next.config.js
@@ -22,6 +22,13 @@ const nextConfig = {
     'next-image-export-optimizer',
     '@deriv/quill-design',
     '@deriv/quill-icons',
+    '@deriv/quill-icons/LabelPaired',
+    '@deriv/quill-icons/Standalone',
+    '@deriv/quill-icons/Flags',
+    '@deriv/quill-icons/Logo',
+    '@deriv/quill-icons/Illustrative',
+    '@deriv/quill-icons/Markets',
+    '@deriv/quill-icons/Social',
   ],
   env: {
     nextImageExportOptimizer_imageFolderPath: 'assets/public',

diff --git a/libs/blocks/src/lib/fast-payment/base/data.tsx b/libs/blocks/src/lib/fast-payment/base/data.tsx
@@ -2,7 +2,7 @@ import { CardContent } from '@deriv-com/components';
 import {
   PaymentMethodBitcoinBrandIcon,
   PaymentMethodSkrillBrandIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Logo';
 
 export const sliderCards: CardContent[] = [
   {

diff --git a/libs/blocks/src/lib/features/card-feature/card-feature.spec.tsx b/libs/blocks/src/lib/features/card-feature/card-feature.spec.tsx
@@ -12,6 +12,7 @@ import { CardContent } from '@deriv-com/components';
 
 const cards: CardContent[] = [
   {
+    id: 0,
     header: 'Protected and secure',
     description:
       'Your data is safe, and your funds are in segregated bank accounts per regulatory standards.',
@@ -21,6 +22,7 @@ const cards: CardContent[] = [
     size: 'sm',
   },
   {
+    id: 1,
     header: '24/7 support',
     description:
       'Reach our professional, multilingual team anytime via live chat.',
@@ -30,6 +32,7 @@ const cards: CardContent[] = [
     size: 'sm',
   },
   {
+    id: 2,
     header: 'Regulated',
     description:
       'We are licensed and overseen by leading global financial authorities.',
@@ -39,6 +42,7 @@ const cards: CardContent[] = [
     size: 'sm',
   },
   {
+    id: 3,
     header: 'Reliable',
     icon: <IllustrativeSpreadsIcon />,
     description:

diff --git a/libs/blocks/src/lib/navigation/language-switcher/index.tsx b/libs/blocks/src/lib/navigation/language-switcher/index.tsx
@@ -1,6 +1,7 @@
 import { Text } from '@deriv/quill-design';
 import { useLanguageSwitcher, useNavigation } from '@deriv-com/hooks';
-import { LabelPairedGlobeRegularIcon } from '@deriv/quill-icons/LabelPaired';
+import { LabelPairedGlobeMdRegularIcon } from '@deriv/quill-icons/LabelPaired';
+import { StandaloneGlobeRegularIcon } from '@deriv/quill-icons';
 
 const LanguageSwitcher = () => {
   const { onLanguageHover, activeLanguage } = useLanguageSwitcher();
@@ -15,7 +16,7 @@ const LanguageSwitcher = () => {
         onLanguageHover?.();
       }}
     >
-      <LabelPairedGlobeRegularIcon className="inline" iconSize="md" />
+      <StandaloneGlobeRegularIcon className="inline" />
       <Text
         size="sm"
         className="inline-block group-hover:text-typography-prominent"

diff --git a/libs/blocks/src/lib/navigation/language-switcher/mobile-language.tsx b/libs/blocks/src/lib/navigation/language-switcher/mobile-language.tsx
@@ -1,6 +1,6 @@
 import { useLanguageSwitcher } from '@deriv-com/hooks';
 import { Text } from '@deriv/quill-design';
-import { LabelPairedGlobeRegularIcon } from '@deriv/quill-icons/LabelPaired';
+import { LabelPairedGlobeMdRegularIcon } from '@deriv/quill-icons/LabelPaired';
 
 export const MobileLanguageToggler = () => {
   const { setShowMobileLanguages, activeLanguage } = useLanguageSwitcher();
@@ -12,7 +12,7 @@ export const MobileLanguageToggler = () => {
           setShowMobileLanguages?.(true);
         }}
       >
-        <LabelPairedGlobeRegularIcon className="inline" iconSize="md" />
+        <LabelPairedGlobeMdRegularIcon className="inline" />
         <Text className="group-hover:text-typography-prominent" bold>
           {activeLanguage?.displayName}
         </Text>

diff --git a/libs/blocks/src/lib/navigation/mobile/mobile.nav-link.tsx b/libs/blocks/src/lib/navigation/mobile/mobile.nav-link.tsx
@@ -2,7 +2,7 @@ import { CustomLink } from '@deriv-com/components';
 import { useNavigation } from '@deriv-com/hooks';
 import { DirectNavLink } from '@deriv-com/providers';
 import { qtMerge } from '@deriv/quill-design';
-import { LabelPairedArrowUpRightRegularIcon } from '@deriv/quill-icons/LabelPaired';
+import { LabelPairedArrowUpRightSmRegularIcon } from '@deriv/quill-icons/LabelPaired';
 
 export interface MobileNavLinkProps {
   item: DirectNavLink;
@@ -28,7 +28,7 @@ export const MobileNavLink: React.FC<MobileNavLinkProps> = ({
       target={item.target}
     >
       {item.text}
-      {item.external && <LabelPairedArrowUpRightRegularIcon iconSize="sm" />}
+      {item.external && <LabelPairedArrowUpRightSmRegularIcon />}
     </CustomLink>
   );
 };

diff --git a/libs/blocks/src/lib/navigation/navigation.link.tsx b/libs/blocks/src/lib/navigation/navigation.link.tsx
@@ -1,7 +1,7 @@
 import { CustomLink } from '@deriv-com/components';
 import { DirectNavLink } from '@deriv-com/providers';
 import { Text, qtJoin, qtMerge } from '@deriv/quill-design';
-import { LabelPairedArrowUpRightRegularIcon } from '@deriv/quill-icons/LabelPaired';
+import { LabelPairedArrowUpRightSmRegularIcon } from '@deriv/quill-icons/LabelPaired';
 
 export interface NavigationLinkProps {
   item: DirectNavLink;
@@ -29,7 +29,7 @@ export const NavigationLink: React.FC<NavigationLinkProps> = ({
         <Text size="md" bold className="group-hover:text-typography-prominent">
           {item.text}
         </Text>
-        {item.external && <LabelPairedArrowUpRightRegularIcon iconSize="sm" />}
+        {item.external && <LabelPairedArrowUpRightSmRegularIcon />}
       </div>
       {item.description ? (
         <Text size="sm" className={qtJoin(item.icon && 'col-start-2')}>

diff --git a/libs/blocks/vite.config.ts b/libs/blocks/vite.config.ts
@@ -44,6 +44,7 @@ export default defineConfig({
         '@deriv/quill-icons',
         '@deriv-com/providers',
         '@deriv-com/hooks',
+        '@deriv/quill-icons',
         '@deriv/quill-icons/LabelPaired',
         '@deriv/quill-icons/Standalone',
         '@deriv/quill-icons/Flags',
@@ -52,6 +53,7 @@ export default defineConfig({
         '@deriv/quill-icons/Markets',
         '@deriv/quill-icons/Social',
         '@deriv/quill-icons/Currencies',
+        '@deriv/quill-icons/Illustration',
         '@deriv-com/components',
       ],
     },

diff --git a/libs/components/src/lib/link-item/index.tsx b/libs/components/src/lib/link-item/index.tsx
@@ -6,7 +6,7 @@ import {
   linkItemIconCva,
 } from './link-item.classnames';
 
-import { LabelPairedChevronRightRegularIcon } from '@deriv/quill-icons/LabelPaired';
+import { LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons/LabelPaired';
 import { LinkItemProps } from './types';
 import { qtJoin, qtMerge } from '@deriv/quill-design';
 
@@ -42,7 +42,7 @@ export const LinkItem = forwardRef<HTMLSpanElement, LinkItemProps>(
         {children}
 
         {hasIcon && (
-          <LabelPairedChevronRightRegularIcon
+          <LabelPairedChevronRightMdRegularIcon
             className={qtJoin(linkItemIconCva({ colorStyle }))}
             data-testid="dt-link-item-chevron"
             {...LinkItemIconSizes[size]}

diff --git a/libs/components/src/lib/link/index.tsx b/libs/components/src/lib/link/index.tsx
@@ -1,6 +1,6 @@
 import { useSharedLink } from '@deriv-com/hooks';
 import { qtMerge } from '@deriv/quill-design';
-import { StandaloneChevronRightRegularIcon } from '@deriv/quill-icons';
+import { StandaloneChevronRightRegularIcon } from '@deriv/quill-icons/Standalone';
 import clsx from 'clsx';
 import { HTMLAttributes } from 'react';
 

diff --git a/libs/components/src/lib/rating/index.tsx b/libs/components/src/lib/rating/index.tsx
@@ -1,5 +1,5 @@
 import { qtMerge } from '@deriv/quill-design';
-import { LabelPairedTrustpilotIcon } from '@deriv/quill-icons/LabelPaired';
+import { LabelPairedTrustpilotMdIcon } from '@deriv/quill-icons/LabelPaired';
 
 export type RatingProps = {
   rate: number | undefined;
@@ -88,7 +88,7 @@ const StarBox = ({ percent, colorKey = 0, size = 'md' }: StarBoxProps) => {
         )}
       />
       <div className="absolute left-50 top-50 flex h-full w-full items-center justify-center">
-        <LabelPairedTrustpilotIcon
+        <LabelPairedTrustpilotMdIcon
           width={100}
           height={100}
           className={StarClassName[size]}

diff --git a/libs/components/src/lib/table/account-table/variant/table.stories.tsx b/libs/components/src/lib/table/account-table/variant/table.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import AccountTable from '.';
 import { Button } from '@deriv/quill-design';
-import { LabelPairedMinusRegularIcon } from '@deriv/quill-icons/LabelPaired';
+import { LabelPairedMinusMdRegularIcon } from '@deriv/quill-icons/LabelPaired';
 import { IllustrativeForexIcon } from '@deriv/quill-icons/Illustrative';
 
 const meta = {
@@ -66,12 +66,7 @@ export const Default = {
                   type: 'compound',
                   text: 'Forex',
                   icon: <IllustrativeForexIcon iconSize="sm" />,
-                  listIcon: (
-                    <LabelPairedMinusRegularIcon
-                      iconSize="sm"
-                      fill="#0000007a"
-                    />
-                  ),
+                  listIcon: <LabelPairedMinusMdRegularIcon fill="#0000007a" />,
                   items: ['Majors', 'Minors', 'Exotics'],
                 },
               ],

diff --git a/libs/components/vite.config.ts b/libs/components/vite.config.ts
@@ -37,6 +37,7 @@ export default defineConfig({
         'tailwind-merge',
         '@deriv/quill-design',
         '@deriv/quill-icons',
+        '@deriv/quill-icons',
         '@deriv/quill-icons/LabelPaired',
         '@deriv/quill-icons/Standalone',
         '@deriv/quill-icons/Flags',
@@ -45,6 +46,7 @@ export default defineConfig({
         '@deriv/quill-icons/Markets',
         '@deriv/quill-icons/Social',
         '@deriv/quill-icons/Currencies',
+        '@deriv/quill-icons/Illustration',
         '@deriv-com/providers',
         '@deriv-com/hooks',
         'swiper',

diff --git a/libs/features/src/lib/footer/row/download.tsx b/libs/features/src/lib/footer/row/download.tsx
@@ -1,8 +1,8 @@
 import { OptimizedImage } from '@deriv-com/components';
 import {
-  LabelPairedAppleIcon,
-  LabelPairedGooglePlayIcon,
-  LabelPairedHuaweiAppGalleryIcon,
+  LabelPairedAppleMdIcon,
+  LabelPairedGooglePlayMdIcon,
+  LabelPairedHuaweiAppGalleryMdIcon,
 } from '@deriv/quill-icons/LabelPaired';
 import clsx from 'clsx';
 
@@ -13,7 +13,7 @@ const DownloadBadges = () => {
   return (
     <div className="flex flex-col gap-gap-md max-lg:flex-1">
       <div className={clsx(sharedClasses)}>
-        <LabelPairedGooglePlayIcon iconSize="md" />
+        <LabelPairedGooglePlayMdIcon />
         <OptimizedImage
           imageName="footer/get-googleplay.png"
           alt="get it on google play"
@@ -22,7 +22,7 @@ const DownloadBadges = () => {
         />
       </div>
       <div className={clsx(sharedClasses)}>
-        <LabelPairedAppleIcon iconSize="md" />
+        <LabelPairedAppleMdIcon />
         <OptimizedImage
           imageName="footer/download-appstore.png"
           alt="download on the app store"
@@ -31,7 +31,7 @@ const DownloadBadges = () => {
         />
       </div>
       <div className={clsx(sharedClasses)}>
-        <LabelPairedHuaweiAppGalleryIcon iconSize="md" />
+        <LabelPairedHuaweiAppGalleryMdIcon />
         <OptimizedImage
           imageName="footer/explore-appgallery.png"
           alt="explore it on appgallery"

diff --git a/libs/features/src/lib/navigation/main/main-navigation.buttons.tsx b/libs/features/src/lib/navigation/main/main-navigation.buttons.tsx
@@ -1,7 +1,7 @@
 import { MobileNavToggle } from '@deriv-com/blocks';
 import { useNavigation } from '@deriv-com/hooks';
 import { Button, useTheme } from '@deriv/quill-design';
-import { LabelPairedGridBoldIcon } from '@deriv/quill-icons/LabelPaired';
+import { LabelPairedGridMdBoldIcon } from '@deriv/quill-icons/LabelPaired';
 
 export const MainNavigationButtons = () => {
   const { theme, toggleTheme } = useTheme();
@@ -27,7 +27,7 @@ export const MainNavigationButtons = () => {
           colorStyle="black"
           size="lg"
           onClick={onTradersHubClick}
-          icon={LabelPairedGridBoldIcon}
+          icon={LabelPairedGridMdBoldIcon}
           iconPosition="start"
         >
           Traders Hub

diff --git a/libs/templates/src/lib/home/sections/account-section/data.tsx b/libs/templates/src/lib/home/sections/account-section/data.tsx
@@ -1,7 +1,7 @@
 import { TableContent } from '@deriv-com/components';
 import { Button } from '@deriv/quill-design';
 import { IllustrativeForexIcon } from '@deriv/quill-icons/Illustrative';
-import { LabelPairedMinusRegularIcon } from '@deriv/quill-icons/LabelPaired';
+import { LabelPairedMinusSmRegularIcon } from '@deriv/quill-icons/LabelPaired';
 
 export const TableData: TableContent = {
   header: 'The STP trading account',
@@ -35,9 +35,7 @@ export const TableData: TableContent = {
               type: 'compound',
               text: 'Forex',
               icon: <IllustrativeForexIcon iconSize="sm" />,
-              listIcon: (
-                <LabelPairedMinusRegularIcon iconSize="sm" fill="#0000007a" />
-              ),
+              listIcon: <LabelPairedMinusSmRegularIcon fill="#0000007a" />,
               items: ['Majors', 'Minors', 'Exotics'],
             },
           ],

diff --git a/libs/templates/src/lib/home/sections/fast-and-reliable/data.tsx b/libs/templates/src/lib/home/sections/fast-and-reliable/data.tsx
@@ -1,35 +1,35 @@
-import { LabelPairedCheckRegularIcon } from '@deriv/quill-icons/LabelPaired';
+import { LabelPairedCheckMdRegularIcon } from '@deriv/quill-icons/LabelPaired';
 import { Text } from '@deriv/quill-design';
 
 export const FastAndReliableContent = () => {
   return (
     <ul className="flex flex-col gap-gap-lg lg:gap-gap-xl">
       <li className="flex gap-gap-lg">
-        <LabelPairedCheckRegularIcon
+        <LabelPairedCheckMdRegularIcon
           className="min-w-[18px]"
           width={18}
           height={30}
         />
         <Text size="lg">Average trade execution: Below 50ms</Text>
       </li>
       <li className="flex gap-gap-lg">
-        <LabelPairedCheckRegularIcon
+        <LabelPairedCheckMdRegularIcon
           className="min-w-[18px]"
           width={18}
           height={30}
         />
         <Text size="lg">Daily trades: Over 20 billion USD</Text>
       </li>
       <li className="flex gap-gap-lg">
-        <LabelPairedCheckRegularIcon
+        <LabelPairedCheckMdRegularIcon
           className="min-w-[18px]"
           width={18}
           height={30}
         />
         <Text size="lg">Uptime: 99.97%</Text>
       </li>
       <li className="flex gap-gap-lg">
-        <LabelPairedCheckRegularIcon
+        <LabelPairedCheckMdRegularIcon
           className="min-w-[18px]"
           width={18}
           height={30}
@@ -39,7 +39,7 @@ export const FastAndReliableContent = () => {
         </Text>
       </li>
       <li className="flex gap-gap-lg">
-        <LabelPairedCheckRegularIcon
+        <LabelPairedCheckMdRegularIcon
           className="min-w-[18px]"
           width={18}
           height={30}

diff --git a/libs/templates/src/lib/trade/app-download/data.tsx b/libs/templates/src/lib/trade/app-download/data.tsx
@@ -7,7 +7,7 @@ import {
   StandaloneGooglePlayIcon,
   StandaloneAppStoreIosIcon,
 } from '@deriv/quill-icons/Standalone';
-import { LabelPairedWindowsIcon } from '@deriv/quill-icons/LabelPaired';
+import { LabelPairedWindowsMdIcon } from '@deriv/quill-icons/LabelPaired';
 
 export const data = {
   content: (
@@ -40,7 +40,7 @@ export const data = {
       name: 'Web browser',
     },
     {
-      icon: <LabelPairedWindowsIcon />,
+      icon: <LabelPairedWindowsMdIcon />,
       name: 'Windows',
     },
     {