Remove unused import, add themeSelector

src/App.tsx

@@ -1667,7 +1667,9 @@ function App() {
                 />
               </Tooltip>
             </ButtonBase>
+
             <Spacer height="20px" />
+
             <ButtonBase
               onClick={() => {
                 setIsOpenDrawerLookup(true);
@@ -1699,7 +1701,9 @@ function App() {
                 />
               </Tooltip>
             </ButtonBase>
+
             <Spacer height="20px" />
+
             <ButtonBase
               onClick={() => {
                 executeEvent('openWalletsApp', {})
@@ -1732,7 +1736,6 @@ function App() {
               </Tooltip>
             </ButtonBase>
             
-          
             {desktopViewMode !== 'home' && (
               <>
                 <Spacer height="20px" />

src/components/Apps/AppsHomeDesktop.tsx

@@ -1,120 +1,122 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import {
   AppCircle,
   AppCircleContainer,
   AppCircleLabel,
   AppLibrarySubTitle,
   AppsContainer,
-  AppsParent,
 } from "./Apps-styles";
-import { Avatar, Box, ButtonBase, Input } from "@mui/material";
+import { Box, ButtonBase, Input } from "@mui/material";
 import { Add } from "@mui/icons-material";
-import { getBaseApiReact, isMobile } from "../../App";
-import LogoSelected from "../../assets/svgs/LogoSelected.svg";
+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 ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
 import { AppsPrivate } from "./AppsPrivate";
+import ThemeSelector from "../Theme/ThemeSelector";
 export const AppsHomeDesktop = ({
   setMode,
   myApp,
   myWebsite,
   availableQapps,
-  myName
+  myName,
 }) => {
-  const [qortalUrl, setQortalUrl] = useState('')
+  const [qortalUrl, setQortalUrl] = useState("");
 
-  const openQortalUrl = ()=> {
+  const openQortalUrl = () => {
     try {
-      if(!qortalUrl) return
+      if (!qortalUrl) return;
       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("open-apps-mode", {});
+        setQortalUrl("qortal://");
       }
-    } catch (error) {
-      
-    }
-  }
+    } catch (error) {}
+  };
   return (
     <>
-     <AppsContainer
-        sx={{
-        
-          justifyContent: "flex-start",
-        }}
-      >
-      <AppLibrarySubTitle
-        sx={{
-          fontSize: "30px",
-        }}
-      >
-        Apps Dashboard
-      </AppLibrarySubTitle>
-      </AppsContainer>
-      <Spacer height="20px" />
       <AppsContainer
         sx={{
-        
           justifyContent: "flex-start",
-          
         }}
       >
-        <Box sx={{
-          display: 'flex',
-          gap: '20px',
-          alignItems: 'center',
-          backgroundColor: '#1f2023',
-          padding: '7px',
-          borderRadius: '20px',
-          width: '100%',
-          maxWidth: '500px'
-        }}>
-      <Input
-              id="standard-adornment-name"
-              value={qortalUrl}
-              onChange={(e) => {
-                setQortalUrl(e.target.value)
-              }}
-              disableUnderline
-              autoComplete='off'
-              autoCorrect='off'
-              placeholder="qortal://"
+        <AppLibrarySubTitle
+          sx={{
+            fontSize: "30px",
+          }}
+        >
+          Apps Dashboard
+        </AppLibrarySubTitle>
+      </AppsContainer>
+
+      <Spacer height="20px" />
+
+      <AppsContainer
+        sx={{
+          justifyContent: "flex-start",
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            gap: "20px",
+            alignItems: "center",
+            backgroundColor: "#1f2023",
+            padding: "7px",
+            borderRadius: "20px",
+            width: "100%",
+            maxWidth: "500px",
+          }}
+        >
+          <Input
+            id="standard-adornment-name"
+            value={qortalUrl}
+            onChange={(e) => {
+              setQortalUrl(e.target.value);
+            }}
+            disableUnderline
+            autoComplete="off"
+            autoCorrect="off"
+            placeholder="qortal://"
+            sx={{
+              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",
+                opacity: 1,
+              },
+              "&:focus": {
+                outline: "none",
+              },
+              // Add any additional styles for the input here
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && qortalUrl) {
+                openQortalUrl();
+              }
+            }}
+          />
+          <ButtonBase onClick={() => openQortalUrl()}>
+            <ArrowOutwardIcon
               sx={{
-                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',
-                  opacity: 1
-                },
-                '&:focus': {
-                  outline: 'none',
-                },
-                // Add any additional styles for the input here
-              }}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && qortalUrl) {
-                  openQortalUrl();
-                }
+                color: qortalUrl ? "white" : "rgba(84, 84, 84, 0.70)",
               }}
             />
-            <ButtonBase onClick={()=> openQortalUrl()}>
-              <ArrowOutwardIcon sx={{
-                color: qortalUrl ? 'white' : 'rgba(84, 84, 84, 0.70)'
-              }} />
-            </ButtonBase>
-            </Box>
-            </AppsContainer>
+          </ButtonBase>
+        </Box>
+      </AppsContainer>
+
       <Spacer height="45px" />
+
       <AppsContainer
         sx={{
           gap: "50px",
@@ -137,7 +139,9 @@ export const AppsHomeDesktop = ({
             <AppCircleLabel>Library</AppCircleLabel>
           </AppCircleContainer>
         </ButtonBase>
-          <AppsPrivate myName={myName} />
+
+        <AppsPrivate myName={myName} />
+
         <SortablePinnedApps
           isDesktop={true}
           availableQapps={availableQapps}
@@ -145,6 +149,8 @@ export const AppsHomeDesktop = ({
           myApp={myApp}
         />
       </AppsContainer>
+
+      <ThemeSelector style={{ position: "fixed", bottom: "1%", left: "0%" }} />
     </>
   );
 };

src/components/Theme/ThemeContext.tsx

@@ -1,6 +1,17 @@
 import { createContext, useContext, useState, useMemo } from 'react';
-import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
-import { darkTheme, lightTheme } from '../../styles/theme';
+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: () => {} });
 

src/components/Theme/ThemeSelector.tsx

@@ -1,15 +1,22 @@
 import { useThemeContext } from "./ThemeContext";
 import { Switch } from "@mui/material";
-import { Brightness4, Brightness7 } from "@mui/icons-material";
+import LightModeIcon from '@mui/icons-material/LightMode';
+import NightlightIcon from '@mui/icons-material/Nightlight';
 
 const ThemeSelector = ({ style }) => {
   const { themeMode, toggleTheme } = useThemeContext();
 
   return (
     <div
-      style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1px", ...style }}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "1px",
+        ...style,
+      }}
     >
-      {themeMode === "dark" ? <Brightness7 /> : <Brightness4 />}
+      {themeMode === "dark" ? <LightModeIcon /> : <NightlightIcon />}
       <Switch checked={themeMode === "dark"} onChange={toggleTheme} />
     </div>
   );