From 7c65142fcdfd03a3e305d2c417d9440778644fec Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <webofnithin@gmail.com>
Date: Wed, 27 Nov 2019 11:45:33 +0530
Subject: [PATCH] Adjust space between message bubbles in widget (#309)

---
 app/javascript/widget/assets/scss/woot.scss   |  4 +-
 .../widget/components/AgentMessage.vue        | 88 ++++++++++---------
 .../widget/components/UserMessage.vue         | 48 +++++-----
 3 files changed, 72 insertions(+), 68 deletions(-)

diff --git a/app/javascript/widget/assets/scss/woot.scss b/app/javascript/widget/assets/scss/woot.scss
index 68e1bebc6..6d85097be 100755
--- a/app/javascript/widget/assets/scss/woot.scss
+++ b/app/javascript/widget/assets/scss/woot.scss
@@ -1,12 +1,12 @@
+@import 'reset';
 @import 'variables';
 @import 'buttons';
 @import 'mixins';
 @import 'forms';
-@import 'reset';
 
 html,
 body {
-  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 10px;
   height: 100%;
 }
diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue
index 20b8a5c21..c6ece7945 100755
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/app/javascript/widget/components/AgentMessage.vue
@@ -31,52 +31,54 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
+<style lang="scss">
 @import '~widget/assets/scss/variables.scss';
+.conversation-wrap {
+  .agent-message {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-end;
+    margin: 0 0 $space-micro $space-small;
+    max-width: 88%;
 
-.agent-message {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-end;
-  margin: 0 0 $space-micro $space-small;
-
-  & + .agent-message {
-    margin-bottom: $space-micro;
-
-    .chat-bubble {
-      border-top-left-radius: $space-smaller;
-    }
-
-    .user-avatar {
-      visibility: hidden;
-    }
-
-    .agent-name {
-      display: none;
-    }
-  }
-
-  & + .user-message {
-    margin-bottom: $space-normal;
-  }
-
-  .avatar-wrap {
-    flex-shrink: 1;
-    flex-grow: 0;
-  }
-
-  .message-wrap {
-    max-width: 90%;
-    flex-shrink: 0;
-    flex-grow: 1;
-    margin-left: $space-small;
-
-    .agent-name {
-      font-weight: $font-weight-medium;
+    & + .agent-message {
       margin-bottom: $space-smaller;
-      margin-left: $space-two;
-      color: $color-body;
+
+      .chat-bubble {
+        border-top-left-radius: $space-smaller;
+      }
+
+      .user-avatar {
+        visibility: hidden;
+      }
+
+      .agent-name {
+        display: none;
+      }
+    }
+
+    & + .user-message {
+      margin-top: $space-normal;
+    }
+
+    .avatar-wrap {
+      flex-shrink: 1;
+      flex-grow: 0;
+    }
+
+    .message-wrap {
+      max-width: 90%;
+      flex-shrink: 0;
+      flex-grow: 1;
+      margin-left: $space-small;
+
+      .agent-name {
+        font-weight: $font-weight-medium;
+        margin-bottom: $space-smaller;
+        margin-left: $space-two;
+        color: $color-body;
+      }
     }
   }
 }
diff --git a/app/javascript/widget/components/UserMessage.vue b/app/javascript/widget/components/UserMessage.vue
index c7b05ca63..81ae2edad 100755
--- a/app/javascript/widget/components/UserMessage.vue
+++ b/app/javascript/widget/components/UserMessage.vue
@@ -22,34 +22,36 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
+<style lang="scss">
 @import '~widget/assets/scss/variables.scss';
+.conversation-wrap {
+  .user-message {
+    align-items: flex-end;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin: 0 $space-smaller $space-micro auto;
+    max-width: 85%;
+    text-align: right;
 
-.user-message {
-  align-items: flex-end;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  margin: 0 $space-smaller $space-micro auto;
-  text-align: right;
-
-  & + .user-message {
-    margin-bottom: $space-micro;
-    .chat-bubble {
-      border-top-right-radius: $space-smaller;
+    & + .user-message {
+      margin-bottom: $space-micro;
+      .chat-bubble {
+        border-top-right-radius: $space-smaller;
+      }
+      .user-avatar {
+        visibility: hidden;
+      }
+      .agent-name {
+        display: none;
+      }
     }
-    .user-avatar {
-      visibility: hidden;
+    & + .agent-message {
+      margin-top: $space-normal;
     }
-    .agent-name {
-      display: none;
+    .message-wrap {
+      margin-right: $space-small;
     }
   }
-  & + .agent-message {
-    margin-bottom: $space-normal;
-  }
-  .message-wrap {
-    margin-right: $space-small;
-  }
 }
 </style>