From 9d3ca4786a7d54bd7ef0368ee697087253c63299 Mon Sep 17 00:00:00 2001
From: mathieucura <mathieu@optimistik.fr>
Date: Sun, 10 Jan 2021 22:47:09 +0100
Subject: [PATCH] Improve main menu design

---
 src/editor/components/seMenu.js     | 14 ++++++++------
 src/editor/components/seMenuItem.js |  8 ++++----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js
index 98ab449c..2c80fa5e 100644
--- a/src/editor/components/seMenu.js
+++ b/src/editor/components/seMenu.js
@@ -9,24 +9,26 @@ template.innerHTML = `
     padding: 0px;
   }
   elix-menu-button::part(menu) {
-    background-color: #eee !important;
+    background-color: var(--icon-bg-color) !important;
+    color: #fff;
   }
   elix-menu-button::part(popup-toggle) {
     padding: 0.25em 0.60em !important
   }
   :host ::slotted([current]){
-    background-color: #F4E284 !important;
+    background-color: var(--icon-bg-color-hover) !important;
+    color: #fff;
   }
   :host ::slotted(*){
     padding: 0.25em 1.25em 0.25em 0.25em !important;
     margin: 2px;
   }
   </style>
-  
+
   <elix-menu-button id="MenuButton" aria-label="Main Menu">
     <slot></slot>
   </elix-menu-button>
-  
+
 `;
 /**
  * @class SeMenu
@@ -64,8 +66,8 @@ export class SeMenu extends HTMLElement {
     switch (name) {
     case 'src':
       image.src = newValue;
-      image.width = 18;
-      image.height = 18;
+      image.width = 24;
+      image.height = 24;
       this.$label.prepend(image);
       break;
     case 'label':
diff --git a/src/editor/components/seMenuItem.js b/src/editor/components/seMenuItem.js
index 75f412ef..0b718044 100644
--- a/src/editor/components/seMenuItem.js
+++ b/src/editor/components/seMenuItem.js
@@ -5,13 +5,13 @@ import 'elix/define/MenuItem.js';
 const template = document.createElement('template');
 template.innerHTML = `
   <style>
-  </style>  
+  </style>
   <elix-menu-item>
     <div style="display:flex; align-items: center;">
-      <img src="./images/logo.svg" alt="icon" style="display:none;" /> 
-      <span style="margin-left: 3px;"></span>
+      <img src="./images/logo.svg" alt="icon" style="display:none;" width="24"/>
+      <span style="margin-left: 7px;"></span>
     </div>
-  </elix-menu-item>  
+  </elix-menu-item>
 `;
 /**
  * @class SeMenuItem