Enhancement: Add focus state for reply box in dashboard (#999)

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>

.scss-lint.yml

@@ -51,7 +51,7 @@ linters:
 
   ElsePlacement:
     enabled: true
-    style: same_line # or 'new_line'
+    style: new_line
 
   EmptyLineBetweenBlocks:
     enabled: true

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

@@ -25,7 +25,7 @@
   width: $space-medium;
 
   &.message {
-    @include elegent-shadow;
+    @include normal-shadow;
     background: $color-white;
     border-radius: $space-large;
     left: 0;

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

@@ -1,6 +1,5 @@
 @import '~widget/assets/scss/mixins';
 
-$elegant-shadow-color: rgba(49, 49, 93, 0.15);
 $spinner-before-border-color: rgba(255, 255, 255, 0.7);
 
 //borders
@@ -141,12 +140,8 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
   overflow-y: auto;
 }
 
-@mixin elegent-shadow() {
-  box-shadow: 0 10px 25px 0 $elegant-shadow-color;
-}
-
 @mixin elegant-card() {
-  @include elegent-shadow;
+  @include normal-shadow;
   border-radius: $space-small;
 }
 
@@ -194,28 +189,42 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
     border-bottom: $size solid $color;
     border-left: $size solid transparent;
     border-right: $size solid transparent;
-  } @else if $direction == 'right' {
+  }
+
+  @else if $direction == 'right' {
     border-bottom: $size solid transparent;
     border-left: $size solid $color;
     border-top: $size solid transparent;
-  } @else if $direction == 'bottom' {
+  }
+
+  @else if $direction == 'bottom' {
     border-left: $size solid transparent;
     border-right: $size solid transparent;
     border-top: $size solid $color;
-  } @else if $direction == 'left' {
+  }
+
+  @else if $direction == 'left' {
     border-bottom: $size solid transparent;
     border-right: $size solid $color;
     border-top: $size solid transparent;
-  } @else if $direction == 'top-left' {
+  }
+
+  @else if $direction == 'top-left' {
     border-right: $size solid transparent;
     border-top: $size solid $color;
-  } @else if $direction == 'top-right' {
+  }
+
+  @else if $direction == 'top-right' {
     border-left: $size solid transparent;
     border-top: $size solid $color;
-  } @else if $direction == 'bottom-left' {
+  }
+
+  @else if $direction == 'bottom-left' {
     border-bottom: $size solid $color;
     border-right: $size solid transparent;
-  } @else if $direction == 'bottom-right' {
+  }
+
+  @else if $direction == 'bottom-right' {
     border-bottom: $size solid $color;
     border-left: $size solid transparent;
   }

app/javascript/dashboard/assets/scss/widgets/_reply-box.scss

@@ -1,10 +1,15 @@
 .reply-box {
-  @include elegant-card;
+  @include light-shadow;
   border-bottom: 0;
+  border-radius: $space-small;
   margin: $space-normal;
   margin-top: 0;
   max-height: $space-mega * 3;
-  transition: height 2s $ease-in-out-cubic;
+  transition: box-shadow .35s $ease-in-out-cubic, height 2s $ease-in-out-cubic;
+
+  &.is-focused {
+    @include normal-shadow;
+  }
 
   .reply-box__top {
     @include flex;
@@ -42,7 +47,7 @@
     &.is-private {
       background: lighten($warning-color, 38%);
 
-      >input {
+      > input {
         background: lighten($warning-color, 38%);
       }
     }
@@ -58,7 +63,7 @@
       }
     }
 
-    .file-uploads>label {
+    .file-uploads > label {
       cursor: pointer;
     }
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="reply-box">
+  <div class="reply-box" :class="replyBoxClass">
     <div class="reply-box__top" :class="{ 'is-private': isPrivate }">
       <canned-response
         v-if="showCannedResponsesList"
@@ -106,6 +106,7 @@ export default {
     return {
       message: '',
       isPrivate: false,
+      isFocused: false,
       showEmojiPicker: false,
       showCannedResponsesList: false,
       isUploading: {
@@ -158,6 +159,11 @@ export default {
       }
       return this.$t('CONVERSATION.REPLYBOX.SEND');
     },
+    replyBoxClass() {
+      return {
+        'is-focused': this.isFocused,
+      };
+    },
   },
   watch: {
     message(val) {
@@ -262,9 +268,11 @@ export default {
     },
 
     onBlur() {
+      this.isFocused = false;
       this.toggleTyping('off');
     },
     onFocus() {
+      this.isFocused = true;
       this.toggleTyping('on');
     },