Feature: Typing Indicator on widget and dashboard (#811)

* Adds typing indicator for widget
* typing indicator for agents in dashboard

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

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -377,8 +377,8 @@ $form-button-radius: $global-radius;
 // 20. Label
 // ---------
 
-$label-background: $primary-color;
-$label-color: $white;
+$label-background: lighten($primary-color, 40%);
+$label-color: $primary-color;
 $label-color-alt: $black;
 $label-palette: $foundation-palette;
 $label-font-size: $font-size-micro;

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

@@ -1,25 +1,53 @@
 .conversation {
   @include flex;
   @include flex-shrink;
-  @include padding($space-normal $zero $zero $space-normal);
-  border-left: 4px solid transparent;
+  @include padding(0 0 0 $space-normal);
+  align-items: center;
+  border-bottom: 1px solid transparent;
+  border-left: $space-micro solid transparent;
+  border-top: 1px solid transparent;
   cursor: pointer;
   position: relative;
 
   &.active {
     background: $color-background;
+    border-bottom-color: $color-border-light;
     border-left-color: $color-woot;
+    border-top-color: $color-border-light;
+
+    .conversation--details {
+      border-top-color: transparent;
+    }
+
+    +.conversation .conversation--details {
+      border-top-color: transparent;
+    }
   }
 
+  &:first-child {
+    .conversation--details {
+      border-top-color: transparent;
+    }
+  }
+
+  &:nth-last-child(2) {
+    .conversation--details {
+      border-bottom-color: $color-border-light;
+    }
+  }
+
+
   .conversation--details {
-    @include margin($zero $zero $zero $space-one);
+    @include margin(0 0 0 $space-one);
     @include border-light-bottom;
-    @include padding($zero $zero $space-slab $zero);
+    @include border-light-top;
+    @include padding($space-slab 0);
+    border-bottom-color: transparent;
   }
 
   .conversation--user {
     font-size: $font-size-small;
-    margin-bottom: $zero;
+    margin-bottom: 0;
     text-transform: capitalize;
 
     .label {
@@ -39,7 +67,7 @@
     font-weight: $font-weight-normal;
     height: $space-medium;
     line-height: $space-medium;
-    margin: $zero;
+    margin: 0;
     max-width: 96%;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -54,20 +82,20 @@
 
   .conversation--meta {
     @include flex;
-    display: block;
     flex-direction: column;
     position: absolute;
     right: $space-normal;
     top: $space-normal;
 
     .unread {
-      $unread-size: $space-two - $space-micro;
+      $unread-size: $space-normal;
       @include round-corner;
+      @include light-shadow;
       background: darken($success-color, 3%);
       color: $color-white;
       display: none;
       font-size: $font-size-micro;
-      font-weight: $font-weight-medium;
+      font-weight: $font-weight-black;
       height: $unread-size;
       line-height: $unread-size;
       margin-left: auto;

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

@@ -1,5 +1,5 @@
 @mixin bubble-with-types {
-  @include padding($space-one $space-normal);
+  @include padding($space-small $space-normal);
   @include margin($zero);
   background: $color-woot;
   border-radius: $space-one;
@@ -204,12 +204,14 @@
   height: 100%;
   margin-bottom: $space-small;
   overflow-y: auto;
+  position: relative;
 }
 
 .conversation-panel>li {
   @include flex;
   @include flex-shrink;
   @include margin($zero $zero $space-micro);
+  position: relative;
 
   &:first-child {
     margin-top: auto;
@@ -393,3 +395,34 @@
     }
   }
 }
+
+.conversation-footer {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.typing-indicator-wrap {
+  align-items: center;
+  display: flex;
+  height: 0;
+  position: absolute;
+  top: -$space-large;
+  width: 100%;
+
+  .typing-indicator {
+    @include elegant-card;
+    @include round-corner;
+    background: $color-white;
+    color: $color-light-gray;
+    font-size: $font-size-mini;
+    font-weight: $font-weight-bold;
+    margin: $space-one auto;
+    padding: $space-small $space-normal $space-small $space-two;
+
+    .gif {
+      margin-left: $space-small;
+      width: $space-medium;
+    }
+  }
+}