Add themeSelector component

src/ExtStates/NotAuthenticated.tsx

@@ -939,22 +939,68 @@ export const NotAuthenticated = ({
 
       <ThemeSelector style={{ position: "fixed", bottom: "1%", left: "1%" }}/>
 
-      <ButtonBase
+                <Button
+                  variant="contained"
+                  disabled={!enteredApiKey}
                   onClick={() => {
-          showTutorial("create-account", true);
-        }}
-        sx={{
-          position: "fixed",
-          bottom: "25px",
-          right: "25px",
+                    try {
+                      setImportedApiKey(enteredApiKey); // Store the file content in the state
+        if(customNodes){
+          setCustomNodes((prev)=> {
+            const copyPrev = [...prev]
+            const findLocalIndex = copyPrev?.findIndex((item)=> item?.url === 'http://127.0.0.1:12391')
+            if(findLocalIndex === -1){
+              copyPrev.unshift({
+                url: "http://127.0.0.1:12391",
+                apikey: enteredApiKey
+              })
+            } else {
+              copyPrev[findLocalIndex] = {
+                url: "http://127.0.0.1:12391",
+                apikey: enteredApiKey
+              }
+            }
+            window
+            .sendMessage("setCustomNodes", copyPrev)
+            .catch((error) => {
+              console.error(
+                "Failed to set custom nodes:",
+                error.message || "An error occurred"
+              );
+            });
+            return copyPrev
+          })
+       
+        }
+        setUseLocalNode(false);
+        setShowSelectApiKey(false)
+        setEnteredApiKey("")
+                    } catch (error) {
+                      console.error(error)
+                    }
                   }}
+                  autoFocus
                 >
-        <HelpIcon
-          sx={{
-            color: "var(--unread)",
-          }}
-        />
+                  Save
+                </Button>
+           
+          
+          </DialogActions>
+        </Dialog>
+      )}
+      <ButtonBase onClick={()=> {
+         showTutorial('create-account', true)
+      }} sx={{
+        position: 'fixed',
+        bottom: '25px',
+        right: '25px'
+      }}>
+        <HelpIcon sx={{
+          color: 'var(--unread)'
+        }} />
         </ButtonBase>
+
+        <ThemeSelector style={{ position: "fixed", bottom: "1%", left: "1%" }}/>
     </>
   );
 };

src/components/DesktopSideBar.tsx

@@ -1,8 +1,12 @@
-import { Box, ButtonBase, useTheme } from "@mui/material";
+import { Box, ButtonBase } from "@mui/material";
+import React from "react";
 import { HomeIcon } from "../assets/Icons/HomeIcon";
 import { MessagingIcon } from "../assets/Icons/MessagingIcon";
 import { Save } from "./Save/Save";
+import { HubsIcon } from "../assets/Icons/HubsIcon";
+import { CoreSyncStatus } from "./CoreSyncStatus";
 import { IconWrapper } from "./Desktop/DesktopFooter";
+import AppIcon from "./../assets/svgs/AppIcon.svg";
 import { useRecoilState } from "recoil";
 import { enabledDevModeAtom } from "../atoms/global";
 import { AppsIcon } from "../assets/Icons/AppsIcon";
@@ -50,6 +54,12 @@ export const DesktopSideBar = ({
       >
         <HomeIcon
           height={34}
+<<<<<<< HEAD
+=======
+          color={
+            desktopViewMode === "home" ? "white" : "rgba(250, 250, 250, 0.5)"
+          }
+>>>>>>> b721248 (Add themeSelector component)
         />
       </ButtonBase>
       <ButtonBase
@@ -60,16 +70,27 @@ export const DesktopSideBar = ({
         }}
       >
         <IconWrapper
+<<<<<<< HEAD
+=======
+          color={isApps ? "white" : "rgba(250, 250, 250, 0.5)"}
+>>>>>>> b721248 (Add themeSelector component)
           label="Apps"
           selected={isApps}
           disableWidth
         >
           <AppsIcon
+<<<<<<< HEAD
+=======
+            color={isApps ? "white" : "rgba(250, 250, 250, 0.5)"}
+>>>>>>> b721248 (Add themeSelector component)
             height={30}
           />
         </IconWrapper>
       </ButtonBase>
+<<<<<<< HEAD
 
+=======
+>>>>>>> b721248 (Add themeSelector component)
       <ButtonBase
         onClick={() => {
           setDesktopViewMode("chat");
@@ -79,7 +100,13 @@ export const DesktopSideBar = ({
           color={
             hasUnreadDirects || hasUnreadGroups
               ? "var(--unread)"
+<<<<<<< HEAD
               : theme.palette.text.primary
+=======
+              : desktopViewMode === "chat"
+              ? "white"
+              : "rgba(250, 250, 250, 0.5)"
+>>>>>>> b721248 (Add themeSelector component)
           }
           label="Chat"
           disableWidth
@@ -89,7 +116,13 @@ export const DesktopSideBar = ({
             color={
               hasUnreadDirects || hasUnreadGroups
                 ? "var(--unread)"
+<<<<<<< HEAD
                 : theme.palette.text.primary
+=======
+                : desktopViewMode === "chat"
+                ? "white"
+                : "rgba(250, 250, 250, 0.5)"
+>>>>>>> b721248 (Add themeSelector component)
             }
           />
         </IconWrapper>
@@ -121,10 +154,22 @@ export const DesktopSideBar = ({
           }}
         >
           <IconWrapper
+<<<<<<< HEAD
+=======
+            color={
+              desktopViewMode === "dev" ? "white" : "rgba(250, 250, 250, 0.5)"
+            }
+>>>>>>> b721248 (Add themeSelector component)
             label="Dev"
             disableWidth
           >
             <AppsIcon
+<<<<<<< HEAD
+=======
+              color={
+                desktopViewMode === "dev" ? "white" : "rgba(250, 250, 250, 0.5)"
+              }
+>>>>>>> b721248 (Add themeSelector component)
               height={30}
             />
           </IconWrapper>

src/main.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";