chore: Improves styling for conversation header (#1167)

Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>

app/javascript/dashboard/assets/scss/_helper-classes.scss

@@ -69,3 +69,11 @@ select {
     border-top-left-radius: 0 !important;
   }
 }
+
+.justify-space-between {
+  justify-content: space-between;
+}
+
+.w-100 {
+  width: 100%;
+}

app/javascript/dashboard/assets/scss/_mixins.scss

@@ -1,3 +1,4 @@
+@import '~dashboard/assets/scss/variables';
 @import '~widget/assets/scss/mixins';
 
 $spinner-before-border-color: rgba(255, 255, 255, 0.7);
@@ -235,12 +236,3 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-
-.justify-space-between {
-  justify-content: space-between;
-}
-
-.w-100 {
-  width: 100%;
-}

app/javascript/dashboard/assets/scss/widgets/_conv-header.scss

@@ -41,6 +41,10 @@
     @include flex;
     @include flex-align($x: center, $y: middle);
 
+    &.hide {
+      visibility: hidden;
+    }
+
     .user--name {
       @include margin(0);
       font-size: $font-size-medium;
@@ -83,3 +87,15 @@
     }
   }
 }
+
+
+.header-actions-wrap {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  justify-content: flex-end;
+
+  &.has-open-sidebar {
+    justify-content: flex-end;
+  }
+}

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

@@ -1,6 +1,6 @@
 <template>
   <div class="conv-header">
-    <div v-if="!isContactPanelOpen" class="user">
+    <div class="user" :class="{ hide: isContactPanelOpen }">
       <Thumbnail
         :src="currentContact.thumbnail"
         size="40px"
@@ -25,8 +25,8 @@
       </div>
     </div>
     <div
-      class="flex-container"
+      class="header-actions-wrap"
-      :class="{ 'justify-space-between w-100': isContactPanelOpen }"
+      :class="{ 'has-open-sidebar': isContactPanelOpen }"
     >
       <div class="multiselect-box ion-headphone">
         <multiselect

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

@@ -5,9 +5,8 @@
       :status="currentChat.status"
     />
     <woot-button
-      class="success more--button"
+      class="clear more--button"
-      icon="ion-more"
+      icon="ion-android-more-vertical"
-      :class="buttonClass"
       @click="toggleConversationActions"
     />
     <div
@@ -18,17 +17,15 @@
     >
       <button
         v-if="!currentChat.muted"
-        class="button small clear row nice alert small-6 action--button"
+        class="button small clear row alert small-6 action--button"
         @click="mute"
       >
-        <i class="icon ion-volume-mute" />
         <span>{{ $t('CONTACT_PANEL.MUTE_CONTACT') }}</span>
       </button>
       <button
-        class="button small clear row nice small-6 action--button"
+        class="button small clear row small-6 action--button"
         @click="toggleEmailActionsModal"
       >
-        <i class="icon ion-ios-copy" />
         {{ $t('CONTACT_PANEL.SEND_TRANSCRIPT') }}
       </button>
     </div>
@@ -46,7 +43,6 @@ import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import EmailTranscriptModal from './EmailTranscriptModal';
 import ResolveAction from '../../buttons/ResolveAction';
-import wootConstants from '../../../constants';
 
 export default {
   components: {
@@ -64,12 +60,6 @@ export default {
     ...mapGetters({
       currentChat: 'getSelectedChat',
     }),
-
-    buttonClass() {
-      return this.currentChat.status !== wootConstants.STATUS_TYPE.OPEN
-        ? 'warning'
-        : 'success';
-    },
   },
   methods: {
     mute() {
@@ -91,11 +81,17 @@ export default {
 };
 </script>
 <style scoped lang="scss">
+@import '~dashboard/assets/scss/mixins';
+
 .more--button {
   align-items: center;
   display: flex;
-  margin-left: var(--space-smaller);
+  margin-left: var(--space-small);
   padding: var(--space-small);
+
+  &.clear.more--button {
+    color: var(--color-body);
+  }
 }
 
 .actions--container {
@@ -103,11 +99,25 @@ export default {
 }
 
 .dropdown-pane {
-  right: 0;
+  @include elegant-card;
+  @include border-light;
+  right: -12px;
   top: 48px;
-  border: 1px solid var(--s-100);
-  border-radius: var(--space-smaller);
   width: auto;
+
+  &::before {
+    @include arrow(top, var(--color-border-light), 14px);
+    top: -14px;
+    position: absolute;
+    right: 6px;
+  }
+
+  &::after {
+    @include arrow(top, white, var(--space-slab));
+    top: -12px;
+    position: absolute;
+    right: var(--space-small);
+  }
 }
 
 .dropdown-pane--open {
@@ -119,10 +129,11 @@ export default {
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--space-small) 0;
+  padding: var(--space-small) var(--space-smaller);
+  font-size: var(--font-size-small);
 
   .icon {
-    margin-right: var(--space-small);
+    margin-right: var(--space-smaller);
     min-width: var(--space-normal);
   }
 }

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -3,7 +3,7 @@
     <div class="contact--info">
       <thumbnail
         :src="contact.thumbnail"
-        size="48px"
+        size="64px"
         :badge="channelType"
         :username="contact.name"
         :status="contact.availability_status"

app/javascript/shared/assets/stylesheets/colors.scss

@@ -1,7 +1,7 @@
 :root {
   --white: #fff;
 
-  --w-50:  #E3F2FF;
+  --w-50: #E3F2FF;
   --w-100: #BBDDFF;
   --w-200: #8FC9FF;
   --w-300: #61B3FF;
@@ -12,7 +12,7 @@
   --w-800: #2161CA;
   --w-900: #1F41AB;
 
-  --g-50:  #E6F8E6;
+  --g-50: #E6F8E6;
   --g-100: #C4EEC2;
   --g-200: #9DE29A;
   --g-300: #6FD86F;
@@ -23,7 +23,7 @@
   --g-800: #009000;
   --g-900: #007000;
 
-  --y-50:  #FFFEE8;
+  --y-50: #FFFEE8;
   --y-100: #FFFAC5;
   --y-200: #FFF69E;
   --y-300: #FEF176;
@@ -34,7 +34,7 @@
   --y-800: #FDAD2A;
   --y-900: #F9841B;
 
-  --s-50:  #E7EEFB;
+  --s-50: #E7EEFB;
   --s-100: #C8D6E6;
   --s-200: #ABBACE;
   --s-300: #8C9EB6;
@@ -45,7 +45,7 @@
   --s-800: #314155;
   --s-900: #1F2D3D;
 
-  --b-50:#F8F9FE;
+  --b-50: #F8F9FE;
   --b-100: #F2F3F7;
   --b-200: #E9EAEF;
   --b-300: #DADBDF;
@@ -56,7 +56,7 @@
   --b-800: #3C3D40;
   --b-900: #1B1C1F;
 
-  --r-50:  #FFEBEE;
+  --r-50: #FFEBEE;
   --r-100: #FFCCD1;
   --r-200: #F69898;
   --r-300: #EF6F6F;
@@ -66,4 +66,15 @@
   --r-700: #DE1E27;
   --r-800: #D11320;
   --r-900: #C30011;
+
+  // Common color aliases
+  --color-heading: #1f2d3d;
+  --color-body: #3c4858;
+
+  --color-border: #e0e6ed;
+  --color-border-light: #f0f4f5;
+  --color-border-dark: #cad0d4;
+
+  --color-background: #f4f6fb;
+  --color-background-light: #f9fafc;
 }