From fdf8b3f369b514bb6af1152db8dc34faeba2b33b Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 23 Feb 2023 16:59:48 +0530
Subject: [PATCH] chore: Refactor utility files for RTL (#6515)

* Chore: Refactor for RTL

* Chore: mInor fixes

* minor fixes
---
 .../dashboard/assets/scss/_layout.scss        |  4 ++--
 .../assets/scss/_utility-helpers.scss         | 10 ++++++++
 .../assets/scss/widgets/_buttons.scss         | 24 +++++++------------
 .../components/NotificationTable.vue          |  2 +-
 .../dashboard/settings/SettingsHeader.vue     |  2 +-
 .../dashboard/settings/account/Index.vue      |  2 +-
 .../dashboard/settings/agentBots/Index.vue    |  2 +-
 .../dashboard/settings/agents/Index.vue       |  2 +-
 .../dashboard/settings/attributes/Index.vue   |  2 +-
 .../dashboard/settings/automation/Index.vue   |  2 +-
 .../dashboard/settings/campaigns/Index.vue    |  2 +-
 .../dashboard/settings/canned/Index.vue       |  2 +-
 .../integrationapps/IntegrationHooks.vue      |  2 +-
 .../integrations/DashboardApps/Index.vue      |  2 +-
 .../settings/integrations/Webhooks/Index.vue  |  2 +-
 .../dashboard/settings/labels/Index.vue       |  2 +-
 .../dashboard/settings/macros/Index.vue       |  2 +-
 .../settings/reports/CsatResponses.vue        |  2 +-
 .../dashboard/settings/reports/Index.vue      |  2 +-
 .../reports/components/WootReports.vue        |  2 +-
 20 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_layout.scss b/app/javascript/dashboard/assets/scss/_layout.scss
index 682ca7670..952274321 100644
--- a/app/javascript/dashboard/assets/scss/_layout.scss
+++ b/app/javascript/dashboard/assets/scss/_layout.scss
@@ -16,12 +16,12 @@ body {
 }
 
 .banner + .app-wrapper {
-  .button--fixed-right-top {
+  .button--fixed-top {
     top: 5.6 * $space-one;
   }
 
   .off-canvas-content {
-    .button--fixed-right-top {
+    .button--fixed-top {
       top: $space-small;
     }
   }
diff --git a/app/javascript/dashboard/assets/scss/_utility-helpers.scss b/app/javascript/dashboard/assets/scss/_utility-helpers.scss
index a54b43b2f..2645e6798 100644
--- a/app/javascript/dashboard/assets/scss/_utility-helpers.scss
+++ b/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: var(--space-small);
+  top: var(--space-small);
+}
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 15f344ddf..58945ffb5 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/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 {
@@ -205,11 +205,3 @@ $default-button-height: 4.0rem;
   }
 
 }
-
-
-// @TDOD move to utility file
-.button--fixed-right-top {
-  position: fixed;
-  right: $space-small;
-  top: $space-small;
-}
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
index fc68afb40..0c9553275 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
@@ -2,7 +2,7 @@
   <section class="notification--table-wrap">
     <woot-submit-button
       v-if="notificationMetadata.unreadCount"
-      class="button nice success button--fixed-right-top"
+      class="button nice success button--fixed-top"
       :button-text="$t('NOTIFICATIONS_PAGE.MARK_ALL_DONE')"
       :loading="isUpdating"
       @click="onMarkAllDoneClick"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index 906394a07..63ad2b12f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -14,7 +14,7 @@
     <router-link
       v-if="showNewButton && isAdmin"
       :to="buttonRoute"
-      class="button success button--fixed-right-top"
+      class="button success button--fixed-top"
     >
       <fluent-icon icon="add-circle" />
       <span class="button__content">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
index 2757e8a4e..526324da1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
@@ -107,7 +107,7 @@
       </div>
 
       <woot-submit-button
-        class="button nice success button--fixed-right-top"
+        class="button nice success button--fixed-top"
         :button-text="$t('GENERAL_SETTINGS.SUBMIT')"
         :loading="isUpdating"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
index b686a4127..6953613f7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
@@ -29,7 +29,7 @@
     </div>
     <woot-button
       color-scheme="success"
-      class-names="button--fixed-right-top"
+      class-names="button--fixed-top"
       icon="add-circle"
     >
       <router-link :to="newAgentBotsURL" class="white-text">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index 848526791..8656901a7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -2,7 +2,7 @@
   <div class="column content-box">
     <woot-button
       color-scheme="success"
-      class-names="button--fixed-right-top"
+      class-names="button--fixed-top"
       icon="add-circle"
       @click="openAddPopup()"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
index fc7b6b6b5..9a96db775 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
@@ -2,7 +2,7 @@
   <div class="column content-box">
     <woot-button
       color-scheme="success"
-      class-names="button--fixed-right-top"
+      class-names="button--fixed-top"
       icon="add-circle"
       @click="openAddPopup()"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index 9940b05f0..e75689688 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -2,7 +2,7 @@
   <div class="column content-box">
     <woot-button
       color-scheme="success"
-      class-names="button--fixed-right-top"
+      class-names="button--fixed-top"
       icon="add-circle"
       @click="openAddPopup()"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
index 822c9cb88..b271e3ab8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
@@ -2,7 +2,7 @@
   <div class="column content-box">
     <woot-button
       color-scheme="success"
-      class-names="button--fixed-right-top"
+      class-names="button--fixed-top"
       icon="add-circle"
       @click="openAddPopup"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index 16900bbe9..6e8b1165f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -2,7 +2,7 @@
   <div class="column content-box">
     <woot-button
       color-scheme="success"
-      class-names="button--fixed-right-top"
+      class-names="button--fixed-top"
       icon="add-circle"
       @click="openAddPopup()"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue
index 2c1b8579c..0b92ed5e0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue
@@ -3,7 +3,7 @@
     <woot-button
       v-if="showAddButton"
       color-scheme="success"
-      class-names="button--fixed-right-top"
+      class-names="button--fixed-top"
       icon="add-circle"
       @click="openAddHookModal"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
index ce0b48e3e..b017d8040 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
@@ -2,7 +2,7 @@
   <div class="row content-box full-height">
     <woot-button
       color-scheme="success"
-      class-names="button--fixed-right-top"
+      class-names="button--fixed-top"
       icon="add-circle"
       @click="openCreatePopup"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
index 8bd36c0a8..930e0e079 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -2,7 +2,7 @@
   <div class="row content-box full-height">
     <woot-button
       color-scheme="success"
-      class-names="button--fixed-right-top"
+      class-names="button--fixed-top"
       icon="add-circle"
       @click="openAddPopup"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index eee8fd231..42d6eb244 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -2,7 +2,7 @@
   <div class="column content-box">
     <woot-button
       color-scheme="success"
-      class-names="button--fixed-right-top"
+      class-names="button--fixed-top"
       icon="add-circle"
       @click="openAddPopup"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
index 31f661a55..2bc381ff1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -2,7 +2,7 @@
   <div class="column content-box">
     <router-link
       :to="addAccountScoping('settings/macros/new')"
-      class="button success button--fixed-right-top"
+      class="button success button--fixed-top"
     >
       <fluent-icon icon="add-circle" />
       <span class="button__content">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
index 740006c59..f72ad8bad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
@@ -9,7 +9,7 @@
     />
     <woot-button
       color-scheme="success"
-      class-names="button--fixed-right-top"
+      class-names="button--fixed-top"
       icon="arrow-download"
       @click="downloadReports"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index e3d56a7fc..15db4d805 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -2,7 +2,7 @@
   <div class="column content-box">
     <woot-button
       color-scheme="success"
-      class-names="button--fixed-right-top"
+      class-names="button--fixed-top"
       icon="arrow-download"
       @click="downloadAgentReports"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
index a28d213ab..aeeab94fe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -2,7 +2,7 @@
   <div class="column content-box">
     <woot-button
       color-scheme="success"
-      class-names="button--fixed-right-top"
+      class-names="button--fixed-top"
       icon="arrow-download"
       @click="downloadReports"
     >