diff --git a/.eslintrc.js b/.eslintrc.js index b61be8bb6..c6c52bb34 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -20,7 +20,7 @@ module.exports = { 'jsx-a11y/anchor-is-valid': 'off', 'import/no-unresolved': 'off', 'vue/max-attributes-per-line': ['error', { - 'singleline': 3, + 'singleline': 20, 'multiline': { 'max': 1, 'allowFirstLine': false diff --git a/.github/woot-logo.svg b/.github/woot-logo.svg deleted file mode 100644 index 1d5f2e97e..000000000 --- a/.github/woot-logo.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - logo - Created with Sketch. - - - - \ No newline at end of file diff --git a/app/controllers/api/v1/widget/inboxes_controller.rb b/app/controllers/api/v1/widget/inboxes_controller.rb index 607a900b5..a16f5bfed 100644 --- a/app/controllers/api/v1/widget/inboxes_controller.rb +++ b/app/controllers/api/v1/widget/inboxes_controller.rb @@ -5,7 +5,8 @@ class Api::V1::Widget::InboxesController < Api::BaseController ActiveRecord::Base.transaction do channel = web_widgets.create!( website_name: permitted_params[:website_name], - website_url: permitted_params[:website_url] + website_url: permitted_params[:website_url], + widget_color: permitted_params[:widget_color] ) @inbox = inboxes.create!(name: permitted_params[:website_name], channel: channel) end @@ -26,6 +27,6 @@ class Api::V1::Widget::InboxesController < Api::BaseController end def permitted_params - params.fetch(:website).permit(:website_name, :website_url) + params.fetch(:website).permit(:website_name, :website_url, :widget_color) end end diff --git a/app/javascript/dashboard/assets/images/woot-logo.svg b/app/javascript/dashboard/assets/images/woot-logo.svg index 1d5f2e97e..438f2b4b0 100644 --- a/app/javascript/dashboard/assets/images/woot-logo.svg +++ b/app/javascript/dashboard/assets/images/woot-logo.svg @@ -1,18 +1,15 @@ - - - logo + + + on_white Created with Sketch. - - \ No newline at end of file diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss index 8b31295c3..769232229 100644 --- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss +++ b/app/javascript/dashboard/assets/scss/_foundation-settings.scss @@ -385,7 +385,7 @@ $helptext-font-size: $font-size-small; $helptext-font-style: italic; $input-prefix-color: $header-color; $input-prefix-background: $light-gray; -$input-prefix-border: 1px solid $light-gray; +$input-prefix-border: 1px solid $color-border; $input-prefix-padding: 1rem; $form-label-color: $header-color; $form-label-font-size: rem-calc(14); @@ -402,7 +402,7 @@ $input-font-weight: $global-weight-normal; $input-background: $white; $input-background-focus: $white; $input-background-disabled: $light-gray; -$input-border: 1px solid $light-gray; +$input-border: 1px solid $color-border; $input-border-focus: 1px solid lighten($primary-color, 15%); $input-shadow: 0; $input-shadow-focus: 0; diff --git a/app/javascript/dashboard/assets/scss/_variables.scss b/app/javascript/dashboard/assets/scss/_variables.scss index 94bba8a88..c9b53d05b 100644 --- a/app/javascript/dashboard/assets/scss/_variables.scss +++ b/app/javascript/dashboard/assets/scss/_variables.scss @@ -38,7 +38,7 @@ $font-weight-black: 700; $nav-bar-width: 23rem; $header-height: 5.6rem; -$woot-logo-padding: $space-large $space-large $space-large $space-large; +$woot-logo-padding: $space-large $space-two; // Colors $color-woot: #1f93ff; diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss index 68405ee94..3fcb0c2e2 100644 --- a/app/javascript/dashboard/assets/scss/_woot.scss +++ b/app/javascript/dashboard/assets/scss/_woot.scss @@ -3,25 +3,26 @@ @import 'animations'; @import 'foundation-custom'; -@import 'widgets/search-box'; +@import 'widgets/billing'; +@import 'widgets/buttons'; +@import 'widgets/colorpicker'; @import 'widgets/conv-header'; -@import 'widgets/thumbnail'; @import 'widgets/conversation-card'; @import 'widgets/conversation-view'; -@import 'widgets/reply-box'; -@import 'widgets/tabs'; -@import 'widgets/login'; @import 'widgets/emojiinput'; -@import 'widgets/woot-tables'; -@import 'widgets/sidemenu'; @import 'widgets/forms'; -@import 'widgets/buttons'; -@import 'widgets/snackbar'; +@import 'widgets/login'; @import 'widgets/modal'; -@import 'widgets/states'; +@import 'widgets/reply-box'; @import 'widgets/report'; -@import 'widgets/billing'; +@import 'widgets/search-box'; +@import 'widgets/sidemenu'; +@import 'widgets/snackbar'; +@import 'widgets/states'; @import 'widgets/status-bar'; +@import 'widgets/tabs'; +@import 'widgets/thumbnail'; +@import 'widgets/woot-tables'; @import 'views/settings/inbox'; @import 'views/settings/channel'; diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss index cdd11b427..5318e3447 100644 --- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss +++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss @@ -1,35 +1,37 @@ .multiselect { - min-height: 38px; margin-bottom: $space-normal; + min-height: 38px; > .multiselect__tags { - padding-top: $zero; - min-height: 38px; - border-radius: 0; - border: 1px solid $light-gray; @include margin(0); + border: 1px solid $color-border; + min-height: 44px; + padding-top: $zero; .multiselect__placeholder { padding-top: $space-small; } .multiselect__tag { - margin-top: $space-smaller; + margin-top: $space-one; } .multiselect__input { @include ghost-input; - margin-bottom: $zero; @include padding($zero); + + margin-bottom: $zero; } .multiselect__single { - @include padding($space-small); + @include padding($space-one); + margin-bottom: 0; } } .multiselect__select { + min-height: 44px; padding: 0; right: 0; top: 0; diff --git a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss index df2af2441..479dbbd8f 100644 --- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss +++ b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss @@ -197,8 +197,9 @@ } .settings-modal { - width: 60%; height: 80%; + max-width: 1040px; + width: 100%; .delete-wrapper { position: absolute; @@ -214,7 +215,7 @@ } } - .code-wrapper { + .settings--content { @include margin($space-medium); .title { diff --git a/app/javascript/dashboard/assets/scss/widgets/_colorpicker.scss b/app/javascript/dashboard/assets/scss/widgets/_colorpicker.scss new file mode 100644 index 000000000..9d761807a --- /dev/null +++ b/app/javascript/dashboard/assets/scss/widgets/_colorpicker.scss @@ -0,0 +1,13 @@ +@import '~dashboard/assets/scss/variables'; + +.widget-color--selector.vc-compact { + border: 1px solid $color-border; + box-shadow: none; + margin-bottom: $space-normal; + width: 356px; + + .vc-compact-color-item { + height: 24px; + width: 24px; + } +} diff --git a/app/javascript/dashboard/assets/scss/widgets/_modal.scss b/app/javascript/dashboard/assets/scss/widgets/_modal.scss index c026fcc73..04c92e836 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_modal.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_modal.scss @@ -1,35 +1,43 @@ .modal-mask { - position: fixed; - z-index: 9990; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, .5); - @include flex; - @include flex-align(center, middle); + @include flex; + @include flex-align(center, middle); + background-color: $color-white; + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 9990; +} + +.modal--close { + border-radius: 50%; + color: $color-heading; + cursor: pointer; + font-size: $font-size-big; + line-height: $space-normal; + padding: $space-normal $space-two; + position: absolute; + right: $space-large; + top: $space-large; + + &:hover { + background: $color-background; + } } .modal-container { - width: 60rem; + background-color: $color-white; + border-radius: $space-small; max-height: 100%; overflow: scroll; position: relative; - background-color: $color-white; - border-radius: $space-small; - - .modal--close { - font-size: $font-size-large; - position: absolute; - right: $space-normal; - top: $space-small; - cursor: pointer; - color: $color-heading; - } + width: 60rem; .page-top-bar { - @include padding($space-large $space-larger 0); + @include padding($zero $space-two); + img { max-height: 6rem; } @@ -56,7 +64,7 @@ form { align-self: center; - @include padding($space-medium $space-larger $space-small); + @include padding($space-two); a { @include padding($space-normal); } diff --git a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss index 80807d099..9f0ac0bd2 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss @@ -18,7 +18,7 @@ .logo { img { @include padding($woot-logo-padding); - max-height: 100px; + max-height: 108px; } } diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue index 774ec99a4..6f980cb4e 100644 --- a/app/javascript/dashboard/components/Modal.vue +++ b/app/javascript/dashboard/components/Modal.vue @@ -1,8 +1,8 @@
+
+
-
@@ -10,24 +10,23 @@ diff --git a/app/javascript/dashboard/components/SettingsFormHeader.vue b/app/javascript/dashboard/components/SettingsFormHeader.vue new file mode 100644 index 000000000..ffde8bc11 --- /dev/null +++ b/app/javascript/dashboard/components/SettingsFormHeader.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue index fb977e72e..b0e9a1f14 100644 --- a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue +++ b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue @@ -1,5 +1,10 @@