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,50 +1,46 @@
-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 { isMobile } from "../../App";
-import LogoSelected from "../../assets/svgs/LogoSelected.svg";
 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", { });
+        executeEvent("open-apps-mode", {});
-        setQortalUrl('qortal://')
+        setQortalUrl("qortal://");
-      }
-    } catch (error) {
-      
-    }
       }
+    } catch (error) {}
+  };
   return (
     <>
       <AppsContainer
         sx={{
-        
           justifyContent: "flex-start",
         }}
       >
@@ -56,65 +52,71 @@ export const AppsHomeDesktop = ({
           Apps Dashboard
         </AppLibrarySubTitle>
       </AppsContainer>
+
       <Spacer height="20px" />
+
       <AppsContainer
         sx={{
-        
           justifyContent: "flex-start",
-          
         }}
       >
-        <Box sx={{
+        <Box
-          display: 'flex',
+          sx={{
-          gap: '20px',
+            display: "flex",
-          alignItems: 'center',
+            gap: "20px",
-          backgroundColor: '#1f2023',
+            alignItems: "center",
-          padding: '7px',
+            backgroundColor: "#1f2023",
-          borderRadius: '20px',
+            padding: "7px",
-          width: '100%',
+            borderRadius: "20px",
-          maxWidth: '500px'
+            width: "100%",
-        }}>
+            maxWidth: "500px",
+          }}
+        >
           <Input
             id="standard-adornment-name"
             value={qortalUrl}
             onChange={(e) => {
-                setQortalUrl(e.target.value)
+              setQortalUrl(e.target.value);
             }}
             disableUnderline
-              autoComplete='off'
+            autoComplete="off"
-              autoCorrect='off'
+            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
+                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();
               }
             }}
           />
-            <ButtonBase onClick={()=> openQortalUrl()}>
+          <ButtonBase onClick={() => openQortalUrl()}>
-              <ArrowOutwardIcon sx={{
+            <ArrowOutwardIcon
-                color: qortalUrl ? 'white' : 'rgba(84, 84, 84, 0.70)'
+              sx={{
-              }} />
+                color: qortalUrl ? "white" : "rgba(84, 84, 84, 0.70)",
+              }}
+            />
           </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} />
+
         <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 { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
-import { darkTheme, lightTheme } from '../../styles/theme';
+
+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>
   );