chore: Refactor utility files for RTL (#6515)

* Chore: Refactor for RTL

* Chore: mInor fixes

* minor fixes

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

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

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

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"

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">

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"
       />

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">

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()"
     >

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()"
     >

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()"
     >

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"
     >

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()"
     >

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"
     >

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"
     >

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"
     >

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"
     >

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">

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"
     >

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"
     >

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"
     >