Move some components into styles folder, delete duplicated themes

src/components/Apps/AppsHomeDesktop.tsx

@@ -1,21 +1,21 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
 import {
   AppCircle,
   AppCircleContainer,
   AppCircleLabel,
   AppLibrarySubTitle,
   AppsContainer,
-} from "./Apps-styles";
-import { Box, ButtonBase, Input } from "@mui/material";
-import { Add } from "@mui/icons-material";
-import { isMobile } from "../../App";
-import { executeEvent } from "../../utils/events";
-import { Spacer } from "../../common/Spacer";
-import { SortablePinnedApps } from "./SortablePinnedApps";
-import { extractComponents } from "../Chat/MessageDisplay";
-import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
-import { AppsPrivate } from "./AppsPrivate";
-import ThemeSelector from "../Theme/ThemeSelector";
+} from './Apps-styles';
+import { Box, ButtonBase, Input } from '@mui/material';
+import { Add } from '@mui/icons-material';
+import { isMobile } from '../../App';
+import { executeEvent } from '../../utils/events';
+import { Spacer } from '../../common/Spacer';
+import { SortablePinnedApps } from './SortablePinnedApps';
+import { extractComponents } from '../Chat/MessageDisplay';
+import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
+import { AppsPrivate } from './AppsPrivate';
+import ThemeSelector from '../../styles/ThemeSelector';
 export const AppsHomeDesktop = ({
   setMode,
   myApp,
@@ -23,7 +23,7 @@ export const AppsHomeDesktop = ({
   availableQapps,
   myName,
 }) => {
-  const [qortalUrl, setQortalUrl] = useState("");
+  const [qortalUrl, setQortalUrl] = useState('');
 
   const openQortalUrl = () => {
     try {
@@ -31,9 +31,9 @@ export const AppsHomeDesktop = ({
       const res = extractComponents(qortalUrl);
       if (res) {
         const { service, name, identifier, path } = res;
-        executeEvent("addTab", { data: { service, name, identifier, path } });
-        executeEvent("open-apps-mode", {});
-        setQortalUrl("qortal://");
+        executeEvent('addTab', { data: { service, name, identifier, path } });
+        executeEvent('open-apps-mode', {});
+        setQortalUrl('qortal://');
       }
     } catch (error) {}
   };
@@ -41,12 +41,12 @@ export const AppsHomeDesktop = ({
     <>
       <AppsContainer
         sx={{
-          justifyContent: "flex-start",
+          justifyContent: 'flex-start',
         }}
       >
         <AppLibrarySubTitle
           sx={{
-            fontSize: "30px",
+            fontSize: '30px',
           }}
         >
           Apps Dashboard
@@ -57,19 +57,19 @@ export const AppsHomeDesktop = ({
 
       <AppsContainer
         sx={{
-          justifyContent: "flex-start",
+          justifyContent: 'flex-start',
         }}
       >
         <Box
           sx={{
-            display: "flex",
-            gap: "20px",
-            alignItems: "center",
-            backgroundColor: "#1f2023",
-            padding: "7px",
-            borderRadius: "20px",
-            width: "100%",
-            maxWidth: "500px",
+            display: 'flex',
+            gap: '20px',
+            alignItems: 'center',
+            backgroundColor: '#1f2023',
+            padding: '7px',
+            borderRadius: '20px',
+            width: '100%',
+            maxWidth: '500px',
           }}
         >
           <Input
@@ -83,24 +83,24 @@ export const AppsHomeDesktop = ({
             autoCorrect="off"
             placeholder="qortal://"
             sx={{
-              width: "100%",
-              color: "white",
-              "& .MuiInput-input::placeholder": {
-                color: "rgba(84, 84, 84, 0.70) !important",
-                fontSize: "20px",
-                fontStyle: "normal",
+              width: '100%',
+              color: 'white',
+              '& .MuiInput-input::placeholder': {
+                color: 'rgba(84, 84, 84, 0.70) !important',
+                fontSize: '20px',
+                fontStyle: 'normal',
                 fontWeight: 400,
-                lineHeight: "120%", // 24px
-                letterSpacing: "0.15px",
+                lineHeight: '120%', // 24px
+                letterSpacing: '0.15px',
                 opacity: 1,
               },
-              "&:focus": {
-                outline: "none",
+              '&:focus': {
+                outline: 'none',
               },
               // Add any additional styles for the input here
             }}
             onKeyDown={(e) => {
-              if (e.key === "Enter" && qortalUrl) {
+              if (e.key === 'Enter' && qortalUrl) {
                 openQortalUrl();
               }
             }}
@@ -108,7 +108,7 @@ export const AppsHomeDesktop = ({
           <ButtonBase onClick={() => openQortalUrl()}>
             <ArrowOutwardIcon
               sx={{
-                color: qortalUrl ? "white" : "rgba(84, 84, 84, 0.70)",
+                color: qortalUrl ? 'white' : 'rgba(84, 84, 84, 0.70)',
               }}
             />
           </ButtonBase>
@@ -119,18 +119,18 @@ export const AppsHomeDesktop = ({
 
       <AppsContainer
         sx={{
-          gap: "50px",
-          justifyContent: "flex-start",
+          gap: '50px',
+          justifyContent: 'flex-start',
         }}
       >
         <ButtonBase
           onClick={() => {
-            setMode("library");
+            setMode('library');
           }}
         >
           <AppCircleContainer
             sx={{
-              gap: !isMobile ? "10px" : "5px",
+              gap: !isMobile ? '10px' : '5px',
             }}
           >
             <AppCircle>
@@ -150,7 +150,7 @@ export const AppsHomeDesktop = ({
         />
       </AppsContainer>
 
-      <ThemeSelector style={{ position: "fixed", bottom: "1%", left: "0%" }} />
+      <ThemeSelector style={{ position: 'fixed', bottom: '1%', left: '0%' }} />
     </>
   );
 };

src/components/DesktopSideBar.tsx

@@ -1,12 +1,12 @@
-import { Box, ButtonBase, useTheme } from "@mui/material";
-import { HomeIcon } from "../assets/Icons/HomeIcon";
-import { MessagingIcon } from "../assets/Icons/MessagingIcon";
-import { Save } from "./Save/Save";
-import { IconWrapper } from "./Desktop/DesktopFooter";
-import { useRecoilState } from "recoil";
-import { enabledDevModeAtom } from "../atoms/global";
-import { AppsIcon } from "../assets/Icons/AppsIcon";
-import ThemeSelector from "./Theme/ThemeSelector";
+import { Box, ButtonBase, useTheme } from '@mui/material';
+import { HomeIcon } from '../assets/Icons/HomeIcon';
+import { MessagingIcon } from '../assets/Icons/MessagingIcon';
+import { Save } from './Save/Save';
+import { IconWrapper } from './Desktop/DesktopFooter';
+import { useRecoilState } from 'recoil';
+import { enabledDevModeAtom } from '../atoms/global';
+import { AppsIcon } from '../assets/Icons/AppsIcon';
+import ThemeSelector from '../styles/ThemeSelector';
 
 export const DesktopSideBar = ({
   goToHome,
@@ -24,25 +24,25 @@ export const DesktopSideBar = ({
 }) => {
   const [isEnabledDevMode, setIsEnabledDevMode] =
     useRecoilState(enabledDevModeAtom);
-  
+
   const theme = useTheme();
 
   return (
     <Box
       sx={{
-        width: "60px",
-        flexDirection: "column",
-        height: "100vh",
-        alignItems: "center",
-        display: "flex",
-        gap: "25px",
+        width: '60px',
+        flexDirection: 'column',
+        height: '100vh',
+        alignItems: 'center',
+        display: 'flex',
+        gap: '25px',
       }}
     >
       <ButtonBase
         sx={{
-          width: "60px",
-          height: "60px",
-          paddingTop: "23px",
+          width: '60px',
+          height: '60px',
+          paddingTop: '23px',
         }}
         onClick={() => {
           goToHome();
@@ -51,39 +51,39 @@ export const DesktopSideBar = ({
         <HomeIcon
           height={34}
           color={
-            desktopViewMode === "home" ? "white" : "rgba(250, 250, 250, 0.5)"
+            desktopViewMode === 'home' ? 'white' : 'rgba(250, 250, 250, 0.5)'
           }
         />
       </ButtonBase>
       <ButtonBase
         onClick={() => {
-          setDesktopViewMode("apps");
+          setDesktopViewMode('apps');
           // setIsOpenSideViewDirects(false)
           // setIsOpenSideViewGroups(false)
         }}
       >
         <IconWrapper
-          color={isApps ? "white" : "rgba(250, 250, 250, 0.5)"}
+          color={isApps ? 'white' : 'rgba(250, 250, 250, 0.5)'}
           label="Apps"
           selected={isApps}
           disableWidth
         >
           <AppsIcon
-            color={isApps ? "white" : "rgba(250, 250, 250, 0.5)"}
+            color={isApps ? 'white' : 'rgba(250, 250, 250, 0.5)'}
             height={30}
           />
         </IconWrapper>
       </ButtonBase>
       <ButtonBase
         onClick={() => {
-          setDesktopViewMode("chat");
+          setDesktopViewMode('chat');
         }}
       >
         <IconWrapper
           color={
             hasUnreadDirects || hasUnreadGroups
-              ? "var(--unread)"
-              : theme.palette.text.primary              
+              ? 'var(--unread)'
+              : theme.palette.text.primary
           }
           label="Chat"
           disableWidth
@@ -92,7 +92,7 @@ export const DesktopSideBar = ({
             height={30}
             color={
               hasUnreadDirects || hasUnreadGroups
-                ? "var(--unread)"
+                ? 'var(--unread)'
                 : theme.palette.text.primary
             }
           />
@@ -121,24 +121,22 @@ export const DesktopSideBar = ({
       {isEnabledDevMode && (
         <ButtonBase
           onClick={() => {
-            setDesktopViewMode("dev");
+            setDesktopViewMode('dev');
           }}
         >
           <IconWrapper
             color={
-              desktopViewMode === "dev" ? "white" : "rgba(250, 250, 250, 0.5)"
+              desktopViewMode === 'dev' ? 'white' : 'rgba(250, 250, 250, 0.5)'
             }
             label="Dev"
             disableWidth
           >
-            <AppsIcon
-              height={30}
-            />
+            <AppsIcon height={30} />
           </IconWrapper>
         </ButtonBase>
       )}
 
-      <ThemeSelector style={{ position: "fixed", bottom: "1%" }} />
+      <ThemeSelector style={{ position: 'fixed', bottom: '1%' }} />
     </Box>
   );
 };

src/components/Theme/ThemeContext.tsx

@@ -1,34 +0,0 @@
-import { createContext, useContext, useState, useMemo } from 'react';
-import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
-
-const darkTheme = createTheme({
-  palette: {
-    mode: 'dark',
-  },
-});
-
-const lightTheme = createTheme({
-  palette: {
-    mode: 'light',
-  },
-});
-
-const ThemeContext = createContext({ themeMode: 'light', toggleTheme: () => {} });
-
-export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
-  const [themeMode, setThemeMode] = useState('light');
-
-  const theme = useMemo(() => (themeMode === 'light' ? lightTheme : darkTheme), [themeMode]);
-
-  const toggleTheme = () => {
-    setThemeMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
-  };
-
-  return (
-    <ThemeContext.Provider value={{ themeMode, toggleTheme }}>
-      <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
-    </ThemeContext.Provider>
-  );
-};
-
-export const useThemeContext = () => useContext(ThemeContext);

src/components/Theme/ThemeSelector.tsx

@@ -1,77 +0,0 @@
-import { useThemeContext } from "./ThemeContext";
-import { styled, Switch } from "@mui/material";
-
-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: "#001e3c",
-    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(
-        "#fff"
-      )}" 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 { themeMode, toggleTheme } = useThemeContext();
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: "1px",
-        ...style,
-      }}
-    >
-      <ThemeSwitch checked={themeMode === "dark"} onChange={toggleTheme} />
-    </div>
-  );
-};
-
-export default ThemeSelector;