[WALL] Aizad/WALL-3688/Replace Icons inside of CFD Compare Modal with…

… quill-icons (#14407) * chore: update title icons with quill icons * chore: update arrow icons for carousel
deriv-com · Apr 1, 2024 · fd0ce0b · fd0ce0b
1 parent f029a77
commit fd0ce0b
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 57 deletions.
diff --git a/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx b/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx
@@ -2,9 +2,8 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import useEmblaCarousel, { EmblaCarouselType } from 'embla-carousel-react';
 import { useHover } from 'usehooks-ts';
 import { useAllWalletAccounts, useAuthorize } from '@deriv/api-v2';
+import { LabelPairedChevronLeftLgFillIcon, LabelPairedChevronRightLgFillIcon } from '@deriv/quill-icons';
 import useDevice from '../../hooks/useDevice';
-import LeftArrow from '../../public/images/left-arrow.svg';
-import RightArrow from '../../public/images/right-arrow.svg';
 import { IconButton, WalletText } from '../Base';
 import { WalletsAddMoreLoader } from '../SkeletonLoader';
 import WalletsAddMoreCard from '../WalletsAddMoreCard';
@@ -74,7 +73,7 @@ const WalletsAddMoreCarousel: React.FC = () => {
                             className='wallets-add-more__carousel-btn wallets-add-more__carousel-btn--prev'
                             color='white'
                             disabled={!prevBtnEnabled}
-                            icon={<LeftArrow />}
+                            icon={<LabelPairedChevronLeftLgFillIcon fill='#333333' />}
                             isRound
                             onClick={scrollPrev}
                             size='lg'
@@ -83,7 +82,7 @@ const WalletsAddMoreCarousel: React.FC = () => {
                             className='wallets-add-more__carousel-btn wallets-add-more__carousel-btn--next'
                             color='white'
                             disabled={!nextBtnEnabled}
-                            icon={<RightArrow />}
+                            icon={<LabelPairedChevronRightLgFillIcon fill='#333333' />}
                             isRound
                             onClick={scrollNext}
                             size='lg'

diff --git a/...ets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx b/...ets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
+import { LabelPairedChevronLeftLgFillIcon, LabelPairedChevronRightLgFillIcon } from '@deriv/quill-icons';
 import { IconButton } from '../../../../components/Base';
-import LeftArrow from '../../../../public/images/left-arrow.svg';
-import RightArrow from '../../../../public/images/right-arrow.svg';
 import './CompareAccountsCarouselButton.scss';
 
 type TPrevNextButtonProps = {
@@ -11,22 +10,25 @@ type TPrevNextButtonProps = {
     onClick: () => void;
 };
 
-const CFDCompareAccountsCarouselButton = (props: TPrevNextButtonProps) => {
-    const { enabled, isNext, onClick } = props;
+const CFDCompareAccountsCarouselButton = ({ enabled, isNext, onClick }: TPrevNextButtonProps) => (
+    <IconButton
+        className={classNames('wallets-compare-accounts-carousel-button', {
+            'wallets-compare-accounts-carousel-button--next': isNext,
+            'wallets-compare-accounts-carousel-button--prev': !isNext,
+        })}
+        color='white'
+        disabled={!enabled}
+        icon={
+            isNext ? (
+                <LabelPairedChevronRightLgFillIcon fill='#333333' />
+            ) : (
+                <LabelPairedChevronLeftLgFillIcon fill='#333333' />
+            )
+        }
+        isRound
+        onClick={onClick}
+        size='md'
+    />
+);
 
-    return (
-        <IconButton
-            className={classNames('wallets-compare-accounts-carousel-button', {
-                'wallets-compare-accounts-carousel-button--next': isNext,
-                'wallets-compare-accounts-carousel-button--prev': !isNext,
-            })}
-            color='white'
-            disabled={!enabled}
-            icon={isNext ? <RightArrow /> : <LeftArrow />}
-            isRound
-            onClick={onClick}
-            size='md'
-        />
-    );
-};
 export default CFDCompareAccountsCarouselButton;
diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsTitleIcon.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsTitleIcon.tsx
@@ -6,7 +6,6 @@ import InfoIcon from '../../../../public/images/ic-info-outline.svg';
 import { THooks, TPlatforms } from '../../../../types';
 import { CFD_PLATFORMS } from '../../constants';
 import { ACCOUNT_ICONS, MARKET_TYPE_SHORTCODE } from './constants';
-import TradingPlatformIcons from './tradingPlatformIcons';
 import './CompareAccountsTitleIcon.scss';
 
 type TMarketType = THooks.AvailableMT5Accounts['market_type'];
@@ -69,12 +68,10 @@ const CompareAccountsTitleIcon = ({ isDemo, marketType, platform, shortCode }: T
     const labuanJurisdictionMessage =
         'Choosing this jurisdiction will give you a Financial STP account. Your trades will go directly to the market and have tighter spreads.';
 
-    const TradingPlatformIcon = TradingPlatformIcons[jurisdictionCardIcon];
-
     return (
         <React.Fragment>
-            <div className={'wallets-compare-accounts-title-icon'}>
-                <TradingPlatformIcon height={48} width={48} />
+            <div className='wallets-compare-accounts-title-icon'>
+                {jurisdictionCardIcon}
                 <div className='wallets-compare-accounts-title-icon__separator'>
                     <WalletText align='center' as='h1' size='sm' weight='bold'>
                         {jurisdictionCardTitle}

diff --git a/.../cfd/screens/CompareAccounts/constants.ts → ...cfd/screens/CompareAccounts/constants.tsx b/.../cfd/screens/CompareAccounts/constants.ts → ...cfd/screens/CompareAccounts/constants.tsx
@@ -1,12 +1,21 @@
+import React from 'react';
+import {
+    AccountsDerivXIcon,
+    AccountsDmt5CfdsIcon,
+    AccountsDmt5DerivedIcon,
+    AccountsDmt5FinancialIcon,
+    AccountsDmt5SwfIcon,
+    PartnersProductDerivCtraderBrandLightLogoHorizontalIcon,
+} from '@deriv/quill-icons';
 import { CFD_PLATFORMS, MARKET_TYPE } from '../../constants';
 
 export const ACCOUNT_ICONS = {
-    [MARKET_TYPE.SYNTHETIC]: 'Derived',
-    [MARKET_TYPE.FINANCIAL]: 'Financial',
-    [MARKET_TYPE.ALL]: 'SwapFree',
-    [CFD_PLATFORMS.DXTRADE]: 'DerivX',
-    [CFD_PLATFORMS.CTRADER]: 'CTrader',
-    default: 'CFDs',
+    [MARKET_TYPE.SYNTHETIC]: <AccountsDmt5DerivedIcon iconSize='lg' />,
+    [MARKET_TYPE.FINANCIAL]: <AccountsDmt5FinancialIcon iconSize='lg' />,
+    [MARKET_TYPE.ALL]: <AccountsDmt5SwfIcon iconSize='lg' />,
+    [CFD_PLATFORMS.DXTRADE]: <AccountsDerivXIcon iconSize='lg' />,
+    [CFD_PLATFORMS.CTRADER]: <PartnersProductDerivCtraderBrandLightLogoHorizontalIcon height={48} width={48} />,
+    default: <AccountsDmt5CfdsIcon iconSize='lg' />,
 } as const;
 
 export const MARKET_TYPE_SHORTCODE = {

diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/tradingPlatformIcons.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/tradingPlatformIcons.tsx
diff --git a/packages/wallets/src/public/images/left-arrow.svg b/packages/wallets/src/public/images/left-arrow.svg
diff --git a/packages/wallets/src/public/images/right-arrow.svg b/packages/wallets/src/public/images/right-arrow.svg