Merge pull request deriv-com#44 from deriv-com/sandeep/fix-icons

sandeep/refactor: 🔥 updated icons from quill-icons and localization
shafin-deriv · Aug 26, 2024 · d988166 · d988166
2 parents 26968f7 + 63355a0
commit d988166
Show file tree

Hide file tree

Showing 176 changed files with 342 additions and 328 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
         "@deriv-com/utils": "latest",
         "@deriv/deriv-charts": "^2.1.23",
         "@deriv/js-interpreter": "^3.0.0",
-        "@deriv/quill-icons": "~1.23.10",
+        "@deriv/quill-icons": "~1.23.12",
         "@svgr/core": "^8.1.0",
         "@tanstack/react-query": "^5.29.2",
         "blockly": "^10.4.3",

diff --git a/src/components/download/download.tsx b/src/components/download/download.tsx
@@ -1,7 +1,8 @@
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@/hooks/useStore';
 import { downloadFile, getSuccessJournalMessage, TTransaction } from '@/utils/download';
-import { Icon, localize } from '@/utils/tmp/dummy';
+import { localize } from '@/utils/tmp/dummy';
+import { Localize } from '@deriv-com/translations';
 import { Button } from '@deriv-com/ui';
 import Popover from '../shared_ui/popover';
 
@@ -96,16 +97,13 @@ const Download = observer(({ tab }: TDownloadProps) => {
                 id='download-button'
                 disabled={disabled}
                 className='download__button'
-                icon={
-                    <Icon icon='IcDbotDownload' color={disabled ? 'disabled' : undefined} className='download__icon' />
-                }
                 onClick={clickFunction}
                 variant='outlined'
                 color='black'
                 size='sm'
                 textSize='sm'
             >
-                {localize('Download')}
+                <Localize i18n_default_text='Download' />
             </Button>
         </Popover>
     );

diff --git a/src/components/flyout/flyout-block-group.tsx b/src/components/flyout/flyout-block-group.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { Localize } from '@/utils/tmp/dummy';
+import { LabelPairedPlusLgFillIcon } from '@deriv/quill-icons';
 import { Button, Text } from '@deriv-com/ui';
 import FlyoutBlock from './flyout-block';
 
@@ -23,11 +24,14 @@ const FlyoutBlockGroup = ({ onInfoClick, block_node, is_active, should_hide_disp
                 id={`db-flyout__add--${block_type}`}
                 data-testid={`dt_flyout__add_${block_type}`}
                 className='flyout__button-add flyout__button-add--hide'
-                has_effect
-                is_plus
                 onClick={() => window.Blockly.derivWorkspace.addBlockNode(block_node)}
                 type='button'
-            />
+                variant='outlined'
+                color='black'
+                size='sm'
+            >
+                <LabelPairedPlusLgFillIcon height='24px' width='24px' />
+            </Button>
         </div>
     );
 

diff --git a/src/components/flyout/help-contents/flyout-help-base.tsx b/src/components/flyout/help-contents/flyout-help-base.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@/hooks/useStore';
 import { help_content_config, help_content_types } from '@/utils/help-content/help-content.config';
-import { localize } from '@/utils/tmp/dummy';
 import { LabelPairedArrowLeftCaptionRegularIcon } from '@deriv/quill-icons';
+import { localize } from '@deriv-com/translations';
 import { Button, Text } from '@deriv-com/ui';
 import FlyoutBlock from '../flyout-block';
 import FlyoutImage from './flyout-img';

diff --git a/src/components/run-panel/run-panel.tsx b/src/components/run-panel/run-panel.tsx
@@ -12,7 +12,7 @@ import Transactions from '@/components/transactions';
 import { DBOT_TABS } from '@/constants/bot-contents';
 import { popover_zindex } from '@/constants/z-indexes';
 import { useStore } from '@/hooks/useStore';
-import { Localize, localize } from '@/utils/tmp/dummy';
+import { Localize, localize } from '@deriv-com/translations';
 import { Button, Modal, Text } from '@deriv-com/ui';
 import ThemedScrollbars from '../shared_ui/themed-scrollbars';
 
@@ -130,13 +130,13 @@ const DrawerContent = ({ active_index, is_drawer_open, active_tour, setActiveTab
     return (
         <>
             <Tabs active_index={active_index} onTabItemClick={setActiveTabIndex} top>
-                <div id='db-run-panel-tab__summary' label={localize('Summary')}>
+                <div id='db-run-panel-tab__summary' label={<Localize i18n_default_text='Summary' />}>
                     <Summary is_drawer_open={is_drawer_open} />
                 </div>
-                <div id='db-run-panel-tab__transactions' label={localize('Transactions')}>
+                <div id='db-run-panel-tab__transactions' label={<Localize i18n_default_text='Transactions' />}>
                     <Transactions is_drawer_open={is_drawer_open} />
                 </div>
-                <div id='db-run-panel-tab__journal' label={localize('Journal')}>
+                <div id='db-run-panel-tab__journal' label={<Localize i18n_default_text='Journal' />}>
                     <Journal />
                 </div>
             </Tabs>
@@ -157,7 +157,9 @@ const DrawerFooter = ({ is_clear_stat_disabled, onClearStatClick }: TDrawerFoote
             size='sm'
             textSize='sm'
         >
-            <span>{localize('Reset')}</span>
+            <span>
+                <Localize i18n_default_text='Reset' />
+            </span>
         </Button>
     </div>
 );
@@ -189,40 +191,38 @@ const StatisticsInfoModal = ({
                 <div className={classNames('statistics__modal-body', { 'statistics__modal-body--mobile': is_mobile })}>
                     <ThemedScrollbars className='statistics__modal-scrollbar'>
                         <Text as='p' weight='bold' className='statistics__modal-body--content no-margin'>
-                            {localize('Total stake')}
+                            <Localize i18n_default_text='Total stake' />
+                        </Text>
+                        <Text as='p'>
+                            <Localize i18n_default_text='Total stake since you last cleared your stats.' />
                         </Text>
-                        <Text as='p'>{localize('Total stake since you last cleared your stats.')}</Text>
                         <Text as='p' weight='bold' className='statistics__modal-body--content'>
-                            {localize('Total payout')}
+                            <Localize i18n_default_text='Total payout' />
                         </Text>
                         <Text as='p'>{localize('Total payout since you last cleared your stats.')}</Text>
                         <Text as='p' weight='bold' className='statistics__modal-body--content'>
-                            {localize('No. of runs')}
+                            <Localize i18n_default_text='No. of runs' />
                         </Text>
                         <Text as='p'>
-                            {localize(
-                                'The number of times your bot has run since you last cleared your stats. Each run includes the execution of all the root blocks.'
-                            )}
+                            <Localize i18n_default_text='The number of times your bot has run since you last cleared your stats. Each run includes the execution of all the root blocks.' />
                         </Text>
                         <Text as='p' weight='bold' className='statistics__modal-body--content'>
-                            {localize('Contracts lost')}
+                            <Localize i18n_default_text='Contracts lost' />
                         </Text>
                         <Text as='p'>
-                            {localize('The number of contracts you have lost since you last cleared your stats.')}
+                            <Localize i18n_default_text='The number of contracts you have lost since you last cleared your stats.' />
                         </Text>
                         <Text as='p' weight='bold' className='statistics__modal-body--content'>
-                            {localize('Contracts won')}
+                            <Localize i18n_default_text='Contracts won' />
                         </Text>
                         <Text as='p'>
-                            {localize('The number of contracts you have won since you last cleared your stats.')}
+                            <Localize i18n_default_text='The number of contracts you have won since you last cleared your stats.' />
                         </Text>
                         <Text as='p' weight='bold' className='statistics__modal-body--content'>
-                            {localize('Total profit/loss')}
+                            <Localize i18n_default_text='Total profit/loss' />
                         </Text>
                         <Text as='p'>
-                            {localize(
-                                'Your total profit/loss since you last cleared your stats. It is the difference between your total payout and your total stake.'
-                            )}
+                            <Localize i18n_default_text='Your total profit/loss since you last cleared your stats. It is the difference between your total payout and your total stake.' />
                         </Text>
                     </ThemedScrollbars>
                 </div>

diff --git a/src/components/shared_ui/popover/popover.tsx b/src/components/shared_ui/popover/popover.tsx
@@ -2,7 +2,11 @@ import React, { RefObject } from 'react';
 import classNames from 'classnames';
 import { ArrowContainer, Popover as TinyPopover } from 'react-tiny-popover';
 import { useHover, useHoverCallback } from '@/hooks/useHover';
-import { Icon } from '@/utils/tmp/dummy';
+import {
+    LabelPairedCircleDotCaptionFillIcon,
+    LabelPairedCircleInfoCaptionRegularIcon,
+    LegacyWarningIcon,
+} from '@deriv/quill-icons';
 import { Text, useDevice } from '@deriv-com/ui';
 import { TPopoverProps } from '../types';
 
@@ -189,7 +193,7 @@ const Popover = ({
                                 >
                                     {!disable_message_icon && icon === 'info' && (
                                         <i className='dc-popover__bubble__icon'>
-                                            <Icon icon='IcInfoBlue' />
+                                            <LabelPairedCircleInfoCaptionRegularIcon />
                                         </i>
                                     )}
                                     {(has_error && (
@@ -214,9 +218,13 @@ const Popover = ({
                                         message ? 'dc-popover__target__icon' : 'dc-popover__target__icon--disabled'
                                     }
                                 >
-                                    {icon === 'info' && <Icon icon='IcInfoOutline' className={icon_class_name} />}
-                                    {icon === 'question' && <Icon icon='IcUnknown' className={icon_class_name} />}
-                                    {icon === 'dot' && <Icon icon='IcCircle' className={icon_class_name} size={4} />}
+                                    {icon === 'info' && (
+                                        <LabelPairedCircleInfoCaptionRegularIcon className={icon_class_name} />
+                                    )}
+                                    {icon === 'question' && <LegacyWarningIcon className={icon_class_name} />}
+                                    {icon === 'dot' && (
+                                        <LabelPairedCircleDotCaptionFillIcon className={icon_class_name} />
+                                    )}
                                     {icon === 'counter' && <span className={icon_class_name}>{counter}</span>}
                                 </i>
                             )}

diff --git a/src/components/shared_ui/tooltip/tooltip.tsx b/src/components/shared_ui/tooltip/tooltip.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { useHover } from '@/hooks/useHover';
 import { Icon } from '@/utils/tmp/dummy';
+import { LabelPairedCircleInfoCaptionRegularIcon } from '@deriv/quill-icons';
 
 type TTooltip = {
     alignment: string;
@@ -33,9 +34,8 @@ const Tooltip = ({
         >
             {icon === 'info' && (
                 <React.Fragment>
-                    <Icon icon='IcInfoOutline' className={icon_class} ref={hover_ref} />
-                    <Icon
-                        icon='IcInfoBlue'
+                    <LabelPairedCircleInfoCaptionRegularIcon className={icon_class} ref={hover_ref} />
+                    <LabelPairedCircleInfoCaptionRegularIcon
                         className={classNames(`${classNameIcon}-balloon-icon`, 'dc-tooltip__balloon-icon', {
                             'dc-tooltip__balloon-icon--show': show_tooltip_balloon_icon_on_hover,
                         })}

diff --git a/src/components/summary/summary-card.tsx b/src/components/summary/summary-card.tsx
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { getCardLabels, getContractTypeDisplay } from '@/components/shared';
 import ContractCard from '@/components/shared_ui/contract-card';
 import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
+import { Localize } from '@deriv-com/translations';
 import { Text } from '@deriv-com/ui';
 
 const SummaryCard = observer(({ contract_info, is_contract_loading }: TSummaryCardProps) => {
@@ -96,9 +96,11 @@ const SummaryCard = observer(({ contract_info, is_contract_loading }: TSummaryCa
             )}
             {!is_contract_loading && !contract_info && (
                 <Text as='p' LineHeight='md' size='sm' weight='lighter'>
-                    {localize('When you’re ready to trade, hit ')}
-                    <strong>{localize('Run')}</strong>
-                    {localize('. You’ll be able to track your bot’s performance here.')}
+                    <Localize i18n_default_text='When you’re ready to trade, hit ' />
+                    <strong>
+                        <Localize i18n_default_text='Run' />
+                    </strong>
+                    <Localize i18n_default_text='. You’ll be able to track your bot’s performance here.' />
                 </Text>
             )}
         </div>

diff --git a/src/components/transactions/transactions.tsx b/src/components/transactions/transactions.tsx
@@ -8,7 +8,7 @@ import { contract_stages } from '@/constants/contract-stage';
 import { transaction_elements } from '@/constants/transactions';
 import { useNewRowTransition } from '@/hooks/useNewRowTransition';
 import { useStore } from '@/hooks/useStore';
-import { DataList, Icon } from '@/utils/tmp/dummy';
+import { DataList } from '@/utils/tmp/dummy';
 import { DerivLightEmptyCardboardBoxIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
 import { Button, Text } from '@deriv-com/ui';
@@ -116,7 +116,6 @@ const Transactions = observer(({ is_drawer_open }: TTransactions) => {
                     onClick={() => {
                         toggleTransactionDetailsModal(true);
                     }}
-                    icon={<Icon icon='IcDbotViewDetail' size={18} />}
                     variant='outlined'
                     color='black'
                     size='sm'

diff --git a/src/constants/dashboard.ts b/src/constants/dashboard.ts
@@ -1,5 +1,3 @@
-import { localize } from '@/utils/tmp/dummy';
-
 export const STRATEGY = {
     OPEN: 'open',
     EDIT: 'edit',
@@ -9,36 +7,3 @@ export const STRATEGY = {
     PREVIEW_LIST: 'list',
     INIT: 'init',
 };
-
-export const MENU_DESKTOP = [
-    {
-        type: STRATEGY.OPEN,
-        icon: 'IcOpen',
-    },
-    {
-        type: STRATEGY.SAVE,
-        icon: 'IcSave',
-    },
-    {
-        type: STRATEGY.DELETE,
-        icon: 'IcTrash',
-    },
-];
-
-export const CONTEXT_MENU_MOBILE = [
-    {
-        type: STRATEGY.OPEN,
-        icon: 'IcOpen',
-        label: localize('Open'),
-    },
-    {
-        type: STRATEGY.SAVE,
-        icon: 'IcSave',
-        label: localize('Save'),
-    },
-    {
-        type: STRATEGY.DELETE,
-        icon: 'IcTrash',
-        label: localize('Delete'),
-    },
-];
diff --git a/src/external/bot-skeleton/scratch/backward-compatibility.js b/src/external/bot-skeleton/scratch/backward-compatibility.js
@@ -1,4 +1,4 @@
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 import { config } from '../constants/config';
 import ApiHelpers from '../services/api/api-helpers';
 

diff --git a/src/external/bot-skeleton/scratch/blocks/Advanced/Functions/procedures_callnoreturn.js b/src/external/bot-skeleton/scratch/blocks/Advanced/Functions/procedures_callnoreturn.js
@@ -1,4 +1,4 @@
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 
 window.Blockly.Blocks.procedures_callnoreturn = {
     init() {

diff --git a/src/external/bot-skeleton/scratch/blocks/Advanced/Functions/procedures_callreturn.js b/src/external/bot-skeleton/scratch/blocks/Advanced/Functions/procedures_callreturn.js
@@ -1,4 +1,4 @@
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 
 window.Blockly.Blocks.procedures_callreturn = {
     init() {

diff --git a/src/external/bot-skeleton/scratch/blocks/Advanced/Functions/procedures_defnoreturn.js b/src/external/bot-skeleton/scratch/blocks/Advanced/Functions/procedures_defnoreturn.js
@@ -1,4 +1,4 @@
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 import { removeExtraInput } from '../../../utils';
 import { plusIconLight } from '../../images';
 

diff --git a/src/external/bot-skeleton/scratch/blocks/Advanced/Functions/procedures_defreturn.js b/src/external/bot-skeleton/scratch/blocks/Advanced/Functions/procedures_defreturn.js
@@ -1,4 +1,4 @@
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 import { plusIconDark } from '../../images';
 
 window.Blockly.Blocks.procedures_defreturn = {

diff --git a/src/external/bot-skeleton/scratch/blocks/Advanced/Functions/procedures_ifreturn.js b/src/external/bot-skeleton/scratch/blocks/Advanced/Functions/procedures_ifreturn.js
@@ -1,4 +1,4 @@
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 
 /**
  * Block for conditionally returning a value from a procedure.

diff --git a/src/external/bot-skeleton/scratch/blocks/Advanced/List/lists_create_with.js b/src/external/bot-skeleton/scratch/blocks/Advanced/List/lists_create_with.js
@@ -1,4 +1,4 @@
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 import { runGroupedEvents, runIrreversibleEvents } from '../../../utils';
 import { plusIconDark } from '../../images';
 

diff --git a/src/external/bot-skeleton/scratch/blocks/Advanced/List/lists_getIndex.js b/src/external/bot-skeleton/scratch/blocks/Advanced/List/lists_getIndex.js
@@ -1,4 +1,4 @@
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 
 window.Blockly.Blocks.lists_getIndex = {
     init() {

diff --git a/src/external/bot-skeleton/scratch/blocks/Advanced/List/lists_getSublist.js b/src/external/bot-skeleton/scratch/blocks/Advanced/List/lists_getSublist.js
@@ -1,4 +1,4 @@
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 
 window.Blockly.Blocks.lists_getSublist = {
     init() {

diff --git a/src/external/bot-skeleton/scratch/blocks/Advanced/List/lists_indexOf.js b/src/external/bot-skeleton/scratch/blocks/Advanced/List/lists_indexOf.js
@@ -1,4 +1,4 @@
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 
 window.Blockly.Blocks.lists_indexOf = {
     init() {

diff --git a/src/external/bot-skeleton/scratch/blocks/Advanced/List/lists_isEmpty.js b/src/external/bot-skeleton/scratch/blocks/Advanced/List/lists_isEmpty.js
@@ -1,4 +1,4 @@
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 
 window.Blockly.Blocks.lists_isEmpty = {
     init() {