chore: Add click interaction for conversation list (#1460)

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

@@ -236,7 +236,7 @@ $breadcrumbs-item-slash: true;
 // 11. Button
 // ----------
 
-$button-padding: $space-one $space-two;
+$button-padding: $space-one $space-normal;
 $button-margin: 0 0 $global-margin 0;
 $button-fill: solid;
 $button-background: $primary-color;

app/javascript/dashboard/assets/scss/_variables.scss

@@ -88,8 +88,8 @@ $woot-snackbar-bg: #323232;
 $woot-snackbar-button: #ffeb3b;
 
 $swift-ease-out-duration: .4s !default;
-$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
+$swift-ease-out-function: cubic-bezier(0.37, 0, 0.63, 1) !default;
-$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
+$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-function !default;
 
 // Ionicons
 $ionicons-font-path: '~ionicons/fonts';

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

@@ -1,3 +1,5 @@
+$resolve-button-width: 13.2rem;
+
 // Conversation header - Light BG
 .conv-header {
   @include padding($space-small $space-normal);
@@ -71,7 +73,7 @@
 .button.resolve--button {
   @include flex-align($x: center, $y: middle);
 
-  width: 13.2rem;
+  width: $resolve-button-width;
 
   >.icon {
     font-size: $font-size-default;

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

@@ -1,3 +1,15 @@
+@keyframes left-shift-animation {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  50% {
+    transform: translateX(1px);
+  }
+}
+
 .conversation {
   @include flex;
   @include flex-shrink;
@@ -10,6 +22,7 @@
   position: relative;
 
   &.active {
+    animation: left-shift-animation .25s $swift-ease-out-function;
     background: $color-background;
     border-bottom-color: $color-border-light;
     border-left-color: $color-woot;
@@ -30,7 +43,7 @@
     }
   }
 
-  &:nth-last-child(2) {
+  &:last-child {
     .conversation--details {
       border-bottom-color: $color-border-light;
     }

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

@@ -72,7 +72,7 @@
 
   .chat-list__top {
     @include flex;
-    @include padding($zero $zero $space-small $zero);
+    @include padding($zero $zero $space-micro $zero);
 
     align-items: center;
     justify-content: space-between;

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

@@ -5,10 +5,12 @@
   margin: $space-normal;
   margin-top: 0;
   max-height: $space-mega * 3;
-  transition: box-shadow .35s $ease-in-out-cubic, height 2s $ease-in-out-cubic;
+  transition: box-shadow .35s $swift-ease-out-function,
+    height 2s $swift-ease-out-function;
+
 
   &.is-focused {
-    @include normal-shadow;
+    @include shadow;
   }
 
   .reply-box__top {
@@ -47,7 +49,7 @@
     &.is-private {
       background: lighten($warning-color, 38%);
 
-      > input {
+      >input {
         background: lighten($warning-color, 38%);
       }
     }
@@ -63,7 +65,7 @@
       }
     }
 
-    .file-uploads > label {
+    .file-uploads>label {
       cursor: pointer;
     }
 
@@ -73,7 +75,7 @@
       padding: 0 $space-small;
     }
 
-    > textarea {
+    >textarea {
       @include ghost-input();
       @include margin(0);
       background: transparent;
@@ -100,7 +102,7 @@
 
       .tabs-title {
         margin: 0;
-        transition: all .2s $ease-in-out-cubic;
+        transition: all .2s $swift-ease-out-function;
         transition-property: color, background;
 
         a {
@@ -124,10 +126,10 @@
         &.is-active {
           @include border-light-right;
           border-left: 0;
+        }
 
-          a {
+        a {
-            border-bottom-left-radius: $space-small;
+          border-bottom-left-radius: $space-small;
-          }
         }
       }
 

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -56,7 +56,7 @@
     display: flex;
     flex-direction: row;
     font-size: $font-size-small;
-    transition: all .15s $ease-in-out-cubic;
+    transition: border-color .15s $swift-ease-out-function;
   }
 
   &.is-active {

app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss

@@ -24,7 +24,7 @@ table {
   tr {
     .show-if-hover {
       opacity: 0;
-      transition: all 0.2s $ease-in-out-cubic;
+      transition: opacity 0.2s $swift-ease-out-function;
     }
 
     &:hover {

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

@@ -106,6 +106,10 @@ export default {
   &.clear.more--button {
     color: var(--color-body);
   }
+
+  &:hover {
+    color: var(--w-800);
+  }
 }
 
 .actions--container {

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -152,7 +152,7 @@ export default {
   display: flex;
   font-size: var(--font-size-small);
   font-weight: 400;
-  padding: var(--space-normal);
+  padding: var(--space-normal) var(--space-normal) var(--space-slab);
   text-align: left;
   line-height: var(--font-size-large);
 }

app/javascript/widget/assets/scss/_mixins.scss

@@ -4,9 +4,9 @@ $shadow-color-2: rgba(0, 0, 0, 0.07);
 $shadow-color-3: rgba(50, 50, 93, .08);
 $shadow-color-4: rgba(0, 0, 0, .05);
 
-$color-shadow-medium: rgba(0, 0, 0, 0.1);
+$color-shadow-medium: rgba(50, 50, 93, 0.08);
-$color-shadow-light: rgba(0, 0, 0, 0.06);
+$color-shadow-light: rgba(50, 50, 93, 0.04);
-$color-shadow-large: rgba(0, 0, 0, 0.25);
+$color-shadow-large: rgba(50, 50, 93, 0.25);
 $color-shadow-outline: rgba(66, 153, 225, 0.5);
 
 @mixin normal-shadow {
@@ -36,14 +36,14 @@ $color-shadow-outline: rgba(66, 153, 225, 0.5);
 }
 
 @mixin shadow {
-  box-shadow: 0 1px 10px 4px $color-shadow-medium,
+  box-shadow: 0 1px 10px 2px $color-shadow-medium,
-    0 1px 5px 2px $color-shadow-light;
+    0 1px 5px 1px $color-shadow-light;
 }
 
 
 @mixin shadow-medium {
-  box-shadow: 0 4px 24px 8px $color-shadow-medium,
+  box-shadow: 0 4px 24px 4px $color-shadow-medium,
-    0 2px 16px 4px $color-shadow-light;
+    0 2px 16px 2px $color-shadow-light;
 }