Adjust space between message bubbles in widget (chatwoot#309)

gannino · Nov 27, 2019 · 7c65142 · 7c65142
1 parent ded8f33
commit 7c65142
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 60 deletions.
diff --git 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
@@ -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-smaller;
 
-  & + .agent-message {
-    margin-bottom: $space-micro;
+      .chat-bubble {
+        border-top-left-radius: $space-smaller;
+      }
 
-    .chat-bubble {
-      border-top-left-radius: $space-smaller;
-    }
+      .user-avatar {
+        visibility: hidden;
+      }
 
-    .user-avatar {
-      visibility: hidden;
+      .agent-name {
+        display: none;
+      }
     }
 
-    .agent-name {
-      display: none;
+    & + .user-message {
+      margin-top: $space-normal;
     }
-  }
-
-  & + .user-message {
-    margin-bottom: $space-normal;
-  }
 
-  .avatar-wrap {
-    flex-shrink: 1;
-    flex-grow: 0;
-  }
+    .avatar-wrap {
+      flex-shrink: 1;
+      flex-grow: 0;
+    }
 
-  .message-wrap {
-    max-width: 90%;
-    flex-shrink: 0;
-    flex-grow: 1;
-    margin-left: $space-small;
+    .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;
+      .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
@@ -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>