Chore: UI fixes and enhancements (#796)

Co-authored-by: Pranav Raj S <pranavrajs@gmail.com>
2020-05-02 09:47:36 +05:30 · 2020-05-02 09:47:36 +05:30 · a951fb20cb
commit a951fb20cb
parent 8906fd808d
29 changed files with 335 additions and 250 deletions
--- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss
+++ b/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,
-  success: #13ce66,
-  warning: #ffc82c,
-  alert: #ff4949);
+  secondary: #35c5ff,
+  success: #44ce4b,
+  warning: #ffc532,
+  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;
--- a/app/javascript/dashboard/assets/scss/_helper-classes.scss
+++ b/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;

--- a/app/javascript/dashboard/assets/scss/_variables.scss
+++ b/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;
-$success-color: #13ce66;
-$warning-color: #ffc82c;
-$alert-color: #ff4949;
-
+$secondary-color: #35c5ff;
+$success-color: #44ce4b;
+$warning-color: #ffc532;
+$alert-color: #ff382d;
 // Color-palettes

 $color-primary-light: #c7e3ff;
--- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
+++ b/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);
@ -83,7 +85,7 @@
        background: $color-woot;
      }

-      & + .item {
+      &+.item {
        &::before {
          background: $color-woot;
        }
@ -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);
@ -228,7 +231,7 @@
    @include padding($space-medium);
  }

-  > a > img {
+  >a>img {
    width: $space-larger * 5;
  }
 }
--- a/app/javascript/dashboard/assets/scss/views/settings/integrations.scss
+++ b/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-radius: $space-slab;
+    border: 1px solid $color-border;
+    border-radius: $space-smaller;
    padding: $space-normal;

    .integration--image {
--- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
+++ b/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;
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
+++ b/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;
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@ -1,10 +1,11 @@
-@mixin bubble-with-tyes {
-  @include padding($space-smaller $space-one);
+@mixin bubble-with-types {
+  @include padding($space-one $space-normal);
  @include margin($zero);
-  background: $color-primary-light;
-  border-radius: $space-small;
-  color: $color-heading;
+  background: $color-woot;
+  border-radius: $space-one;
+  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-black 70%);
+      background-image: linear-gradient(-180deg, transparent 3%, $color-heading 130%);
      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-top-left-radius: 0;
-        color: $color-heading;
+      border-bottom-left-radius: $space-smaller;
+      border-top-left-radius: $space-smaller;
+      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-top-right-radius: 0;
+      border-bottom-right-radius: $space-smaller;
+      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;
    }
  }
 }
--- a/app/javascript/dashboard/assets/scss/widgets/_login.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_login.scss
@ -42,22 +42,26 @@
      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 {
    font-size: $font-size-default;
    padding: $space-medium;

-    > a {
+    >a {
      font-weight: $font-weight-bold;
    }
  }
--- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
+++ b/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;
--- a/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss
+++ b/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;
-  top: $space-normal;
-  left: $space-normal;
-  width: 100%;
+  position: absolute;
+  right: 0;
  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;
-  @include padding($space-slab $space-medium);
-  @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);
+  min-width: 24rem;
+  text-align: left;
 }

 .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);
  }
 }
--- a/app/javascript/dashboard/components/SnackbarContainer.vue
+++ b/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>
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
+++ b/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>
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ b/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>

--- a/app/javascript/dashboard/i18n/locale/en/login.json
+++ b/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"
  }
 }
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/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;
--- a/app/javascript/shared/helpers/MessageFormatter.js
+++ b/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>`
    );
  }

--- a/app/javascript/shared/helpers/specs/MessageFormatter.spec.js
+++ b/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>'
      );
    });
  });
--- a/app/javascript/widget/assets/scss/_forms.scss
+++ b/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 {
--- a/app/javascript/widget/assets/scss/_variables.scss
+++ b/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
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/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>
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/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>
--- a/app/javascript/widget/components/AvailableAgents.vue
+++ b/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;
--- a/app/javascript/widget/components/ConversationWrap.vue
+++ b/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 {
--- a/app/javascript/widget/components/FileBubble.vue
+++ b/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;
--- a/app/javascript/widget/components/ImageBubble.vue
+++ b/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;
  }
 }
--- a/app/javascript/widget/components/UserMessage.vue
+++ b/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;
    }
  }
 }
--- a/app/javascript/widget/components/UserMessageBubble.vue
+++ b/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 {
--- a/app/javascript/widget/views/Home.vue
+++ b/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;