UX: Category colorpicker restyle

app/assets/javascripts/discourse/templates/components/edit-category-general.hbs

@@ -44,15 +44,19 @@
 
         <div class='input-prepend input-append' style="margin-top: 10px;">
           <span class='color-title'>{{i18n 'category.background_color'}}:</span>
-          <span class='add-on'>#</span>{{text-field value=category.color placeholderKey="category.color_placeholder" maxlength="6"}}
+          <div class="colorpicker-wrapper">
-          {{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
+            <span class='add-on'>#</span>{{text-field value=category.color placeholderKey="category.color_placeholder" maxlength="6"}}
+            {{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
+          </div>
         </div>
 
         <div class='input-prepend input-append'>
           <span class='color-title'>{{i18n 'category.foreground_color'}}:</span>
-          <span class='add-on'>#</span>{{text-field value=category.text_color placeholderKey="category.color_placeholder" maxlength="6"}}
+          <div class="colorpicker-wrapper">
-          {{color-picker colors=foregroundColors value=category.text_color id='edit-text-color'}}
+            <span class='add-on'>#</span>{{text-field value=category.text_color placeholderKey="category.color_placeholder" maxlength="6"}}
-        </div>
+            {{color-picker colors=foregroundColors value=category.text_color id='edit-text-color'}}
+          </div>
+        </div>        
       </div>
     </section>
   {{/unless}}

app/assets/stylesheets/common/base/colorpicker.scss

@@ -2,29 +2,49 @@
 
 .category-color-editor {
   input {
-    width: 70px;
+    width: 5.5em;
-    margin-right: 10px;
+    margin-right: 1em;
   }
 
   .color-title {
-    display: inline-block;
+    display: block;
-    width: 120px;
+    margin: 1em 0 0.25em;
+  }
+
+  .colorpicker-wrapper {
+    display: flex;
+    align-items: center;
+    input,
+    .add-on {
+      align-self: flex-start;
+      margin-bottom: 0.125em;
+    }
   }
 
   .colors-container {
-    display: inline-block;
+    display: inline-flex;
-    vertical-align: middle;
+    flex-wrap: wrap;
-    padding-top: 4px;
-    max-width: 240px;
 
     .colorpicker {
-      border: 1px solid $primary-low;
+      position: relative;
-      margin-right: 2px;
+      margin: 0 0.125em 0.25em;
-      width: 16px;
+      border: 1px solid $primary-medium;
-      height: 16px;
+      width: 1.25em;
-      font-size: 0.286em;
+      height: 1.2em;
-      &.used-color {
+      padding: 0;
-        background: image-url("chosen-sprite.png") -19px 13px;
+      flex: 0 0 auto;
+      &.used-color:before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: fontawesome;
+        content: "\f00c";
+        height: 100%;
+        width: calc(1.25em - 2px);
+        color: rgba($secondary, 0.75);
       }
     }
   }

app/assets/stylesheets/common/base/discourse.scss

@@ -211,6 +211,52 @@ input {
   }
 }
 
+.input {
+  &-prepend,
+  &-append {
+    margin-bottom: 5px;
+    input[class*="span"] {
+      display: inline-block;
+    }
+    input,
+    select {
+      position: relative;
+      margin-bottom: 0;
+      vertical-align: middle;
+      border-radius: 0;
+      &:focus {
+        z-index: z("base") + 1;
+      }
+    }
+    .add-on {
+      display: inline-flex;
+      align-items: center;
+      width: auto;
+      padding: 0 0.5em;
+      height: 28px;
+      background-color: $primary-low;
+      border: 1px solid $primary-medium;
+    }
+    .add-on,
+    .btn {
+      &:first-child {
+        margin-right: -1px;
+      }
+      &:last-child {
+        margin-left: -1px;
+        border-radius: 0 3px 3px 0;
+      }
+    }
+  }
+
+  &-prepend {
+    .add-on,
+    .btn {
+      margin-right: -1px;
+    }
+  }
+}
+
 textarea {
   height: auto;
   background-color: $secondary;

app/assets/stylesheets/common/base/modal.scss

@@ -103,6 +103,7 @@
   background-color: $secondary;
   background-clip: padding-box;
   box-shadow: shadow("modal");
+  padding: 1px;
 
   @media screen and (min-width: 475px) {
     min-width: 475px;

app/assets/stylesheets/desktop/discourse.scss

@@ -124,101 +124,6 @@ input {
   &-xxlarge {
     width: 530px;
   }
-
-  &-prepend,
-  &-append {
-    margin-bottom: 5px;
-
-    input[class*="span"] {
-      display: inline-block;
-    }
-
-    input,
-    select {
-      position: relative;
-      margin-bottom: 0;
-      vertical-align: middle;
-
-      &:focus {
-        z-index: z("base") + 1;
-      }
-    }
-
-    .add-on {
-      display: inline-block;
-      width: auto;
-      height: 18px;
-      min-width: 16px;
-      padding: 4px 5px;
-      font-weight: normal;
-      line-height: $line-height-medium;
-      text-align: center;
-      vertical-align: middle;
-      background-color: $secondary;
-      border: 1px solid $primary-low;
-    }
-
-    .add-on,
-    .btn {
-      margin-left: -1px;
-      border-radius: 0;
-    }
-
-    .active {
-      background-color: $danger-medium;
-      border-color: $danger;
-    }
-  }
-
-  &-prepend {
-    .add-on,
-    .btn {
-      margin-right: -1px;
-
-      &:first-child {
-        border-radius: 3px 0 0 3px;
-      }
-    }
-  }
-
-  &-append {
-    input,
-    select {
-      border-radius: 3px 0 0 3px;
-    }
-
-    .add-on,
-    .btn {
-      &:last-child {
-        border-radius: 0 3px 3px 0;
-      }
-    }
-  }
-}
-
-.input-prepend.input-append {
-  input,
-  select {
-    border-radius: 0;
-    background-color: $primary-low;
-    border-color: $primary-low;
-  }
-
-  .add-on,
-  .btn {
-    &:first-child {
-      margin-right: -1px;
-      border-radius: 3px 0 0 3px;
-    }
-  }
-
-  .add-on,
-  .btn {
-    &:last-child {
-      margin-left: -1px;
-      border-radius: 0 3px 3px 0;
-    }
-  }
 }
 
 .controls-dropdown {