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/assets/scss/_date-picker.scss

@@ -14,11 +14,11 @@
   }
 
   .mx-input {
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--s-200);
     border-radius: var(--border-radius-normal);
     box-shadow: none;
     display: flex;
-    height: 4.6rem;
+    height: 4.0rem;
   }
 
   .mx-input:disabled,

app/javascript/dashboard/assets/scss/_foundation-custom.scss

@@ -7,6 +7,10 @@
   }
 }
 
+select {
+  height: 4.0rem;
+}
+
 .card {
   margin-bottom: var(--space-small);
   padding: var(--space-normal);
@@ -64,7 +68,3 @@ code {
 .padding-right-small {
   padding-right: var(--space-one);
 }
-
-.margin-right-small {
-  margin-right: var(--space-small);
-}

app/javascript/dashboard/assets/scss/_utility-helpers.scss

@@ -1,7 +1,3 @@
-.margin-right-small {
-  margin-right: var(--space-small);
-}
-
 .margin-bottom-small {
   margin-bottom: var(--space-small);
 }

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -169,7 +169,7 @@
 }
 
 .multiselect-wrap--small {
-  $multiselect-height: 3.8rem;
+  $multiselect-height: 4.0rem;
 
   .multiselect__tags,
   .multiselect__input {

app/javascript/dashboard/assets/scss/widgets/_reports.scss

@@ -1,11 +1,3 @@
-.date-picker {
-  margin-left: var(--space-smaller);
-}
-
-.margin-left-small {
-  margin-left: var(--space-smaller);
-}
-
 .reports-option__rounded--item {
   border-radius: 100%;
   height: var(--space-two);
@@ -26,6 +18,10 @@
   display: flex;
 }
 
+.reports-option__title {
+  margin: 0 var(--space-small);
+}
+
 .business-hours {
   align-items: center;
   display: flex;
@@ -37,6 +33,7 @@
 
 .business-hours-text {
   font-size: var(--font-size-small);
+  margin: 0 var(--space-small);
 }
 
 .switch {

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

@@ -24,16 +24,13 @@
             <inbox-name
               v-if="hasMultipleInboxes"
               :inbox="inbox"
-              class="margin-right-small"
+              class="margin-right-1"
             />
-            <span
-              v-if="isSnoozed"
-              class="snoozed--display-text margin-right-small"
-            >
+            <span v-if="isSnoozed" class="snoozed--display-text margin-right-1">
               {{ snoozedDisplayText }}
             </span>
             <woot-button
-              class="user--profile__button margin-right-small"
+              class="user--profile__button margin-right-1"
               size="small"
               variant="link"
               @click="$emit('contact-panel-toggle')"

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bulk-action__agents">
+  <div v-on-clickaway="onClose" class="bulk-action__agents">
     <div class="triangle" :style="cssVars">
       <svg height="12" viewBox="0 0 24 12" width="24">
         <path
@@ -50,7 +50,6 @@
                 :status="agent.availability_status"
                 :username="agent.name"
                 size="22px"
-                class="margin-right-small"
               />
               <span class="reports-option__title">{{ agent.name }}</span>
             </div>

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>