From 2c7ed26c9af8bf3e7090e1abb9547a6b9b3679d6 Mon Sep 17 00:00:00 2001
From: Sergio Betanzos <sbetanzos@opennebula.io>
Date: Wed, 18 May 2022 12:35:07 +0200
Subject: [PATCH] F #5422: Add scrollbar styles by app (#2049)

---
 .../src/client/components/AutoScrollBox/index.js     | 10 ----------
 src/fireedge/src/client/components/DebugLog/index.js | 10 ----------
 .../client/components/HOC/InternalLayout/styles.js   | 10 ----------
 .../src/client/components/List/ListVirtualized.js    | 10 ----------
 src/fireedge/src/client/components/Sidebar/styles.js | 10 ----------
 src/fireedge/src/client/theme/defaults.js            | 12 ++++++++++++
 6 files changed, 12 insertions(+), 50 deletions(-)

diff --git a/src/fireedge/src/client/components/AutoScrollBox/index.js b/src/fireedge/src/client/components/AutoScrollBox/index.js
index 5e8fd1a368..9915057e62 100644
--- a/src/fireedge/src/client/components/AutoScrollBox/index.js
+++ b/src/fireedge/src/client/components/AutoScrollBox/index.js
@@ -24,16 +24,6 @@ const useStyles = makeStyles((theme) => ({
   scrollable: {
     padding: theme.spacing(1),
     overflowY: 'scroll',
-    '&::-webkit-scrollbar': {
-      width: 14,
-    },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundClip: 'content-box',
-      border: '4px solid transparent',
-      borderRadius: 7,
-      boxShadow: 'inset 0 0 0 10px',
-      color: theme.palette.secondary.light,
-    },
   },
   wrapperButton: {
     top: 5,
diff --git a/src/fireedge/src/client/components/DebugLog/index.js b/src/fireedge/src/client/components/DebugLog/index.js
index db0ffac3b2..7dad846317 100644
--- a/src/fireedge/src/client/components/DebugLog/index.js
+++ b/src/fireedge/src/client/components/DebugLog/index.js
@@ -37,16 +37,6 @@ const debugLogStyles = makeStyles((theme) => ({
     borderRadius: 5,
     backgroundColor: '#1d1f21',
     wordBreak: 'break-word',
-    '&::-webkit-scrollbar': {
-      width: 14,
-    },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundClip: 'content-box',
-      border: '4px solid transparent',
-      borderRadius: 7,
-      boxShadow: 'inset 0 0 0 10px',
-      color: theme.palette.secondary.light,
-    },
   },
 }))
 
diff --git a/src/fireedge/src/client/components/HOC/InternalLayout/styles.js b/src/fireedge/src/client/components/HOC/InternalLayout/styles.js
index ec68d3a6dd..ef30164530 100644
--- a/src/fireedge/src/client/components/HOC/InternalLayout/styles.js
+++ b/src/fireedge/src/client/components/HOC/InternalLayout/styles.js
@@ -45,16 +45,6 @@ export default makeStyles((theme) => ({
     paddingBottom: theme.spacing(2),
     height: '100%',
     overflow: 'auto',
-    '&::-webkit-scrollbar': {
-      width: 14,
-    },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundClip: 'content-box',
-      border: '4px solid transparent',
-      borderRadius: 7,
-      boxShadow: 'inset 0 0 0 10px',
-      color: theme.palette.secondary.light,
-    },
   },
   /* ROUTES TRANSITIONS */
   appear: {},
diff --git a/src/fireedge/src/client/components/List/ListVirtualized.js b/src/fireedge/src/client/components/List/ListVirtualized.js
index 7b80c1b15e..982f7e0399 100644
--- a/src/fireedge/src/client/components/List/ListVirtualized.js
+++ b/src/fireedge/src/client/components/List/ListVirtualized.js
@@ -27,16 +27,6 @@ const useStyles = makeStyles((theme) => ({
   root: {
     height: '100%',
     overflow: 'auto',
-    '&::-webkit-scrollbar': {
-      width: 14,
-    },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundClip: 'content-box',
-      border: '4px solid transparent',
-      borderRadius: 7,
-      boxShadow: 'inset 0 0 0 10px',
-      color: theme.palette.secondary.light,
-    },
   },
   container: {
     width: '100%',
diff --git a/src/fireedge/src/client/components/Sidebar/styles.js b/src/fireedge/src/client/components/Sidebar/styles.js
index 9ec5e6714d..2c29745251 100644
--- a/src/fireedge/src/client/components/Sidebar/styles.js
+++ b/src/fireedge/src/client/components/Sidebar/styles.js
@@ -118,16 +118,6 @@ export default makeStyles((theme) => ({
     overflowX: 'hidden',
     textTransform: 'capitalize',
     transition: 'color 0.3s',
-    '&::-webkit-scrollbar': {
-      width: 14,
-    },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundClip: 'content-box',
-      border: '4px solid transparent',
-      borderRadius: 7,
-      boxShadow: 'inset 0 0 0 10px',
-      color: theme.palette.secondary.light,
-    },
   },
   parentSubItem: {},
   subItemWrapper: {},
diff --git a/src/fireedge/src/client/theme/defaults.js b/src/fireedge/src/client/theme/defaults.js
index 373c0e1c66..5f68e02d1b 100644
--- a/src/fireedge/src/client/theme/defaults.js
+++ b/src/fireedge/src/client/theme/defaults.js
@@ -88,6 +88,8 @@ const createAppTheme = (appTheme, mode = SCHEMES.DARK) => {
   const { primary = defaultPrimary, secondary } = appTheme?.palette || {}
   const defaultContrastText = isDarkMode ? white : 'rgba(0, 0, 0, 0.87)'
 
+  console.log({ mode, isDarkMode })
+
   const background = {
     paper: isDarkMode ? primary.light : white,
     default: isDarkMode ? primary.main : bgBlueGrey,
@@ -254,6 +256,16 @@ const createAppTheme = (appTheme, mode = SCHEMES.DARK) => {
       MuiCssBaseline: {
         styleOverrides: {
           '@font-face': UbuntuFont,
+          '*::-webkit-scrollbar': {
+            width: 14,
+          },
+          '*::-webkit-scrollbar-thumb': {
+            backgroundClip: 'content-box',
+            border: '4px solid transparent',
+            borderRadius: 7,
+            boxShadow: 'inset 0 0 0 10px',
+            color: secondary.light,
+          },
           '.loading_screen': {
             width: '100%',
             height: '100vh',