fix: added icons for dashboard

Author: rupato-deriv

public/ic-save.svg

@@ -1,7 +1,8 @@
 import React from 'react';
-import classNames from 'classnames';
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
+import classNames from 'classnames';
+
 // import Icon from '../icon/icon';
 // import Button from '../button/button';
 import Text from '../text';
@@ -147,7 +148,7 @@ const Dialog = ({
                             )}
                             {has_close_icon && (
                                 <div onClick={handleClose} className='dc-dialog__header--close'>
-                                    <img src='/ic-cross.svg'/>
+                                    <img src='icons/ic-cross.svg' />
                                     {/* <Icon icon='IcCross' /> */}
                                 </div>
                             )}

public/ic-user-guide.svg

@@ -1,4 +1,4 @@
-import { localize } from '@/utils/tmp/dummy';
+// import { localize } from '@/utils/tmp/dummy';
 
 export const STRATEGY = {
     EDIT: 'edit',
@@ -12,37 +12,37 @@ export const STRATEGY = {
 export const MENU_DESKTOP = [
     {
         type: STRATEGY.EDIT,
-        icon: '/ic-open.svg',
+        icon: 'icons/ic-open.svg',
     },
     {
         type: STRATEGY.SAVE,
-        icon: '/ic-save.svg',
+        icon: 'icons/ic-save.svg',
     },
     {
         type: STRATEGY.DELETE,
-        icon: '/ic-delete.svg',
+        icon: 'icons/ic-delete.svg',
     },
 ];
 
 export const CONTEXT_MENU_MOBILE = [
     {
         type: STRATEGY.PREVIEW_LIST,
         icon: 'IcPreview',
-        label: localize('Preview'),
+        label: 'Preview',
     },
     {
         type: STRATEGY.EDIT,
         icon: 'IcEdit',
-        label: localize('Edit'),
+        label: 'Edit',
     },
     {
         type: STRATEGY.SAVE,
         icon: 'IcSave',
-        label: localize('Save'),
+        label: 'Save',
     },
     {
         type: STRATEGY.DELETE,
         icon: 'IcDelete',
-        label: localize('Delete'),
+        label: 'Delete',
     },
 ];

public/deriv-logo.svg public/icons/deriv-logo.svg

@@ -1,12 +1,12 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
 import { isMobileOs } from '@/components/shared';
 import { DBOT_TABS } from '@/constants/bot-contents';
-import { MENU_DESKTOP, STRATEGY } from '@/constants/dashboard';
+import { CONTEXT_MENU_MOBILE, MENU_DESKTOP, STRATEGY } from '@/constants/dashboard';
 import { getSavedWorkspaces, timeSince } from '@/external/bot-skeleton';
 import { useStore } from '@/hooks/useStore';
 import { waitForDomElement } from '@/utils/dom-observer';
-import { observer } from 'mobx-react-lite';
-import React from 'react';
-
 
 const DashboardBotList = observer(() => {
     const { load_modal, dashboard, save_modal } = useStore();
@@ -96,12 +96,12 @@ const DashboardBotList = observer(() => {
         <div className='dashboard__botlist'>
             <div className='dashboard__botlist__header'>Your Bots</div>
             <table className='dashboard__botlist__table'>
-                <thead>
-                    <tr>
-                        <th className='dashboard__botlist__table__title'>Bot Name</th>
-                        <th className='dashboard__botlist__table__title'>Last Modified</th>
-                        <th className='dashboard__botlist__table__title'>Status</th>
-                        <th className='dashboard__botlist__table__title'></th>
+                <thead className='dashboard__botlist__table__header'>
+                    <tr className='dashboard__botlist__table__header__row'>
+                        <td className='dashboard__botlist__table__title'>Bot Name</td>
+                        <td className='dashboard__botlist__table__title'>Last Modified</td>
+                        <td className='dashboard__botlist__table__title'>Status</td>
+                        <td className='dashboard__botlist__table__title' />
                     </tr>
                 </thead>
                 <tbody className='dashboard__botlist__table__body'>
@@ -116,7 +116,7 @@ const DashboardBotList = observer(() => {
                                 {MENU_DESKTOP.map(item => (
                                     <div
                                         key={item.type}
-                                        className='dashboard__botlist__table__row__actions--item'
+                                        className='desktop dashboard__botlist__table__row__actions--item'
                                         onClick={e => {
                                             e.stopPropagation();
                                             viewRecentStrategy(item.type, workspace);
@@ -125,6 +125,25 @@ const DashboardBotList = observer(() => {
                                         <img src={item.icon} alt={item.type} />
                                     </div>
                                 ))}
+                                <button className='mobile dashboard__botlist__mobile'>
+                                    <img src='/ic-menu-dots.svg' />
+                                </button>
+                                {CONTEXT_MENU_MOBILE.map(item => (
+                                    <div
+                                        key={item.type}
+                                        className='mobile bot-list__item__responsive__menu'
+                                        onClick={e => {
+                                            e.stopPropagation();
+                                            viewRecentStrategy(item.type, workspace);
+                                        }}
+                                    >
+                                        <div>
+                                            {/* <Icon icon={item.icon} /> */}
+                                            <img src={item.icon} alt={item.type} />
+                                        </div>
+                                        {item.label}
+                                    </div>
+                                ))}
                             </td>
                         </tr>
                     ))}
@@ -134,4 +153,4 @@ const DashboardBotList = observer(() => {
     );
 });
 
-export default DashboardBotList;
+export default DashboardBotList;

public/ic-bot-builder.svg public/icons/ic-bot-builder.svg

@@ -1,14 +1,16 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { useStore } from '@/hooks/useStore';
-import { DBOT_TABS } from '@/constants/bot-contents';
+
 import { NOTIFICATION_TYPE } from '@/components/bot-notification/bot-notification-utils';
+import { DBOT_TABS } from '@/constants/bot-contents';
+import { useStore } from '@/hooks/useStore';
 
 const DashboardQuickActions = observer(() => {
     const { dashboard, load_modal } = useStore();
     const { showVideoDialog, setActiveTab, setFileLoaded, setOpenSettings } = dashboard;
     const { handleFileChange, loadFileFromLocal } = load_modal;
     const load_file_ref = React.useRef<HTMLInputElement | null>(null);
+    /* eslint-disable @typescript-eslint/no-unused-vars */
     const [is_file_supported, setIsFileSupported] = React.useState(true);
     const openFileLoader = () => {
         load_file_ref?.current?.click();
@@ -21,27 +23,27 @@ const DashboardQuickActions = observer(() => {
     const quick_actions = [
         {
             type: 'my-computer',
-            icon: <img src='/ic-my-computer.svg' alt='My computer' />,
+            icon: <img src='icons/ic-my-computer.svg' alt='My computer' />,
             content: 'My Computer',
             onClickHandler: () => openFileLoader(),
         },
         {
             type: 'google-drive',
-            icon: <img src='/ic-google-drive.svg' alt='Google Drive' />,
+            icon: <img src='icons/ic-google-drive.svg' alt='Google Drive' />,
             content: 'Google Drive',
             onClickHandler: () => openGoogleDriveDialog(),
         },
         {
             type: 'bot-builder',
-            icon: <img src='/ic-bot-builder.svg' alt='Bot Builder' />,
+            icon: <img src='icons/ic-bot-builder.svg' alt='Bot Builder' />,
             content: 'Bot Builder',
             onClickHandler: () => {
                 setActiveTab(DBOT_TABS.BOT_BUILDER);
             },
         },
         {
             type: 'quick-strategy',
-            icon: <img src='/ic-quick-strategy.svg' alt='Quick strategy' />,
+            icon: <img src='icons/ic-quick-strategy.svg' alt='Quick strategy' />,
             content: 'Quick strategy',
             onClickHandler: () => {
                 setActiveTab(DBOT_TABS.BOT_BUILDER);
@@ -75,5 +77,4 @@ const DashboardQuickActions = observer(() => {
     );
 });
 
-
-export default DashboardQuickActions;
+export default DashboardQuickActions;

public/ic-cross.svg public/icons/ic-cross.svg

@@ -14,50 +14,56 @@ $spacing-medium: 3rem;
     outline: none;
     border-radius: 2.4rem;
 }
+
 .bot-dashboard {
     position: relative;
 }
+
 .dashboard {
     background: var(--general-main-1);
     height: calc(100vh - 16.6rem);
     width: 100%;
 
     &__botlist {
         width: 70rem;
-        @media screen and (max-width: 991px) {
+
+        @media screen and (width <= 991px) {
             width: 90%;
         }
+
         margin: 0 auto;
+
         &__table {
             width: 100%;
+            height: 35rem;
+            overflow: auto;
             display: block;
-            &__title {
-                // display: block;
-                // &:nth-child(1) {
-                //     width: 41%;
-                // }
-                // &:nth-child(2) {
-                //     width: 21%;
-                // }
-                // &:nth-child(3) {
-                //     width: 20%;
-                // }
-                // &:nth-child(4) {
-                //     width: 20%;
-                // }
 
+            &__header {
+                position: relative;
+
+                &__row {
+                    position: sticky;
+                    background: #fff;
+                    top: 0;
+                }
+            }
+
+            &__title {
                 font-size: 1.4rem;
                 font-weight: bold;
                 padding-bottom: 1.6rem;
             }
+
             &__body {
-                display: block;
                 max-height: 35rem;
                 overflow: auto;
             }
+
             &__row {
                 border-top: 1px solid var(--border-divider);
                 border-bottom: 1px solid var(--border-divider);
+
                 &__bot_name,
                 &__last_modified,
                 &__status,
@@ -69,17 +75,35 @@ $spacing-medium: 3rem;
                 &__bot_name {
                     width: 40%;
                 }
+
                 &__last_modified,
                 &__status {
                     width: 20%;
                 }
+
                 &__actions {
                     display: flex;
 
                     &--item {
                         margin-inline-end: 1.6rem;
                         cursor: pointer;
                     }
+
+                    .desktop {
+                        display: block;
+
+                        @media screen and (width <= 991px) {
+                            display: none;
+                        }
+                    }
+
+                    .mobile {
+                        display: none;
+
+                        @media screen and (width <= 991px) {
+                            display: block;
+                        }
+                    }
                 }
             }
         }
@@ -92,12 +116,14 @@ $spacing-medium: 3rem;
     }
 
     &__description {
-        font-weight: 300;
         font-size: 16px;
         font-weight: normal;
+
         @include align-center;
+
         margin-bottom: $spacing-medium;
-        @media screen and (max-width: 991px) {
+
+        @media screen and (width <= 991px) {
             width: 90%;
             margin: 0 auto;
             margin-bottom: $spacing-medium;
@@ -112,27 +138,32 @@ $spacing-medium: 3rem;
     &__user-guide-button,
     &__quickactions {
         @include align-center;
-        @media screen and (max-width: 991px) {
+
+        @media screen and (width <= 991px) {
             justify-content: space-around;
         }
+
         margin-bottom: $spacing-medium;
     }
 
     &__user-guide-button {
         @include button-styles;
+
         margin-top: 1.8rem;
         margin-right: 2.4rem;
     }
 
     &__quickactions {
         &__card {
             margin-inline-end: 4rem;
-            @media screen and (max-width: 991px) {
+
+            @media screen and (width <= 991px) {
                 margin-inline-end: unset;
             }
 
             &__icon {
                 @include align-center;
+
                 font-size: 3.2rem;
                 width: 8rem;
                 height: 8rem;