From 34dcfd59542ed76a783c55df5ee029c7c89e39ea Mon Sep 17 00:00:00 2001
From: Farabi <102643568+farabi-deriv@users.noreply.github.com>
Date: Wed, 22 May 2024 14:27:57 +0800
Subject: [PATCH] [BOT] Farabi/bot-1601/dbot bugs and improvements (#15086)

* fix: notification visibility and qs form alignment

* chore: update toast visibility handler

* fix: summary and transactions view detail for different language

* chore: removed download and view detail icon

* fix: transaction panel profit alignment
---
 .../bot-notification/bot-notification-utils.ts     |  2 +-
 .../bot-notification/bot-notification.tsx          | 14 ++++++++++++++
 .../src/components/download/download.tsx           |  3 ---
 .../src/components/run-panel/run-panel.scss        |  8 ++++++++
 .../src/components/transactions/transactions.scss  |  2 +-
 .../src/components/transactions/transactions.tsx   |  1 -
 .../bot-builder/quick-strategy/quick-strategy.scss |  8 ++++----
 .../pages/bot-builder/toolbar/workspace-group.tsx  |  2 +-
 .../bot-web-ui/src/pages/dashboard/dashboard.scss  |  3 ---
 9 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/packages/bot-web-ui/src/components/bot-notification/bot-notification-utils.ts b/packages/bot-web-ui/src/components/bot-notification/bot-notification-utils.ts
index 4fea10f2bf16..50c5b487265a 100644
--- a/packages/bot-web-ui/src/components/bot-notification/bot-notification-utils.ts
+++ b/packages/bot-web-ui/src/components/bot-notification/bot-notification-utils.ts
@@ -1,6 +1,6 @@
 import { toast, ToastPosition, TypeOptions } from 'react-toastify';
-import { localize } from '@deriv/translations';
 import { isDbotRTL } from '@deriv/bot-skeleton/src/utils/workspace';
+import { localize } from '@deriv/translations';
 
 const getToastPosition = () => {
     const is_RTL = isDbotRTL();
diff --git a/packages/bot-web-ui/src/components/bot-notification/bot-notification.tsx b/packages/bot-web-ui/src/components/bot-notification/bot-notification.tsx
index db54658679ea..4c56742f78c6 100644
--- a/packages/bot-web-ui/src/components/bot-notification/bot-notification.tsx
+++ b/packages/bot-web-ui/src/components/bot-notification/bot-notification.tsx
@@ -3,6 +3,20 @@ import { toast } from 'react-toastify';
 import { notification_style, TAction, TNotificationContent, TNotificationStyle } from './bot-notification-utils';
 
 export const NotificationContent: React.FC<TNotificationContent> = ({ message, primary_action, closeToast }) => {
+    React.useEffect(() => {
+        const handleToastVisibility = () => {
+            if (document.visibilityState === 'hidden') {
+                toast.dismiss();
+            }
+        };
+
+        document.addEventListener('visibilitychange', handleToastVisibility);
+
+        return () => {
+            document.removeEventListener('visibilitychange', handleToastVisibility);
+        };
+    }, []);
+
     return (
         <div className='notification-content'>
             <div>{message}</div>
diff --git a/packages/bot-web-ui/src/components/download/download.tsx b/packages/bot-web-ui/src/components/download/download.tsx
index 543e21063032..d3d36cabd3c8 100644
--- a/packages/bot-web-ui/src/components/download/download.tsx
+++ b/packages/bot-web-ui/src/components/download/download.tsx
@@ -96,9 +96,6 @@ const Download = observer(({ tab }: TDownloadProps) => {
                 id='download-button'
                 is_disabled={disabled}
                 className='download__button'
-                icon={
-                    <Icon icon='IcDbotDownload' color={disabled ? 'disabled' : undefined} className='download__icon' />
-                }
                 text={localize('Download')}
                 onClick={clickFunction}
                 secondary
diff --git a/packages/bot-web-ui/src/components/run-panel/run-panel.scss b/packages/bot-web-ui/src/components/run-panel/run-panel.scss
index 22a9ef8b03be..4c3eec1b54d9 100644
--- a/packages/bot-web-ui/src/components/run-panel/run-panel.scss
+++ b/packages/bot-web-ui/src/components/run-panel/run-panel.scss
@@ -102,6 +102,14 @@
         justify-content: space-between;
         flex-direction: column;
         overflow: hidden !important;
+
+        .dc-tabs {
+            &__item {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                padding: 0 0.8rem;
+            }
+        }
     }
     &__buttons {
         display: inline-flex !important;
diff --git a/packages/bot-web-ui/src/components/transactions/transactions.scss b/packages/bot-web-ui/src/components/transactions/transactions.scss
index 7de163f547a2..62b846b9035b 100644
--- a/packages/bot-web-ui/src/components/transactions/transactions.scss
+++ b/packages/bot-web-ui/src/components/transactions/transactions.scss
@@ -77,7 +77,7 @@
                     text-align: start;
                 }
                 @if $item == 'profit' {
-                    text-align: end;
+                    text-align: start;
                 }
             }
         }
diff --git a/packages/bot-web-ui/src/components/transactions/transactions.tsx b/packages/bot-web-ui/src/components/transactions/transactions.tsx
index 8b24958fabe8..b3882ef26913 100644
--- a/packages/bot-web-ui/src/components/transactions/transactions.tsx
+++ b/packages/bot-web-ui/src/components/transactions/transactions.tsx
@@ -115,7 +115,6 @@ const Transactions = observer(({ is_drawer_open }: TTransactions) => {
                         toggleTransactionDetailsModal(true);
                     }}
                     secondary
-                    icon={<Icon icon='IcDbotViewDetail' size={18} />}
                 />
             </div>
             <div className='transactions__header'>
diff --git a/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/quick-strategy.scss b/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/quick-strategy.scss
index 7b497736bdb1..fd3bf7f149a3 100644
--- a/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/quick-strategy.scss
+++ b/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/quick-strategy.scss
@@ -357,8 +357,8 @@
                 flex-direction: row-reverse;
 
                 @include mobile() {
-                    top: -2.8rem;
-                    right: 4rem;
+                    top: -2.6rem;
+                    right: 5rem;
                 }
 
                 .dc-text {
@@ -537,11 +537,11 @@
 
             &__trailing-icon {
                 @extend .seddle-actions;
-                right: 0.3rem;
+                right: 1rem;
                 color: var(--text-general);
 
                 @include mobile() {
-                    right: 0.2rem;
+                    right: 1.6rem;
                 }
 
                 &:hover {
diff --git a/packages/bot-web-ui/src/pages/bot-builder/toolbar/workspace-group.tsx b/packages/bot-web-ui/src/pages/bot-builder/toolbar/workspace-group.tsx
index 266a6c4dacf7..f40c0c77fef9 100644
--- a/packages/bot-web-ui/src/pages/bot-builder/toolbar/workspace-group.tsx
+++ b/packages/bot-web-ui/src/pages/bot-builder/toolbar/workspace-group.tsx
@@ -57,7 +57,7 @@ const WorkspaceGroup = observer(() => {
                 </DesktopWrapper>
                 <DesktopWrapper>
                     <ToolbarIcon
-                        popover_message={localize('Trading View Chart')}
+                        popover_message={localize('TradingView Chart')}
                         icon='IcTradingViewChart'
                         icon_id='db-toolbar__tradingview-button'
                         action={() => setTradingViewModalVisibility()}
diff --git a/packages/bot-web-ui/src/pages/dashboard/dashboard.scss b/packages/bot-web-ui/src/pages/dashboard/dashboard.scss
index 381208eb5e4a..a45eeced0788 100644
--- a/packages/bot-web-ui/src/pages/dashboard/dashboard.scss
+++ b/packages/bot-web-ui/src/pages/dashboard/dashboard.scss
@@ -385,9 +385,6 @@
                         text-align: center;
                     }
                 }
-                &:nth-last-child(2) {
-                    padding-inline: 0;
-                }
             }
 
             &__images {