From a81b55cceeba146065e1eeab60a1058b85cf6b73 Mon Sep 17 00:00:00 2001
From: Farabi <102643568+farabi-deriv@users.noreply.github.com>
Date: Tue, 25 Jul 2023 12:12:22 +0800
Subject: [PATCH] Farabi/prodqa 1168/change sort placement on toolbar (#9394)

* fix: sort button placement and padding alignment on dashboard

* fix: alignment of tables and texts in dashboard mobile

* fix: add padding on selected strategy
---
 .../bot-builder/toolbar/workspace-group.tsx         | 13 +++++++------
 .../dashboard/dashboard-component/index.scss        |  4 ++--
 .../dashboard-component/load-bot-preview/index.scss |  9 +++++++--
 .../dashboard-component/load-bot-preview/recent.tsx |  2 +-
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/bot-web-ui/src/components/dashboard/bot-builder/toolbar/workspace-group.tsx b/packages/bot-web-ui/src/components/dashboard/bot-builder/toolbar/workspace-group.tsx
index 8c60785c5a99..140fde0fb6c0 100644
--- a/packages/bot-web-ui/src/components/dashboard/bot-builder/toolbar/workspace-group.tsx
+++ b/packages/bot-web-ui/src/components/dashboard/bot-builder/toolbar/workspace-group.tsx
@@ -49,6 +49,12 @@ const WorkspaceGroup = ({
             icon_id='db-toolbar__save-button'
             action={toggleSaveModal}
         />
+        <ToolbarIcon
+            popover_message={localize('Sort blocks')}
+            icon='IcSort'
+            icon_id='db-toolbar__sort-button'
+            action={onSortClick}
+        />
         <div className='vertical-divider' />
         <ToolbarIcon
             popover_message={localize('Undo')}
@@ -64,12 +70,7 @@ const WorkspaceGroup = ({
             icon_color={has_redo_stack ? undefined : 'disabled'}
             action={() => onUndoClick(/* redo */ true)}
         />
-        <ToolbarIcon
-            popover_message={localize('Sort')}
-            icon='IcSort'
-            icon_id='db-toolbar__sort-button'
-            action={onSortClick}
-        />
+        <div className='vertical-divider' />
         <ToolbarIcon
             popover_message={localize('Zoom in')}
             icon='IcZoomIn'
diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard-component/index.scss b/packages/bot-web-ui/src/components/dashboard/dashboard-component/index.scss
index 3319d7ec04e3..7ae97dbcae0d 100644
--- a/packages/bot-web-ui/src/components/dashboard/dashboard-component/index.scss
+++ b/packages/bot-web-ui/src/components/dashboard/dashboard-component/index.scss
@@ -226,7 +226,7 @@
         &__mobile-container {
             display: flex;
             align-items: center;
-            margin: 1.6rem 1.6rem 1.4rem;
+            margin: 1.6rem 1.6rem 1.4rem 0.5rem;
             column-gap: 1rem;
             height: 3.2rem;
 
@@ -260,7 +260,7 @@
             &--listed {
                 margin-top: 10rem;
                 align-items: unset;
-                padding: 1rem 3rem;
+                padding: 1rem 2.4rem;
             }
         }
 
diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/index.scss b/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/index.scss
index 45bdc919eaab..04712e16f0c0 100644
--- a/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/index.scss
+++ b/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/index.scss
@@ -64,6 +64,7 @@
         @include mobile {
             height: 100%;
             overflow: hidden;
+            padding-left: 0.5rem;
         }
     }
 
@@ -333,14 +334,14 @@
 
             &__loaded {
                 text-align: left;
-                padding: 1rem 3rem;
+                padding: 1rem 2.4rem;
 
                 @include tablet {
                     padding: 1rem 0.6rem;
                 }
 
                 @include mobile {
-                    padding: 1rem 0.6rem;
+                    padding: 1rem 0.4rem;
                 }
 
                 .load-strategy__recent-item-text {
@@ -435,6 +436,10 @@
                     }
                 }
             }
+
+            span {
+                padding-right: 1.5rem;
+            }
         }
     }
 
diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/recent.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/recent.tsx
index 4ec5accfdb37..537c1fa65ea1 100644
--- a/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/recent.tsx
+++ b/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/recent.tsx
@@ -46,7 +46,7 @@ const RecentComponent = ({
                 <div className='load-strategy__recent__files'>
                     <div className='load-strategy__title'>
                         <Text size={is_mobile ? 'xs' : 's'} weight='bold'>
-                            <Localize i18n_default_text='Your bots' />
+                            <Localize i18n_default_text='Your bots:' />
                         </Text>
                     </div>
                     <div className='load-strategy__recent__files__list'>