Farabi/prodqa 1168/change sort placement on toolbar (binary-com#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
shafin-deriv · Jul 25, 2023 · a81b55c · a81b55c
1 parent 7b7d084
commit a81b55c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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'>