chore: Refactor chat list for RTL (#6524)

* chore: Refactor chat list for RTL

* chore: Modal

* fix: Show more button margin

* chore: Inbox name fix

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

@@ -234,6 +234,7 @@
       }
 
       .show-more--button {
+        margin: unset;
         transform: rotate(180deg);
       }
     }
@@ -242,6 +243,14 @@
       text-align: right;
     }
 
+    // Card label
+    .label-container {
+      .label {
+        margin-left: var(--space-smaller);
+        margin-right: 0;
+      }
+    }
+
     // Secondary sidebar toggle button
     .toggle-sidebar {
       margin-left: 0;
@@ -404,14 +413,27 @@
     direction: initial;
   }
 
+  // Modal
+  .modal-container {
+    text-align: right;
+
+    .modal-footer {
+      button {
+        margin-left: 0;
+        margin-right: var(--space-small);
+      }
+    }
+  }
+
   // Other changes
 
   .account-selector--wrap {
     direction: initial;
   }
 
-  .inbox--name {
+  .inbox--name .inbox--icon {
-    direction: initial;
+    margin-left: var(--space-micro);
+    margin-right: 0;
   }
 
   .colorpicker--chrome {

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

@@ -13,18 +13,18 @@
   @include flex;
   @include flex-shrink;
   border-bottom: 1px solid transparent;
-  border-left: $space-micro solid transparent;
+  border-left: var(--space-micro) solid transparent;
   border-top: 1px solid transparent;
   cursor: pointer;
-  padding: 0 0 0 $space-normal;
+  padding: 0 var(--space-normal);
   position: relative;
 
   &.active {
     animation: left-shift-animation 0.25s $swift-ease-out-function;
-    background: $color-background;
+    background: var(--color-background);
-    border-bottom-color: $color-border-light;
+    border-bottom-color: var(--color-border-light);
-    border-left-color: $color-woot;
+    border-left-color: var(--color-woot);
-    border-top-color: $color-border-light;
+    border-top-color: var(--color-border-light);
 
     .conversation--details {
       border-top-color: transparent;
@@ -43,7 +43,7 @@
 
   &:last-child {
     .conversation--details {
-      border-bottom-color: $color-border-light;
+      border-bottom-color: var(--color-border-light);
     }
   }
 
@@ -51,33 +51,32 @@
     @include border-light-bottom;
     @include border-light-top;
     border-bottom-color: transparent;
-    margin: 0 0 0 $space-one;
+    padding: var(--space-slab) 0;
-    padding: $space-slab 0;
   }
 
   .conversation--user {
-    font-size: $font-size-small;
+    font-size: var(--font-size-small);
-    margin-bottom: 0;
+    margin: 0 var(--space-one);
     text-transform: capitalize;
 
     .label {
-      left: $space-micro;
+      left: var(--space-one);
-      max-width: $space-jumbo;
+      max-width: var(--space-jumbo);
       overflow: hidden;
       position: relative;
       text-overflow: ellipsis;
-      top: $space-micro;
+      top: var(--space-one);
       white-space: nowrap;
     }
   }
 
   .conversation--message {
-    color: $color-body;
+    color: var(--color-body);
-    font-size: $font-size-small;
+    font-size: var(--font-size-small);
-    font-weight: $font-weight-normal;
+    font-weight: var(--font-weight-normal);
-    height: $space-medium;
+    height: var(--space-medium);
-    line-height: $space-medium;
+    line-height: var(--space-medium);
-    margin: 0;
+    margin: 0 var(--space-one);
     max-width: 96%;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -89,32 +88,31 @@
     @include flex;
     flex-direction: column;
     position: absolute;
-    right: $space-normal;
+    right: var(--space-normal);
-    top: $space-normal;
+    top: var(--space-normal);
 
     .unread {
-      $unread-size: $space-normal;
       @include round-corner;
       @include light-shadow;
       background: darken($success-color, 3%);
-      color: $color-white;
+      color: var(--white);
       display: none;
-      font-size: $font-size-micro;
+      font-size: var(--font-size-micro);
-      font-weight: $font-weight-black;
+      font-weight: var(--font-weight-black);
-      height: $unread-size;
+      height: var(--space-normal);
-      line-height: $unread-size;
+      line-height: var(--space-normal);
       margin-left: auto;
-      margin-top: $space-smaller;
+      margin-top: var(--space-smaller);
-      min-width: $unread-size;
+      min-width: var(--space-normal);
-      padding: 0 $space-smaller;
+      padding: 0 var(--space-smaller);
       text-align: center;
     }
 
     .timestamp {
       color: $dark-gray;
-      font-size: $font-size-micro;
+      font-size: var(--font-size-micro);
-      font-weight: $font-weight-normal;
+      font-weight: var(--font-weight-normal);
-      line-height: $space-normal;
+      line-height: var(--space-normal);
       margin-left: auto;
     }
   }
@@ -125,11 +123,11 @@
     }
 
     .conversation--message {
-      font-weight: $font-weight-bold;
+      font-weight: var(--font-weight-bold);
     }
 
     .conversation--user {
-      font-weight: $font-weight-bold;
+      font-weight: var(--font-weight-bold);
     }
   }
 

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

@@ -81,8 +81,8 @@
   }
 
   .conversations-list {
-    overflow-y: auto;
     flex: 1 1;
+    overflow-y: auto;
 
     @include breakpoint(large up) {
       @include scroll-on-hover;

app/javascript/dashboard/components/widgets/InboxName.vue

@@ -25,6 +25,7 @@ export default {
 </script>
 <style scoped>
 .inbox--name {
+  align-items: center;
   display: inline-flex;
   padding: var(--space-micro) 0;
   line-height: var(--space-slab);
@@ -32,6 +33,7 @@ export default {
   background: none;
   color: var(--s-500);
   font-size: var(--font-size-mini);
+  margin: 0 var(--space-one);
 }
 
 .inbox--icon {

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -419,7 +419,6 @@ export default {
 .conversation--metadata {
   display: flex;
   justify-content: space-between;
-  padding-right: var(--space-normal);
 
   .label {
     background: none;

app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue

@@ -97,7 +97,7 @@ export default {
 }
 
 .label-container {
-  margin-top: var(--space-micro);
+  margin: var(--space-micro) var(--space-one) 0;
 }
 
 .labels-wrap {

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -350,10 +350,6 @@ export default {
   min-height: 8rem;
 }
 
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-}
 .row.gutter-small {
   gap: var(--space-small);
 }