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

app/javascript/widget/components/AgentMessage.vue

@@ -145,8 +145,9 @@ export default {
 
       if (this.messageContentAttributes.submitted_values) {
         if (this.contentType === 'input_select') {
-          const [selectionOption = {}] =
-            this.messageContentAttributes.submitted_values;
+          const [
+            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';