sandeep/refactor: 🔥 refactoring the icons using quill-icons library

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.22.10",
+        "@deriv/quill-icons": "~1.23.10",
         "@svgr/core": "^8.1.0",
         "@tanstack/react-query": "^5.29.2",
         "blockly": "^10.4.3",

src/components/bot-stopped.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@/hooks/useStore';
-import { Icon, localize } from '@/utils/tmp/dummy';
-import { Dialog, Text } from '@deriv-com/ui';
+import { localize } from '@/utils/tmp/dummy';
+import { LegacyClose1pxIcon } from '@deriv/quill-icons';
+import { Text } from '@deriv-com/ui';
+import Dialog from './shared_ui/dialog';
 
 const BotStopped = observer(() => {
     const { dashboard } = useStore();
@@ -34,7 +36,7 @@ const BotStopped = observer(() => {
                     }}
                     tabIndex={0}
                 >
-                    <Icon icon='IcCross' />
+                    <LegacyClose1pxIcon height='20px' width='20px' />
                 </div>
             </div>
             <Text as='p' align='left' size='xs' color='prominent'>

src/components/draggable/draggable.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Icon } from '@/utils/tmp/dummy';
+import { LegacyClose1pxIcon } from '@deriv/quill-icons';
 import {
     calculateHeight,
     calculateWidth,
@@ -221,7 +221,7 @@ const Draggable: React.FC<TDraggableProps> = ({
                         data-testid='dt_react_draggable-close-modal'
                         onClick={onClose}
                     >
-                        <Icon icon='IcCross' />
+                        <LegacyClose1pxIcon height='20px' width='20px' />
                     </div>
                 </div>
                 <span className='draggable-content__body' id='draggable-content-body'>

src/components/load-modal/load-modal.tsx

@@ -2,9 +2,10 @@ import { observer } from 'mobx-react-lite';
 import { tabs_title } from '@/constants/load-modal';
 import { useStore } from '@/hooks/useStore';
 import { localize } from '@/utils/tmp/dummy';
-import { Modal, Tabs } from '@deriv-com/ui';
 import GoogleDrive from '../../pages/dashboard/load-bot-preview/google-drive';
 import MobileFullPageModal from '../shared_ui/mobile-full-page-modal';
+import Modal from '../shared_ui/modal';
+import Tabs from '../shared_ui/tabs';
 import Local from './local';
 import LocalFooter from './local-footer';
 import Recent from './recent';

src/components/load-modal/local.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@/hooks/useStore';
 import { Icon, Localize, localize } from '@/utils/tmp/dummy';
+import { LegacyClose1pxIcon } from '@deriv/quill-icons';
 import { Button } from '@deriv-com/ui';
 import LocalFooter from './local-footer';
 import WorkspaceControl from './workspace-control';
@@ -31,10 +32,11 @@ const LocalComponent = observer(() => {
                     <div className='load-strategy__preview-workspace'>
                         <div id='load-strategy__blockly-container' style={{ height: '100%' }}>
                             <div className='load-strategy__local-preview-close'>
-                                <Icon
-                                    data_testid='dt_load-strategy__local-preview-close'
-                                    icon='IcCross'
+                                <LegacyClose1pxIcon
                                     onClick={() => setLoadedLocalFile(null)}
+                                    data-testid='dt_load-strategy__local-preview-close'
+                                    height='20px'
+                                    width='20px'
                                 />
                             </div>
                             <WorkspaceControl />

src/components/shared_ui/dialog/dialog.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import { useOnClickOutside } from '@/hooks/useOnClickOutside';
-import { Icon } from '@/utils/tmp/dummy';
+import { LegacyClose1pxIcon } from '@deriv/quill-icons';
 import Button from '../button';
 import Text from '../text';
 
@@ -147,7 +147,7 @@ const Dialog = ({
                             )}
                             {has_close_icon && (
                                 <div onClick={handleClose} className='dc-dialog__header--close'>
-                                    <Icon icon='IcCross' />
+                                    <LegacyClose1pxIcon height='20px' width='20px' />
                                 </div>
                             )}
                         </div>

src/components/shared_ui/mobile-dialog/mobile-dialog.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
-import { Icon } from '@/utils/tmp/dummy';
+import { LegacyClose1pxIcon } from '@deriv/quill-icons';
 import Div100vhContainer from '../div100vh-container';
 import Text from '../text/text';
 import ThemedScrollbars from '../themed-scrollbars';
@@ -137,7 +137,11 @@ const MobileDialog = (props: React.PropsWithChildren<TMobileDialog>) => {
                                     className='icons dc-btn-close dc-mobile-dialog__close-btn'
                                     onClick={props.onClose}
                                 >
-                                    <Icon icon='IcCross' className='dc-mobile-dialog__close-btn-icon' />
+                                    <LegacyClose1pxIcon
+                                        className='dc-mobile-dialog__close-btn-icon'
+                                        height='20px'
+                                        width='20px'
+                                    />
                                 </div>
                             )}
                         </div>

src/components/shared_ui/modal/modal.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
+import classNames from 'classnames';
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
-import classNames from 'classnames';
-
 import { useOnClickOutside } from '@/hooks/useOnClickOutside';
 import { Icon } from '@/utils/tmp/dummy';
-
+import { LegacyClose1pxIcon } from '@deriv/quill-icons';
 import Text from '../text/text';
-
 import Body from './modal-body';
 import Footer from './modal-footer';
 
@@ -208,7 +206,12 @@ const ModalElement = ({
                     )}
                     {has_close_icon && (
                         <div onClick={toggleModal} className='dc-modal-header__close' role='button'>
-                            <Icon icon='IcCross' color={close_icon_color} data_testid='dt_modal_close_icon' />
+                            <LegacyClose1pxIcon
+                                height='20px'
+                                width='20px'
+                                color={close_icon_color}
+                                data-testid='dt_modal_close_icon'
+                            />
                         </div>
                     )}
                 </div>

src/components/shared_ui/page-overlay/page-overlay.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import { Icon } from '@/utils/tmp/dummy';
+import { LegacyClose1pxIcon } from '@deriv/quill-icons';
 
 type TPageOverlay = {
     header?: React.ReactNode;
@@ -56,7 +57,7 @@ const PageOverlay = ({
                                     window.history.back
                                 }
                             >
-                                <Icon icon='IcCross' />
+                                <LegacyClose1pxIcon height='20px' width='20px' />
                             </div>
                         )}
                     </div>

src/pages/bot-builder/quick-strategy/form-wrappers/desktop-form-wrapper.tsx

@@ -4,7 +4,8 @@ import { useFormikContext } from 'formik';
 import { observer } from 'mobx-react-lite';
 import ThemedScrollbars from '@/components/shared_ui/themed-scrollbars';
 import { useStore } from '@/hooks/useStore';
-import { Icon, localize } from '@/utils/tmp/dummy';
+import { localize } from '@/utils/tmp/dummy';
+import { LegacyClose1pxIcon } from '@deriv/quill-icons';
 import { Button, Text } from '@deriv-com/ui';
 import {
     rudderStackSendQsEditStrategyEvent,
@@ -90,7 +91,7 @@ const FormWrapper: React.FC<TDesktopFormWrapper> = observer(({ children, onClick
                                 }
                             }}
                         >
-                            <Icon icon='IcCross' />
+                            <LegacyClose1pxIcon height='20px' width='20px' />
                         </span>
                     </div>
                 </div>

src/pages/bot-builder/toolbar/toolbar-icon.tsx

@@ -2,40 +2,24 @@ import DesktopWrapper from '@/components/shared_ui/desktop-wrapper';
 import MobileWrapper from '@/components/shared_ui/mobile-wrapper';
 import Popover from '@/components/shared_ui/popover';
 import { popover_zindex } from '@/constants/z-indexes';
-import { Icon } from '@/utils/tmp/dummy';
 
 type TToolbarIcon = {
     popover_message: string;
-    icon: string;
-    icon_id: string;
-    action: () => void;
-    icon_color?: string;
-    data_testid?: string;
+    icon: string | React.ReactNode;
 };
 
-const ToolbarIcon = ({ popover_message, icon, icon_id, icon_color, action, data_testid }: TToolbarIcon) => {
-    const renderIcon = () => (
-        <Icon
-            icon={icon}
-            id={icon_id}
-            className='toolbar__icon'
-            onClick={action}
-            {...(icon_color && { color: icon_color })}
-            data_testid={data_testid}
-        />
-    );
-
+const ToolbarIcon = ({ popover_message, icon }: TToolbarIcon) => {
     return (
         <>
-            <MobileWrapper>{renderIcon()}</MobileWrapper>
+            <MobileWrapper>{icon}</MobileWrapper>
             <DesktopWrapper>
                 <Popover
                     alignment='bottom'
                     message={popover_message}
                     zIndex={String(popover_zindex.TOOLBAR)}
                     should_disable_pointer_events
                 >
-                    {renderIcon()}
+                    {icon}
                 </Popover>
             </DesktopWrapper>
         </>

src/pages/bot-builder/toolbar/toolbar.scss

@@ -82,14 +82,32 @@
     &__icon {
         cursor: pointer;
         border: none;
-        margin: auto 1.2rem;
+        margin: auto 0.8rem;
         height: 1.6rem;
         width: 1.6rem;
         fill: var(--text-prominent);
 
         @include mobile {
             margin: 1.2rem;
         }
+
+        &.undo {
+            svg {
+                transform: scaleX(-1) rotate(180deg);
+            }
+        }
+
+        &.redo {
+            svg {
+                transform: rotate(180deg);
+            }
+        }
+
+        &--disabled {
+            pointer-events: none;
+            user-select: none;
+            opacity: 0.5;
+        }
     }
 
     &__group {

src/pages/bot-builder/toolbar/toolbar.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import Dialog from '@/components/shared_ui/dialog';
 import { useStore } from '@/hooks/useStore';
 import { Localize, localize } from '@/utils/tmp/dummy';
-import { Dialog } from '@deriv-com/ui';
 import { rudderStackSendQsOpenEventFromBotBuilder } from '../quick-strategy/analytics/rudderstack-quick-strategy';
 import ToolbarButton from './toolbar-button';
 import WorkspaceGroup from './workspace-group';