chore: Move unscoped styles to global stylesheet (#3422)

app/javascript/widget/assets/scss/views/_conversation.scss

@@ -0,0 +1,236 @@
+.file-uploads .attachment-button + label {
+  cursor: pointer;
+}
+
+.conversation-wrap {
+  .agent-message {
+    align-items: flex-end;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin: 0 0 $space-micro $space-small;
+    max-width: 88%;
+
+    .avatar-wrap {
+      flex-shrink: 0;
+      height: $space-medium;
+      width: $space-medium;
+
+      .user-thumbnail-box {
+        margin-top: -$space-large;
+      }
+    }
+
+    .message-wrap {
+      flex-grow: 1;
+      flex-shrink: 0;
+      margin-left: $space-small;
+      max-width: 90%;
+    }
+  }
+
+  &.is-typing .messages-wrap div:last-child {
+    .agent-message {
+      .agent-name {
+        display: none;
+      }
+
+      .user-thumbnail-box {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .agent-name {
+    color: $color-body;
+    font-size: $font-size-small;
+    font-weight: $font-weight-medium;
+    margin: $space-small 0;
+    padding-left: $space-micro;
+  }
+
+  .has-attachment {
+    overflow: hidden;
+    padding: 0;
+
+    &.has-text {
+      margin-top: $space-smaller;
+    }
+  }
+
+  .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;
+      }
+    }
+
+    &.has-response + .agent-message-wrap {
+      margin-top: $space-normal;
+    }
+  }
+
+  .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;
+
+    .message-wrap {
+      margin-right: $space-small;
+      max-width: 100%;
+    }
+
+    .in-progress {
+      opacity: 0.6;
+    }
+  }
+
+
+  .user.has-attachment {
+    .icon-wrap {
+      color: $color-white;
+    }
+
+    .download {
+      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;
+    }
+  }
+
+  p:not(:last-child) {
+    margin-bottom: $space-normal;
+  }
+}
+
+
+.unread-messages {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  margin-top: 0;
+  overflow-y: auto;
+  padding-bottom: $space-small;
+  width: 100%;
+
+  .chat-bubble-wrap {
+    margin-bottom: $space-smaller;
+
+    &:first-child {
+      margin-top: auto;
+    }
+
+    .chat-bubble {
+      border: 1px solid $color-border-dark;
+    }
+
+    + .chat-bubble-wrap {
+      .chat-bubble {
+        border-top-left-radius: $space-smaller;
+      }
+    }
+
+    &:last-child .chat-bubble {
+      border-bottom-left-radius: $space-two;
+    }
+  }
+}
+
+.is-widget-right .unread-wrap {
+  overflow: hidden;
+  text-align: right;
+
+  .chat-bubble-wrap {
+    .chat-bubble {
+      border-bottom-right-radius: $space-smaller;
+      border-radius: $space-two;
+    }
+
+    + .chat-bubble-wrap {
+      .chat-bubble {
+        border-top-right-radius: $space-smaller;
+      }
+    }
+
+    &:last-child .chat-bubble {
+      border-bottom-right-radius: $space-two;
+    }
+  }
+
+  .close-unread-wrap {
+    text-align: right;
+  }
+}
+
+
+.chat-bubble {
+  @include light-shadow;
+  background: $color-woot;
+  border-radius: $space-two;
+  color: $color-white;
+  display: inline-block;
+  font-size: $font-size-default;
+  line-height: 1.5;
+  max-width: 100%;
+  padding: $space-slab $space-normal;
+  text-align: left;
+  word-break: break-word;
+
+  > a {
+    color: $color-primary;
+    word-break: break-all;
+  }
+
+  .link {
+    text-decoration: underline;
+  }
+
+  &.user {
+    border-bottom-right-radius: $space-smaller;
+
+    > a {
+      color: $color-white;
+    }
+  }
+
+  &.agent {
+    background: $color-white;
+    border-bottom-left-radius: $space-smaller;
+    color: $color-body;
+
+    .link {
+      color: $color-woot;
+      word-break: break-word;
+    }
+  }
+}

app/javascript/widget/assets/scss/woot.scss

@@ -9,6 +9,7 @@
 @import 'utilities';
 @import 'shared/assets/fonts/widget_fonts';
 @import '~spinkit/scss/spinners/7-three-bounce';
+@import 'views/conversation';
 
 html,
 body {

app/javascript/widget/components/AgentMessage.vue

@@ -145,8 +145,9 @@ export default {
 
       if (this.messageContentAttributes.submitted_values) {
         if (this.contentType === 'input_select') {
-          const [selectionOption = {}] =
+          const [
-            this.messageContentAttributes.submitted_values;
+            selectionOption = {},
+          ] = this.messageContentAttributes.submitted_values;
           return { content: selectionOption.title || selectionOption.value };
         }
       }
@@ -171,78 +172,3 @@ export default {
   },
 };
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss">
-@import '~widget/assets/scss/variables.scss';
-
-.conversation-wrap {
-  .agent-message {
-    align-items: flex-end;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    margin: 0 0 $space-micro $space-small;
-    max-width: 88%;
-
-    .avatar-wrap {
-      height: $space-medium;
-      width: $space-medium;
-      flex-shrink: 0;
-
-      .user-thumbnail-box {
-        margin-top: -$space-large;
-      }
-    }
-
-    .message-wrap {
-      flex-grow: 1;
-      flex-shrink: 0;
-      margin-left: $space-small;
-      max-width: 90%;
-    }
-  }
-
-  .agent-name {
-    color: $color-body;
-    font-size: $font-size-small;
-    font-weight: $font-weight-medium;
-    margin: $space-small 0;
-    padding-left: $space-micro;
-  }
-
-  .has-attachment {
-    padding: 0;
-    overflow: hidden;
-
-    &.has-text {
-      margin-top: $space-smaller;
-    }
-  }
-
-  .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;
-      }
-    }
-
-    &.has-response + .agent-message-wrap {
-      margin-top: $space-normal;
-    }
-  }
-}
-</style>

app/javascript/widget/components/AgentMessageBubble.vue

@@ -129,22 +129,6 @@ export default {
 };
 </script>
 
-<style lang="scss">
-@import '~widget/assets/scss/variables.scss';
-
-.chat-bubble {
-  &.agent {
-    background: $color-white;
-    border-bottom-left-radius: $space-smaller;
-    color: $color-body;
-
-    .link {
-      word-break: break-word;
-      color: $color-woot;
-    }
-  }
-}
-</style>
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 

app/javascript/widget/components/ChatAttachment.vue

@@ -66,8 +66,3 @@ export default {
   },
 };
 </script>
-<style lang="scss">
-.file-uploads .attachment-button + label {
-  cursor: pointer;
-}
-</style>

app/javascript/widget/components/ConversationWrap.vue

@@ -120,15 +120,3 @@ export default {
   text-align: center;
 }
 </style>
-<style lang="scss">
-.conversation-wrap.is-typing .messages-wrap div:last-child {
-  .agent-message {
-    .agent-name {
-      display: none;
-    }
-    .user-thumbnail-box {
-      margin-top: 0;
-    }
-  }
-}
-</style>

app/javascript/widget/components/UserMessage.vue

@@ -74,61 +74,3 @@ export default {
   },
 };
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<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;
-
-    .message-wrap {
-      margin-right: $space-small;
-      max-width: 100%;
-    }
-
-    .in-progress {
-      opacity: 0.6;
-    }
-  }
-
-  .has-attachment {
-    padding: 0;
-    overflow: hidden;
-  }
-
-  .user.has-attachment {
-    .icon-wrap {
-      color: $color-white;
-    }
-
-    .download {
-      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;
-    }
-  }
-
-  p:not(:last-child) {
-    margin-bottom: $space-normal;
-  }
-}
-</style>

app/javascript/widget/components/UserMessageBubble.vue

@@ -29,41 +29,6 @@ export default {
 };
 </script>
 
-<style lang="scss">
-@import '~widget/assets/scss/variables.scss';
-@import '~widget/assets/scss/mixins.scss';
-
-.chat-bubble {
-  @include light-shadow;
-  background: $color-woot;
-  border-radius: $space-two;
-  color: $color-white;
-  display: inline-block;
-  font-size: $font-size-default;
-  line-height: 1.5;
-  padding: $space-slab $space-normal $space-slab $space-normal;
-  text-align: left;
-  word-break: break-word;
-  max-width: 100%;
-
-  > a {
-    color: $color-primary;
-    word-break: break-all;
-  }
-
-  .link {
-    text-decoration: underline;
-  }
-
-  &.user {
-    border-bottom-right-radius: $space-smaller;
-
-    > a {
-      color: $color-white;
-    }
-  }
-}
-</style>
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 

app/javascript/widget/views/Unread.vue

@@ -178,62 +178,3 @@ export default {
   }
 }
 </style>
-
-<style lang="scss">
-@import '~widget/assets/scss/variables';
-
-.unread-messages {
-  width: 100%;
-  margin-top: 0;
-  padding-bottom: $space-small;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-
-  .chat-bubble-wrap {
-    margin-bottom: $space-smaller;
-
-    &:first-child {
-      margin-top: auto;
-    }
-    .chat-bubble {
-      border: 1px solid $color-border-dark;
-    }
-
-    + .chat-bubble-wrap {
-      .chat-bubble {
-        border-top-left-radius: $space-smaller;
-      }
-    }
-    &:last-child .chat-bubble {
-      border-bottom-left-radius: $space-two;
-    }
-  }
-}
-
-.is-widget-right .unread-wrap {
-  text-align: right;
-  overflow: hidden;
-
-  .chat-bubble-wrap {
-    .chat-bubble {
-      border-radius: $space-two;
-      border-bottom-right-radius: $space-smaller;
-    }
-
-    + .chat-bubble-wrap {
-      .chat-bubble {
-        border-top-right-radius: $space-smaller;
-      }
-    }
-    &:last-child .chat-bubble {
-      border-bottom-right-radius: $space-two;
-    }
-  }
-
-  .close-unread-wrap {
-    text-align: right;
-  }
-}
-</style>