Chore: UI fixes and enhancements (#796)

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

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

@@ -49,10 +49,10 @@ $global-font-size: 10px;
 $global-width: 100%;
 $global-lineheight: 1.5;
 $foundation-palette: (primary: $color-woot,
-  secondary: #777,
+  secondary: #35c5ff,
-  success: #13ce66,
+  success: #44ce4b,
-  warning: #ffc82c,
+  warning: #ffc532,
-  alert: #ff4949);
+  alert: #ff382d);
 $light-gray: #c0ccda;
 $medium-gray: #8492a6;
 $dark-gray: $color-gray;
@@ -127,7 +127,7 @@ $header-styles: (small: ("h1": ("font-size": 24),
 $header-text-rendering: optimizeLegibility;
 $small-font-size: 80%;
 $header-small-font-color: $medium-gray;
-$paragraph-lineheight: 1.6;
+$paragraph-lineheight: 1.45;
 $paragraph-margin-bottom: 1rem;
 $paragraph-text-rendering: optimizeLegibility;
 $code-color: $black;

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

@@ -29,7 +29,7 @@
     background: $color-white;
     border-radius: $space-large;
     left: 0;
-    margin: $space-slab 0 auto;
+    margin: $space-slab auto;
     padding: $space-normal;
     top: 0;
 

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

@@ -46,7 +46,8 @@ $color-gray: #6e6f73;
 $color-light-gray: #999a9b;
 $color-border: #e0e6ed;
 $color-border-light: #f0f4f5;
-$color-background: #eff2f7;
+$color-background: #f4f6fb;
+$color-border-dark: #cad0d4;
 $color-background-light: #f9fafc;
 $color-white: #fff;
 $color-body: #3c4858;
@@ -54,11 +55,10 @@ $color-heading: #1f2d3d;
 $color-extra-light-blue: #f5f7f9;
 
 $primary-color: $color-woot;
-$secondary-color: #ff5216;
+$secondary-color: #35c5ff;
-$success-color: #13ce66;
+$success-color: #44ce4b;
-$warning-color: #ffc82c;
+$warning-color: #ffc532;
-$alert-color: #ff4949;
+$alert-color: #ff382d;
-
 // Color-palettes
 
 $color-primary-light: #c7e3ff;

app/javascript/dashboard/assets/scss/views/settings/inbox.scss

@@ -5,6 +5,7 @@
     @include padding($space-normal $space-two $zero);
   }
 }
+
 // Conversation header - Light BG
 .settings-header {
   @include padding($space-small $space-normal);
@@ -14,6 +15,7 @@
   @include border-normal-bottom;
   height: $header-height;
   min-height: $header-height;
+
   // Resolve Button
   .button {
     @include margin(0);
@@ -112,7 +114,7 @@
       background: $color-border;
       border-radius: 20px;
       color: $color-white;
-      font-size: $font-size-small;
+      font-size: $font-size-micro;
       font-weight: $font-weight-medium;
       height: $space-normal;
       left: $space-normal;
@@ -161,6 +163,7 @@
 
     &:hover {
       @include background-gray;
+
       .arrow {
         opacity: 1;
         transform: translateX($space-small);

app/javascript/dashboard/assets/scss/views/settings/integrations.scss

@@ -1,8 +1,8 @@
 .integrations-wrap {
   .integration {
     background: $color-white;
-    border: 2px solid $color-border;
+    border: 1px solid $color-border;
-    border-radius: $space-slab;
+    border-radius: $space-smaller;
     padding: $space-normal;
 
     .integration--image {

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

@@ -45,6 +45,7 @@
     .user--name {
       @include margin(0);
       font-size: $font-size-medium;
+      line-height: 1.3;
       text-transform: capitalize;
     }
 
@@ -65,6 +66,8 @@
 }
 
 .button.resolve--button {
+  width: 13.2rem;
+
   >.icon {
     font-size: $font-size-default;
     padding-right: $space-small;

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

@@ -2,11 +2,13 @@
   @include flex;
   @include flex-shrink;
   @include padding($space-normal $zero $zero $space-normal);
+  border-left: 4px solid transparent;
   cursor: pointer;
   position: relative;
 
   &.active {
     background: $color-background;
+    border-left-color: $color-woot;
   }
 
   .conversation--details {
@@ -64,7 +66,7 @@
       background: darken($success-color, 3%);
       color: $color-white;
       display: none;
-      font-size: $font-size-mini;
+      font-size: $font-size-micro;
       font-weight: $font-weight-medium;
       height: $unread-size;
       line-height: $unread-size;

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

@@ -1,10 +1,11 @@
-@mixin bubble-with-tyes {
+@mixin bubble-with-types {
-  @include padding($space-smaller $space-one);
+  @include padding($space-one $space-normal);
   @include margin($zero);
-  background: $color-primary-light;
+  background: $color-woot;
-  border-radius: $space-small;
+  border-radius: $space-one;
-  color: $color-heading;
+  color: $color-white;
   font-size: $font-size-small;
+  font-weight: $font-weight-normal;
   position: relative;
 
   .icon {
@@ -15,6 +16,17 @@
 
   .message-text__wrap {
     position: relative;
+
+    .time {
+      color: $color-primary-light;
+      display: block;
+      font-size: $font-size-micro;
+      line-height: 1.8;
+    }
+
+    .link {
+      color: $color-white;
+    }
   }
 
   .message-text {
@@ -51,8 +63,7 @@
     }
 
     &::before {
-      $color-black: #000;
+      background-image: linear-gradient(-180deg, transparent 3%, $color-heading 130%);
-      background-image: linear-gradient(-180deg, transparent 3%, $color-black 70%);
       bottom: 0;
       content: '';
       height: 20%;
@@ -94,6 +105,7 @@
 
   .load-more-conversations {
     font-size: $font-size-small;
+    margin: 0;
     padding: $space-normal;
     width: 100%;
   }
@@ -122,10 +134,10 @@
 
     .status--filter {
       @include padding($zero null $zero $space-normal);
-      @include border-light;
       @include round-corner;
       @include margin($space-smaller $space-slab $zero $zero);
-      background-color: $color-background;
+      background-color: $color-background-light;
+      border: 1px solid $color-border;
       float: right;
       font-size: $font-size-mini;
       height: $space-medium;
@@ -192,11 +204,12 @@
   height: 100%;
   margin-bottom: $space-small;
   overflow-y: auto;
+}
 
-  >li {
+.conversation-panel>li {
   @include flex;
   @include flex-shrink;
-    @include margin($zero $zero $space-smaller);
+  @include margin($zero $zero $space-micro);
 
   &:first-child {
     margin-top: auto;
@@ -220,7 +233,7 @@
   }
 
   .bubble {
-      @include bubble-with-tyes;
+    @include bubble-with-types;
     max-width: 50rem;
     text-align: left;
     word-wrap: break-word;
@@ -232,19 +245,47 @@
   }
 
   &.left {
+
     .bubble {
+      @include border-normal;
       background: $white;
-        border-bottom-left-radius: 0;
+      border-bottom-left-radius: $space-smaller;
-        border-top-left-radius: 0;
+      border-top-left-radius: $space-smaller;
-        color: $color-heading;
+      color: $color-body;
       margin-right: auto;
+
+      .time {
+        color: $color-light-gray;
+      }
+
+      .image .time {
+        color: $color-white;
+      }
+
+      .link {
+        color: $color-primary-dark;
+      }
+
+      .file {
+        .text-block-title {
+          color: $color-body;
+        }
+
+        .icon-wrap {
+          color: $color-woot;
+        }
+
+        .download {
+          color: $color-primary-dark;
+        }
+      }
     }
 
     +.right {
       margin-top: $space-one;
 
       .bubble {
-          border-top-right-radius: $space-small;
+        border-top-right-radius: $space-one;
       }
     }
 
@@ -259,12 +300,13 @@
     }
 
     .bubble {
-        border-bottom-right-radius: 0;
+      border-bottom-right-radius: $space-smaller;
-        border-top-right-radius: 0;
+      border-top-right-radius: $space-smaller;
       margin-left: auto;
 
       &.is-private {
         background: lighten($warning-color, 32%);
+        border: 1px solid $color-border;
         color: $color-heading;
         padding-right: $space-large;
         position: relative;
@@ -276,6 +318,10 @@
           right: $space-one;
           top: $space-smaller + $space-micro;
         }
+
+        .time {
+          color: $color-light-gray;
+        }
       }
     }
 
@@ -283,7 +329,7 @@
       margin-top: $space-one;
 
       .bubble {
-          border-top-left-radius: $space-small;
+        border-top-left-radius: $space-one;
       }
     }
   }
@@ -309,10 +355,10 @@
   .activity-wrap {
     @include flex;
     @include margin($space-small auto);
-      @include padding($space-smaller $space-normal);
+    @include padding($space-small $space-normal);
     @include flex-align($x: center, $y: null);
     background: lighten($warning-color, 32%);
-      border: 1px solid lighten($warning-color, 26%);
+    border: 1px solid lighten($warning-color, 22%);
     border-radius: $space-smaller;
     font-size: $font-size-small;
 
@@ -342,18 +388,8 @@
 
     .time {
       color: $medium-gray;
-      }
-    }
-
-    .time {
-      bottom: -$space-micro;
-      color: $color-gray;
-      float: right;
       font-size: $font-size-micro;
-      font-style: italic;
       margin-left: $space-slab;
-      right: -$space-micro;
-      text-align: right;
     }
   }
 }

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

@@ -42,15 +42,19 @@
       font-size: $font-size-default;
 
       input {
-        padding: $space-slab;
-        height: $space-larger;
         font-size: $font-size-default;
+        height: $space-larger;
+        padding: $space-slab;
       }
 
       .error {
         font-size: $font-size-small;
       }
     }
+
+    .button {
+      height: $space-larger;
+    }
   }
 
   .sigin__footer {

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

@@ -48,7 +48,7 @@
       margin-bottom: $space-micro;
       margin-top: $space-micro;
 
-      >.inbox-icon {
+      .inbox-icon {
         display: inline-block;
         margin-right: $space-micro;
         min-width: $space-normal;

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

@@ -1,33 +1,32 @@
 .ui-snackbar-container {
-  position: absolute;
+  left: 0;
+  margin: 0 auto;
+  max-width: 40rem;
   overflow: hidden;
-  z-index: 9999;
+  position: absolute;
-  top: $space-normal;
+  right: 0;
-  left: $space-normal;
-  width: 100%;
   text-align: center;
+  top: $space-normal;
+  z-index: 9999;
 }
 
 .ui-snackbar {
-  text-align: left;
+  @include padding($space-slab $space-medium);
+  @include shadow;
+  background-color: $woot-snackbar-bg;
+  border-radius: $space-smaller;
   display: inline-block;
-  min-width: 24rem;
+  margin-bottom: $space-small;
   max-width: 40rem;
   min-height: 3rem;
-  background-color: $woot-snackbar-bg;
+  min-width: 24rem;
-  @include padding($space-slab $space-medium);
+  text-align: left;
-  @include border-top-radius($space-micro);
-  @include border-right-radius($space-micro);
-  @include border-bottom-radius($space-micro);
-  @include border-left-radius($space-micro);
-  margin-bottom: $space-small;
-
-  // box-shadow: 0 1px 3px alpha(black, 0.12), 0 1px 2px alpha(black, 0.24);
 }
 
 .ui-snackbar-text {
-  font-size: $font-size-small;
   color: $color-white;
+  font-size: $font-size-small;
+  font-weight: $font-weight-medium;
 }
 
 .ui-snackbar-action {
@@ -35,12 +34,12 @@
   padding-left: 3rem;
 
   button {
+    @include margin(0);
+    @include padding(0);
     background: none;
     border: 0;
     color: $woot-snackbar-button;
     font-size: $font-size-small;
     text-transform: uppercase;
-    @include margin(0);
-    @include padding(0);
   }
 }

app/javascript/dashboard/components/SnackbarContainer.vue

@@ -1,6 +1,10 @@
 <template>
   <transition-group name="toast-fade" tag="div" class="ui-snackbar-container">
-    <woot-snackbar :message="snackMessage" v-for="snackMessage in snackMessages" v-bind:key="snackMessage" />
+    <woot-snackbar
+      v-for="snackMessage in snackMessages"
+      :key="snackMessage"
+      :message="snackMessage"
+    />
   </transition-group>
 </template>
 
@@ -9,8 +13,12 @@
 import WootSnackbar from './Snackbar';
 
 export default {
+  components: {
+    WootSnackbar,
+  },
   props: {
     duration: {
+      type: Number,
       default: 2500,
     },
   },
@@ -22,16 +30,12 @@ export default {
   },
 
   mounted() {
-    bus.$on('newToastMessage', (message) => {
+    bus.$on('newToastMessage', message => {
       this.snackMessages.push(message);
       window.setTimeout(() => {
         this.snackMessages.splice(0, 1);
       }, this.duration);
     });
   },
-
-  components: {
-    WootSnackbar,
-  },
 };
 </script>

app/javascript/dashboard/components/widgets/conversation/bubble/File.vue

@@ -44,12 +44,12 @@ export default {
 .file {
   display: flex;
   flex-direction: row;
-  padding: $space-normal;
+  padding: $space-smaller 0;
   cursor: pointer;
 
   .icon-wrap {
     font-size: $font-size-giga;
-    color: $color-woot;
+    color: $color-white;
     line-height: 1;
     margin-left: $space-smaller;
     margin-right: $space-slab;
@@ -57,15 +57,22 @@ export default {
 
   .text-block-title {
     margin: 0;
+    color: $color-white;
+    font-weight: $font-weight-bold;
   }
 
   .button {
     padding: 0;
     margin: 0;
+    color: $color-primary-light;
   }
 
   .meta {
     padding-right: $space-two;
   }
+
+  .time {
+    min-width: $space-larger;
+  }
 }
 </style>

app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="message-text__wrap">
-    <span class="time">{{ readableTime }}</span>
     <span v-html="message"></span>
+    <span class="time">{{ readableTime }}</span>
   </span>
 </template>
 

app/javascript/dashboard/i18n/locale/en/login.json

@@ -16,6 +16,6 @@
     },
     "FORGOT_PASSWORD": "Forgot your password?",
     "CREATE_NEW_ACCOUNT": "Create new account",
-    "SUBMIT": "Sign In"
+    "SUBMIT": "Login"
   }
 }

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

@@ -185,7 +185,7 @@ export default {
 
 .close-button {
   position: absolute;
-  right: $space-slab;
+  right: $space-normal;
   top: $space-slab;
   font-size: $font-size-default;
   color: $color-heading;

app/javascript/shared/helpers/MessageFormatter.js

@@ -16,7 +16,7 @@ class MessageFormatter {
     return this.message.replace(
       urlRegex,
       url =>
-        `<a rel="noreferrer noopener nofollow" href="${url}" target="_blank">${url}</a>`
+        `<a rel="noreferrer noopener nofollow" href="${url}" class="link" target="_blank">${url}</a>`
     );
   }
 

app/javascript/shared/helpers/specs/MessageFormatter.spec.js

@@ -6,7 +6,7 @@ describe('#MessageFormatter', () => {
       const message =
         'Chatwoot is an opensource tool\nSee more at https://www.chatwoot.com';
       expect(new MessageFormatter(message).formattedMessage).toEqual(
-        'Chatwoot is an opensource tool<br>See more at <a rel="noreferrer noopener nofollow" href="https://www.chatwoot.com" target="_blank">https://www.chatwoot.com</a>'
+        'Chatwoot is an opensource tool<br>See more at <a rel="noreferrer noopener nofollow" href="https://www.chatwoot.com" class="link" target="_blank">https://www.chatwoot.com</a>'
       );
     });
   });

app/javascript/widget/assets/scss/_forms.scss

@@ -22,7 +22,10 @@ $input-height: $space-two * 2;
   outline: none;
   padding: $space-smaller;
   position: relative;
-  transition: background .2s, border .2s, box-shadow .2s, color .2s;
+  transition: background .2s,
+  border .2s,
+  box-shadow .2s,
+  color .2s;
   width: 100%;
 
   &:focus {
@@ -37,7 +40,7 @@ $input-height: $space-two * 2;
   &.small {
     font-size: $font-size-small;
     height: $space-large;
-    padding: $space-small $space-slab;
+    padding: $space-small $space-one;
   }
 
   &.default {

app/javascript/widget/assets/scss/_variables.scss

@@ -52,12 +52,13 @@ $color-light-gray: #999a9b;
 $color-border: #e0e6ed;
 $color-border-transparent: rgba(224, 230, 237, 0.5);
 $color-border-light: #f0f4f5;
-$color-background: #ecf3f9;
+$color-border-dark: #cad0d4;
+$color-background: #f4f6fb;
 $color-background-light: #fafafa;
 $color-white: #fff;
 $color-body: #3c4858;
 $color-heading: #1f2d3d;
-$color-error: #ff4949;
+$color-error: #ff382d;
 
 
 // Thumbnail

app/javascript/widget/components/AgentMessage.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="agent-bubble">
+  <div
+    class="agent-message-wrap"
+    :class="{ 'has-response': hasRecordedResponse }"
+  >
     <div class="agent-message">
       <div class="avatar-wrap">
         <thumbnail
@@ -108,7 +111,7 @@ export default {
     },
     avatarUrl() {
       // eslint-disable-next-line
-      const BotImage = require('dashboard/assets/images/chatwoot_bot.png')
+      const BotImage = require('dashboard/assets/images/chatwoot_bot.png');
       if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
         return BotImage;
       }
@@ -146,17 +149,6 @@ export default {
 @import '~widget/assets/scss/variables.scss';
 
 .conversation-wrap {
-  .agent-bubble {
-    margin-bottom: $space-micro;
-    & + .agent-bubble {
-      .agent-message {
-        .chat-bubble {
-          border-top-left-radius: $space-smaller;
-        }
-      }
-    }
-  }
-
   .agent-message {
     align-items: flex-end;
     display: flex;
@@ -165,10 +157,6 @@ export default {
     margin: 0 0 $space-micro $space-small;
     max-width: 88%;
 
-    & + .user-message {
-      margin-top: $space-one;
-    }
-
     .avatar-wrap {
       height: $space-medium;
       width: $space-medium;
@@ -199,5 +187,26 @@ export default {
     padding: 0;
     overflow: hidden;
   }
+
+  .agent-message-wrap {
+    + .agent-message-wrap {
+      margin-top: $space-micro;
+
+      .agent-message .chat-bubble {
+        border-top-left-radius: $space-smaller;
+      }
+    }
+
+    + .user-message-wrap {
+      margin-top: $space-normal;
+    }
+
+    &.has-response + .user-message-wrap {
+      margin-top: $space-micro;
+      .chat-bubble {
+        border-top-right-radius: $space-smaller;
+      }
+    }
+  }
 }
 </style>

app/javascript/widget/components/AgentMessageBubble.vue

@@ -124,6 +124,11 @@ export default {
     background: $color-white;
     border-bottom-left-radius: $space-smaller;
     color: $color-body;
+
+    .link {
+      word-break: break-word;
+      color: $color-woot;
+    }
   }
 }
 </style>

app/javascript/widget/components/AvailableAgents.vue

@@ -64,7 +64,7 @@ export default {
     font-size: $font-size-default;
     font-weight: $font-weight-medium;
     color: $color-white;
-    padding: $space-one $space-normal $space-one $space-small;
+    padding: $space-small $space-normal $space-small $space-small;
     line-height: 1.4;
     display: inline-block;
     vertical-align: middle;

app/javascript/widget/components/ConversationWrap.vue

@@ -102,7 +102,7 @@ export default {
 
 .conversation-wrap {
   flex: 1;
-  padding: $space-large $space-small $zero $space-small;
+  padding: $space-large $space-small $space-small $space-small;
 }
 
 .message--loader {

app/javascript/widget/components/FileBubble.vue

@@ -59,11 +59,11 @@ export default {
 .file {
   display: flex;
   flex-direction: row;
-  padding: $space-one $space-slab;
+  padding: $space-slab;
   cursor: pointer;
 
   .icon-wrap {
-    font-size: $font-size-bigger;
+    font-size: $font-size-mega;
     color: $color-woot;
     line-height: 1;
     margin-left: $space-smaller;
@@ -72,11 +72,14 @@ export default {
 
   .title {
     font-weight: $font-weight-medium;
-    font-size: $font-size-small;
+    font-size: $font-size-default;
     margin: 0;
   }
 
   .download {
+    color: $color-woot;
+    font-weight: $font-weight-medium;
+    font-size: $font-size-mini;
     padding: 0;
     margin: 0;
     font-size: $font-size-small;

app/javascript/widget/components/ImageBubble.vue

@@ -29,11 +29,10 @@ export default {
     max-width: 100%;
 
     &::before {
-      $color-black: #000;
       background-image: linear-gradient(
         -180deg,
         transparent 3%,
-        $color-black 70%
+        $color-heading 130%
       );
       bottom: 0;
       content: '';
@@ -55,7 +54,7 @@ export default {
     bottom: $space-smaller;
     color: $color-white;
     position: absolute;
-    right: $space-small;
+    right: $space-slab;
     white-space: nowrap;
   }
 }

app/javascript/widget/components/UserMessage.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="user-message-wrap">
     <div class="user-message">
       <div class="message-wrap" :class="{ 'in-progress': isInProgress }">
         <UserMessageBubble
@@ -23,6 +24,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -80,16 +82,6 @@ export default {
     max-width: 85%;
     text-align: right;
 
-    & + .user-message {
-      margin-bottom: $space-micro;
-      .chat-bubble {
-        border-top-right-radius: $space-smaller;
-      }
-    }
-    & + .agent-message {
-      margin-top: $space-normal;
-      margin-bottom: $space-micro;
-    }
     .message-wrap {
       margin-right: $space-small;
     }
@@ -103,13 +95,28 @@ export default {
     padding: 0;
     overflow: hidden;
   }
+
   .user.has-attachment {
     .icon-wrap {
       color: $color-white;
     }
 
     .download {
-      opacity: 0.8;
+      color: $color-white;
+    }
+  }
+
+  .user-message-wrap {
+    + .user-message-wrap {
+      margin-top: $space-micro;
+
+      .user-message .chat-bubble {
+        border-top-right-radius: $space-smaller;
+      }
+    }
+
+    + .agent-message-wrap {
+      margin-top: $space-normal;
     }
   }
 }

app/javascript/widget/components/UserMessageBubble.vue

@@ -45,7 +45,7 @@ export default {
   display: inline-block;
   font-size: $font-size-default;
   line-height: 1.5;
-  padding: $space-small $space-normal;
+  padding: $space-slab $space-normal $space-slab $space-normal;
   text-align: left;
 
   > a {

app/javascript/widget/views/Home.vue

@@ -86,7 +86,7 @@ export default {
 
   .header-wrap {
     flex-shrink: 0;
-    border-radius: $space-normal;
+    border-radius: $space-normal $space-normal $space-small $space-small;
     background: white;
     z-index: 99;
     @include shadow-large;