From 773f67b09b703e7ffb19ef297bcb11fe02b80d6a Mon Sep 17 00:00:00 2001
From: Juan de la Cruz <juan.delacruz@kaleidos.net>
Date: Wed, 17 Feb 2016 08:56:02 +0100
Subject: [PATCH] color and visual refactor

---
 resources/public/styles/base.scss             |  6 +--
 .../public/styles/dependencies/colors.scss    |  6 +--
 .../styles/dependencies/uxbox-theme.scss      | 30 +++++++++++++
 resources/public/styles/framework.scss        |  8 ++--
 resources/public/styles/main.scss             |  1 +
 .../public/styles/partials/color-palette.scss |  4 +-
 .../styles/partials/dashboard-grid.scss       |  4 +-
 .../styles/partials/element-options.scss      | 12 +++---
 .../public/styles/partials/library-bar.scss   |  4 +-
 .../public/styles/partials/lightbox.scss      |  2 +-
 .../public/styles/partials/main-bar.scss      | 25 +++++------
 .../styles/partials/settings-bar-icons.scss   | 11 +++--
 .../styles/partials/settings-bar-layers.scss  | 38 ++++++++--------
 .../styles/partials/settings-bar-tools.scss   | 13 ++++--
 .../public/styles/partials/settings-bar.scss  | 15 +++----
 .../public/styles/partials/workspace-bar.scss | 43 +++++++++++--------
 .../styles/partials/workspace-canvas.scss     |  3 +-
 src/uxbox/ui/workspace/rules.cljs             | 22 +++++-----
 src/uxbox/ui/workspace/sidebar/drawtools.cljs |  2 +-
 src/uxbox/ui/workspace/sidebar/layers.cljs    |  4 +-
 20 files changed, 149 insertions(+), 104 deletions(-)
 create mode 100644 resources/public/styles/dependencies/uxbox-theme.scss

diff --git a/resources/public/styles/base.scss b/resources/public/styles/base.scss
index f1e1487b8..395f8b457 100644
--- a/resources/public/styles/base.scss
+++ b/resources/public/styles/base.scss
@@ -1,6 +1,6 @@
 body {
-  background-color: $color-gray-lighter;
-  color: $color-gray-dark;
+  background-color: $secondary-ui-bg;
+  color: $light-ui-text;
   display: flex;
   flex-direction: column;
   font-family: "sourcesanspro", sans-serif;
@@ -46,7 +46,7 @@ svg {
 
 
 a {
-  color: $color-primary;
+  color: $main-ui-color;
 
   &:hover {
     color: $color-primary-dark;
diff --git a/resources/public/styles/dependencies/colors.scss b/resources/public/styles/dependencies/colors.scss
index 3465c8530..90753ccf1 100644
--- a/resources/public/styles/dependencies/colors.scss
+++ b/resources/public/styles/dependencies/colors.scss
@@ -1,7 +1,7 @@
 // Colors
-$color-white: #fff;
-$color-black: #000;
-$color-gray: #9e9e9e;
+$color-white: #ffffff;
+$color-black: #000000;
+$color-gray: #90969d;
 
 // Main color
 $color-primary: #78dbbe;
diff --git a/resources/public/styles/dependencies/uxbox-theme.scss b/resources/public/styles/dependencies/uxbox-theme.scss
new file mode 100644
index 000000000..10b92a435
--- /dev/null
+++ b/resources/public/styles/dependencies/uxbox-theme.scss
@@ -0,0 +1,30 @@
+// This is a standard color scheme for UXBOX UI
+// Hope you like ir and feel free to create your own one!
+
+// Main color
+$main-ui-color: $color-primary;
+$dark-main-ui-color: mix($main-ui-color, $color-black, $mix-percentage-dark);
+
+// Background colors
+$primary-ui-bg: $color-white;
+$secondary-ui-bg: $color-gray-lighter;
+$dark-ui-bg: $color-gray-light;
+
+// Border color
+$dark-ui-border: $color-gray;
+$light-ui-border: $color-gray-light;
+$bright-ui-border: lighten($light-ui-border, 18%);
+
+// Icon colors
+$dark-ui-icons: $color-gray-dark;
+$light-ui-icons: $color-gray-light;
+$bright-ui-icons: $color-gray-lighter;
+
+// Text colors
+$dark-ui-text: $color-gray-darker;
+$light-ui-text: $color-gray;
+$bright-ui-text: $color-gray-light;
+
+// Canvas colors
+$canvas-bg: $color-gray-lighter;
+$scrollbar-bg: $color-gray-light;
diff --git a/resources/public/styles/framework.scss b/resources/public/styles/framework.scss
index bb1f52301..9ff1db8d2 100644
--- a/resources/public/styles/framework.scss
+++ b/resources/public/styles/framework.scss
@@ -28,7 +28,7 @@
 .btn-primary {
   @extend %btn;
   align-items: center;
-  background: $color-primary;
+  background: $main-ui-color;
   color: $color-white;
   justify-content: center;
   display: flex;
@@ -763,11 +763,11 @@ input[type=range]:focus::-ms-fill-upper {
     background-color: transparent;
 }
 ::-webkit-scrollbar-thumb {
-    background-color: $color-gray;
+    background-color: $scrollbar-bg;
 
     &:hover {
-      background-color: $color-gray-darker;
-      outline: 2px solid $color-primary;
+      background-color: darken($scrollbar-bg, 14%);
+      outline: 2px solid $main-ui-color;
     }
 
 }
diff --git a/resources/public/styles/main.scss b/resources/public/styles/main.scss
index 01ee6f102..4d1a89114 100644
--- a/resources/public/styles/main.scss
+++ b/resources/public/styles/main.scss
@@ -4,6 +4,7 @@
 //#################################################
 
 @import 'dependencies/colors';
+@import 'dependencies/uxbox-theme';
 @import 'dependencies/helpers';
 @import 'dependencies/mixin';
 @import 'dependencies/fonts';
diff --git a/resources/public/styles/partials/color-palette.scss b/resources/public/styles/partials/color-palette.scss
index c85ce61e1..fe3474f73 100644
--- a/resources/public/styles/partials/color-palette.scss
+++ b/resources/public/styles/partials/color-palette.scss
@@ -31,7 +31,7 @@
   }
   &.fade-out-down {
     @include animation(0,.5s,fadeOutDown);
-  }  
+  }
 }
 
 .color-palette-actions {
@@ -68,7 +68,7 @@
     }
   }
   &.current {
-    background-color: $color-primary;
+    background-color: $main-ui-color;
     border-color: $color-white;
     svg {
       fill: $color-white;
diff --git a/resources/public/styles/partials/dashboard-grid.scss b/resources/public/styles/partials/dashboard-grid.scss
index dc0b752c2..3dbbace0d 100644
--- a/resources/public/styles/partials/dashboard-grid.scss
+++ b/resources/public/styles/partials/dashboard-grid.scss
@@ -109,10 +109,10 @@
         border-bottom: 2px solid lighten($color-gray-light, 12%);
 
         &:hover {
-          border-color: $color-primary;
+          border-color: $main-ui-color;
 
           h3 {
-            color: $color-primary;
+            color: $main-ui-color;
           }
 
         }
diff --git a/resources/public/styles/partials/element-options.scss b/resources/public/styles/partials/element-options.scss
index e66bc75c5..e02033afc 100644
--- a/resources/public/styles/partials/element-options.scss
+++ b/resources/public/styles/partials/element-options.scss
@@ -29,7 +29,7 @@
       &:hover {
 
         svg {
-          fill: $color-primary;
+          fill: $main-ui-color;
         }
 
       }
@@ -38,7 +38,7 @@
         background-color: $color-gray-darker;
 
         svg {
-          fill: $color-primary;
+          fill: $main-ui-color;
         }
 
       }
@@ -117,7 +117,7 @@
       width: 15px;
 
       &:hover {
-        fill: $color-primary;
+        fill: $main-ui-color;
       }
 
     }
@@ -154,9 +154,9 @@
       width: 18px;
     }
     &:hover {
-      border-color: $color-primary;
+      border-color: $main-ui-color;
       svg {
-        fill: $color-primary;
+        fill: $main-ui-color;
       }
     }
   }
@@ -200,7 +200,7 @@
   &:hover,
   &.current {
     svg {
-      fill: $color-primary;
+      fill: $main-ui-color;
     }
   }
 }
diff --git a/resources/public/styles/partials/library-bar.scss b/resources/public/styles/partials/library-bar.scss
index ac19faa02..9b029be64 100644
--- a/resources/public/styles/partials/library-bar.scss
+++ b/resources/public/styles/partials/library-bar.scss
@@ -35,7 +35,7 @@
 
         &.current {
           background-color: $color-white;
-          color: $color-primary;
+          color: $main-ui-color;
         }
 
       }
@@ -69,7 +69,7 @@
 
         &:hover,
         &.current {
-          background-color: $color-primary;
+          background-color: $main-ui-color;
 
           .element-title,
           .element-subtitle {
diff --git a/resources/public/styles/partials/lightbox.scss b/resources/public/styles/partials/lightbox.scss
index c201b32fe..2f4628f8b 100644
--- a/resources/public/styles/partials/lightbox.scss
+++ b/resources/public/styles/partials/lightbox.scss
@@ -117,7 +117,7 @@
   &:hover {
 
     .big-svg {
-      background-color: $color-primary;
+      background-color: $main-ui-color;
 
       svg {
         fill: $color-white;
diff --git a/resources/public/styles/partials/main-bar.scss b/resources/public/styles/partials/main-bar.scss
index a822ef5df..6235a1ba0 100644
--- a/resources/public/styles/partials/main-bar.scss
+++ b/resources/public/styles/partials/main-bar.scss
@@ -1,6 +1,6 @@
 .main-bar {
   align-items: center;
-  background-color: $color-gray;
+  background-color: $primary-ui-bg;
   display: flex;
   height: 50px;
   padding: $x-small $medium;
@@ -10,7 +10,7 @@
   .main-logo {
 
     svg {
-      fill: $color-white;
+      fill: $light-ui-icons;
       height: 40px;
       width: 120px;
     }
@@ -28,11 +28,11 @@
   li {
 
     a {
-      color: lighten($color-gray-light, 12%);
+      color: $bright-ui-text;
       padding: 1rem;
 
       &:hover {
-        color: $color-white;
+        color: $dark-ui-text;
       }
 
     }
@@ -40,7 +40,7 @@
     &.current {
 
       a {
-        color: $color-white;
+        color: $dark-ui-text;
       }
 
     }
@@ -57,19 +57,20 @@
   position: relative;
 
   span {
-    color: $color-gray-lighter;
+    color: $light-ui-text;
     margin: $small;
   }
 
   img {
-    border: 2px solid $color-gray-lighter;
+    border: 2px solid $dark-ui-bg;
     border-radius: 50%;
     width: 32px;
   }
 
   .dropdown {
-    background-color: $color-white;
+    background-color: $secondary-ui-bg;
     border-radius: $br-small;
+    border: 1px solid $bright-ui-border;
     box-sizing: border-box;
     min-width: 150px;
     padding: 0 $small;
@@ -85,23 +86,23 @@
       padding: $small 0;
 
       svg {
-        fill: $color-gray-light;
+        fill: $light-ui-text;
         height: 12px;
         width: 12px;
       }
 
       span {
-        color: $color-gray-light;
+        color: $light-ui-text;
       }
 
       &:hover {
 
         span {
-          color: $color-gray-darker;
+          color: $dark-ui-text;
         }
 
         svg {
-          fill: $color-gray-darker;
+          fill: $dark-ui-text;
         }
 
       }
diff --git a/resources/public/styles/partials/settings-bar-icons.scss b/resources/public/styles/partials/settings-bar-icons.scss
index 6eddcbbd5..e34a1bc05 100644
--- a/resources/public/styles/partials/settings-bar-icons.scss
+++ b/resources/public/styles/partials/settings-bar-icons.scss
@@ -11,7 +11,9 @@
 
 .figure-btn {
   align-items: center;
-  background-color: $color-gray-light;
+  background-color: $secondary-ui-bg;
+  border-radius: 3px;
+  border: 1px solid transparent;
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
@@ -21,20 +23,21 @@
   width: 54px;
 
   svg {
-    fill: $color-gray-darker;
+    fill: $dark-ui-icons;
     height: 40px;
     width: 40px;
   }
 
   &:hover {
     background-color: $color-white;
+    border-color: $bright-ui-border;
   }
 
   &.selected {
-    background-color: $color-gray-darker;
+    background-color: $main-ui-color;
 
     svg {
-      fill: $color-primary;
+      fill: $color-white;
     }
 
   }
diff --git a/resources/public/styles/partials/settings-bar-layers.scss b/resources/public/styles/partials/settings-bar-layers.scss
index d9070bd04..1549c6709 100644
--- a/resources/public/styles/partials/settings-bar-layers.scss
+++ b/resources/public/styles/partials/settings-bar-layers.scss
@@ -1,5 +1,4 @@
 .layers-tools {
-  background-color: $color-gray-darker;
   bottom: 0;
   display: flex;
   height: 30px;
@@ -18,12 +17,12 @@
       cursor: pointer;
 
       svg {
-        fill: $color-gray;
+        fill: $light-ui-icons;
         height: 16px;
         width: 16px;
 
         &:hover {
-          fill: $color-white;
+          fill: $dark-ui-text;
         }
 
       }
@@ -79,15 +78,14 @@
 
     .element-list-body {
       align-items: center;
-      border-bottom: 1px solid $color-gray-darker;
+      border-bottom: 1px solid $bright-ui-border;
       box-sizing: border-box;
-      background-color: $color-gray-dark;
       display: flex;
       padding: $small;
       width: 100%;
 
       svg {
-        fill: $color-gray;
+        fill: $bright-ui-icons;
         height: 13px;
         margin-right: 8px;
         width: 13px;
@@ -104,7 +102,7 @@
       .sublevel-element {
 
         svg {
-          fill: $color-gray-darker;
+          fill: $light-ui-icons;
         }
 
       }
@@ -114,7 +112,7 @@
         width: 12px;
 
         svg {
-          fill: $color-gray-darker;
+          fill: $dark-ui-icons;
           transform: rotate(90deg);
           width: 12px;
         }
@@ -126,7 +124,7 @@
         &:hover {
 
           svg {
-            fill: $color-white;
+            fill: $light-ui-icons;
           }
 
         }
@@ -151,25 +149,25 @@
       }
 
       span {
-        color: darken($color-gray-darker, 8%);
+        color: $light-ui-text;
         font-size: $fs13;
         overflow-x: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       &.selected {
-        background-color: lighten($color-gray-darker, 5%);
 
         .element-icon {
 
           svg {
-            fill: $color-primary;
+            fill: $main-ui-color;
           }
 
         }
 
         span {
-          color: $color-primary;
+          color: $main-ui-color;
         }
 
       }
@@ -177,38 +175,38 @@
       .selected {
 
         svg {
-          fill: $color-gray-lighter;
+          fill: $dark-ui-icons;
         }
 
       }
 
       &:hover {
-        border-color: $color-gray-light;
+        border-color: $main-ui-color;
 
         .element-icon {
 
           svg {
-            fill: $color-gray-lighter;
+            fill: $dark-ui-icons;
           }
 
         }
 
         span {
-          color: $color-gray-lighter;
+          color: $dark-ui-text;
         }
 
       }
 
       &.drag-top {
-        border-top: 2px solid $color-primary;
+        border-top: 2px solid $main-ui-color;
       }
 
       &.drag-bottom {
-        border-bottom: 2px solid $color-primary;
+        border-bottom: 2px solid $main-ui-color;
       }
 
       &.drag-inside {
-        border: 2px solid $color-primary;
+        border: 2px solid $main-ui-color;
       }
 
     }
diff --git a/resources/public/styles/partials/settings-bar-tools.scss b/resources/public/styles/partials/settings-bar-tools.scss
index 8e5a647e5..f92f6bc48 100644
--- a/resources/public/styles/partials/settings-bar-tools.scss
+++ b/resources/public/styles/partials/settings-bar-tools.scss
@@ -1,6 +1,11 @@
+.drawing-tools {
+  max-height: 115px;
+}
+
 .tool-btn {
   align-items: center;
-  background-color: $color-gray-light;
+  background-color: $secondary-ui-bg;
+  border-radius: 3px;
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
@@ -10,7 +15,7 @@
   width: 54px;
 
   svg {
-    fill: $color-gray-darker;
+    fill: $dark-ui-icons;
     height: 35px;
     width: 35px;
   }
@@ -20,10 +25,10 @@
   }
 
   &.selected {
-    background-color: $color-gray-darker;
+    background-color: $main-ui-color;
 
     svg {
-      fill: $color-primary;
+      fill: $color-white;
     }
 
   }
diff --git a/resources/public/styles/partials/settings-bar.scss b/resources/public/styles/partials/settings-bar.scss
index ba83eb11c..425140e2d 100644
--- a/resources/public/styles/partials/settings-bar.scss
+++ b/resources/public/styles/partials/settings-bar.scss
@@ -1,5 +1,5 @@
 .settings-bar {
-  background-color: $color-gray-dark;
+  background-color: $primary-ui-bg;
   bottom: 0;
   height: 100%;
   position: fixed;
@@ -21,29 +21,28 @@
     height: 100%;
 
     .tool-window {
-      border-bottom: 1px solid $color-gray-darker;
+      border-bottom: 1px solid $light-ui-border;
       display: flex;
       flex-direction: column;
-      height: 100%;
-      max-height: 40%;
+      height: 40%;
       //flex: 1;
       width: 100%;
 
       .tool-window-bar {
         align-items: center;
-        background-color: $color-gray-darker;
+        border-bottom: 1px solid $light-ui-border;
         display: flex;
         flex-shrink: 0;
         padding: 2px $x-small;
 
         svg {
-          fill: $color-gray;
+          fill: $dark-ui-icons;
           height: 12px;
           width: 12px;
         }
 
         span {
-          color: $color-gray-light;
+          color: $dark-ui-text;
           font-weight: bold;
         }
 
@@ -59,7 +58,7 @@
           &:hover {
 
             svg {
-              fill: $color-gray-lighter;
+              fill: $color-danger;
             }
 
           }
diff --git a/resources/public/styles/partials/workspace-bar.scss b/resources/public/styles/partials/workspace-bar.scss
index e709cf2ee..56f71bcdd 100644
--- a/resources/public/styles/partials/workspace-bar.scss
+++ b/resources/public/styles/partials/workspace-bar.scss
@@ -1,7 +1,7 @@
 .workspace-bar {
   align-items: center;
-  background-color: $color-gray;
-  border-bottom: 1px solid $color-gray-dark;
+  background-color: $primary-ui-bg;
+  border-bottom: 1px solid  $bright-ui-border;
   display: flex;
   height: 40px;
   padding: $x-small $medium $x-small 65px;
@@ -10,7 +10,7 @@
 
   .main-icon {
     align-items: center;
-    background-color: $color-gray-dark;
+    background-color: $secondary-ui-bg;
     cursor: pointer;
     display: flex;
     height: 100%;
@@ -24,7 +24,7 @@
       height: 35px;
 
       svg {
-        fill: darken($color-gray-darker, 7%);
+        fill: $light-ui-icons;
         height: 35px;
         width: 35px;
 
@@ -33,7 +33,7 @@
       &:hover {
 
         svg {
-          fill: $color-primary;
+          fill: $main-ui-color;
         }
 
       }
@@ -44,7 +44,7 @@
 
   .project-tree-btn {
     align-items: center;
-    background-color: $color-gray-dark;
+    background-color: $secondary-ui-bg;
     border-radius: $br-small;
     box-sizing: border-box;
     cursor: pointer;
@@ -53,18 +53,30 @@
     padding: $x-small $x-big+$x-small $x-small $medium;
 
     svg {
-      fill: $color-primary;
+      fill: $dark-ui-icons;
       height: 20px;
       margin-right: $small;
       width: 20px;
     }
 
     span {
-      color: $color-primary;
+      color: $color-gray-light;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     &:hover {
-      background-color: $color-gray-darker;
+      background-color: $main-ui-color;
+
+      svg {
+        fill: $color-white;
+      }
+
+      span {
+        color: $color-white;
+      }
+
     }
 
   }
@@ -74,7 +86,7 @@
 
     .options-btn {
       align-items: center;
-      border-right: 1px solid $color-gray-dark;
+      border-right: 1px solid $bright-ui-border;
       display: flex;
       margin: 0;
 
@@ -85,6 +97,7 @@
       li {
         align-items: center;
         background-color: $color-gray-lighter;
+        border: 1px solid transparent;
         border-radius: $br-small;
         cursor: pointer;
         display: flex;
@@ -99,22 +112,18 @@
         }
 
         svg {
-          fill: $color-gray-dark;
+          fill: $dark-ui-icons;
           height: 18px;
           width: 18px;
         }
 
         &:hover {
           background-color: $color-white;
-
-          svg {
-            fill: $color-gray-darker;
-          }
-
+          border-color: $bright-ui-border;
         }
 
         &.selected {
-          background-color: $color-primary;
+          background-color: $main-ui-color;
 
           svg {
             fill: $color-white;
diff --git a/resources/public/styles/partials/workspace-canvas.scss b/resources/public/styles/partials/workspace-canvas.scss
index 4f72844da..45f9ecdfd 100644
--- a/resources/public/styles/partials/workspace-canvas.scss
+++ b/resources/public/styles/partials/workspace-canvas.scss
@@ -1,4 +1,5 @@
 .workspace-content {
+  background-color: $canvas-bg;
   display: flex;
   height: 100%;
   width: 100%;
@@ -88,4 +89,4 @@
     pointer-events: none;
     left: 0px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/uxbox/ui/workspace/rules.cljs b/src/uxbox/ui/workspace/rules.cljs
index d638988d4..6df792c05 100644
--- a/src/uxbox/ui/workspace/rules.cljs
+++ b/src/uxbox/ui/workspace/rules.cljs
@@ -30,10 +30,10 @@
               :x2 position
               :y1 5
               :y2 step-padding
-              :stroke "#7f7f7f"}]
+              :stroke "#9da2a6"}]
       [:text {:x (+ position 2)
               :y 13
-              :fill "#7f7f7f"
+              :fill "#9da2a6"
               :style {:font-size "12px"}}
        value]])
 
@@ -44,7 +44,7 @@
              :x2 position
              :y1 10
              :y2 step-padding
-             :stroke "#7f7f7f"}])
+             :stroke "#9da2a6"}])
 
     :else
     (html
@@ -53,7 +53,7 @@
              :x2 position
              :y1 15
              :y2 step-padding
-             :stroke "#7f7f7f"}])))
+             :stroke "#9da2a6"}])))
 
 (defn v-line
   [position value]
@@ -65,11 +65,11 @@
               :y2 position
               :x1 5
               :x2 step-padding
-              :stroke "#7f7f7f"}]
+              :stroke "#9da2a6"}]
       [:text {:y position
               :x 5
               :transform (str/format "rotate(90 0 %s)" position)
-              :fill "#7f7f7f"
+              :fill "#9da2a6"
               :style {:font-size "12px"}}
        value]])
 
@@ -80,7 +80,7 @@
              :y2 position
              :x1 10
              :x2 step-padding
-             :stroke "#7f7f7f"}])
+             :stroke "#9da2a6"}])
 
     :else
     (html
@@ -89,7 +89,7 @@
              :y2 position
              :x1 15
              :x2 step-padding
-             :stroke "#7f7f7f"}])))
+             :stroke "#9da2a6"}])))
 
 (defn h-rule-render
   [own sidebar?]
@@ -101,8 +101,8 @@
       {:width wb/viewport-width
        :height 20}
       [:g
-       [:rect {:x step-padding :y 0 :width width :height step-padding :fill "#bab7b7"}]
-       [:rect {:x 0 :y 0 :width step-padding :height step-padding :fill "#bab7b7"}]]
+       [:rect {:x step-padding :y 0 :width width :height step-padding :fill "rgb(233, 234, 235)"}]
+       [:rect {:x 0 :y 0 :width step-padding :height step-padding :fill "rgb(233, 234, 235)"}]]
       [:g
        (for [tick ticks
              :let [pos (* (+ tick start-width) zoom)]]
@@ -128,7 +128,7 @@
                :y step-padding
                :height height
                :width step-padding
-               :fill "#bab7b7"}]
+               :fill "rgb(233, 234, 235)"}]
        (for [tick ticks
              :let [pos (* (+ tick start-height) zoom)]]
          (v-line pos tick))]])))
diff --git a/src/uxbox/ui/workspace/sidebar/drawtools.cljs b/src/uxbox/ui/workspace/sidebar/drawtools.cljs
index d02b8b0a6..71b296221 100644
--- a/src/uxbox/ui/workspace/sidebar/drawtools.cljs
+++ b/src/uxbox/ui/workspace/sidebar/drawtools.cljs
@@ -71,7 +71,7 @@
         tools (->> (into [] +draw-tools+)
                    (sort-by (comp :priority second)))]
     (html
-     [:div#form-tools.tool-window
+     [:div#form-tools.tool-window.drawing-tools
       [:div.tool-window-bar
        [:div.tool-window-icon i/window]
        [:span (tr "ds.tools")]
diff --git a/src/uxbox/ui/workspace/sidebar/layers.cljs b/src/uxbox/ui/workspace/sidebar/layers.cljs
index ce565a77e..e7af8667e 100644
--- a/src/uxbox/ui/workspace/sidebar/layers.cljs
+++ b/src/uxbox/ui/workspace/sidebar/layers.cljs
@@ -152,8 +152,7 @@
              :class (when selected? "selected")}
         [:div.element-list-body
          {:class classes
-          :style {:background-color "gray"
-                  :opacity (if (:dragging @local)
+          :style {:opacity (if (:dragging @local)
                              "0.5"
                              "1")}
           :on-click select
@@ -314,4 +313,3 @@
    {:render layers-render
     :name "layers"
     :mixins [rum/reactive]}))
-