chore: Refactors chatlist header css to work with RTL (#6520)

authored by 1277421+nithindavid@users.noreply.github.com

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -93,22 +93,10 @@
     @include flex;
     align-items: center;
     justify-content: space-between;
-    padding: $zero $zero $space-micro;
+    padding: 0 var(--space-normal);
 
     .page-title {
-      margin-bottom: $zero;
+      margin-bottom: 0;
-      margin-left: $space-normal;
-    }
-
-    .status--filter {
-      background-color: $color-background-light;
-      border: 1px solid $color-border;
-      float: right;
-      font-size: $font-size-mini;
-      height: $space-medium;
-      margin: 0;
-      padding: $zero $space-medium $zero $space-normal;
-      width: auto;
     }
   }
 

app/javascript/dashboard/components/ChatList.vue

@@ -53,11 +53,10 @@
         <woot-button
           v-else
           v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
-          variant="clear"
+          variant="smooth"
           color-scheme="secondary"
           icon="filter"
-          size="small"
+          size="tiny"
-          class="btn-filter"
           @click="onToggleAdvanceFiltersModal"
         />
       </div>
@@ -838,10 +837,6 @@ export default {
   align-items: center;
 }
 
-.btn-filter {
-  margin: 0 var(--space-smaller);
-}
-
 .filter__applied {
   padding: 0 0 var(--space-slab) 0 !important;
   border-bottom: 1px solid var(--color-border);
@@ -850,4 +845,14 @@ export default {
 .delete-custom-view__button {
   margin-right: var(--space-normal);
 }
+
+.tab--chat-type {
+  padding: 0 var(--space-normal);
+
+  ::v-deep {
+    .tabs {
+      padding: 0;
+    }
+  }
+}
 </style>

app/javascript/dashboard/components/SidemenuIcon.vue

@@ -22,7 +22,6 @@ export default {
 </script>
 <style scoped lang="scss">
 .toggle-sidebar {
-  margin-right: var(--space-small);
   margin-left: var(--space-minus-small);
 }
 </style>

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -181,7 +181,7 @@ export default {
   align-items: center;
   display: flex;
   justify-content: space-between;
-  padding: var(--space-smaller) 0 var(--space-smaller) var(--space-small);
+  padding: var(--space-smaller);
   margin: 0;
 
   .info-wrap {

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

@@ -44,3 +44,14 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.status--filter {
+  background-color: var(--color-background-light);
+  border: 1px solid var(--color-border);
+  font-size: var(--font-size-mini);
+  height: var(--space-medium);
+  margin: 0 var(--space-smaller);
+  padding: 0 var(--space-medium) 0 var(--space-small);
+  width: auto;
+}
+</style>

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -1,10 +1,10 @@
 <template>
   <div v-on-clickaway="closeSearch" class="search-wrap">
-    <div class="search-header--wrap">
+    <div class="search-header--wrap" :class="{ 'is-active': showSearchBox }">
       <woot-sidemenu-icon v-if="!showSearchBox" />
       <div class="search" :class="{ 'is-active': showSearchBox }">
         <div class="icon">
-          <fluent-icon icon="search" class="search--icon" size="28" />
+          <fluent-icon icon="search" class="search--icon" size="16" />
         </div>
         <input
           v-model="searchTerm"
@@ -12,11 +12,12 @@
           :placeholder="$t('CONVERSATION.SEARCH_MESSAGES')"
           @focus="onSearch"
         />
-        <switch-layout
-          :is-on-expanded-layout="isOnExpandedLayout"
-          @toggle="$emit('toggle-conversation-layout')"
-        />
       </div>
+      <switch-layout
+        v-if="!showSearchBox"
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggle="$emit('toggle-conversation-layout')"
+      />
     </div>
     <div v-if="showSearchBox" class="results-wrap">
       <div class="show-results">
@@ -162,13 +163,14 @@ export default {
 .search-header--wrap {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   min-height: var(--space-large);
 }
 
 .search {
   display: flex;
   flex: 1;
-  padding: 0;
+  padding: 0 var(--space-smaller);
   border-bottom: 1px solid transparent;
 
   &:hover {
@@ -193,8 +195,7 @@ export default {
 
 .search--icon {
   color: var(--s-600);
-  font-size: var(--font-size-large);
+  margin: 0 var(--space-smaller);
-  padding: 0 var(--space-small) 0 0;
 }
 
 .icon {

app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue

@@ -1,16 +1,14 @@
 <template>
-  <div>
+  <woot-button
-    <woot-button
+    v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
-      v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
+    icon="arrow-right-import"
-      icon="arrow-right-import"
+    size="tiny"
-      size="tiny"
+    variant="smooth"
-      variant="smooth"
+    color-scheme="secondary"
-      color-scheme="secondary"
+    class="layout-switch__container"
-      class="layout-switch__container"
+    :class="{ expanded: isOnExpandedLayout }"
-      :class="{ expanded: isOnExpandedLayout }"
+    @click="toggle"
-      @click="toggle"
+  />
-    />
-  </div>
 </template>
 
 <script>