From 83c068bb3dd6f94501283397b559ba9166896553 Mon Sep 17 00:00:00 2001
From: ameerul-deriv <ameerul@deriv.com>
Date: Wed, 1 May 2024 13:00:51 +0800
Subject: [PATCH 1/2] chore: replaced svgs with existing icons from quill-icons

---
 .../AdvertiserName/AdvertiserNameStats.tsx          |  7 +++----
 src/components/Clipboard/Clipboard.tsx              |  5 ++---
 .../Modals/ShareAdsModal/ShareAdsModal.tsx          | 13 +++++++------
 .../Modals/ShareAdsModal/ShareAdsSocials.tsx        |  4 ++--
 .../PaymentMethodFormAutocomplete.tsx               |  4 ++--
 .../components/SortDropdown/SortDropdown.tsx        |  5 ++---
 .../components/AlertComponent/AlertComponent.tsx    |  4 ++--
 .../MyProfileCounterpartiesHeader.tsx               |  4 ++--
 .../orders/screens/OrderDetails/OrderDetails.tsx    |  4 ++--
 .../Orders/OrdersTableRow/OrdersTableRow.tsx        |  4 ++--
 10 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/components/AdvertiserName/AdvertiserNameStats.tsx b/src/components/AdvertiserName/AdvertiserNameStats.tsx
index d00a4d14..0c79c847 100644
--- a/src/components/AdvertiserName/AdvertiserNameStats.tsx
+++ b/src/components/AdvertiserName/AdvertiserNameStats.tsx
@@ -2,9 +2,8 @@ import clsx from 'clsx';
 import { DeepPartial, TAdvertiserStats } from 'types';
 import { OnlineStatusIcon, OnlineStatusLabel, StarRating } from '@/components';
 import { getCurrentRoute } from '@/utils';
+import { LabelPairedCircleUserSlashSmRegularIcon, LabelPairedThumbsUpSmRegularIcon } from '@deriv/quill-icons';
 import { Text, useDevice } from '@deriv-com/ui';
-import ThumbUpIcon from '../../public/ic-thumb-up.svg?react';
-import BlockedUserOutlineIcon from '../../public/ic-user-blocked-outline.svg?react';
 import './AdvertiserNameStats.scss';
 
 /**
@@ -72,7 +71,7 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
                         </div>
                     </div>
                     <div>
-                        <ThumbUpIcon />
+                        <LabelPairedThumbsUpSmRegularIcon />
                         <Text color='less-prominent' size='sm'>
                             {recommendedAverage || 0}%
                         </Text>
@@ -81,7 +80,7 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
             )}
             {isMyProfile && (
                 <div>
-                    <BlockedUserOutlineIcon />
+                    <LabelPairedCircleUserSlashSmRegularIcon />
                     <Text color='less-prominent' size='sm'>
                         {blockedByCount || 0}
                     </Text>
diff --git a/src/components/Clipboard/Clipboard.tsx b/src/components/Clipboard/Clipboard.tsx
index 64a06f10..f4fcadeb 100644
--- a/src/components/Clipboard/Clipboard.tsx
+++ b/src/components/Clipboard/Clipboard.tsx
@@ -1,9 +1,8 @@
 //TODO: to be replaced with derivcom component
 import { useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'usehooks-ts';
+import { LegacyCopy1pxIcon, LegacyWonIcon } from '@deriv/quill-icons';
 import { Tooltip } from '@deriv-com/ui';
-import CheckmarkCircle from '../../public/ic-checkmark-circle.svg?react';
-import CopyIcon from '../../public/ic-clipboard.svg?react';
 import './Clipboard.scss';
 
 type TClipboardProps = {
@@ -35,7 +34,7 @@ const Clipboard = ({ textCopy }: TClipboardProps) => {
     return (
         <Tooltip message={isCopied ? 'Copied!' : 'Copy'} position='top'>
             <button className='clipboard' onClick={onClick}>
-                {isCopied ? <CheckmarkCircle /> : <CopyIcon />}
+                {isCopied ? <LegacyWonIcon iconSize='xs' /> : <LegacyCopy1pxIcon iconSize='xs' />}
             </button>
         </Tooltip>
     );
diff --git a/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx b/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx
index 98953321..b368265c 100644
--- a/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx
+++ b/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx
@@ -4,11 +4,8 @@ import { Clipboard } from '@/components';
 import { ADVERTISER_URL, BUY_SELL, RATE_TYPE } from '@/constants';
 import { api } from '@/hooks';
 import { useCopyToClipboard } from '@/hooks/custom-hooks';
+import { LegacyShare1pxIcon, LegacyShareLink1pxIcon, LegacyWonIcon } from '@deriv/quill-icons';
 import { Button, Divider, Modal, Text, useDevice } from '@deriv-com/ui';
-//TODO: replace below icons with the one from quill once available
-import CheckmarkCircle from '../../../public/ic-checkmark-circle.svg?react';
-import ShareIcon from '../../../public/ic-share.svg?react';
-import ShareLinkIcon from '../../../public/ic-share-link.svg?react';
 import ShareMyAdsCard from './ShareAdsCard';
 import ShareMyAdsSocials from './ShareAdsSocials';
 import './ShareAdsModal.scss';
@@ -119,7 +116,7 @@ const ShareAdsModal = ({ id, isModalOpen, onRequestClose }: TShareAdsModalProps)
                                             textSize='md'
                                             variant='outlined'
                                         >
-                                            <ShareIcon />
+                                            <LegacyShare1pxIcon iconSize='xs' />
                                             Share link
                                         </Button>
                                         <Button
@@ -129,7 +126,11 @@ const ShareAdsModal = ({ id, isModalOpen, onRequestClose }: TShareAdsModalProps)
                                             textSize='md'
                                             variant='outlined'
                                         >
-                                            {isCopied ? <CheckmarkCircle /> : <ShareLinkIcon />}
+                                            {isCopied ? (
+                                                <LegacyWonIcon iconSize='xs' />
+                                            ) : (
+                                                <LegacyShareLink1pxIcon iconSize='xs' />
+                                            )}
                                             Copy link
                                         </Button>
                                     </div>
diff --git a/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx b/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx
index 2eab274b..7649d84a 100644
--- a/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx
+++ b/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx
@@ -4,8 +4,8 @@ import {
     SocialFacebookBrandIcon,
     SocialGoogleBrandIcon,
     SocialTelegramBrandIcon,
+    SocialWhatsappBrandIcon,
 } from '@deriv/quill-icons';
-import WhatsappIcon from '../../../public/ic-whatsapp-filled.svg?react';
 import './ShareAdsSocials.scss';
 
 type TShareMyAdsSocialsProps = {
@@ -16,7 +16,7 @@ type TShareMyAdsSocialsProps = {
 //TODO: fix the icon classnames once the icons are available in quillicons
 const getShareButtons = (advertUrl: string) => [
     {
-        icon: <WhatsappIcon className='h-[34px] w-[34px]' />,
+        icon: <SocialWhatsappBrandIcon height={36} width={36} />,
         messagePropName: 'title',
         ShareButton: WhatsappShareButton,
         text: 'WhatsApp',
diff --git a/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx b/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx
index 239b7143..17238f4a 100644
--- a/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx
+++ b/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx
@@ -1,7 +1,7 @@
 import { TFormState, THooks, TPaymentMethod, TSelectedPaymentMethod } from 'types';
 import { Dropdown } from '@/components';
+import { LegacyCloseCircle1pxIcon } from '@deriv/quill-icons';
 import { Button, Input, Text } from '@deriv-com/ui';
-import CloseCircle from '../../../public/ic-close-circle.svg?react';
 
 type TPaymentMethodFormAutocompleteProps = {
     actionType: TFormState['actionType'];
@@ -29,7 +29,7 @@ const PaymentMethodFormAutocomplete = ({
                 label='Choose your payment method'
                 rightPlaceholder={
                     actionType === 'EDIT' ? null : (
-                        <CloseCircle
+                        <LegacyCloseCircle1pxIcon
                             className='payment-method-form__icon--close'
                             data-testid='dt_payment_methods_form_close_icon'
                             fill='#999999'
diff --git a/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx b/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx
index 28455911..fc8193ad 100644
--- a/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx
+++ b/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx
@@ -1,8 +1,7 @@
 import { MutableOption } from 'types';
 import { TSortByValues } from '@/utils';
-import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons';
+import { LabelPairedChevronDownMdRegularIcon, LegacySort1pxIcon } from '@deriv/quill-icons';
 import { Button, Dropdown, useDevice } from '@deriv-com/ui';
-import SortIcon from '../../../../public/ic-cashier-sort.svg?react';
 import './SortDropdown.scss';
 
 type TSortDropdownProps = {
@@ -20,7 +19,7 @@ const SortDropdown = ({ list, onSelect, setIsFilterModalOpen, value }: TSortDrop
             <Button
                 className='w-[3.2rem] !border-[#d6dadb] border-[1px]'
                 color='black'
-                icon={<SortIcon className='absolute' data-testid='dt_sort_dropdown_button' />}
+                icon={<LegacySort1pxIcon className='absolute' data-testid='dt_sort_dropdown_button' iconSize='xs' />}
                 onClick={() => setIsFilterModalOpen(true)}
                 variant='outlined'
             />
diff --git a/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx b/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx
index 222bd3db..458d84ce 100644
--- a/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx
+++ b/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx
@@ -1,5 +1,5 @@
+import { LegacyWarningIcon } from '@deriv/quill-icons';
 import { Button, Tooltip } from '@deriv-com/ui';
-import AlertIcon from '../../../../public/ic-alert-warning.svg?react';
 import './AlertComponent.scss';
 
 type TAlertComponentProps = {
@@ -10,7 +10,7 @@ const AlertComponent = ({ onClick }: TAlertComponentProps) => (
     <div className='alert-component'>
         <Tooltip message='Ad not listed' position='bottom'>
             <Button className='p-0 hover:bg-none' color='white' onClick={onClick} variant='outlined'>
-                <AlertIcon data-testid='dt_alert_icon' />
+                <LegacyWarningIcon data-testid='dt_alert_icon' iconSize='xs' />
             </Button>
         </Tooltip>
     </div>
diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx
index 15bddaf6..987ffd0c 100644
--- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx
+++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx
@@ -2,8 +2,8 @@ import { MutableOption } from 'types';
 import { Dropdown, Search } from '@/components';
 import { COUNTERPARTIES_DROPDOWN_LIST } from '@/constants';
 import { useDevice } from '@/hooks/custom-hooks';
+import { LegacySort1pxIcon } from '@deriv/quill-icons';
 import { Button, Text } from '@deriv-com/ui';
-import SortIcon from '../../../../../public/ic-cashier-sort.svg?react';
 import './MyProfileCounterpartiesHeader.scss';
 
 type MyProfileCounterpartiesHeaderProps = {
@@ -34,7 +34,7 @@ const MyProfileCounterpartiesHeader = ({
                     <Button
                         className='my-profile-counterparties-header__sort-icon'
                         color='black'
-                        icon={<SortIcon />}
+                        icon={<LegacySort1pxIcon iconSize='xs' />}
                         onClick={onClickFilter}
                         variant='outlined'
                     />
diff --git a/src/pages/orders/screens/OrderDetails/OrderDetails.tsx b/src/pages/orders/screens/OrderDetails/OrderDetails.tsx
index e191a823..dbd3378b 100644
--- a/src/pages/orders/screens/OrderDetails/OrderDetails.tsx
+++ b/src/pages/orders/screens/OrderDetails/OrderDetails.tsx
@@ -6,9 +6,9 @@ import { api } from '@/hooks';
 import { useExtendedOrderDetails } from '@/hooks/custom-hooks';
 import { ExtendedOrderDetails } from '@/hooks/custom-hooks/useExtendedOrderDetails';
 import { OrderDetailsProvider } from '@/providers/OrderDetailsProvider';
+import { LegacyLiveChatOutlineIcon } from '@deriv/quill-icons';
 import { useAuthData } from '@deriv-com/api-hooks';
 import { Button, InlineMessage, Loader, Text, useDevice } from '@deriv-com/ui';
-import ChatIcon from '../../../../public/ic-chat.svg?react';
 import { OrderDetailsCard } from '../../components/OrderDetailsCard';
 import { OrderDetailsCardFooter } from '../../components/OrderDetailsCard/OrderDetailsCardFooter';
 import { OrdersChatSection } from '../OrdersChatSection';
@@ -89,7 +89,7 @@ const OrderDetails = () => {
                                     onClick={() => setShowChat(true)}
                                     variant='contained'
                                 >
-                                    <ChatIcon className='mt-2' />
+                                    <LegacyLiveChatOutlineIcon className='mt-2' iconSize='xs' />
                                 </Button>
                             </Text>
                         )}
diff --git a/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx b/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx
index e526bc7e..01b88530 100644
--- a/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx
+++ b/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx
@@ -7,8 +7,8 @@ import { useExtendedOrderDetails, useQueryString } from '@/hooks/custom-hooks';
 import { ExtendedOrderDetails } from '@/hooks/custom-hooks/useExtendedOrderDetails';
 import { OrderRatingButton, OrderStatusTag, OrderTimer } from '@/pages/orders/components';
 import { getDistanceToServerTime } from '@/utils';
+import { LegacyLiveChatOutlineIcon } from '@deriv/quill-icons';
 import { Button, Text, useDevice } from '@deriv-com/ui';
-import ChatIcon from '../../../../../public/ic-chat.svg?react';
 import './OrdersTableRow.scss';
 
 const OrdersTableRow = ({ ...props }: DeepPartial<THooks.Order.GetList[number]>) => {
@@ -71,7 +71,7 @@ const OrdersTableRow = ({ ...props }: DeepPartial<THooks.Order.GetList[number]>)
                                 }}
                                 variant='contained'
                             >
-                                <ChatIcon />
+                                <LegacyLiveChatOutlineIcon iconSize='xs' />
                             </Button>
                         </div>
                     )}

From 655c3130d202a89ee7487bbf329e00a89c4b7cef Mon Sep 17 00:00:00 2001
From: ameerul-deriv <ameerul@deriv.com>
Date: Wed, 1 May 2024 13:32:00 +0800
Subject: [PATCH 2/2] chore: replaced legacy sort icon with new sort icon
 filter modal

---
 .../buy-sell/components/SortDropdown/SortDropdown.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx b/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx
index fc8193ad..7a2a9d05 100644
--- a/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx
+++ b/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx
@@ -1,6 +1,6 @@
 import { MutableOption } from 'types';
 import { TSortByValues } from '@/utils';
-import { LabelPairedChevronDownMdRegularIcon, LegacySort1pxIcon } from '@deriv/quill-icons';
+import { LabelPairedChevronDownMdRegularIcon, LabelPairedSortCaptionRegularIcon } from '@deriv/quill-icons';
 import { Button, Dropdown, useDevice } from '@deriv-com/ui';
 import './SortDropdown.scss';
 
@@ -19,7 +19,14 @@ const SortDropdown = ({ list, onSelect, setIsFilterModalOpen, value }: TSortDrop
             <Button
                 className='w-[3.2rem] !border-[#d6dadb] border-[1px]'
                 color='black'
-                icon={<LegacySort1pxIcon className='absolute' data-testid='dt_sort_dropdown_button' iconSize='xs' />}
+                icon={
+                    <LabelPairedSortCaptionRegularIcon
+                        className='absolute'
+                        data-testid='dt_sort_dropdown_button'
+                        height={24}
+                        width={24}
+                    />
+                }
                 onClick={() => setIsFilterModalOpen(true)}
                 variant='outlined'
             />