Feature: Widget design update (#426)

app/javascript/widget/components/AgentMessage.vue

@@ -71,7 +71,7 @@ export default {
     max-width: 88%;
 
     & + .agent-message {
-      margin-bottom: $space-smaller;
+      margin-bottom: $space-micro;
 
       .chat-bubble {
         border-top-left-radius: $space-smaller;
@@ -101,10 +101,10 @@ export default {
 
   .agent-name {
     color: $color-body;
-    font-size: $font-size-default;
+    font-size: $font-size-small;
     font-weight: $font-weight-medium;
-    margin-bottom: $space-small;
-    margin-top: $space-small;
+    margin: $space-small 0;
+    padding-left: $space-micro;
   }
 }
 </style>

app/javascript/widget/components/Branding.vue

@@ -24,7 +24,7 @@
   justify-content: center;
   text-align: center;
   text-decoration: none;
-  padding: $space-slab 0;
+  padding: $space-normal 0 $space-slab;
   cursor: pointer;
 
   &:hover {

app/javascript/widget/components/ChatFooter.vue

@@ -27,6 +27,7 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
+@import '~widget/assets/scss/mixins.scss';
 
 .footer {
   background: $color-white;
@@ -34,8 +35,7 @@ export default {
   padding: $space-small $space-slab;
   width: 100%;
   border-radius: 7px;
-  box-shadow: 0 20px 25px -10px rgba(0, 0, 0, 0.1),
-    0 10px 10px -10px rgba(0, 0, 0, 0.04) !important;
+  @include shadow-big;
 }
 
 .branding {

app/javascript/widget/components/ChatHeader.vue

@@ -1,15 +1,15 @@
 <template>
-  <header class="header-collapsed" :style="{ background: widgetColor }">
-    <div>
-      <h2 class="title">
-        {{ title }}
-      </h2>
-    </div>
+  <header class="header-collapsed">
+    <h2 class="title">
+      {{ title }}
+    </h2>
+    <span class="close" @click="closeWindow"></span>
   </header>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import { IFrameHelper } from 'widget/helpers/utils';
 
 export default {
   name: 'ChatHeader',
@@ -24,22 +24,60 @@ export default {
       default: '',
     },
   },
+  methods: {
+    closeWindow() {
+      if (IFrameHelper.isIFrame()) {
+        IFrameHelper.sendMessage({
+          event: 'toggleBubble',
+        });
+      }
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
+@import '~widget/assets/scss/mixins.scss';
 
 .header-collapsed {
-  background: $color-woot;
+  display: flex;
+  justify-content: space-between;
+  background: $color-white;
   padding: $space-two $space-medium;
   width: 100%;
   box-sizing: border-box;
   color: $color-white;
+  border-bottom-left-radius: $space-small;
+  border-bottom-right-radius: $space-small;
+  @include shadow-large;
 
   .title {
-    font-size: $font-size-big;
+    font-size: $font-size-large;
     font-weight: $font-weight-medium;
+    color: $color-heading;
+  }
+
+  .close {
+    position: relative;
+    margin-right: $space-small;
+
+    &:before,
+    &:after {
+      position: absolute;
+      left: 0;
+      top: $space-smaller;
+      content: ' ';
+      height: $space-normal;
+      width: 2px;
+      background-color: $color-heading;
+    }
+    &:before {
+      transform: rotate(45deg);
+    }
+    &:after {
+      transform: rotate(-45deg);
+    }
   }
 }
 </style>

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -41,15 +41,15 @@ export default {
 
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
+@import '~widget/assets/scss/mixins.scss';
 
 .header-expanded {
   background: $color-white;
   padding: $space-larger $space-medium $space-large;
   width: 100%;
   box-sizing: border-box;
-  border-radius: 1.6rem;
-  box-shadow: 0 10px 15px -16px rgba(0, 0, 0, 0.1),
-    0 4px 6px -8px rgba(0, 0, 0, 0.05) !important;
+  border-radius: $space-normal;
+  @include shadow-large;
 
   @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
     border-radius: 0;

app/javascript/widget/components/UserMessage.vue

@@ -46,6 +46,7 @@ export default {
     }
     & + .agent-message {
       margin-top: $space-normal;
+      margin-bottom: $space-micro;
     }
     .message-wrap {
       margin-right: $space-small;

app/javascript/widget/components/UserMessageBubble.vue

@@ -44,7 +44,7 @@ export default {
   font-size: $font-size-default;
   line-height: 1.5;
   max-width: 80%;
-  padding: $space-small $space-two;
+  padding: $space-small $space-normal;
   text-align: left;
 
   a {

app/javascript/widget/components/template/EmailInput.vue

@@ -17,7 +17,7 @@
         :disabled="$v.email.$invalid"
         :style="{ background: widgetColor, borderColor: widgetColor }"
       >
-        <i v-if="!uiFlags.isUpdating" class="ion-android-arrow-forward" />
+        <i v-if="!uiFlags.isUpdating" class="ion-ios-arrow-forward" />
         <spinner v-else />
       </button>
     </form>