add color th to options

resources/styles/dependencies/helpers.scss

@@ -29,7 +29,7 @@ $br-big: 8px;
 .row-flex {
   align-items: center;
   display: flex;
-  margin-bottom: $x-small;
+  margin-bottom: $small;
 
   &.column {
     flex-direction: column;

resources/styles/partials/colorpicker.scss

@@ -98,3 +98,28 @@
     background-color: white;
   }
 }
+
+/* NEW COLOR PICKER */
+/* color th */
+.color-data {
+  align-items: center;
+  display: flex;
+  margin-bottom: $x-small;
+  position: relative;
+
+  .color-info {
+    border: 1px solid $soft-ui-border;
+    border-radius: $br-small;
+    margin: 3px 0 0 $x-small;
+    padding: 0 $x-small;
+  }
+
+  .type {
+    color: $soft-ui-text;
+    margin-right: $x-small;
+  }
+
+  .number {
+    color: $intense-ui-text;
+  }
+}

src/uxbox/ui/workspace/sidebar/options.cljs

@@ -132,6 +132,13 @@
           :value (:stroke shape "")
           :on-change on-color-change}]]
 
+       ;; NEW COLOR PICKER
+       [:div.row-flex.color-data
+        [:span.color-th]
+        [:div.color-info
+         [:span.type "#"]
+         [:span.number "F1F1F1"]]]
+
        (recent-colors shape #(change-stroke {:color %}))
 
        ;; SLIDEBAR FOR ROTATION AND OPACITY