chore: Refactor reports for RTL (#6517)

* Refactor reports

* fix: spacing issues and minor fixes

---------

Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>

app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue

@@ -29,7 +29,7 @@
         </div>
         <woot-button
           v-if="hasActiveSegments"
-          class="margin-right-small clear"
+          class="margin-right-1 clear"
           color-scheme="alert"
           icon="delete"
           @click="onToggleDeleteSegmentsModal"
@@ -39,7 +39,7 @@
         <div v-if="!hasActiveSegments" class="filters__button-wrap">
           <div v-if="hasAppliedFilters" class="filters__applied-indicator" />
           <woot-button
-            class="margin-right-small clear"
+            class="margin-right-1 clear"
             color-scheme="secondary"
             data-testid="create-new-contact"
             icon="filter"
@@ -51,7 +51,7 @@
 
         <woot-button
           v-if="hasAppliedFilters && !hasActiveSegments"
-          class="margin-right-small clear"
+          class="margin-right-1 clear"
           color-scheme="alert"
           variant="clear"
           icon="save"
@@ -60,7 +60,7 @@
           {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }}
         </woot-button>
         <woot-button
-          class="margin-right-small clear"
+          class="margin-right-1 clear"
           color-scheme="success"
           icon="person-add"
           data-testid="create-new-contact"

app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue

@@ -13,7 +13,7 @@
         :src="contact.thumbnail"
         :username="contact.name"
         size="32px"
-        class="margin-right-small"
+        class="margin-right-1"
       />
     </settings-header>
 

app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue

@@ -58,6 +58,7 @@
 
         <label
           v-if="isOnOffType"
+          class="multiselect-wrap--small"
           :class="{ error: $v.selectedAudience.$error }"
         >
           {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.LABEL') }}

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue

@@ -26,7 +26,7 @@
           type="checkbox"
           :value="event"
           name="subscriptions"
-          class="margin-right-small"
+          class="margin-right-1"
         />
         <span class="fs-small">
           {{ `${getEventLabel(event)} (${event})` }}

app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex-container flex-dir-column medium-flex-dir-row">
-    <div class="small-12 medium-3 pull-right">
+    <div class="small-12 medium-3 pull-right multiselect-wrap--small">
       <multiselect
         v-model="currentDateRangeSelection"
         track-by="name"
@@ -17,6 +17,7 @@
     </div>
     <woot-date-range-picker
       v-if="isDateRangeSelected"
+      class="margin-left-1"
       show-range
       :value="customDateRange"
       :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
@@ -25,7 +26,7 @@
     />
     <div
       v-if="notLast7Days && groupByFilter"
-      class="small-12 medium-3 pull-right margin-left-small"
+      class="small-12 medium-3 pull-right margin-left-1 margin-right-1 multiselect-wrap--small"
     >
       <p aria-hidden="true" class="hide">
         {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
@@ -43,7 +44,7 @@
     </div>
     <div
       v-if="agentsFilter"
-      class="small-12 medium-3 pull-right margin-left-small"
+      class="small-12 medium-3 pull-right margin-left-1 margin-right-1 multiselect-wrap--small"
     >
       <multiselect
         v-model="selectedAgents"
@@ -65,7 +66,7 @@
       v-if="showBusinessHoursSwitch"
       class="small-12 medium-3 business-hours"
     >
-      <span class="business-hours-text margin-right-small">
+      <span class="business-hours-text margin-right-1">
         {{ $t('REPORT.BUSINESS_HOURS') }}
       </span>
       <span>
@@ -76,13 +77,14 @@
 </template>
 <script>
 import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
-const CUSTOM_DATE_RANGE_ID = 5;
 import subDays from 'date-fns/subDays';
 import startOfDay from 'date-fns/startOfDay';
 import getUnixTime from 'date-fns/getUnixTime';
 import { GROUP_BY_FILTER } from '../constants';
 import endOfDay from 'date-fns/endOfDay';
 
+const CUSTOM_DATE_RANGE_ID = 5;
+
 export default {
   components: {
     WootDateRangePicker,
@@ -207,9 +209,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.date-picker {
-  margin-left: var(--space-smaller);
-}
-</style>

app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="flex-container flex-dir-column medium-flex-dir-row">
-    <div v-if="type === 'agent'" class="small-12 medium-3 pull-right">
+    <div
+      v-if="type === 'agent'"
+      class="small-12 medium-3 pull-right multiselect-wrap--small"
+    >
       <p>
         {{ $t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL') }}
       </p>
@@ -21,7 +24,6 @@
               :status="props.option.availability_status"
               :username="props.option.name"
               size="22px"
-              class="margin-right-small"
             />
             <span class="reports-option__desc">
               <span class="reports-option__title">{{ props.option.name }}</span>
@@ -35,14 +37,16 @@
               :status="props.option.availability_status"
               :username="props.option.name"
               size="22px"
-              class="margin-right-small"
             />
-            <p>{{ props.option.name }}</p>
+            <p class="reports-option__title">{{ props.option.name }}</p>
           </div>
         </template>
       </multiselect>
     </div>
-    <div v-else-if="type === 'label'" class="small-12 medium-3 pull-right">
+    <div
+      v-else-if="type === 'label'"
+      class="small-12 medium-3 pull-right multiselect-wrap--small"
+    >
       <p>
         {{ $t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL') }}
       </p>
@@ -60,7 +64,7 @@
           <div class="reports-option__wrap">
             <div
               :style="{ backgroundColor: props.option.color }"
-              class="reports-option__rounded--item margin-right-small"
+              class="reports-option__rounded--item"
             />
             <span class="reports-option__desc">
               <span class="reports-option__title">
@@ -88,7 +92,7 @@
         </template>
       </multiselect>
     </div>
-    <div v-else class="small-12 medium-3 pull-right">
+    <div v-else class="small-12 medium-3 pull-right multiselect-wrap--small">
       <p>
         <template v-if="type === 'inbox'">
           {{ $t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL') }}
@@ -115,7 +119,9 @@
         @input="changeFilterSelection"
       />
     </div>
-    <div class="small-12 medium-3 pull-right margin-left-small">
+    <div
+      class="small-12 medium-3 pull-right margin-right-1 margin-left-1 multiselect-wrap--small"
+    >
       <p>
         {{ $t('REPORT.DURATION_FILTER_LABEL') }}
       </p>
@@ -133,17 +139,21 @@
         @select="changeDateSelection"
       />
     </div>
-    <woot-date-range-picker
-      v-if="isDateRangeSelected"
-      show-range
-      :value="customDateRange"
-      :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
-      :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
-      @change="onChange"
-    />
+    <div v-if="isDateRangeSelected" class="">
+      <p>
+        {{ $t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER') }}
+      </p>
+      <woot-date-range-picker
+        show-range
+        :value="customDateRange"
+        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+        @change="onChange"
+      />
+    </div>
     <div
       v-if="notLast7Days"
-      class="small-12 medium-3 pull-right margin-left-small"
+      class="small-12 medium-3 pull-right margin-right-1 margin-left-1 multiselect-wrap--small"
     >
       <p>
         {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
@@ -160,7 +170,7 @@
       />
     </div>
     <div class="small-12 medium-3 business-hours">
-      <span class="business-hours-text margin-right-small">
+      <span class="business-hours-text">
         {{ $t('REPORT.BUSINESS_HOURS') }}
       </span>
       <span>