From 6407745571a3498ada226a463b40813cbd46680b Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 23 Feb 2023 18:18:28 +0530
Subject: [PATCH] chore: Woot tabs for RTL(#6518)

---
 .../dashboard/assets/scss/widgets/_tabs.scss  | 34 +++++++++----------
 .../dashboard/settings/inbox/Settings.vue     |  7 ++++
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
index 9a6f6951c..2f49945cd 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
@@ -12,7 +12,7 @@
   border-top-width: 0;
   display: flex;
   min-width: var(--space-mega);
-  padding: $zero $space-normal;
+  padding: 0 var(--space-normal);
 }
 
 .tabs--with-scroll {
@@ -37,26 +37,26 @@
 
   .tabs-title {
     a {
-      font-size: $font-size-default;
-      font-weight: $font-weight-medium;
-      padding-bottom: $space-slab;
-      padding-top: $space-slab;
+      font-size: var(--font-size-default);
+      font-weight: var(--font-weight-medium);
+      padding-bottom: var(--space-slab);
+      padding-top: var(--space-slab);
     }
   }
 }
 
 .tabs-title {
   flex-shrink: 0;
-  margin: $zero $space-slab;
+  margin: 0 var(--space-slab);
 
   .badge {
-    background: $color-background;
-    border-radius: $space-small;
-    color: $color-gray;
-    font-size: $font-size-micro;
-    font-weight: $font-weight-black;
-    margin-left: $space-smaller;
-    padding: $space-smaller;
+    background: var(--color-background);
+    border-radius: var(--space-small);
+    color: var(--color-gray);
+    font-size: var(--font-size-micro);
+    font-weight: var(--font-weight-black);
+    margin: 0 var(--space-smaller);
+    padding: var(--space-smaller);
   }
 
   &:first-child {
@@ -80,7 +80,7 @@
     color: $medium-gray;
     display: flex;
     flex-direction: row;
-    font-size: $font-size-small;
+    font-size: var(--font-size-small);
     position: relative;
     top: 1px;
     transition: border-color 0.15s $swift-ease-out-function;
@@ -88,13 +88,13 @@
 
   &.is-active {
     a {
-      border-bottom-color: $color-woot;
-      color: $color-woot;
+      border-bottom-color: var(--color-woot);
+      color: var(--color-woot);
     }
 
     .badge {
       background: $color-extra-light-blue;
-      color: $color-woot;
+      color: var(--color-woot);
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index e986362ba..8011bc5a4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -5,6 +5,7 @@
       :header-title="inboxName"
     >
       <woot-tabs
+        class="settings--tabs"
         :index="selectedTabIndex"
         :border="false"
         @change="onTabChange"
@@ -669,6 +670,12 @@ export default {
 .settings {
   background: $color-white;
 
+  .settings--tabs {
+    ::v-deep .tabs {
+      padding: 0;
+    }
+  }
+
   .settings--content {
     div:last-child {
       border-bottom: 0;