diff --git a/app/controllers/api/v1/accounts/inboxes_controller.rb b/app/controllers/api/v1/accounts/inboxes_controller.rb index 6c4a3cf7d..98163bae7 100644 --- a/app/controllers/api/v1/accounts/inboxes_controller.rb +++ b/app/controllers/api/v1/accounts/inboxes_controller.rb @@ -79,7 +79,7 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController def permitted_params params.permit(:id, :avatar, :name, :greeting_message, :greeting_enabled, channel: - [:type, :website_url, :widget_color, :welcome_title, :welcome_tagline, :webhook_url, :email]) + [:type, :website_url, :widget_color, :welcome_title, :welcome_tagline, :webhook_url, :email, :reply_time]) end def inbox_update_params @@ -91,6 +91,7 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController :welcome_tagline, :webhook_url, :email, + :reply_time, { selected_feature_flags: [] } ]) end diff --git a/app/controllers/api/v1/widget/base_controller.rb b/app/controllers/api/v1/widget/base_controller.rb index a69e0282c..f8b2e2c96 100644 --- a/app/controllers/api/v1/widget/base_controller.rb +++ b/app/controllers/api/v1/widget/base_controller.rb @@ -4,10 +4,12 @@ class Api::V1::Widget::BaseController < ApplicationController private + def conversations + @conversations = @contact_inbox.conversations.where(inbox_id: auth_token_params[:inbox_id]) + end + def conversation - @conversation ||= @contact_inbox.conversations.where( - inbox_id: auth_token_params[:inbox_id] - ).last + @conversation ||= conversations.last end def auth_token_params diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss index 209874312..175a65604 100644 --- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss +++ b/app/javascript/dashboard/assets/scss/_foundation-custom.scss @@ -1,3 +1,4 @@ + .button { font-family: $body-font-family; font-weight: $font-weight-medium; diff --git a/app/javascript/dashboard/assets/scss/app.scss b/app/javascript/dashboard/assets/scss/app.scss index 3d01856ef..92edc8e42 100644 --- a/app/javascript/dashboard/assets/scss/app.scss +++ b/app/javascript/dashboard/assets/scss/app.scss @@ -14,5 +14,4 @@ @import '~bourbon/core/bourbon'; @include foundation-everything($flex: true); - @import 'woot'; diff --git a/app/javascript/dashboard/components/widgets/Label.vue b/app/javascript/dashboard/components/widgets/Label.vue index 9b56a4c91..a272601d2 100644 --- a/app/javascript/dashboard/components/widgets/Label.vue +++ b/app/javascript/dashboard/components/widgets/Label.vue @@ -10,6 +10,7 @@ diff --git a/app/javascript/shared/components/ResizableTextArea.vue b/app/javascript/shared/components/ResizableTextArea.vue index d5ba3aa8d..c0547aba0 100644 --- a/app/javascript/shared/components/ResizableTextArea.vue +++ b/app/javascript/shared/components/ResizableTextArea.vue @@ -22,7 +22,7 @@ export default { }, minHeight: { type: Number, - default: 3.2, + default: 2, }, }, watch: { diff --git a/app/javascript/shared/helpers/ColorHelper.js b/app/javascript/shared/helpers/ColorHelper.js new file mode 100644 index 000000000..50e3296ac --- /dev/null +++ b/app/javascript/shared/helpers/ColorHelper.js @@ -0,0 +1,8 @@ +export const getContrastingTextColor = bgColor => { + const color = bgColor.replace('#', ''); + const r = parseInt(color.slice(0, 2), 16); + const g = parseInt(color.slice(2, 4), 16); + const b = parseInt(color.slice(4, 6), 16); + // http://stackoverflow.com/a/3943023/112731 + return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000000' : '#FFFFFF'; +}; diff --git a/app/javascript/widget/assets/scss/_variables.scss b/app/javascript/widget/assets/scss/_variables.scss index f7f3837a3..c47e4a8df 100755 --- a/app/javascript/widget/assets/scss/_variables.scss +++ b/app/javascript/widget/assets/scss/_variables.scss @@ -1,31 +1,30 @@ // Font sizes -$font-size-nano: 0.8rem; -$font-size-micro: 0.8rem; -$font-size-mini: 1rem; -$font-size-small: 1.2rem; -$font-size-default: 1.4rem; -$font-size-medium: 1.6rem; -$font-size-large: 2rem; -$font-size-big: 2.4rem; -$font-size-bigger: 3.2rem; -$font-size-mega: 4rem; -$font-size-giga: 5.6rem; +$font-size-micro: 0.5rem; +$font-size-mini: 0.625rem; +$font-size-small: 0.75rem; +$font-size-default: 0.875rem; +$font-size-medium: 1rem; +$font-size-large: 1.25rem; +$font-size-big: 1.5rem; +$font-size-bigger: 2rem; +$font-size-mega: 2.5rem; +$font-size-giga: 3.5rem; // spaces $zero: 0; -$space-micro: 0.2rem; -$space-smaller: 0.4rem; -$space-small: 0.8rem; -$space-one: 1rem; -$space-slab: 1.2rem; -$space-normal: 1.6rem; -$space-two: 2rem; -$space-medium: 2.4rem; -$space-large: 3.2rem; -$space-larger: 4.8rem; -$space-big: 6.4rem; -$space-jumbo: 8rem; -$space-mega: 10rem; +$space-micro: 0.125rem; +$space-smaller: 0.25rem; +$space-small: 0.5rem; +$space-one: 0.625rem; +$space-slab: 0.75rem; +$space-normal: 1rem; +$space-two: 1.25rem; +$space-medium: 1.5rem; +$space-large: 2rem; +$space-larger: 3rem; +$space-big: 4rem; +$space-jumbo: 5rem; +$space-mega: 6.25rem; // font-weight $font-weight-feather: 100; @@ -35,15 +34,6 @@ $font-weight-medium: 500; $font-weight-bold: 600; $font-weight-black: 700; -//Navbar -$nav-bar-width: 23rem; -$header-height: 5.6rem; - -// Woot Logo -$woot-logo-width: 20rem; -$woot-logo-height: 8rem; -$woot-logo-padding: $space-large $space-large $space-large $space-large; - // Colors $color-woot: #1f93ff; $color-primary: $color-woot; @@ -65,20 +55,6 @@ $color-error: #ff382d; $color-primary-light: #c7e3ff; $color-primary-dark: darken($color-woot, 20%); - -// Thumbnail -$thumbnail-radius: 4rem; - -// chat-header -$conv-header-height: 4rem; - -// login - -// Inbox List - -$inbox-thumb-size: 4.8rem; - - // Spinner $spinkit-spinner-color: $color-white !default; $spinkit-spinner-margin: 0 0 0 1.6rem !default; @@ -92,7 +68,7 @@ $swift-ease-out-duration: .4s !default; $swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default; $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default; -$border-radius: 3px; +$border-radius: 0.1875px; $line-height: 1; $footer-height: 11.2rem; $header-expanded-height: $space-medium * 10; @@ -109,10 +85,6 @@ Arial, sans-serif; $ionicons-font-path: '~ionicons/fonts'; -$spinkit-spinner-color: $color-white !default; -$spinkit-spinner-margin: 0 0 0 1.6rem !default; -$spinkit-size: 1.6rem !default; - // Break points $break-point-medium: 667px; diff --git a/app/javascript/widget/assets/scss/woot.scss b/app/javascript/widget/assets/scss/woot.scss index 7c69f2a55..089b7817c 100755 --- a/app/javascript/widget/assets/scss/woot.scss +++ b/app/javascript/widget/assets/scss/woot.scss @@ -1,4 +1,7 @@ @import 'reset'; +@import 'tailwindcss/base'; +@import 'tailwindcss/components'; +@import 'tailwindcss/utilities'; @import 'variables'; @import 'buttons'; @import 'mixins'; @@ -10,7 +13,6 @@ html, body { font-family: $font-family; - font-size: 10px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; height: 100%; diff --git a/app/javascript/widget/components/AgentTypingBubble.vue b/app/javascript/widget/components/AgentTypingBubble.vue index d55b2dd7c..fa94d26e6 100644 --- a/app/javascript/widget/components/AgentTypingBubble.vue +++ b/app/javascript/widget/components/AgentTypingBubble.vue @@ -25,8 +25,8 @@ export default { @import '~widget/assets/scss/variables.scss'; .typing-bubble { - max-width: $space-medium; - padding: $space-smaller $space-small; + max-width: $space-normal * 2.4; + padding: $space-small; border-bottom-left-radius: $space-two; border-top-left-radius: $space-small; diff --git a/app/javascript/widget/components/AvailableAgents.vue b/app/javascript/widget/components/AvailableAgents.vue index 060c9373d..48a128c5a 100644 --- a/app/javascript/widget/components/AvailableAgents.vue +++ b/app/javascript/widget/components/AvailableAgents.vue @@ -1,80 +1,27 @@ - - diff --git a/app/javascript/widget/components/ChatHeader.vue b/app/javascript/widget/components/ChatHeader.vue index c84d05326..d7c4cf8d6 100644 --- a/app/javascript/widget/components/ChatHeader.vue +++ b/app/javascript/widget/components/ChatHeader.vue @@ -1,8 +1,27 @@