From 9fcb29484d737d22b0ced9a0c0adfd501dc65dba Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 24 Feb 2023 13:01:54 +0530
Subject: [PATCH] chore: Refactor sidebar related changes for RTL (#6519)

* Woot tabs

* Refactor sidebar related RTL

* Context menu

* chore: Minor fixes

* chore: Dropdown

* chore: Toggle switch

* chore: sidebar fixes

* fix: spacing issues and minor fixes

* chore: Space slab to small

---------

Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>
---
 .../dashboard/assets/scss/_rtl.scss           | 55 +++++++++++++++----
 .../assets/scss/widgets/_conv-header.scss     |  2 +-
 .../assets/scss/widgets/_sidemenu.scss        | 25 +++++----
 .../dashboard/assets/scss/widgets/_tabs.scss  |  2 +-
 .../sidebarComponents/AccountContext.vue      |  3 +-
 .../layout/sidebarComponents/OptionsMenu.vue  |  6 +-
 .../sidebarComponents/SecondaryNavItem.vue    |  6 +-
 .../components/widgets/BackButton.vue         |  3 +-
 .../widgets/conversation/ConversationBox.vue  |  7 ++-
 .../conversation/contextMenu/menuItem.vue     |  8 +--
 .../contextMenu/menuItemWithSubmenu.vue       |  6 +-
 .../components/Header/ArticleHeader.vue       | 17 ++++--
 .../components/Header/EditArticleHeader.vue   |  3 +-
 .../components/HelpCenterLayout.vue           | 24 ++++----
 .../helpcenter/components/PortalSwitch.vue    |  6 +-
 .../pages/portals/ListAllPortals.vue          |  2 +-
 .../components/NotificationPanelList.vue      |  2 +-
 .../settings/inbox/WidgetBuilder.vue          |  4 +-
 .../components/ui/MultiselectDropdown.vue     |  1 -
 .../components/ui/dropdown/DropdownHeader.vue |  1 +
 20 files changed, 110 insertions(+), 73 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_rtl.scss b/app/javascript/dashboard/assets/scss/_rtl.scss
index 27c7d5a16..95e774184 100644
--- a/app/javascript/dashboard/assets/scss/_rtl.scss
+++ b/app/javascript/dashboard/assets/scss/_rtl.scss
@@ -13,6 +13,10 @@
         padding: var(--space-smaller) var(--space-one) var(--space-smaller)
           var(--space-smaller);
       }
+
+      .status-items .button {
+        text-align: right;
+      }
     }
   }
 
@@ -23,10 +27,13 @@
       border-right: 0;
 
       .nested.vertical.menu {
-        align-items: flex-start;
+        .badge--icon {
+          margin-left: var(--space-smaller);
+          margin-right: unset;
+        }
 
-        li {
-          direction: initial;
+        .menu-label {
+          text-align: right;
         }
       }
 
@@ -74,7 +81,7 @@
   .settings-header {
     .header--icon {
       margin-left: 0;
-      margin-right: $space-small;
+      margin-right: var(--space-small);
     }
   }
 
@@ -95,13 +102,13 @@
   // Woot Tabs
   .tabs-title {
     &:first-child {
-      margin-left: $space-slab;
+      margin-left: var(--space-small);
       margin-right: unset;
     }
 
     &:last-child {
       margin-left: unset;
-      margin-right: $space-slab;
+      margin-right: var(--space-small);
     }
   }
 
@@ -133,7 +140,7 @@
 
         .user--profile__meta {
           margin-left: unset;
-          margin-right: $space-slab;
+          margin-right: var(--space-small);
         }
       }
 
@@ -315,7 +322,7 @@
 
     .notification-content--wrap {
       margin-left: 0;
-      margin-right: var(--space-slab);
+      margin-right: var(--space-small);
     }
   }
 
@@ -326,8 +333,9 @@
     }
   }
 
-  .header-left-wrap .page-title {
-    margin-right: var(--space-slab) !important;
+  // scss-lint:disable SelectorDepth
+  .container .header-wrap .header-left-wrap .header-left-wrap > .page-title {
+    margin-right: var(--space-small);
   }
 
   .portal-container .container {
@@ -408,6 +416,28 @@
     justify-content: flex-end;
   }
 
+  // Toggle switch
+  .toggle-button {
+    &.small {
+      span {
+        &.active {
+          transform: translate(var(--space-minus-small), var(--space-zero));
+        }
+      }
+    }
+
+    span {
+      --minus-space-one-point-five: -1.5rem;
+
+      &.active {
+        transform: translate(
+          var(--minus-space-one-point-five),
+          var(--space-zero)
+        );
+      }
+    }
+  }
+
   // Widget builder
   .widget-builder-container .widget-preview {
     direction: initial;
@@ -455,4 +485,9 @@
   .contact--form .input-group {
     direction: initial;
   }
+
+  // scss-lint:disable QualifyingElement
+  .dropdown-menu--header > span.title {
+    text-align: right;
+  }
 }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
index 0ed06c914..c352ff540 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
@@ -47,7 +47,7 @@ $resolve-button-width: 13.2rem;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
-      margin-left: $space-slab;
+      margin-left: var(--space-small);
       min-width: 0;
     }
   }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
index 75cd8a513..d1c70aa9f 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
@@ -1,7 +1,7 @@
 .side-menu {
   i {
-    margin-right: $space-smaller;
-    min-width: $space-two;
+    margin-right: var(--space-smaller);
+    min-width: var(--space-two);
   }
 }
 
@@ -18,14 +18,14 @@
 
   .nested {
     a {
-      font-size: $font-size-small;
-      margin-bottom: $space-micro;
-      margin-top: $space-micro;
+      font-size: var(--font-size-small);
+      margin-bottom: var(--space-micro);
+      margin-top: var(--space-micro);
 
       .inbox-icon {
         display: inline-block;
-        margin-right: $space-micro;
-        min-width: $space-normal;
+        margin-right: var(--space-micro);
+        min-width: var(--space-normal);
         text-align: center;
       }
     }
@@ -38,7 +38,8 @@
   @include space-between-column;
   @include border-normal-top;
   flex-direction: column;
-  padding: $space-one $space-normal $space-one $space-one;
+  padding: var(--space-one) var(--space-normal) var(--space-one)
+    var(--space-one);
   position: relative;
 
   &:hover {
@@ -60,14 +61,18 @@
 .hamburger--menu {
   cursor: pointer;
   display: block;
-  margin-right: $space-normal;
+  margin-right: var(--space-normal);
 }
 
 .header--icon {
   display: block;
-  margin-right: $space-normal;
+  margin: 0 var(--space-normal);
 
   @media screen and (max-width: 1200px) {
     display: none;
   }
 }
+
+.header-title {
+  margin: 0 var(--space-small);
+}
diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
index 2f49945cd..ae55a1a41 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
@@ -47,7 +47,7 @@
 
 .tabs-title {
   flex-shrink: 0;
-  margin: 0 var(--space-slab);
+  margin: 0 var(--space-small);
 
   .badge {
     background: var(--color-background);
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
index 4eded3180..38761e408 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
@@ -26,6 +26,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
+
 export default {
   data() {
     return { showSwitchButton: false };
@@ -69,7 +70,7 @@ export default {
 }
 
 .switch-button {
-  margin-right: var(--space-small);
+  margin: 0 var(--space-small);
 }
 
 .account-context--switch-group {
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
index 2dba51a5e..9b12f811a 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -3,7 +3,7 @@
     <div
       v-if="show"
       v-on-clickaway="onClickAway"
-      class="dropdown-pane"
+      class="options-menu dropdown-pane"
       :class="{ 'dropdown-pane--open': show }"
     >
       <availability-status />
@@ -150,10 +150,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.dropdown-pane {
+.options-menu.dropdown-pane {
   left: var(--space-slab);
   bottom: var(--space-larger);
-  min-width: 22rem;
+  min-width: var(--space-giga);
   top: unset;
   z-index: var(--z-index-low);
 }
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index dc0888691..74323b082 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -331,11 +331,11 @@ export default {
 .beta {
   padding-right: var(--space-smaller) !important;
   padding-left: var(--space-smaller) !important;
-  margin-left: var(--space-smaller) !important;
+  margin: 0 var(--space-smaller) !important;
   display: inline-block;
   font-size: var(--font-size-micro);
   font-weight: var(--font-weight-medium);
-  line-height: 18px;
+  line-height: 14px;
   border: 1px solid transparent;
   border-radius: 2em;
   color: var(--g-800);
@@ -348,7 +348,7 @@ export default {
   color: var(--s-600);
   font-size: var(--font-size-micro);
   font-weight: var(--font-weight-bold);
-  margin-left: var(--space-smaller);
+  margin: 0 var(--space-smaller);
   padding: var(--space-zero) var(--space-smaller);
 }
 
diff --git a/app/javascript/dashboard/components/widgets/BackButton.vue b/app/javascript/dashboard/components/widgets/BackButton.vue
index 017c3f7e4..0610618b8 100644
--- a/app/javascript/dashboard/components/widgets/BackButton.vue
+++ b/app/javascript/dashboard/components/widgets/BackButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="back-button" @click.capture="goBack">
+  <button class="settings back-button" @click.capture="goBack">
     <fluent-icon icon="chevron-left" />
     {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
   </button>
@@ -29,4 +29,3 @@ export default {
   },
 };
 </script>
-<style scoped></style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 0ed8c84d5..c4e4a80c4 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="conversation-details-wrap"
-    :class="{ 'with-border-left': !isOnExpandedLayout }"
+    :class="{ 'with-border-right': !isOnExpandedLayout }"
   >
     <conversation-header
       v-if="currentChat.id"
@@ -144,8 +144,8 @@ export default {
   width: 100%;
   background: var(--color-background-light);
 
-  &.with-border-left {
-    border-left: 1px solid var(--color-border);
+  &.with-border-right {
+    border-right: 1px solid var(--color-border);
   }
 }
 
@@ -164,6 +164,7 @@ export default {
 }
 
 .conversation-sidebar-wrap {
+  border-right: 1px solid var(--color-border);
   height: auto;
   flex: 0 0;
   z-index: var(--z-index-low);
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
index 8cb02dc54..8fde2b36b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
@@ -51,15 +51,11 @@ export default {
   border-radius: var(--border-radius-small);
   overflow: hidden;
   .menu-label {
-    margin: 0;
+    margin: 0 var(--space-small);
     font-size: var(--font-size-mini);
     flex-shrink: 0;
   }
 
-  .menu-icon {
-    margin-right: var(--space-small);
-  }
-
   &:hover {
     background-color: var(--w-500);
     color: var(--white);
@@ -68,7 +64,6 @@ export default {
 
 .agent-thumbnail {
   margin-top: 0 !important;
-  margin-right: var(--space-small);
 }
 
 .label-pill {
@@ -77,6 +72,5 @@ export default {
   border-radius: var(--border-radius-rounded);
   border: 1px solid var(--s-50);
   flex-shrink: 0;
-  margin-right: var(--space-small);
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
index 04870ccc1..31a648cb4 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
@@ -43,13 +43,9 @@ export default {
     align-items: center;
 
     .menu-label {
-      margin: 0;
+      margin: 0 var(--space-small);
       font-size: var(--font-size-mini);
     }
-
-    .menu-icon {
-      margin-right: var(--space-small);
-    }
   }
 
   .submenu {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
index 24ec9a42c..7d032dac8 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
@@ -2,8 +2,10 @@
   <div class="header--wrap">
     <div class="header-left--wrap">
       <woot-sidemenu-icon />
-      <h3 class="page-title">{{ headerTitle }}</h3>
-      <span class="text-block-title count-view">{{ `(${count})` }}</span>
+      <div class="header-title">
+        <h3 class="page-title">{{ headerTitle }}</h3>
+        <span class="text-block-title count-view">{{ `(${count})` }}</span>
+      </div>
     </div>
     <div class="header-right--wrap">
       <woot-button
@@ -160,8 +162,13 @@ export default {
   display: flex;
   align-items: center;
 
-  .page-title {
-    margin-bottom: 0;
+  .header-title {
+    display: flex;
+    align-items: center;
+    margin: 0 var(--space-smaller);
+    .page-title {
+      margin-bottom: 0;
+    }
   }
 }
 .header-right--wrap {
@@ -169,7 +176,7 @@ export default {
   align-items: center;
 }
 .count-view {
-  margin-left: var(--space-smaller);
+  margin: 0 var(--space-smaller);
 }
 .dropdown-pane--open {
   top: var(--space-larger);
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
index 5e8ec44d3..330086b78 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
@@ -6,6 +6,7 @@
         variant="clear"
         size="small"
         color-scheme="primary"
+        class="back-button"
         @click="onClickGoBack"
       >
         {{ backButtonLabel }}
@@ -42,7 +43,7 @@
         v-if="!isSidebarOpen"
         v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.OPEN_SIDEBAR')"
         icon="pane-open"
-        class-names="article--buttons"
+        class-names="article--buttons sidebar-button"
         variant="hollow"
         size="small"
         color-scheme="secondary"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index e99f3aac3..915cd8dfd 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -7,17 +7,19 @@
       @open-key-shortcut-modal="toggleKeyShortcutModal"
       @close-key-shortcut-modal="closeKeyShortcutModal"
     />
-    <help-center-sidebar
-      v-if="showHelpCenterSidebar"
-      :header-title="headerTitle"
-      :portal-slug="selectedPortalSlug"
-      :locale-slug="selectedLocaleInPortal"
-      :sub-title="localeName(selectedLocaleInPortal)"
-      :accessible-menu-items="accessibleMenuItems"
-      :additional-secondary-menu-items="additionalSecondaryMenuItems"
-      @open-popover="openPortalPopover"
-      @open-modal="onClickOpenAddCategoryModal"
-    />
+    <div class="secondary-sidebar">
+      <help-center-sidebar
+        v-if="showHelpCenterSidebar"
+        :header-title="headerTitle"
+        :portal-slug="selectedPortalSlug"
+        :locale-slug="selectedLocaleInPortal"
+        :sub-title="localeName(selectedLocaleInPortal)"
+        :accessible-menu-items="accessibleMenuItems"
+        :additional-secondary-menu-items="additionalSecondaryMenuItems"
+        @open-popover="openPortalPopover"
+        @open-modal="onClickOpenAddCategoryModal"
+      />
+    </div>
     <section class="app-content columns">
       <router-view />
       <command-bar />
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
index 30f3fb4ff..a6e24ad19 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
@@ -190,7 +190,7 @@ export default {
       .locale-content {
         display: flex;
         align-items: center;
-        justify-content: flex-start;
+        justify-content: space-between;
         width: 100%;
       }
 
@@ -233,10 +233,6 @@ export default {
       line-height: var(--space-normal);
       width: 100%;
     }
-
-    .meta {
-      flex-grow: 1;
-    }
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
index 857f210d5..f86da78ad 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
@@ -122,7 +122,7 @@ export default {
       display: flex;
       align-items: center;
       .page-title {
-        margin-bottom: 0;
+        margin: 0 var(--space-smaller) 0;
       }
     }
   }
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
index ff9b975a4..107fe6723 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
@@ -181,7 +181,7 @@ export default {
 .notification-type {
   font-size: var(--font-size-micro);
   padding: var(--space-micro) var(--space-smaller);
-  margin-left: var(--space-small);
+  margin: 0 var(--space-small);
   background: var(--s-50);
   border-radius: var(--border-radius-normal);
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
index 5bf4e8493..e6fa04fca 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="settings--content">
-    <div class="widget-builder-conatiner">
+    <div class="widget-builder-container">
       <div class="settings-container">
         <div class="settings-content">
           <form @submit.prevent="updateWidget">
@@ -420,7 +420,7 @@ export default {
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/woot';
 
-.widget-builder-conatiner {
+.widget-builder-container {
   display: flex;
   flex-direction: row;
   padding: var(--space-one);
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index 69265d9f1..ed2f2da4d 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -140,7 +140,6 @@ export default {
 .selector-wrap {
   position: relative;
   width: 100%;
-  margin-right: var(--space-one);
   margin-bottom: var(--space-small);
 
   .selector-button {
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue b/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
index c3719ada4..c23e07df1 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
@@ -17,6 +17,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .dropdown-menu--header {
+  display: inline-flex;
   list-style: none;
 
   .title {