From d1d0b9b6db1fc40309b757751ba54cdffb57697e Mon Sep 17 00:00:00 2001 From: Sandeep Date: Tue, 20 Aug 2024 17:34:58 +0800 Subject: [PATCH] refactor: :fire: refactoring the icons using quill-icons library --- package-lock.json | 9 +- package.json | 2 +- src/components/bot-stopped.tsx | 8 +- src/components/draggable/draggable.tsx | 4 +- src/components/load-modal/load-modal.tsx | 3 +- src/components/load-modal/local.tsx | 8 +- src/components/shared_ui/dialog/dialog.tsx | 4 +- .../shared_ui/mobile-dialog/mobile-dialog.tsx | 8 +- src/components/shared_ui/modal/modal.tsx | 13 +- .../shared_ui/page-overlay/page-overlay.tsx | 3 +- .../form-wrappers/desktop-form-wrapper.tsx | 5 +- .../bot-builder/toolbar/toolbar-icon.tsx | 24 +-- src/pages/bot-builder/toolbar/toolbar.scss | 20 ++- src/pages/bot-builder/toolbar/toolbar.tsx | 2 +- .../bot-builder/toolbar/workspace-group.tsx | 162 +++++++++++++----- src/pages/dashboard/cards.tsx | 27 ++- src/pages/dashboard/dashboard.scss | 1 - .../load-bot-preview/google-drive.tsx | 2 +- .../dashboard/load-bot-preview/save-modal.tsx | 39 ++--- src/pages/dashboard/user-guide.tsx | 8 +- .../onboarding-tour-mobile.tsx | 10 +- 21 files changed, 225 insertions(+), 137 deletions(-) diff --git a/package-lock.json b/package-lock.json index dc141245..94346feb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,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", @@ -3016,9 +3016,10 @@ } }, "node_modules/@deriv/quill-icons": { - "version": "1.22.13", - "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.22.13.tgz", - "integrity": "sha512-m2dfn7MbQRnudgHac7n2qnGWpzfHnvDSC644ZPSZQuuY5CYn5qBr69c5fmCfYVWBaZmZRklcw55kutxmUMmcTw==", + "version": "1.23.10", + "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.23.10.tgz", + "integrity": "sha512-RcxTQ6jzYgDQBhMuBE2Tq7AFgJvlmTIYtuXv3HLUefxFVIUQhDgSerkiHS5y62VYlD6TvVhVqHY/UcdzYEqqAw==", + "license": "ISC", "peerDependencies": { "react": ">= 16", "react-dom": ">= 16" diff --git a/package.json b/package.json index ff96d81e..0a145ed6 100644 --- 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.22.10", + "@deriv/quill-icons": "~1.23.10", "@svgr/core": "^8.1.0", "@tanstack/react-query": "^5.29.2", "blockly": "^10.4.3", diff --git a/src/components/bot-stopped.tsx b/src/components/bot-stopped.tsx index ca4d9ade..0f78ae51 100644 --- a/src/components/bot-stopped.tsx +++ b/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} > - + diff --git a/src/components/draggable/draggable.tsx b/src/components/draggable/draggable.tsx index a1ce1f00..759dc0ad 100644 --- a/src/components/draggable/draggable.tsx +++ b/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 = ({ data-testid='dt_react_draggable-close-modal' onClick={onClose} > - + diff --git a/src/components/load-modal/load-modal.tsx b/src/components/load-modal/load-modal.tsx index 38633cd3..ed69af0c 100644 --- a/src/components/load-modal/load-modal.tsx +++ b/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'; diff --git a/src/components/load-modal/local.tsx b/src/components/load-modal/local.tsx index 75edc2d2..f809409e 100644 --- a/src/components/load-modal/local.tsx +++ b/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(() => {
- setLoadedLocalFile(null)} + data-testid='dt_load-strategy__local-preview-close' + height='20px' + width='20px' />
diff --git a/src/components/shared_ui/dialog/dialog.tsx b/src/components/shared_ui/dialog/dialog.tsx index 07a6ad60..80cfaf40 100644 --- a/src/components/shared_ui/dialog/dialog.tsx +++ b/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 && (
- +
)}
diff --git a/src/components/shared_ui/mobile-dialog/mobile-dialog.tsx b/src/components/shared_ui/mobile-dialog/mobile-dialog.tsx index c8fc89e1..a6eaab4d 100644 --- a/src/components/shared_ui/mobile-dialog/mobile-dialog.tsx +++ b/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) => { className='icons dc-btn-close dc-mobile-dialog__close-btn' onClick={props.onClose} > - +
)} diff --git a/src/components/shared_ui/modal/modal.tsx b/src/components/shared_ui/modal/modal.tsx index b987388f..c330c195 100644 --- a/src/components/shared_ui/modal/modal.tsx +++ b/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 && (
- +
)} diff --git a/src/components/shared_ui/page-overlay/page-overlay.tsx b/src/components/shared_ui/page-overlay/page-overlay.tsx index 12c1da2e..a3532f0e 100644 --- a/src/components/shared_ui/page-overlay/page-overlay.tsx +++ b/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 } > - + )} diff --git a/src/pages/bot-builder/quick-strategy/form-wrappers/desktop-form-wrapper.tsx b/src/pages/bot-builder/quick-strategy/form-wrappers/desktop-form-wrapper.tsx index ad694479..00176544 100644 --- a/src/pages/bot-builder/quick-strategy/form-wrappers/desktop-form-wrapper.tsx +++ b/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 = observer(({ children, onClick } }} > - + diff --git a/src/pages/bot-builder/toolbar/toolbar-icon.tsx b/src/pages/bot-builder/toolbar/toolbar-icon.tsx index 006c4319..b1491beb 100644 --- a/src/pages/bot-builder/toolbar/toolbar-icon.tsx +++ b/src/pages/bot-builder/toolbar/toolbar-icon.tsx @@ -2,32 +2,16 @@ 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 = () => ( - - ); - +const ToolbarIcon = ({ popover_message, icon }: TToolbarIcon) => { return ( <> - {renderIcon()} + {icon} - {renderIcon()} + {icon} diff --git a/src/pages/bot-builder/toolbar/toolbar.scss b/src/pages/bot-builder/toolbar/toolbar.scss index 4d4f310d..00acd49e 100644 --- a/src/pages/bot-builder/toolbar/toolbar.scss +++ b/src/pages/bot-builder/toolbar/toolbar.scss @@ -82,7 +82,7 @@ &__icon { cursor: pointer; border: none; - margin: auto 1.2rem; + margin: auto 0.8rem; height: 1.6rem; width: 1.6rem; fill: var(--text-prominent); @@ -90,6 +90,24 @@ @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 { diff --git a/src/pages/bot-builder/toolbar/toolbar.tsx b/src/pages/bot-builder/toolbar/toolbar.tsx index bd7e8ee9..b97bf567 100644 --- a/src/pages/bot-builder/toolbar/toolbar.tsx +++ b/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'; diff --git a/src/pages/bot-builder/toolbar/workspace-group.tsx b/src/pages/bot-builder/toolbar/workspace-group.tsx index 47496e83..6211ef58 100644 --- a/src/pages/bot-builder/toolbar/workspace-group.tsx +++ b/src/pages/bot-builder/toolbar/workspace-group.tsx @@ -1,7 +1,18 @@ +import classNames from 'classnames'; import { observer } from 'mobx-react-lite'; import DesktopWrapper from '@/components/shared_ui/desktop-wrapper'; import { useStore } from '@/hooks/useStore'; import { localize } from '@/utils/tmp/dummy'; +import { + LabelPairedChartLineLgRegularIcon, + LabelPairedFloppyDiskLgRegularIcon, + LabelPairedFolderOpenLgRegularIcon, + LabelPairedMagnifyingGlassMinusLgRegularIcon, + LabelPairedMagnifyingGlassPlusLgRegularIcon, + LabelPairedObjectsAlignLeftCaptionRegularIcon, + LegacyRefresh1pxIcon, + LegacyTradeTypeLookbacksIcon, +} from '@deriv/quill-icons'; import ToolbarIcon from './toolbar-icon'; const WorkspaceGroup = observer(() => { @@ -16,87 +27,146 @@ const WorkspaceGroup = observer(() => {
+ + + } /> { - setPreviewOnPopup(true); - toggleLoadModal(); - }} + icon={ + { + setPreviewOnPopup(true); + toggleLoadModal(); + }} + > + + + } /> + + + } /> + + + } />
setChartModalVisibility()} + icon={ + setChartModalVisibility()} + > + + + } /> - - setTradingViewModalVisibility()} + icon={ + setTradingViewModalVisibility()} + > + + + } />
onUndoClick(/* redo */ false)} + icon={ + onUndoClick(/* redo */ false)} + > + + + } /> onUndoClick(/* redo */ true)} + icon={ + onUndoClick(/* redo */ true)} + > + + + } />
onZoomInOutClick(/* in */ true)} + icon={ + onZoomInOutClick(/* in */ true)} + > + + + } /> onZoomInOutClick(/* in */ false)} + icon={ + onZoomInOutClick(/* in */ false)} + > + + + } />
); }); - export default WorkspaceGroup; diff --git a/src/pages/dashboard/cards.tsx b/src/pages/dashboard/cards.tsx index f6932539..91f0c710 100644 --- a/src/pages/dashboard/cards.tsx +++ b/src/pages/dashboard/cards.tsx @@ -7,7 +7,14 @@ import MobileFullPageModal from '@/components/shared_ui/mobile-full-page-modal'; import Text from '@/components/shared_ui/text'; import { DBOT_TABS } from '@/constants/bot-contents'; import { useStore } from '@/hooks/useStore'; -import { Icon, localize } from '@/utils/tmp/dummy'; +import { localize } from '@/utils/tmp/dummy'; +import { + DerivLightBotBuilderIcon, + DerivLightGoogleDriveIcon, + DerivLightLocalDeviceIcon, + DerivLightMyComputerIcon, + DerivLightQuickStrategyIcon, +} from '@deriv/quill-icons'; import DashboardBotList from './load-bot-preview/dashboard-bot-list'; import GoogleDrive from './load-bot-preview/google-drive'; @@ -46,19 +53,23 @@ const Cards = observer(({ is_mobile, has_dashboard_strategies }: TCardProps) => const actions: TCardArray[] = [ { type: 'my-computer', - icon: is_mobile ? 'IcLocal' : 'IcMyComputer', + icon: is_mobile ? ( + + ) : ( + + ), content: is_mobile ? localize('Local') : localize('My computer'), method: openFileLoader, }, { type: 'google-drive', - icon: 'IcGoogleDriveDbot', + icon: , content: localize('Google Drive'), method: openGoogleDriveDialog, }, { type: 'bot-builder', - icon: 'IcBotBuilder', + icon: , content: localize('Bot Builder'), method: () => { setActiveTab(DBOT_TABS.BOT_BUILDER); @@ -66,7 +77,7 @@ const Cards = observer(({ is_mobile, has_dashboard_strategies }: TCardProps) => }, { type: 'quick-strategy', - icon: 'IcQuickStrategy', + icon: , content: localize('Quick strategy'), method: () => { setActiveTab(DBOT_TABS.BOT_BUILDER); @@ -97,7 +108,7 @@ const Cards = observer(({ is_mobile, has_dashboard_strategies }: TCardProps) => 'tab__dashboard__table__block--minimized': has_dashboard_strategies && is_mobile, })} > - onClick={() => { method(); }} - /> + > + {icon} +
{content} diff --git a/src/pages/dashboard/dashboard.scss b/src/pages/dashboard/dashboard.scss index ca29669d..a60b5f33 100644 --- a/src/pages/dashboard/dashboard.scss +++ b/src/pages/dashboard/dashboard.scss @@ -140,7 +140,6 @@ .title { text-align: center; - height: 7.2; @include mobile { height: auto; diff --git a/src/pages/dashboard/load-bot-preview/google-drive.tsx b/src/pages/dashboard/load-bot-preview/google-drive.tsx index 65f0b85c..db285779 100644 --- a/src/pages/dashboard/load-bot-preview/google-drive.tsx +++ b/src/pages/dashboard/load-bot-preview/google-drive.tsx @@ -16,7 +16,7 @@ const GoogleDrive = observer(() => {
} + icon={ + is_mobile ? ( + + ) : ( + + ) + } /> } value={save_types.LOCAL} @@ -105,7 +112,7 @@ const SaveModalForm = ({ label={ } + icon={} google_drive_connected={is_authorised} onDriveConnect={onDriveConnect} /> @@ -118,29 +125,6 @@ const SaveModalForm = ({ />
- {/* removed this from the save modal popup because it is not there in the design */} - {/* <> - - {({ field }) => ( - setFieldValue('save_as_collection', !save_as_collection)} - defaultChecked={save_as_collection} - label={ - - - - } - classNameLabel='save-type__checkbox-text' - {...field} - /> - )} - -
- {localize( - 'Enabling this allows you to save your blocks as one collection which can be easily integrated into other bots.' - )} -
- */}
); + const SaveModal = observer(() => { const { save_modal, google_drive, dashboard, load_modal } = useStore(); const { ui } = useStore(); diff --git a/src/pages/dashboard/user-guide.tsx b/src/pages/dashboard/user-guide.tsx index 06d42a4a..3f6e3872 100644 --- a/src/pages/dashboard/user-guide.tsx +++ b/src/pages/dashboard/user-guide.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { DBOT_TABS } from '@/constants/bot-contents'; -import { Icon, localize } from '@/utils/tmp/dummy'; +import { StandaloneMapBoldIcon } from '@deriv/quill-icons'; +import { Localize } from '@deriv-com/translations'; import { Text } from '@deriv-com/ui'; type TUserGuide = { @@ -20,10 +21,11 @@ const UserGuide: React.FC = ({ is_mobile, handleTabChange, setActive }} data-testid='btn-user-guide' > - + {/* */} + {!is_mobile && ( - {localize('User Guide')} + )} diff --git a/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx b/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx index 79de4fef..f66f20b5 100644 --- a/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx +++ b/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx @@ -5,7 +5,8 @@ import ProgressBarTracker from '@/components/shared_ui/progress-bar-tracker'; import Text from '@/components/shared_ui/text'; import { useStore } from '@/hooks/useStore'; import { getSetting } from '@/utils/settings'; -import { Icon, localize } from '@/utils/tmp/dummy'; +import { localize } from '@/utils/tmp/dummy'; +import { LegacyClose1pxIcon } from '@deriv/quill-icons'; import TourButton from '../common/tour-button'; import { DBOT_ONBOARDING_MOBILE, TMobileTourConfig } from '../tour-content'; @@ -68,9 +69,10 @@ const OnboardingTourMobile = observer(() => { data-testid='dbot-onboard-slider__navbar' >{`${tour_step_key - 1}/7`} -