From a951fb20cbe1ab89fd9bf6d4aa14a5a1816d28ba Mon Sep 17 00:00:00 2001 From: Nithin David Thomas Date: Sat, 2 May 2020 09:47:36 +0530 Subject: [PATCH] Chore: UI fixes and enhancements (#796) Co-authored-by: Pranav Raj S --- .../assets/scss/_foundation-settings.scss | 10 +- .../assets/scss/_helper-classes.scss | 2 +- .../dashboard/assets/scss/_variables.scss | 12 +- .../assets/scss/views/settings/inbox.scss | 9 +- .../scss/views/settings/integrations.scss | 4 +- .../assets/scss/widgets/_conv-header.scss | 3 + .../scss/widgets/_conversation-card.scss | 4 +- .../scss/widgets/_conversation-view.scss | 304 ++++++++++-------- .../dashboard/assets/scss/widgets/_login.scss | 10 +- .../assets/scss/widgets/_sidemenu.scss | 2 +- .../assets/scss/widgets/_snackbar.scss | 37 ++- .../components/SnackbarContainer.vue | 16 +- .../widgets/conversation/bubble/File.vue | 11 +- .../widgets/conversation/bubble/Text.vue | 2 +- .../dashboard/i18n/locale/en/login.json | 2 +- .../dashboard/conversation/ContactPanel.vue | 2 +- .../shared/helpers/MessageFormatter.js | 2 +- .../helpers/specs/MessageFormatter.spec.js | 2 +- app/javascript/widget/assets/scss/_forms.scss | 7 +- .../widget/assets/scss/_variables.scss | 5 +- .../widget/components/AgentMessage.vue | 43 ++- .../widget/components/AgentMessageBubble.vue | 5 + .../widget/components/AvailableAgents.vue | 2 +- .../widget/components/ConversationWrap.vue | 2 +- .../widget/components/FileBubble.vue | 9 +- .../widget/components/ImageBubble.vue | 5 +- .../widget/components/UserMessage.vue | 69 ++-- .../widget/components/UserMessageBubble.vue | 2 +- app/javascript/widget/views/Home.vue | 2 +- 29 files changed, 335 insertions(+), 250 deletions(-) diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss index 4779db720..58ecfec33 100644 --- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss +++ b/app/javascript/dashboard/assets/scss/_foundation-settings.scss @@ -49,10 +49,10 @@ $global-font-size: 10px; $global-width: 100%; $global-lineheight: 1.5; $foundation-palette: (primary: $color-woot, - secondary: #777, - success: #13ce66, - warning: #ffc82c, - alert: #ff4949); + secondary: #35c5ff, + success: #44ce4b, + warning: #ffc532, + alert: #ff382d); $light-gray: #c0ccda; $medium-gray: #8492a6; $dark-gray: $color-gray; @@ -127,7 +127,7 @@ $header-styles: (small: ("h1": ("font-size": 24), $header-text-rendering: optimizeLegibility; $small-font-size: 80%; $header-small-font-color: $medium-gray; -$paragraph-lineheight: 1.6; +$paragraph-lineheight: 1.45; $paragraph-margin-bottom: 1rem; $paragraph-text-rendering: optimizeLegibility; $code-color: $black; diff --git a/app/javascript/dashboard/assets/scss/_helper-classes.scss b/app/javascript/dashboard/assets/scss/_helper-classes.scss index fa84afa0c..d34d30beb 100644 --- a/app/javascript/dashboard/assets/scss/_helper-classes.scss +++ b/app/javascript/dashboard/assets/scss/_helper-classes.scss @@ -29,7 +29,7 @@ background: $color-white; border-radius: $space-large; left: 0; - margin: $space-slab 0 auto; + margin: $space-slab auto; padding: $space-normal; top: 0; diff --git a/app/javascript/dashboard/assets/scss/_variables.scss b/app/javascript/dashboard/assets/scss/_variables.scss index b75d3bf77..09a639648 100644 --- a/app/javascript/dashboard/assets/scss/_variables.scss +++ b/app/javascript/dashboard/assets/scss/_variables.scss @@ -46,7 +46,8 @@ $color-gray: #6e6f73; $color-light-gray: #999a9b; $color-border: #e0e6ed; $color-border-light: #f0f4f5; -$color-background: #eff2f7; +$color-background: #f4f6fb; +$color-border-dark: #cad0d4; $color-background-light: #f9fafc; $color-white: #fff; $color-body: #3c4858; @@ -54,11 +55,10 @@ $color-heading: #1f2d3d; $color-extra-light-blue: #f5f7f9; $primary-color: $color-woot; -$secondary-color: #ff5216; -$success-color: #13ce66; -$warning-color: #ffc82c; -$alert-color: #ff4949; - +$secondary-color: #35c5ff; +$success-color: #44ce4b; +$warning-color: #ffc532; +$alert-color: #ff382d; // Color-palettes $color-primary-light: #c7e3ff; diff --git a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss index 438945920..05cfb9b9e 100644 --- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss +++ b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss @@ -5,6 +5,7 @@ @include padding($space-normal $space-two $zero); } } + // Conversation header - Light BG .settings-header { @include padding($space-small $space-normal); @@ -14,6 +15,7 @@ @include border-normal-bottom; height: $header-height; min-height: $header-height; + // Resolve Button .button { @include margin(0); @@ -83,7 +85,7 @@ background: $color-woot; } - & + .item { + &+.item { &::before { background: $color-woot; } @@ -112,7 +114,7 @@ background: $color-border; border-radius: 20px; color: $color-white; - font-size: $font-size-small; + font-size: $font-size-micro; font-weight: $font-weight-medium; height: $space-normal; left: $space-normal; @@ -161,6 +163,7 @@ &:hover { @include background-gray; + .arrow { opacity: 1; transform: translateX($space-small); @@ -228,7 +231,7 @@ @include padding($space-medium); } - > a > img { + >a>img { width: $space-larger * 5; } } diff --git a/app/javascript/dashboard/assets/scss/views/settings/integrations.scss b/app/javascript/dashboard/assets/scss/views/settings/integrations.scss index 183fa9a23..e791f4cd7 100644 --- a/app/javascript/dashboard/assets/scss/views/settings/integrations.scss +++ b/app/javascript/dashboard/assets/scss/views/settings/integrations.scss @@ -1,8 +1,8 @@ .integrations-wrap { .integration { background: $color-white; - border: 2px solid $color-border; - border-radius: $space-slab; + border: 1px solid $color-border; + border-radius: $space-smaller; padding: $space-normal; .integration--image { diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss index 0122ba96b..6de396353 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss @@ -45,6 +45,7 @@ .user--name { @include margin(0); font-size: $font-size-medium; + line-height: 1.3; text-transform: capitalize; } @@ -65,6 +66,8 @@ } .button.resolve--button { + width: 13.2rem; + >.icon { font-size: $font-size-default; padding-right: $space-small; diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss index c331492d2..62eeb268f 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss @@ -2,11 +2,13 @@ @include flex; @include flex-shrink; @include padding($space-normal $zero $zero $space-normal); + border-left: 4px solid transparent; cursor: pointer; position: relative; &.active { background: $color-background; + border-left-color: $color-woot; } .conversation--details { @@ -64,7 +66,7 @@ background: darken($success-color, 3%); color: $color-white; display: none; - font-size: $font-size-mini; + font-size: $font-size-micro; font-weight: $font-weight-medium; height: $unread-size; line-height: $unread-size; diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss index ecf682b2d..8cc89b741 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss @@ -1,10 +1,11 @@ -@mixin bubble-with-tyes { - @include padding($space-smaller $space-one); +@mixin bubble-with-types { + @include padding($space-one $space-normal); @include margin($zero); - background: $color-primary-light; - border-radius: $space-small; - color: $color-heading; + background: $color-woot; + border-radius: $space-one; + color: $color-white; font-size: $font-size-small; + font-weight: $font-weight-normal; position: relative; .icon { @@ -15,6 +16,17 @@ .message-text__wrap { position: relative; + + .time { + color: $color-primary-light; + display: block; + font-size: $font-size-micro; + line-height: 1.8; + } + + .link { + color: $color-white; + } } .message-text { @@ -51,8 +63,7 @@ } &::before { - $color-black: #000; - background-image: linear-gradient(-180deg, transparent 3%, $color-black 70%); + background-image: linear-gradient(-180deg, transparent 3%, $color-heading 130%); bottom: 0; content: ''; height: 20%; @@ -94,6 +105,7 @@ .load-more-conversations { font-size: $font-size-small; + margin: 0; padding: $space-normal; width: 100%; } @@ -122,10 +134,10 @@ .status--filter { @include padding($zero null $zero $space-normal); - @include border-light; @include round-corner; @include margin($space-smaller $space-slab $zero $zero); - background-color: $color-background; + background-color: $color-background-light; + border: 1px solid $color-border; float: right; font-size: $font-size-mini; height: $space-medium; @@ -192,168 +204,192 @@ height: 100%; margin-bottom: $space-small; overflow-y: auto; +} - >li { - @include flex; - @include flex-shrink; - @include margin($zero $zero $space-smaller); +.conversation-panel>li { + @include flex; + @include flex-shrink; + @include margin($zero $zero $space-micro); - &:first-child { - margin-top: auto; + &:first-child { + margin-top: auto; + } + + &:last-child { + margin-bottom: $space-small; + } + + &.unread--toast { + span { + @include elegant-card; + @include round-corner; + background: $color-woot; + color: $color-white; + font-size: $font-size-mini; + font-weight: $font-weight-medium; + margin: $space-one auto; + padding: $space-smaller $space-two; } + } - &:last-child { - margin-bottom: $space-small; + .bubble { + @include bubble-with-types; + max-width: 50rem; + text-align: left; + word-wrap: break-word; + + .aplayer { + box-shadow: none; + font-family: inherit; } + } - &.unread--toast { - span { - @include elegant-card; - @include round-corner; - background: $color-woot; - color: $color-white; - font-size: $font-size-mini; - font-weight: $font-weight-medium; - margin: $space-one auto; - padding: $space-smaller $space-two; + &.left { + + .bubble { + @include border-normal; + background: $white; + border-bottom-left-radius: $space-smaller; + border-top-left-radius: $space-smaller; + color: $color-body; + margin-right: auto; + + .time { + color: $color-light-gray; } + + .image .time { + color: $color-white; + } + + .link { + color: $color-primary-dark; + } + + .file { + .text-block-title { + color: $color-body; + } + + .icon-wrap { + color: $color-woot; + } + + .download { + color: $color-primary-dark; + } + } + } + + +.right { + margin-top: $space-one; + + .bubble { + border-top-right-radius: $space-one; + } + } + + } + + &.right { + @include flex-align(right, null); + + .wrap { + margin-right: $space-normal; + text-align: right; } .bubble { - @include bubble-with-tyes; - max-width: 50rem; - text-align: left; - word-wrap: break-word; + border-bottom-right-radius: $space-smaller; + border-top-right-radius: $space-smaller; + margin-left: auto; - .aplayer { - box-shadow: none; - font-family: inherit; - } - } - - &.left { - .bubble { - background: $white; - border-bottom-left-radius: 0; - border-top-left-radius: 0; + &.is-private { + background: lighten($warning-color, 32%); + border: 1px solid $color-border; color: $color-heading; - margin-right: auto; - } + padding-right: $space-large; + position: relative; - +.right { - margin-top: $space-one; + &::before { + bottom: 0; + color: $medium-gray; + position: absolute; + right: $space-one; + top: $space-smaller + $space-micro; + } - .bubble { - border-top-right-radius: $space-small; + .time { + color: $color-light-gray; } } - } - &.right { - @include flex-align(right, null); - - .wrap { - margin-right: $space-normal; - text-align: right; - } + +.left { + margin-top: $space-one; .bubble { - border-bottom-right-radius: 0; - border-top-right-radius: 0; - margin-left: auto; - - &.is-private { - background: lighten($warning-color, 32%); - color: $color-heading; - padding-right: $space-large; - position: relative; - - &::before { - bottom: 0; - color: $medium-gray; - position: absolute; - right: $space-one; - top: $space-smaller + $space-micro; - } - } - } - - +.left { - margin-top: $space-one; - - .bubble { - border-top-left-radius: $space-small; - } + border-top-left-radius: $space-one; } } + } - .wrap { - @include margin($zero $space-normal); - max-width: 69%; + .wrap { + @include margin($zero $space-normal); + max-width: 69%; - .sender--name { - font-size: $font-size-mini; - margin-bottom: $space-smaller; - } + .sender--name { + font-size: $font-size-mini; + margin-bottom: $space-smaller; } + } - .sender--thumbnail { - @include round-corner(); - height: $space-slab; - margin-right: $space-one; - margin-top: $space-micro; - width: $space-slab; - } + .sender--thumbnail { + @include round-corner(); + height: $space-slab; + margin-right: $space-one; + margin-top: $space-micro; + width: $space-slab; + } - .activity-wrap { - @include flex; - @include margin($space-small auto); - @include padding($space-smaller $space-normal); - @include flex-align($x: center, $y: null); - background: lighten($warning-color, 32%); - border: 1px solid lighten($warning-color, 26%); - border-radius: $space-smaller; - font-size: $font-size-small; + .activity-wrap { + @include flex; + @include margin($space-small auto); + @include padding($space-small $space-normal); + @include flex-align($x: center, $y: null); + background: lighten($warning-color, 32%); + border: 1px solid lighten($warning-color, 22%); + border-radius: $space-smaller; + font-size: $font-size-small; - p { - color: $color-heading; - margin-bottom: $zero; + p { + color: $color-heading; + margin-bottom: $zero; - .ion-person { - color: $color-body; - font-size: $font-size-default; - margin-right: $space-small; - position: relative; - top: $space-micro; - } - - .message-text__wrap { - position: relative; - } - - .message-text { - &::after { - content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0'; - display: inline; - } - } + .ion-person { + color: $color-body; + font-size: $font-size-default; + margin-right: $space-small; + position: relative; + top: $space-micro; } - .time { - color: $medium-gray; + .message-text__wrap { + position: relative; + } + + .message-text { + &::after { + content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0'; + display: inline; + } } } .time { - bottom: -$space-micro; - color: $color-gray; - float: right; + color: $medium-gray; font-size: $font-size-micro; - font-style: italic; margin-left: $space-slab; - right: -$space-micro; - text-align: right; } } } diff --git a/app/javascript/dashboard/assets/scss/widgets/_login.scss b/app/javascript/dashboard/assets/scss/widgets/_login.scss index 8720c6b57..8deaef1f8 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_login.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_login.scss @@ -42,22 +42,26 @@ font-size: $font-size-default; input { - padding: $space-slab; - height: $space-larger; font-size: $font-size-default; + height: $space-larger; + padding: $space-slab; } .error { font-size: $font-size-small; } } + + .button { + height: $space-larger; + } } .sigin__footer { font-size: $font-size-default; padding: $space-medium; - > a { + >a { font-weight: $font-weight-bold; } } diff --git a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss index 2d1fd7511..83e4ff5ee 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss @@ -48,7 +48,7 @@ margin-bottom: $space-micro; margin-top: $space-micro; - >.inbox-icon { + .inbox-icon { display: inline-block; margin-right: $space-micro; min-width: $space-normal; diff --git a/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss b/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss index c4e681ac1..b714b051d 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss @@ -1,33 +1,32 @@ .ui-snackbar-container { - position: absolute; + left: 0; + margin: 0 auto; + max-width: 40rem; overflow: hidden; - z-index: 9999; - top: $space-normal; - left: $space-normal; - width: 100%; + position: absolute; + right: 0; text-align: center; + top: $space-normal; + z-index: 9999; } .ui-snackbar { - text-align: left; + @include padding($space-slab $space-medium); + @include shadow; + background-color: $woot-snackbar-bg; + border-radius: $space-smaller; display: inline-block; - min-width: 24rem; + margin-bottom: $space-small; max-width: 40rem; min-height: 3rem; - background-color: $woot-snackbar-bg; - @include padding($space-slab $space-medium); - @include border-top-radius($space-micro); - @include border-right-radius($space-micro); - @include border-bottom-radius($space-micro); - @include border-left-radius($space-micro); - margin-bottom: $space-small; - - // box-shadow: 0 1px 3px alpha(black, 0.12), 0 1px 2px alpha(black, 0.24); + min-width: 24rem; + text-align: left; } .ui-snackbar-text { - font-size: $font-size-small; color: $color-white; + font-size: $font-size-small; + font-weight: $font-weight-medium; } .ui-snackbar-action { @@ -35,12 +34,12 @@ padding-left: 3rem; button { + @include margin(0); + @include padding(0); background: none; border: 0; color: $woot-snackbar-button; font-size: $font-size-small; text-transform: uppercase; - @include margin(0); - @include padding(0); } } diff --git a/app/javascript/dashboard/components/SnackbarContainer.vue b/app/javascript/dashboard/components/SnackbarContainer.vue index 3c8c37c35..294dc6185 100644 --- a/app/javascript/dashboard/components/SnackbarContainer.vue +++ b/app/javascript/dashboard/components/SnackbarContainer.vue @@ -1,6 +1,10 @@ @@ -9,8 +13,12 @@ import WootSnackbar from './Snackbar'; export default { + components: { + WootSnackbar, + }, props: { duration: { + type: Number, default: 2500, }, }, @@ -22,16 +30,12 @@ export default { }, mounted() { - bus.$on('newToastMessage', (message) => { + bus.$on('newToastMessage', message => { this.snackMessages.push(message); window.setTimeout(() => { this.snackMessages.splice(0, 1); }, this.duration); }); }, - - components: { - WootSnackbar, - }, }; diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue index c4bb8f00b..6d9a97053 100644 --- a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue +++ b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue @@ -44,12 +44,12 @@ export default { .file { display: flex; flex-direction: row; - padding: $space-normal; + padding: $space-smaller 0; cursor: pointer; .icon-wrap { font-size: $font-size-giga; - color: $color-woot; + color: $color-white; line-height: 1; margin-left: $space-smaller; margin-right: $space-slab; @@ -57,15 +57,22 @@ export default { .text-block-title { margin: 0; + color: $color-white; + font-weight: $font-weight-bold; } .button { padding: 0; margin: 0; + color: $color-primary-light; } .meta { padding-right: $space-two; } + + .time { + min-width: $space-larger; + } } diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue index 6d586a41a..1d266516c 100644 --- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue +++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue @@ -1,7 +1,7 @@ diff --git a/app/javascript/dashboard/i18n/locale/en/login.json b/app/javascript/dashboard/i18n/locale/en/login.json index a6be25967..30f667052 100644 --- a/app/javascript/dashboard/i18n/locale/en/login.json +++ b/app/javascript/dashboard/i18n/locale/en/login.json @@ -16,6 +16,6 @@ }, "FORGOT_PASSWORD": "Forgot your password?", "CREATE_NEW_ACCOUNT": "Create new account", - "SUBMIT": "Sign In" + "SUBMIT": "Login" } } diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue index d750eb8cd..636862232 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue @@ -185,7 +185,7 @@ export default { .close-button { position: absolute; - right: $space-slab; + right: $space-normal; top: $space-slab; font-size: $font-size-default; color: $color-heading; diff --git a/app/javascript/shared/helpers/MessageFormatter.js b/app/javascript/shared/helpers/MessageFormatter.js index 2edd5576b..475c8b905 100644 --- a/app/javascript/shared/helpers/MessageFormatter.js +++ b/app/javascript/shared/helpers/MessageFormatter.js @@ -16,7 +16,7 @@ class MessageFormatter { return this.message.replace( urlRegex, url => - `${url}` + `${url}` ); } diff --git a/app/javascript/shared/helpers/specs/MessageFormatter.spec.js b/app/javascript/shared/helpers/specs/MessageFormatter.spec.js index 847f9efd9..441048497 100644 --- a/app/javascript/shared/helpers/specs/MessageFormatter.spec.js +++ b/app/javascript/shared/helpers/specs/MessageFormatter.spec.js @@ -6,7 +6,7 @@ describe('#MessageFormatter', () => { const message = 'Chatwoot is an opensource tool\nSee more at https://www.chatwoot.com'; expect(new MessageFormatter(message).formattedMessage).toEqual( - 'Chatwoot is an opensource tool
See more at https://www.chatwoot.com' + 'Chatwoot is an opensource tool
See more at https://www.chatwoot.com' ); }); }); diff --git a/app/javascript/widget/assets/scss/_forms.scss b/app/javascript/widget/assets/scss/_forms.scss index 481d7641d..752fa223c 100755 --- a/app/javascript/widget/assets/scss/_forms.scss +++ b/app/javascript/widget/assets/scss/_forms.scss @@ -22,7 +22,10 @@ $input-height: $space-two * 2; outline: none; padding: $space-smaller; position: relative; - transition: background .2s, border .2s, box-shadow .2s, color .2s; + transition: background .2s, + border .2s, + box-shadow .2s, + color .2s; width: 100%; &:focus { @@ -37,7 +40,7 @@ $input-height: $space-two * 2; &.small { font-size: $font-size-small; height: $space-large; - padding: $space-small $space-slab; + padding: $space-small $space-one; } &.default { diff --git a/app/javascript/widget/assets/scss/_variables.scss b/app/javascript/widget/assets/scss/_variables.scss index 02261e825..5d4154315 100755 --- a/app/javascript/widget/assets/scss/_variables.scss +++ b/app/javascript/widget/assets/scss/_variables.scss @@ -52,12 +52,13 @@ $color-light-gray: #999a9b; $color-border: #e0e6ed; $color-border-transparent: rgba(224, 230, 237, 0.5); $color-border-light: #f0f4f5; -$color-background: #ecf3f9; +$color-border-dark: #cad0d4; +$color-background: #f4f6fb; $color-background-light: #fafafa; $color-white: #fff; $color-body: #3c4858; $color-heading: #1f2d3d; -$color-error: #ff4949; +$color-error: #ff382d; // Thumbnail diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue index 31f33d190..261afbf3c 100755 --- a/app/javascript/widget/components/AgentMessage.vue +++ b/app/javascript/widget/components/AgentMessage.vue @@ -1,5 +1,8 @@