From 247886ce856c63099d90c89697180a85c2e720e1 Mon Sep 17 00:00:00 2001
From: Nicola Benaglia <nico.benaz@gmail.com>
Date: Wed, 23 Apr 2025 08:55:50 +0200
Subject: [PATCH 1/2] Simplify selector with a unique icon

---
 src/App.tsx                             |  2 +-
 src/ExtStates/NotAuthenticated.tsx      |  2 +-
 src/components/Apps/AppsHomeDesktop.tsx |  2 +-
 src/components/DesktopSideBar.tsx       |  2 +-
 src/components/Theme/ThemeSelector.tsx  | 76 +++++--------------------
 5 files changed, 17 insertions(+), 67 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7d3a7c7..7ce75de 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3681,7 +3681,7 @@ function App() {
         />
       )}
 
-      <ThemeSelector style={{ position: 'fixed', bottom: '1%', left: '0%' }} />
+      <ThemeSelector />
     </AppContainer>
   );
 }
diff --git a/src/ExtStates/NotAuthenticated.tsx b/src/ExtStates/NotAuthenticated.tsx
index a892414..017e7ae 100644
--- a/src/ExtStates/NotAuthenticated.tsx
+++ b/src/ExtStates/NotAuthenticated.tsx
@@ -1058,7 +1058,7 @@ export const NotAuthenticated = ({
         />
       </ButtonBase>
 
-      <ThemeSelector style={{ position: 'fixed', bottom: '1%', left: '0%' }} />
+      <ThemeSelector />
     </>
   );
 };
diff --git a/src/components/Apps/AppsHomeDesktop.tsx b/src/components/Apps/AppsHomeDesktop.tsx
index d9ad291..d525c26 100644
--- a/src/components/Apps/AppsHomeDesktop.tsx
+++ b/src/components/Apps/AppsHomeDesktop.tsx
@@ -157,7 +157,7 @@ export const AppsHomeDesktop = ({
         />
       </AppsContainer>
 
-      <ThemeSelector style={{ position: 'fixed', bottom: '1%', left: '0%' }} />
+      <ThemeSelector />
     </>
   );
 };
diff --git a/src/components/DesktopSideBar.tsx b/src/components/DesktopSideBar.tsx
index d1c8a7a..2244334 100644
--- a/src/components/DesktopSideBar.tsx
+++ b/src/components/DesktopSideBar.tsx
@@ -139,7 +139,7 @@ export const DesktopSideBar = ({
         </ButtonBase>
       )}
 
-      <ThemeSelector style={{ position: 'fixed', bottom: '1%' }} />
+      <ThemeSelector />
     </Box>
   );
 };
diff --git a/src/components/Theme/ThemeSelector.tsx b/src/components/Theme/ThemeSelector.tsx
index dbf9d90..b82c072 100644
--- a/src/components/Theme/ThemeSelector.tsx
+++ b/src/components/Theme/ThemeSelector.tsx
@@ -1,75 +1,25 @@
 import { useThemeContext } from './ThemeContext';
-import { styled, Switch } from '@mui/material';
+import { IconButton, Tooltip } from '@mui/material';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
 
-const ThemeSwitch = styled(Switch)(({ theme }) => ({
-  width: 62,
-  height: 34,
-  padding: 7,
-  '& .MuiSwitch-switchBase': {
-    margin: 1,
-    padding: 0,
-    transform: 'translateX(6px)',
-    '&.Mui-checked': {
-      color: '#fff',
-      transform: 'translateX(22px)',
-      '& .MuiSwitch-thumb:before': {
-        backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
-          '#fff'
-        )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
-      },
-      '& + .MuiSwitch-track': {
-        opacity: 1,
-        backgroundColor: '#aab4be',
-        ...theme.applyStyles('dark', {
-          backgroundColor: '#8796A5',
-        }),
-      },
-    },
-  },
-  '& .MuiSwitch-thumb': {
-    backgroundColor: '#fde402',
-    width: 32,
-    height: 32,
-    '&::before': {
-      content: "''",
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      left: 0,
-      top: 0,
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'center',
-      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
-        '#000000'
-      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
-    },
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#003892',
-    }),
-  },
-  '& .MuiSwitch-track': {
-    opacity: 1,
-    backgroundColor: '#aab4be',
-    borderRadius: 20 / 2,
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#8796A5',
-    }),
-  },
-}));
-
-const ThemeSelector = ({ style }) => {
+const ThemeSelector = () => {
   const { themeMode, toggleTheme } = useThemeContext();
+
   return (
     <div
       style={{
         display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: '1px',
-        ...style,
+        gap: '12px',
+        position: 'fixed',
+        bottom: '1%',
       }}
     >
-      <ThemeSwitch checked={themeMode === 'dark'} onChange={toggleTheme} />
+      <Tooltip title={themeMode === 'dark' ? 'Light mode' : 'Dark mode'}>
+        <IconButton onClick={toggleTheme}>
+          {themeMode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
+        </IconButton>
+      </Tooltip>
     </div>
   );
 };

From 104c4822bf2556532a18740f61d4edf28f3e5b9d Mon Sep 17 00:00:00 2001
From: Nicola Benaglia <nico.benaz@gmail.com>
Date: Wed, 23 Apr 2025 09:05:07 +0200
Subject: [PATCH 2/2] Refactor icon position

---
 src/components/DesktopSideBar.tsx      | 2 +-
 src/components/Theme/ThemeSelector.tsx | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/DesktopSideBar.tsx b/src/components/DesktopSideBar.tsx
index 2244334..b25d206 100644
--- a/src/components/DesktopSideBar.tsx
+++ b/src/components/DesktopSideBar.tsx
@@ -118,7 +118,7 @@ export const DesktopSideBar = ({
       </ButtonBase>
 
       <Save isDesktop disableWidth myName={myName} />
-      {/* <CoreSyncStatus imageSize="30px" position="left" /> */}
+
       {isEnabledDevMode && (
         <ButtonBase
           onClick={() => {
diff --git a/src/components/Theme/ThemeSelector.tsx b/src/components/Theme/ThemeSelector.tsx
index b82c072..238ca00 100644
--- a/src/components/Theme/ThemeSelector.tsx
+++ b/src/components/Theme/ThemeSelector.tsx
@@ -9,10 +9,11 @@ const ThemeSelector = () => {
   return (
     <div
       style={{
+        bottom: '1%',
         display: 'flex',
         gap: '12px',
-        position: 'fixed',
-        bottom: '1%',
+        left: '1.5vh',
+        position: 'absolute',
       }}
     >
       <Tooltip title={themeMode === 'dark' ? 'Light mode' : 'Dark mode'}>