Move some components into styles folder, delete duplicated themes

src/App.tsx

@@ -149,7 +149,7 @@ import { BuyQortInformation } from './components/BuyQortInformation';
 import { QortPayment } from './components/QortPayment';
 import { GeneralNotifications } from './components/GeneralNotifications';
 import { PdfViewer } from './common/PdfViewer';
-import ThemeSelector from './components/Theme/ThemeSelector';
+import ThemeSelector from './styles/ThemeSelector.tsx';
 
 type extStates =
   | 'not-authenticated'

src/ExtStates/NotAuthenticated.tsx

@@ -29,7 +29,7 @@ import { CustomizedSnackbars } from '../components/Snackbar/Snackbar';
 import { cleanUrl, gateways } from '../background';
 import { GlobalContext } from '../App';
 import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
-import ThemeSelector from '../components/Theme/ThemeSelector';
+import ThemeSelector from '../styles/ThemeSelector';
 
 const manifestData = {
   version: '0.5.3',

src/Wallets.tsx

@@ -423,7 +423,7 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
       >
         <ListItem
           sx={{
-            bgcolor: 'background.paper',
+            bgcolor: 'background.paper', // TODO: set background color
             flexGrow: 1,
             '&:hover': {
               backgroundColor: 'secondary.main',

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";
+} from './Apps-styles';
-import { Box, ButtonBase, Input } from "@mui/material";
+import { Box, ButtonBase, Input } from '@mui/material';
-import { Add } from "@mui/icons-material";
+import { Add } from '@mui/icons-material';
-import { isMobile } from "../../App";
+import { isMobile } from '../../App';
-import { executeEvent } from "../../utils/events";
+import { executeEvent } from '../../utils/events';
-import { Spacer } from "../../common/Spacer";
+import { Spacer } from '../../common/Spacer';
-import { SortablePinnedApps } from "./SortablePinnedApps";
+import { SortablePinnedApps } from './SortablePinnedApps';
-import { extractComponents } from "../Chat/MessageDisplay";
+import { extractComponents } from '../Chat/MessageDisplay';
-import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
+import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
-import { AppsPrivate } from "./AppsPrivate";
+import { AppsPrivate } from './AppsPrivate';
-import ThemeSelector from "../Theme/ThemeSelector";
+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('addTab', { data: { service, name, identifier, path } });
-        executeEvent("open-apps-mode", {});
+        executeEvent('open-apps-mode', {});
-        setQortalUrl("qortal://");
+        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",
+            display: 'flex',
-            gap: "20px",
+            gap: '20px',
-            alignItems: "center",
+            alignItems: 'center',
-            backgroundColor: "#1f2023",
+            backgroundColor: '#1f2023',
-            padding: "7px",
+            padding: '7px',
-            borderRadius: "20px",
+            borderRadius: '20px',
-            width: "100%",
+            width: '100%',
-            maxWidth: "500px",
+            maxWidth: '500px',
           }}
         >
           <Input
@@ -83,24 +83,24 @@ export const AppsHomeDesktop = ({
             autoCorrect="off"
             placeholder="qortal://"
             sx={{
-              width: "100%",
+              width: '100%',
-              color: "white",
+              color: 'white',
-              "& .MuiInput-input::placeholder": {
+              '& .MuiInput-input::placeholder': {
-                color: "rgba(84, 84, 84, 0.70) !important",
+                color: 'rgba(84, 84, 84, 0.70) !important',
-                fontSize: "20px",
+                fontSize: '20px',
-                fontStyle: "normal",
+                fontStyle: 'normal',
                 fontWeight: 400,
-                lineHeight: "120%", // 24px
+                lineHeight: '120%', // 24px
-                letterSpacing: "0.15px",
+                letterSpacing: '0.15px',
                 opacity: 1,
               },
-              "&:focus": {
+              '&:focus': {
-                outline: "none",
+                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",
+          gap: '50px',
-          justifyContent: "flex-start",
+          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 { Box, ButtonBase, useTheme } from '@mui/material';
-import { HomeIcon } from "../assets/Icons/HomeIcon";
+import { HomeIcon } from '../assets/Icons/HomeIcon';
-import { MessagingIcon } from "../assets/Icons/MessagingIcon";
+import { MessagingIcon } from '../assets/Icons/MessagingIcon';
-import { Save } from "./Save/Save";
+import { Save } from './Save/Save';
-import { IconWrapper } from "./Desktop/DesktopFooter";
+import { IconWrapper } from './Desktop/DesktopFooter';
-import { useRecoilState } from "recoil";
+import { useRecoilState } from 'recoil';
-import { enabledDevModeAtom } from "../atoms/global";
+import { enabledDevModeAtom } from '../atoms/global';
-import { AppsIcon } from "../assets/Icons/AppsIcon";
+import { AppsIcon } from '../assets/Icons/AppsIcon';
-import ThemeSelector from "./Theme/ThemeSelector";
+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",
+        width: '60px',
-        flexDirection: "column",
+        flexDirection: 'column',
-        height: "100vh",
+        height: '100vh',
-        alignItems: "center",
+        alignItems: 'center',
-        display: "flex",
+        display: 'flex',
-        gap: "25px",
+        gap: '25px',
       }}
     >
       <ButtonBase
         sx={{
-          width: "60px",
+          width: '60px',
-          height: "60px",
+          height: '60px',
-          paddingTop: "23px",
+          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)"
+              ? 'var(--unread)'
-              : theme.palette.text.primary              
+              : 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
+            <AppsIcon height={30} />
-              height={30}
-            />
           </IconWrapper>
         </ButtonBase>
       )}
 
-      <ThemeSelector style={{ position: "fixed", bottom: "1%" }} />
+      <ThemeSelector style={{ position: 'fixed', bottom: '1%' }} />
     </Box>
   );
 };

src/main.tsx

@@ -1,13 +1,13 @@
-import React from "react";
+import React from 'react';
-import ReactDOM from "react-dom/client";
+import ReactDOM from 'react-dom/client';
-import App from "./App.tsx";
+import App from './App.tsx';
-import "./index.css";
+import './index.css';
-import "./messaging/messagesToBackground";
+import './messaging/messagesToBackground';
-import { MessageQueueProvider } from "./MessageQueueContext.tsx";
+import { MessageQueueProvider } from './MessageQueueContext.tsx';
-import { RecoilRoot } from "recoil";
+import { RecoilRoot } from 'recoil';
-import { ThemeProvider } from "./components/Theme/ThemeContext.tsx";
+import { ThemeProvider } from './styles/ThemeContext.tsx';
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <>
     <ThemeProvider>
       <MessageQueueProvider>

src/styles/ThemeContext.tsx

@@ -1,24 +1,19 @@
 import { createContext, useContext, useState, useMemo } from 'react';
-import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { darkTheme, lightTheme } from './theme';
 
-const darkTheme = createTheme({
+const ThemeContext = createContext({
-  palette: {
+  themeMode: 'light',
-    mode: 'dark',
+  toggleTheme: () => {},
-  },
 });
 
-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 theme = useMemo(
+    () => (themeMode === 'light' ? lightTheme : darkTheme),
+    [themeMode]
+  );
 
   const toggleTheme = () => {
     setThemeMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
@@ -31,4 +26,4 @@ export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-export const useThemeContext = () => useContext(ThemeContext);
+export const useThemeContext = () => useContext(ThemeContext);

src/styles/theme.ts

@@ -1,54 +1,50 @@
-import { createTheme } from '@mui/material/styles'
+import { createTheme } from '@mui/material/styles';
-
 
 // Extend the Theme interface
-
 const commonThemeOptions = {
   typography: {
-    fontFamily: [
+    fontFamily: ['Roboto'].join(','),
-      'Roboto'
-    ].join(','),
     h1: {
       fontSize: '2rem',
-      fontWeight: 600
+      fontWeight: 600,
     },
     h2: {
       fontSize: '1.75rem',
-      fontWeight: 500
+      fontWeight: 500,
     },
     h3: {
       fontSize: '1.5rem',
-      fontWeight: 500
+      fontWeight: 500,
     },
     h4: {
       fontSize: '1.25rem',
-      fontWeight: 500
+      fontWeight: 500,
     },
     h5: {
       fontSize: '1rem',
-      fontWeight: 500
+      fontWeight: 500,
     },
     h6: {
       fontSize: '0.875rem',
-      fontWeight: 500
+      fontWeight: 500,
     },
     body1: {
       fontSize: '23px',
       fontWeight: 400,
       lineHeight: 1.5,
-      letterSpacing: '0.5px'
+      letterSpacing: '0.5px',
     },
 
     body2: {
       fontSize: '18px',
       fontWeight: 400,
       lineHeight: 1.4,
-      letterSpacing: '0.2px'
+      letterSpacing: '0.2px',
-    }
+    },
   },
   spacing: 8,
   shape: {
-    borderRadius: 4
+    borderRadius: 4,
   },
   breakpoints: {
     values: {
@@ -56,8 +52,8 @@ const commonThemeOptions = {
       sm: 600,
       md: 900,
       lg: 1200,
-      xl: 1536
+      xl: 1536,
-    }
+    },
   },
   components: {
     MuiButton: {
@@ -66,25 +62,24 @@ const commonThemeOptions = {
           backgroundColor: 'inherit',
           transition: 'filter 0.3s ease-in-out',
           '&:hover': {
-            filter: 'brightness(1.1)'
+            filter: 'brightness(1.1)',
-          }
+          },
-        }
+        },
       },
       defaultProps: {
         disableElevation: true,
-        disableRipple: true
+        disableRipple: true,
-      }
+      },
     },
     MuiModal: {
       styleOverrides: {
         root: {
           zIndex: 50000,
         },
-      }
+      },
-
+    },
-    }
+  },
-  }
+};
-}
 
 const lightTheme = createTheme({
   ...commonThemeOptions,
@@ -93,19 +88,19 @@ const lightTheme = createTheme({
     primary: {
       main: '#f4f4fb',
       dark: '#eaecf4',
-      light: '#f9f9fd'
+      light: '#f9f9fd',
     },
     secondary: {
-      main: '#1EAAF1'
+      main: '#1EAAF1',
     },
     background: {
       default: '#fafafa',
-      paper: '#f0f0f0'
+      paper: '#f0f0f0',
     },
     text: {
       primary: '#000000',
-      secondary: '#525252'
+      secondary: '#525252',
-    }
+    },
   },
 
   components: {
@@ -119,20 +114,20 @@ const lightTheme = createTheme({
           '&:hover': {
             cursor: 'pointer',
             boxShadow:
-              'rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;'
+              'rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;',
-          }
+          },
-        }
+        },
-      }
+      },
     },
     MuiIcon: {
       defaultProps: {
         style: {
-          color: '#000000'
+          color: '#000000',
-        }
+        },
-      }
+      },
-    }
+    },
   },
-})
+});
 
 const darkTheme = createTheme({
   ...commonThemeOptions,
@@ -140,45 +135,45 @@ const darkTheme = createTheme({
     mode: 'dark',
     primary: {
       main: '#2e3d60',
-      dark: "#1a2744",
+      dark: '#1a2744',
-      light: "#3f4b66",
+      light: '#3f4b66',
     },
     secondary: {
-      main: '#45adff'
+      main: '#45adff',
     },
 
     background: {
       default: '#313338',
-      paper: "#1e1e20"
+      paper: '#1e1e20',
     },
     text: {
       primary: '#ffffff',
-      secondary: '#b3b3b3'
+      secondary: '#b3b3b3',
-    }
+    },
   },
   components: {
     MuiCard: {
       styleOverrides: {
         root: {
-          boxShadow: "none",
+          boxShadow: 'none',
           borderRadius: '8px',
           transition: 'all 0.3s ease-in-out',
           '&:hover': {
             cursor: 'pointer',
             boxShadow:
-              ' 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);'
+              ' 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);',
-          }
+          },
-        }
+        },
-      }
+      },
     },
     MuiIcon: {
       defaultProps: {
         style: {
-          color: '#ffffff'
+          color: '#ffffff',
-        }
+        },
-      }
+      },
-    }
+    },
   },
-})
+});
 
-export { lightTheme, darkTheme }
+export { lightTheme, darkTheme };