henry/grwt-3242/chore: quill-icons package update (#17656)

* chore: package update * fix: replace icons * fix: wrong import * fix: add color * fix: failing test * fix: failing test 2 * fix: change to css variable * chore: package-lock update * fix: build fail * fix: build fail
deriv-com · Dec 13, 2024 · cf0295f · cf0295f
1 parent a29ece1
commit cf0295f
Show file tree

Hide file tree

Showing 16 changed files with 307 additions and 374 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/account/package.json b/packages/account/package.json
@@ -38,7 +38,7 @@
         "@deriv-com/quill-ui": "1.24.2",
         "@deriv/components": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
-        "@deriv/quill-icons": "1.23.3",
+        "@deriv/quill-icons": "2.2.1",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",

diff --git a/packages/account/src/Sections/Security/Passwords/__tests__/deriv-mt5-password.spec.tsx b/packages/account/src/Sections/Security/Passwords/__tests__/deriv-mt5-password.spec.tsx
@@ -6,7 +6,7 @@ import { mockStore, StoreProvider } from '@deriv/stores';
 
 jest.mock('@deriv/quill-icons', () => ({
     ...jest.requireActual('@deriv/quill-icons'),
-    PartnersProductDerivMt5BrandLightLogoHorizontalIcon: () => 'PartnersProductDerivMt5BrandLightLogoHorizontalIcon',
+    PartnersProductBrandLightDerivMt5LogoIcon: () => 'PartnersProductBrandLightDerivMt5LogoIcon',
 }));
 
 jest.mock('@deriv/api', () => ({
@@ -45,7 +45,7 @@ describe('<DerivMT5Password />', () => {
         expect(
             screen.getByText(/use your to log in to your Deriv MT5 accounts on the desktop, web and mobile apps\./i)
         ).toBeInTheDocument();
-        expect(screen.queryByText(/PartnersProductDerivMt5BrandLightLogoHorizontalIcon/i)).toBeInTheDocument();
+        expect(screen.queryByText(/PartnersProductBrandLightDerivMt5LogoIcon/i)).toBeInTheDocument();
         expect(screen.getByRole('button', { name: /Change password/i })).toBeInTheDocument();
         expect(screen.queryByText(/unlink from/i)).not.toBeInTheDocument();
     });

diff --git a/packages/account/src/Sections/Security/Passwords/__tests__/email-password-title.spec.tsx b/packages/account/src/Sections/Security/Passwords/__tests__/email-password-title.spec.tsx
@@ -6,7 +6,7 @@ import { AccountsDerivXIcon, BrandDerivLogoCoralIcon, LegacyEmailIcon } from '@d
 jest.mock('@deriv/quill-icons', () => ({
     AccountsDerivXIcon: jest.fn(() => null),
     BrandDerivLogoCoralIcon: jest.fn(() => null),
-    PartnersProductDerivMt5BrandLightLogoHorizontalIcon: jest.fn(() => null),
+    PartnersProductBrandLightDerivMt5LogoIcon: jest.fn(() => null),
     LegacyEmailIcon: jest.fn(() => null),
 }));
 

diff --git a/packages/account/src/Sections/Security/Passwords/email-password-title.tsx b/packages/account/src/Sections/Security/Passwords/email-password-title.tsx
@@ -3,7 +3,7 @@ import {
     AccountsDerivXIcon,
     BrandDerivLogoCoralIcon,
     LegacyEmailIcon,
-    PartnersProductDerivMt5BrandLightLogoHorizontalIcon,
+    PartnersProductBrandLightDerivMt5LogoIcon,
 } from '@deriv/quill-icons';
 
 type TEmailPasswordTitleProps = {
@@ -15,7 +15,7 @@ const EmailPasswordTitle = ({ icon, title }: TEmailPasswordTitleProps) => {
     const displayIcon = {
         deriv_email: <LegacyEmailIcon iconSize='sm' />,
         deriv_password: <BrandDerivLogoCoralIcon height={24} width={24} />,
-        deriv_mt5_password: <PartnersProductDerivMt5BrandLightLogoHorizontalIcon height={24} width={24} />,
+        deriv_mt5_password: <PartnersProductBrandLightDerivMt5LogoIcon height={24} width={24} />,
         deriv_x_password: <AccountsDerivXIcon iconSize='sm' />,
     };
 

diff --git a/packages/appstore/package.json b/packages/appstore/package.json
@@ -37,7 +37,7 @@
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
-        "@deriv/quill-icons": "1.23.3",
+        "@deriv/quill-icons": "2.2.1",
         "@deriv/wallets": "^1.0.0",
         "classnames": "^2.2.6",
         "mobx": "^6.6.1",

diff --git a/packages/bot-web-ui/package.json b/packages/bot-web-ui/package.json
@@ -79,7 +79,7 @@
         "@deriv/components": "^1.0.0",
         "@deriv/deriv-charts": "^2.7.2",
         "@deriv/hooks": "^1.0.0",
-        "@deriv/quill-icons": "1.23.3",
+        "@deriv/quill-icons": "2.2.1",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -112,8 +112,7 @@
         "@deriv/deriv-charts": "^2.7.2",
         "@deriv/hooks": "^1.0.0",
         "@deriv/p2p": "^0.7.3",
-        "@deriv/quill-design": "^1.3.2",
-        "@deriv/quill-icons": "1.23.3",
+        "@deriv/quill-icons": "2.2.1",
         "@deriv/reports": "^1.0.0",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",

diff --git a/packages/core/src/App/app.jsx b/packages/core/src/App/app.jsx
@@ -3,7 +3,7 @@ import WS from 'Services/ws-methods';
 import PropTypes from 'prop-types';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { Analytics } from '@deriv-com/analytics';
-import { BreakpointProvider } from '@deriv/quill-design';
+import { BreakpointProvider } from '@deriv-com/quill-ui';
 import { APIProvider } from '@deriv/api';
 import { CashierStore } from '@deriv/cashier';
 import { CFDStore } from '@deriv/cfd';

diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -47,7 +47,7 @@
     },
     "dependencies": {
         "@deriv-com/analytics": "1.26.2",
-        "@deriv/quill-icons": "1.23.3",
+        "@deriv/quill-icons": "2.2.1",
         "@deriv/api-types": "1.0.172",
         "@deriv/translations": "^1.0.0",
         "@deriv-com/utils": "^0.0.40",

diff --git a/packages/trader/package.json b/packages/trader/package.json
@@ -102,7 +102,7 @@
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",
         "@deriv/utils": "^1.0.0",
-        "@deriv/quill-icons": "1.23.3",
+        "@deriv/quill-icons": "2.2.1",
         "@lottiefiles/dotlottie-react": "0.7.2",
         "@types/react-loadable": "^5.5.6",
         "classnames": "^2.2.6",

diff --git a/packages/wallets/package.json b/packages/wallets/package.json
@@ -19,7 +19,7 @@
         "@deriv-com/ui": "1.36.4",
         "@deriv-com/utils": "^0.0.40",
         "@deriv/api-v2": "^1.0.0",
-        "@deriv/quill-icons": "1.23.3",
+        "@deriv/quill-icons": "2.2.1",
         "@deriv/utils": "^1.0.0",
         "@tanstack/react-table": "^8.10.3",
         "@zxcvbn-ts/core": "^3.0.4",

diff --git a/packages/wallets/src/constants/icons.tsx b/packages/wallets/src/constants/icons.tsx
@@ -17,10 +17,10 @@ import {
     CurrencyUsdIcon,
     CurrencyUsdtIcon,
     CurrencyXrpIcon,
-    DerivProductDerivBotBrandLightLogoHorizontalIcon,
-    DerivProductDerivGoBrandLightLogoHorizontalIcon,
-    DerivProductDerivTraderBrandLightLogoHorizontalIcon,
-    PartnersProductSmarttraderBrandLightLogoIcon,
+    DerivProductBrandLightDerivBotLogoIcon,
+    DerivProductBrandLightDerivGoLogoIcon,
+    DerivProductBrandLightDerivTraderLogoIcon,
+    PartnersProductBrandLightSmarttraderLogoIcon,
     PaymentMethodBitcoinBrandIcon,
     PaymentMethodDerivDemoBrandDarkIcon,
     PaymentMethodEthereumBrandIcon,
@@ -33,10 +33,10 @@ import AccountsDmt5GoldIcon from '../public/images/account-dmt5-gold-icon.svg';
 import { TCurrencyIconTypes, TIconTypes } from '../types';
 
 export const AppIcons: TIconTypes = {
-    bot: DerivProductDerivBotBrandLightLogoHorizontalIcon,
-    derivgo: DerivProductDerivGoBrandLightLogoHorizontalIcon,
-    smarttrader: PartnersProductSmarttraderBrandLightLogoIcon,
-    trader: DerivProductDerivTraderBrandLightLogoHorizontalIcon,
+    bot: DerivProductBrandLightDerivBotLogoIcon,
+    derivgo: DerivProductBrandLightDerivGoLogoIcon,
+    smarttrader: PartnersProductBrandLightSmarttraderLogoIcon,
+    trader: DerivProductBrandLightDerivTraderLogoIcon,
 };
 
 export const CFDPlatformIcons: TIconTypes = {

diff --git a/packages/wallets/src/features/cashier/modules/TransactionStatus/TransactionStatus.tsx b/packages/wallets/src/features/cashier/modules/TransactionStatus/TransactionStatus.tsx
@@ -50,7 +50,7 @@ const TransactionStatus: React.FC<TTransactionStatus> = ({ transactionType }) =>
                 <Text align='start' size='sm' weight='bold'>
                     <Localize i18n_default_text='Transaction status' />
                 </Text>
-                {isError && <LegacyWarningIcon iconSize='xs' />}
+                {isError && <LegacyWarningIcon fill='var(--status-warning)' iconSize='xs' />}
             </div>
             <Divider color='var(--general-active)' />
             <div className='wallets-transaction-status__body'>

diff --git a/packages/wallets/src/features/cfd/constants.tsx b/packages/wallets/src/features/cfd/constants.tsx
@@ -7,12 +7,12 @@ import {
     AccountsDmt5StandardIcon,
     AccountsDmt5SwfIcon,
     AccountsDmt5ZrsIcon,
-    DerivProductDerivXBrandDarkWordmarkIcon,
+    DerivProductBrandDarkDerivXWordmarkIcon,
     LabelPairedLinuxXlIcon,
     LabelPairedMacosXlIcon,
     LabelPairedWindowsXlIcon,
-    PartnersProductDerivCtraderBrandDarkWordmarkHorizontalIcon,
-    PartnersProductDerivMt5BrandLightLogoHorizontalIcon,
+    PartnersProductBrandDarkDerivCtraderWordmarkIcon,
+    PartnersProductBrandLightDerivMt5LogoWordmarkIcon,
 } from '@deriv/quill-icons';
 import { localize, useTranslations } from '@deriv-com/translations';
 import AccountsDmt5GoldIcon from '../../public/images/account-dmt5-gold-icon.svg';
@@ -169,7 +169,7 @@ export const getAppToContentMapper = (
             title: localize('MetaTrader 5 MacOS app'),
         },
         web: {
-            icon: <PartnersProductDerivMt5BrandLightLogoHorizontalIcon height={32} width={32} />,
+            icon: <PartnersProductBrandLightDerivMt5LogoWordmarkIcon height={32} width={32} />,
             link: mt5TradeAccount ? getWebtraderUrl({ mt5TradeAccount }) : '',
             text: localize('Open'),
             title: localize('MetaTrader 5 web'),
@@ -183,8 +183,8 @@ export const getAppToContentMapper = (
     }) as const;
 
 export const PlatformToLabelIconMapper = {
-    ctrader: <PartnersProductDerivCtraderBrandDarkWordmarkHorizontalIcon height={8} width={58} />,
-    dxtrade: <DerivProductDerivXBrandDarkWordmarkIcon height={10} width={35} />,
+    ctrader: <PartnersProductBrandDarkDerivCtraderWordmarkIcon height={8} width={58} />,
+    dxtrade: <DerivProductBrandDarkDerivXWordmarkIcon height={10} width={35} />,
 } as const;
 
 export const getServiceMaintenanceMessages = (localize: ReturnType<typeof useTranslations>['localize']) =>

diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/constants.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/constants.tsx
@@ -6,7 +6,7 @@ import {
     AccountsDmt5StandardIcon,
     AccountsDmt5SwfIcon,
     AccountsDmt5ZrsIcon,
-    PartnersProductDerivCtraderBrandLightLogoHorizontalIcon,
+    PartnersProductBrandLightDerivCtraderLogoIcon,
 } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
 import AccountsDmt5GoldIcon from '../../../../public/images/account-dmt5-gold-icon.svg';
@@ -31,7 +31,7 @@ export const ACCOUNT_ICONS = {
     },
     [MT5_PRODUCT.SWAP_FREE]: (props: TProps) => <AccountsDmt5SwfIcon {...props} />,
     [CFD_PLATFORMS.DXTRADE]: (props: TProps) => <AccountsDerivXIcon {...props} />,
-    [CFD_PLATFORMS.CTRADER]: (props: TProps) => <PartnersProductDerivCtraderBrandLightLogoHorizontalIcon {...props} />,
+    [CFD_PLATFORMS.CTRADER]: (props: TProps) => <PartnersProductBrandLightDerivCtraderLogoIcon {...props} />,
     [MT5_PRODUCT.ZERO_SPREAD]: (props: TProps) => <AccountsDmt5ZrsIcon {...props} />,
     [MT5_PRODUCT.GOLD]: (props: TProps) => <AccountsDmt5GoldIcon {...props} />,
     default: (props: TProps) => <AccountsDmt5CfdsIcon {...props} />,