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>

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 {

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);
 }

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);
 }
 

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>

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);

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>

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 {