From c71d938ed95793be07455fd51dde73e58d11c592 Mon Sep 17 00:00:00 2001
From: mathieucura <mathieu@optimistik.fr>
Date: Sun, 10 Jan 2021 00:37:25 +0100
Subject: [PATCH] Update button styles to adapt to new icons

---
 src/editor/components/seButton.js         |  8 +++-----
 src/editor/components/seExplorerButton.js | 17 ++++++++---------
 src/editor/components/seFlyingButton.js   | 14 ++++++--------
 3 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/editor/components/seButton.js b/src/editor/components/seButton.js
index e05f9c83..1a1e0663 100644
--- a/src/editor/components/seButton.js
+++ b/src/editor/components/seButton.js
@@ -6,7 +6,7 @@ template.innerHTML = `
   <style>
   :host(:hover) :not(.disabled)
   {
-    background-color: #ffc;
+    background-color: #2B3C45;
   }
   div
   {
@@ -14,8 +14,7 @@ template.innerHTML = `
     width: 24px;
     margin: 2px 2px 4px;
     padding: 3px;
-    box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
-    background-color: #E8E8E8;
+    background-color: #72797A;
     cursor: pointer;
     border-radius: 3px;
   }
@@ -31,8 +30,7 @@ template.innerHTML = `
     height: 100%;
   }
   .pressed {
-    background-color: #F4E284;
-    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
+    background-color: #2B3C45;
   }
   .disabled {
     opacity: 0.3;
diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js
index 0944e809..8dfba19c 100644
--- a/src/editor/components/seExplorerButton.js
+++ b/src/editor/components/seExplorerButton.js
@@ -4,9 +4,9 @@ template.innerHTML = `
   :host {
     position:relative;
   }
-  .menu-button:hover, se-button:hover, .menu-item:hover 
+  .menu-button:hover, se-button:hover, .menu-item:hover
   {
-    background-color: #ffc;
+    background-color: #2B3C45;
   }
   img {
     border: none;
@@ -14,13 +14,13 @@ template.innerHTML = `
     height: 24px;
   }
   .overall.pressed .button-icon,
-  .overall.pressed .handle,
+  .overall.pressed,
   .menu-item.pressed {
-    background-color: #F4E284 !important;
+    background-color: #2B3C45 !important;
   }
   .overall.pressed .menu-button {
     box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
-    background-color: #F4E284 !important;
+    background-color: #2B3C45 !important;
   }
   .disabled {
     opacity: 0.3;
@@ -31,8 +31,7 @@ template.innerHTML = `
     width: 24px;
     margin: 2px 2px 4px;
     padding: 3px;
-    box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
-    background-color: #E8E8E8;
+    background-color: #72797A;
     cursor: pointer;
     position: relative;
     border-radius: 3px;
@@ -83,7 +82,7 @@ template.innerHTML = `
     background: none !important;
   }
   </style>
-  
+
   <div class="overall">
     <div class="menu-button">
       <img class="button-icon" src="./images/logo.svg" alt="icon">
@@ -96,7 +95,7 @@ template.innerHTML = `
       <div class="menu-item">menu</div>
    </div>
   </div>
-  
+
 `;
 /**
  * @class ExplorerButton
diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js
index 1a93fa3a..2b4cd7f1 100644
--- a/src/editor/components/seFlyingButton.js
+++ b/src/editor/components/seFlyingButton.js
@@ -6,7 +6,7 @@ template.innerHTML = `
   }
   .overall:hover *
   {
-    background-color: #ffc;
+    background-color: #2B3C45;
   }
   img {
     border: none;
@@ -15,11 +15,10 @@ template.innerHTML = `
   }
   .overall.pressed .button-icon,
   .overall.pressed .handle {
-    background-color: #F4E284 !important;
+    background-color: #2B3C45 !important;
   }
   .overall.pressed .menu-button {
-    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
-    background-color: #F4E284 !important;
+    background-color: #2B3C45 !important;
   }
   .disabled {
     opacity: 0.3;
@@ -30,8 +29,7 @@ template.innerHTML = `
     width: 24px;
     margin: 2px 2px 4px;
     padding: 3px;
-    box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
-    background-color: #E8E8E8;
+    background-color: #72797A;
     cursor: pointer;
     position: relative;
     border-radius: 3px;
@@ -68,7 +66,7 @@ template.innerHTML = `
     background: none !important;
   }
   </style>
-  
+
   <div class="overall">
     <div class="menu-button">
       <img class="button-icon" src="./images/logo.svg" alt="icon">
@@ -78,7 +76,7 @@ template.innerHTML = `
       <slot></slot>
     </div>
   </div>
-  
+
 `;
 /**
  * @class FlyingButton