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="{ 'justify-space-between w-100': isContactPanelOpen }"
+      class="header-actions-wrap"
+      :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"
-      icon="ion-more"
-      :class="buttonClass"
+      class="clear more--button"
+      icon="ion-android-more-vertical"
       @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

@@ -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;
 }