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-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;
+      margin-bottom: 0;
     }
   }
 

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"
-          class="btn-filter"
+          size="tiny"
           @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,12 +12,13 @@
           :placeholder="$t('CONVERSATION.SEARCH_MESSAGES')"
           @focus="onSearch"
         />
+      </div>
       <switch-layout
+        v-if="!showSearchBox"
         :is-on-expanded-layout="isOnExpandedLayout"
         @toggle="$emit('toggle-conversation-layout')"
       />
     </div>
-    </div>
     <div v-if="showSearchBox" class="results-wrap">
       <div class="show-results">
         <div>
@@ -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);
-  padding: 0 var(--space-small) 0 0;
+  margin: 0 var(--space-smaller);
 }
 
 .icon {

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

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <woot-button
     v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
     icon="arrow-right-import"
@@ -10,7 +9,6 @@
     :class="{ expanded: isOnExpandedLayout }"
     @click="toggle"
   />
-  </div>
 </template>
 
 <script>