feat: Adds support on direction RTL in UI

app/javascript/dashboard/App.vue

@@ -1,5 +1,10 @@
 <template>
-  <div v-if="!authUIFlags.isFetching" id="app" class="app-wrapper app-root">
+  <div
+    v-if="!authUIFlags.isFetching"
+    id="app"
+    class="app-wrapper app-root"
+    :class="{ 'app-rtl--wrapper': isRTLView }"
+  >
     <update-banner :latest-chatwoot-version="latestChatwootVersion" />
     <transition name="fade" mode="out-in">
       <router-view />
@@ -22,6 +27,8 @@ import NetworkNotification from './components/NetworkNotification';
 import UpdateBanner from './components/app/UpdateBanner.vue';
 import vueActionCable from './helper/actionCable';
 import WootSnackbarBox from './components/SnackbarContainer';
+import rtlMixin from 'shared/mixins/rtlMixin';
+
 import {
   registerSubscription,
   verifyServiceWorkerExistence,
@@ -37,6 +44,7 @@ export default {
     UpdateBanner,
     WootSnackbarBox,
   },
+  mixins: [rtlMixin],
 
   data() {
     return {

app/javascript/dashboard/assets/scss/_rtl.scss

@@ -0,0 +1,4 @@
+.app-rtl--wrapper {
+  direction: rtl;
+  unicode-bidi: embed;
+}

app/javascript/dashboard/assets/scss/_utility-helpers.scss

@@ -14,6 +14,10 @@
   margin-left: var(--space-minus-slab);
 }
 
+.margin-right-minus-slab {
+  margin-right: var(--space-minus-slab);
+}
+
 .fs-small {
   font-size: var(--font-size-small);
 }
@@ -75,3 +79,9 @@
   align-items: center;
   display: flex;
 }
+
+.button--fixed-top {
+  position: fixed;
+  right: $space-small;
+  top: $space-small;
+}

app/javascript/dashboard/assets/scss/_woot.scss

@@ -41,6 +41,7 @@
 @import 'layout';
 @import 'animations';
 @import 'foundation-custom';
+@import 'rtl';
 
 @import 'widgets/buttons';
 @import 'widgets/conv-header';

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -48,7 +48,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        width: 100%;
+        width: fit-content;
       }
 
       p {

app/javascript/dashboard/assets/scss/views/settings/inbox.scss

@@ -26,6 +26,8 @@
 }
 
 .wizard-box {
+  direction: ltr;
+
   .item {
     @include background-light;
 

app/javascript/dashboard/assets/scss/views/settings/integrations.scss

@@ -18,12 +18,14 @@
       }
     }
 
-    .integration--title {
-      font-size: $font-size-large;
+    .integration--type {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
     }
 
-    .integration--description {
-      padding-right: $space-medium;
+    .integration--title {
+      font-size: $font-size-large;
     }
 
     .button-wrap {

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -50,22 +50,22 @@ $default-button-height: 4.0rem;
 
     &.secondary {
       border-color: var(--s-200);
-      color: var(--s-700)
+      color: var(--s-700);
     }
 
     &.success {
       border-color: var(--s-200);
-      color: var(--g-700)
+      color: var(--g-700);
     }
 
     &.alert {
       border-color: var(--s-200);
-      color: var(--r-700)
+      color: var(--r-700);
     }
 
     &.warning {
       border-color: var(--s-200);
-      color: var(--y-700)
+      color: var(--y-700);
     }
 
     &:hover {
@@ -116,19 +116,19 @@ $default-button-height: 4.0rem;
     color: var(--w-700);
 
     &.secondary {
-      color: var(--s-700)
+      color: var(--s-700);
     }
 
     &.success {
-      color: var(--g-700)
+      color: var(--g-700);
     }
 
     &.alert {
-      color: var(--r-700)
+      color: var(--r-700);
     }
 
     &.warning {
-      color: var(--y-700)
+      color: var(--y-700);
     }
 
     &:hover {
@@ -203,13 +203,5 @@ $default-button-height: 4.0rem;
       text-decoration: underline;
     }
   }
-
 }
 
-
-// @TDOD move to utility file
-.button--fixed-right-top {
-  position: fixed;
-  right: $space-small;
-  top: $space-small;
-}

app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss

@@ -16,7 +16,7 @@
   border-left: $space-micro solid transparent;
   border-top: 1px solid transparent;
   cursor: pointer;
-  padding: 0 0 0 $space-normal;
+  padding: 0 $space-normal;
   position: relative;
 
   &.active {
@@ -51,13 +51,17 @@
     @include border-light-bottom;
     @include border-light-top;
     border-bottom-color: transparent;
-    margin: 0 0 0 $space-one;
     padding: $space-slab 0;
   }
 
+  .conversation-user--wrap {
+    display: flex;
+    justify-content: space-between;
+  }
+
   .conversation--user {
     font-size: $font-size-small;
-    margin-bottom: 0;
+    margin: 0 $space-one;
     text-transform: capitalize;
 
     .label {
@@ -77,7 +81,7 @@
     font-weight: $font-weight-normal;
     height: $space-medium;
     line-height: $space-medium;
-    margin: 0;
+    margin: 0 $space-one;
     max-width: 96%;
     overflow: hidden;
     text-overflow: ellipsis;

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -69,6 +69,10 @@
   @include flex;
   flex-direction: column;
 
+  .conversations-list--header {
+    padding: var(--space-one) var(--space-normal) 0;
+  }
+
   .load-more-conversations {
     font-size: $font-size-small;
     margin: 0;
@@ -81,8 +85,8 @@
   }
 
   .conversations-list {
-    overflow-y: auto;
     flex: 1 1;
+    overflow-y: auto;
 
     @include breakpoint(large up) {
       @include scroll-on-hover;
@@ -93,11 +97,10 @@
     @include flex;
     align-items: center;
     justify-content: space-between;
-    padding: $zero $zero $space-micro;
+    padding: $space-smaller $zero $space-micro;
 
     .page-title {
       margin-bottom: $zero;
-      margin-left: $space-normal;
     }
 
     .status--filter {
@@ -106,7 +109,7 @@
       float: right;
       font-size: $font-size-mini;
       height: $space-medium;
-      margin: 0;
+      margin: 0 var(--space-smaller);
       padding: $zero $space-medium $zero $space-normal;
       width: auto;
     }
@@ -324,8 +327,7 @@
     font-size: var(--font-size-small);
     justify-content: center;
     margin: var(--space-smaller) 0;
-    padding: var(--space-smaller) var(--space-micro) var(--space-smaller)
-      var(--space-one);
+    padding: var(--space-smaller) var(--space-small);
 
     .is-text {
       align-items: center;

app/javascript/dashboard/assets/scss/widgets/_report.scss

@@ -41,7 +41,7 @@
 
   .metric-trend {
     font-size: $font-size-small;
-    margin-left: $space-small;
+    margin: 0 $space-small;
   }
 
   .metric-up {

app/javascript/dashboard/assets/scss/widgets/_reports.scss

@@ -6,6 +6,10 @@
   margin-left: var(--space-smaller);
 }
 
+.margin-right-small {
+  margin-right: var(--space-smaller);
+}
+
 .reports-option__rounded--item {
   border-radius: 100%;
   height: var(--space-two);
@@ -26,6 +30,10 @@
   display: flex;
 }
 
+.reports-option__title {
+  margin: 0 var(--space-small);
+}
+
 .business-hours {
   align-items: center;
   display: flex;
@@ -37,6 +45,7 @@
 
 .business-hours-text {
   font-size: var(--font-size-small);
+  margin: 0 var(--space-small);
 }
 
 .switch {

app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss

@@ -65,9 +65,13 @@
 
 .header--icon {
   display: block;
-  margin-right: $space-normal;
+  margin-left: $space-small;
 
   @media screen and (max-width: 1200px) {
     display: none;
   }
 }
+
+.header-title {
+  margin: 0 $space-small;
+}

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -55,7 +55,7 @@
     color: $color-gray;
     font-size: $font-size-micro;
     font-weight: $font-weight-black;
-    margin-left: $space-smaller;
+    margin: 0 $space-smaller;
     padding: $space-smaller;
   }
 

app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss

@@ -5,6 +5,7 @@ table {
   thead {
     th {
       font-weight: $font-weight-bold;
+      text-align: left;
       text-transform: uppercase;
     }
   }