From 6f58899f906cb94e1f680585e74aa50bf7e2916c Mon Sep 17 00:00:00 2001
From: elhombretecla <delacruzgarciajuan@gmail.com>
Date: Tue, 20 Oct 2020 11:31:24 +0200
Subject: [PATCH] WIP UI changes

---
 .../styles/common/dependencies/helpers.scss   |  8 ++++----
 .../styles/main/partials/colorpicker.scss     | 19 ++++++++++---------
 .../partials/sidebar-element-options.scss     | 16 +++++++++++-----
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/frontend/resources/styles/common/dependencies/helpers.scss b/frontend/resources/styles/common/dependencies/helpers.scss
index 5e5bb1db8..ed0f805c1 100644
--- a/frontend/resources/styles/common/dependencies/helpers.scss
+++ b/frontend/resources/styles/common/dependencies/helpers.scss
@@ -6,11 +6,11 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 // Padding & Margin sizes
-$x-small: 5px;
-$small: 10px;
-$medium: 15px;
+$x-small: 4px;
+$small: 8px;
+$medium: 16px;
 $big: 20px;
-$x-big: 30px;
+$x-big: 32px;
 
 // New sizes
 $size-1: 0.25rem;
diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss
index 70a43f3b3..90323f677 100644
--- a/frontend/resources/styles/main/partials/colorpicker.scss
+++ b/frontend/resources/styles/main/partials/colorpicker.scss
@@ -13,7 +13,7 @@
 .colorpicker-content {
   display: flex;
   flex-direction: column;
-  padding: 0.5rem;
+  padding: $small;
 
   & > * {
     width: 200px;
@@ -21,7 +21,7 @@
 
   .top-actions {
     display: flex;
-    margin-bottom: 0.25rem;
+    margin-bottom: $x-small;
     justify-content: space-between;
 
     .picker-btn {
@@ -50,7 +50,7 @@
       margin: 0;
       border: 1px solid $color-gray-20;
       border-radius: 2px;
-      margin-left: 0.25rem;
+      margin-left: $x-small;
     }
 
     .active {
@@ -69,8 +69,8 @@
   .gradient-stops {
     height: 10px;
     display: flex;
-    margin-top: 0.5rem;
-    margin-bottom: 1rem;
+    margin-top: $small;
+    margin-bottom: $medium;
 
     .gradient-background-wrapper {
       height: 100%;
@@ -303,11 +303,12 @@
       background-position: 95% 48%;
       background-size: 10px;
       margin: 0;
-      margin-bottom: 0.5rem;
+      margin-bottom: $small;
       width: 100%;
-      padding: 2px 0.25rem;
+      padding: $x-small 0.25rem;
       font-size: 0.75rem;
       color: $color-gray-40;
+      cursor: pointer;
       border-color: $color-gray-10;
       border-radius: 2px;
 
@@ -443,7 +444,7 @@
 
   .colorpicker-tabs {
     display: flex;
-    margin: 0.5rem 0;
+    margin-bottom: $small;
     border-radius: 5px;
     border: 1px solid $color-gray-10;
     height: 2rem;
@@ -491,7 +492,7 @@
       background-color: $color-gray-50;
       border: 1px solid $color-gray-30;
       border-radius: $br-small;
-      color: $color-gray-20;
+      color: $color-white;
       height: 20px;
       margin: 5px 0 0 0;
       padding: 0 $x-small;
diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index d61f0daac..9a35e9436 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -61,16 +61,22 @@
   .element-set {
     border-bottom: 1px solid $color-gray-60;
     color: $color-gray-20;
-    margin: 0 $x-small;
+    padding: $small $x-small;
 
     .element-set-title {
-      color: $color-gray-10;
+      color: $color-gray-20;
       display: flex;
       font-size: $fs13;
-      padding: $small $x-small;
+      padding: $x-small;
       width: 100%;
       align-items: center;
     }
+
+    &:hover {
+      .element-set-title {
+        color: $color-gray-10;
+      }
+    }
   }
 
   .element-list {
@@ -185,7 +191,7 @@
     background-color: $color-gray-50;
     border: 1px solid transparent;
     border-bottom-color: $color-gray-40;
-    color: $color-gray-10;
+    color: $color-white;
     font-size: $fs12;
     margin: $x-small;
     padding: $x-small;
@@ -217,7 +223,7 @@
   }
 
   .element-set-subtitle {
-    color: $color-gray-10;
+    color: $color-gray-20;
     font-size: $fs11;
     width: 12rem;
   }