From 0e77103f25f6d967810ab0d126d64590ef0d8446 Mon Sep 17 00:00:00 2001
From: mathieucura <mathieu@optimistik.fr>
Date: Sat, 16 Jan 2021 22:32:19 +0100
Subject: [PATCH] Update input element design

---
 src/editor/components/seInput.js     |  7 +++++++
 src/editor/components/seList.js      | 12 +++++++++---
 src/editor/components/seListItem.js  | 12 +++++++-----
 src/editor/components/seSpinInput.js | 12 ++++++++++++
 src/editor/svgedit.css               |  8 ++++++++
 5 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/src/editor/components/seInput.js b/src/editor/components/seInput.js
index 9380dd38..aecea7c9 100644
--- a/src/editor/components/seInput.js
+++ b/src/editor/components/seInput.js
@@ -13,6 +13,13 @@ template.innerHTML = `
     bottom: 1px;
     right: -4px;
     position: relative;
+    margin-left: 4px;
+    margin-right: 4px;
+    color: #fff;
+  }
+  elix-input {
+    background-color: var(--input-color);
+    border-radius: 3px;
   }
   </style>
   <img src="./images/logo.svg" alt="icon" width="12" height="12" />
diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js
index 2817631b..39eb1949 100644
--- a/src/editor/components/seList.js
+++ b/src/editor/components/seList.js
@@ -4,13 +4,19 @@ import 'elix/define/DropdownList.js';
 const template = document.createElement('template');
 template.innerHTML = `
 <style>
+elix-dropdown-list {
+  margin: 5px;
+}
+
+elix-dropdown-list:hover {
+  background-color: var(--icon-bg-color-hover);
+}
+
 ::part(popup-toggle) {
   display: none;
 }
 ::slotted(*) {
-  background: #E8E8E8;
   padding:0;
-  /*border: 1px solid #B0B0B0;*/
   width:100%;
 }
 </style>
@@ -18,7 +24,7 @@ template.innerHTML = `
   <elix-dropdown-list>
     <slot></slot>
   </elix-dropdown-list>
-  
+
 `;
 /**
  * @class SeList
diff --git a/src/editor/components/seListItem.js b/src/editor/components/seListItem.js
index 29c466e9..969a5e7a 100644
--- a/src/editor/components/seListItem.js
+++ b/src/editor/components/seListItem.js
@@ -4,15 +4,17 @@ import 'elix/define/Option.js';
 const template = document.createElement('template');
 template.innerHTML = `
   <style>
-  elix-option{  
+  elix-option{
     padding:0.25rem 0.125rem !important;
-    background: #E8E8E8;
-    border-bottom: 1px solid #B0B0B0;
+    background-color: var(--icon-bg-color);
   }
-  </style>  
+  elix-option:hover{
+    background-color: var(--icon-bg-color-hover);
+  }
+  </style>
   <elix-option aria-label="option">
     <slot></slot>
-  </elix-option>  
+  </elix-option>
 `;
 /**
  * @class SeMenu
diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js
index 267fe145..b035ae01 100644
--- a/src/editor/components/seSpinInput.js
+++ b/src/editor/components/seSpinInput.js
@@ -12,10 +12,22 @@ template.innerHTML = `
     bottom: 1px;
     right: -4px;
     position: relative;
+    margin-left: 4px;
+    margin-right: 4px;
+    color: #fff;
+  }
+  elix-number-spin-box {
+    background-color: var(--input-color);
+    border-radius: 3px;
+    height: 20px !important;
+    margin-top: 1px;
   }
   elix-number-spin-box::part(spin-button) {
     padding: 0px;
   }
+  elix-number-spin-box::part(input) {
+    width: 3em;
+  }
   elix-number-spin-box{
     width: 54px;
     height: 24px;
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index 9516d3e4..54ac8360 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -7,6 +7,7 @@
   --ruler-color: #B2B2B2;
   --icon-bg-color: #72797A;
   --icon-bg-color-hover: #2B3C45;
+  --input-color: #B2B2B2;
 }
 
 body {
@@ -192,6 +193,13 @@ hr {
   top: 4px;
   left: 5px;
   z-index: 5;
+  color: #fff;
+  border-radius: 3px;
+}
+
+#main_button:hover {
+  background-color: var(--icon-bg-color-hover);
+  color: #fff;
 }
 
 #main_icon {