From e0fd7582b8a03aafebe5530716bad836712e65bc Mon Sep 17 00:00:00 2001
From: Sergio Betanzos <sbetanzos@opennebula.io>
Date: Fri, 26 Mar 2021 10:30:37 +0100
Subject: [PATCH] M #~: Fix logo in dark mode (#1031)

---
 .../src/client/components/Sidebar/index.js    |  5 +---
 .../src/client/components/Sidebar/styles.js   |  9 ++-----
 src/fireedge/src/client/icons/logo.js         | 26 +++++++++++--------
 3 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/fireedge/src/client/components/Sidebar/index.js b/src/fireedge/src/client/components/Sidebar/index.js
index 05087a3d40..92f459347a 100644
--- a/src/fireedge/src/client/components/Sidebar/index.js
+++ b/src/fireedge/src/client/components/Sidebar/index.js
@@ -73,10 +73,7 @@ const Sidebar = memo(({ endpoints }) => {
           withText
           className={classes.svg}
         />
-        <IconButton
-          className={classes.hamburger}
-          onClick={handleSwapMenu}
-        >
+        <IconButton onClick={handleSwapMenu}>
           {isUpLg ? <MenuIcon /> : <CloseIcon />}
         </IconButton>
       </Box>
diff --git a/src/fireedge/src/client/components/Sidebar/styles.js b/src/fireedge/src/client/components/Sidebar/styles.js
index c8e82ae477..dafd3a3827 100644
--- a/src/fireedge/src/client/components/Sidebar/styles.js
+++ b/src/fireedge/src/client/components/Sidebar/styles.js
@@ -70,12 +70,10 @@ export default makeStyles(theme => ({
   // -------------------------------
   header: {
     userSelect: 'none',
-    backgroundColor: theme.palette.type === 'dark'
-      ? theme.palette.background.paper
-      : theme.palette.primary.main,
-    color: theme.palette.primary.contrastText,
+    backgroundColor: theme.palette.background.paper,
     display: 'flex',
     alignItems: 'center',
+    justifyContent: 'space-between',
     padding: '1rem',
     overflow: 'hidden',
     height: toolbar.regular,
@@ -132,8 +130,5 @@ export default makeStyles(theme => ({
     color: theme.palette.text.primary,
     backgroundColor: theme.palette.primary.light,
     '&:hover': { backgroundColor: theme.palette.primary.light }
-  },
-  hamburger: {
-    color: theme.palette.primary.contrastText
   }
 }))
diff --git a/src/fireedge/src/client/icons/logo.js b/src/fireedge/src/client/icons/logo.js
index 47381fbfe6..064cafe7b5 100644
--- a/src/fireedge/src/client/icons/logo.js
+++ b/src/fireedge/src/client/icons/logo.js
@@ -1,18 +1,22 @@
 import React, { memo } from 'react'
 import { number, string, bool, oneOfType } from 'prop-types'
+import { useTheme } from '@material-ui/core'
 
 const Logo = memo(({ width, height, spinner, withText, viewBox, ...props }) => {
+  const { palette: { type } } = useTheme()
+  const isDarkMode = type === 'dark'
+
   const cloudColor = {
-    child1: { from: '#0098c3', to: '#ffffff' },
-    child2: { from: '#0098c3', to: '#ffffff' },
-    child3: { from: '#40b3d9', to: '#ffffff' },
-    child4: { from: '#80cde6', to: '#ffffff' },
-    child5: { from: '#bfe6f2', to: '#ffffff' }
+    child1: { from: '#bfe6f2', to: '#ffffff', static: isDarkMode ? '#ffffff' : '#bfe6f2' },
+    child2: { from: '#80cde6', to: '#ffffff', static: isDarkMode ? '#ffffff' : '#80cde6' },
+    child3: { from: '#40b3d9', to: '#ffffff', static: isDarkMode ? '#ffffff' : '#40b3d9' },
+    child4: { from: '#0098c3', to: '#ffffff', static: isDarkMode ? '#ffffff' : '#0098c3' },
+    child5: { from: '#0098c3', to: '#ffffff', static: isDarkMode ? '#ffffff' : '#0098c3' }
   }
 
   const textColor = {
     top: 'currentColor',
-    bottom: '#0098c3'
+    bottom: isDarkMode ? 'currentColor' : '#0098c3'
   }
 
   return (
@@ -40,23 +44,23 @@ const Logo = memo(({ width, height, spinner, withText, viewBox, ...props }) => {
       )}
       {/*  --------------- CLOUD ------------------ */}
       <path
-        fill={spinner ? 'url(#gradient__child1)' : cloudColor.child1.from}
+        fill={spinner ? 'url(#gradient__child1)' : cloudColor.child1.static}
         d="M124.9,130.9c-4.6,1.1-9.1,2.2-13.7,3.2c-28,6-56.5,9.8-85.1,11.3c-1.8-0.2,0.7,1.1,1.1,1.5c7.6,5.5,17.5,6.5,26.9,6.6c22.9,0,45.7,0,68.6,0c0.8,0,1.3-0.2,1.7-0.7c0.5-0.5,0.5-1.7,0.5-1.7V130.9z"
       />
       <path
-        fill={spinner ? 'url(#gradient__child2)' : cloudColor.child2.from}
+        fill={spinner ? 'url(#gradient__child2)' : cloudColor.child2.static}
         d="M124.9,106.1c-14.4,6.8-29.5,12.3-44.8,16.9c-20.6,5.9-41.7,10.3-63,12.7c1.2,1.8,2.1,4.5,4.2,5.3c34.8-1.7,69.7-6.4,103.6-14.9V106.1z"
       />
       <path
-        fill={spinner ? 'url(#gradient__child3)' : cloudColor.child3.from}
+        fill={spinner ? 'url(#gradient__child3)' : cloudColor.child3.static}
         d="M124.9,81.6c-26,17.6-55.7,29.3-85.9,37.2c-8.5,2.1-17.1,4.4-25.7,5.8c0.4,2.3,0.9,4.4,1.8,6.6c36.5-4.3,72.7-13.2,106.2-28.6c1.2-0.6,2.5-1.2,3.7-1.8V81.6z"
       />
       <path
-        fill={spinner ? 'url(#gradient__child4)' : cloudColor.child4.from}
+        fill={spinner ? 'url(#gradient__child4)' : cloudColor.child4.static}
         d="M124.9,47.1c-13.1,15.6-29.7,28.1-47.4,38.2c-18.8,10.6-39,18.8-59.6,24.9c-1.5,0.8-4.4,0.5-4.3,2.8c-0.5,2.3-0.7,4.6-0.7,6.9c33.6-6.4,66.7-17,96.5-34.1c5.3-3.1,10.5-6.4,15.6-9.9V47.1z"
       />
       <path
-        fill={spinner ? 'url(#gradient__child5)' : cloudColor.child5.from}
+        fill={spinner ? 'url(#gradient__child5)' : cloudColor.child5.static}
         d="M124.9,12.9c-0.4-0.9-1.8-0.4-3.3,0.3c-5.7,2.4-28.8,13.7-32.3,28.7c-1.4,1.9-3.5-0.5-5.1-1c-13.1-6.4-29.7-4.3-40.9,5.1c-11.2,9-17.3,25.1-12.2,39c0.8,1.6,1.6,3.8-0.1,5.2c-2.1,1.4-4.4,2.5-6.2,4.3c-3.7,3.1-6.9,7.1-8.9,11.3c30.7-9.3,60.8-22.5,85.9-42.8c8.4-7,16.3-14.7,22.9-23.4V12.9z"
       />