[Enhancement] Select widget_color while creating inbox (#362)

* [Enhancement] Select widget_color while creating inbox

* Fix codeclimate issues

* Fix !important

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;

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;

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';

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;

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 {

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;
+  }
+}

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);
     }

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;
     }
   }