move widget to header

ApeWorX · Jan 18, 2024 · 152bfcc · 152bfcc
1 parent 99e1c70
commit 152bfcc
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 21 deletions.
diff --git a/ui/app/src/App.tsx b/ui/app/src/App.tsx
@@ -6,26 +6,16 @@ import "./styles.css";
 import "./sakura.css";
 import "./tokyoNight.css";
 import { useTheme } from "./ThemeContext";
-import { Button, SelectMenu } from "evergreen-ui";
 
 function App() {
-  const { theme, setTheme } = useTheme();
-  const themes = ["sakura", "tokyoNight", "nord"]; // All your themes
+  const { theme } = useTheme();
 
   return (
     <>
       <div className={`app ${theme}`}>
         <div className="header header-app">
           <ConnectButton />
         </div>
-        <SelectMenu
-          title="Select Theme"
-          options={themes.map((t) => ({ label: t, value: t }))}
-          selected={theme}
-          onSelect={(item) => setTheme(String(item.value))}
-        >
-          <Button className="theme-toggle-button">{theme}</Button>
-        </SelectMenu>
 
         <div className="list-stream-managers">
           <h2> Stream Managers </h2>

diff --git a/ui/app/src/Header.tsx b/ui/app/src/Header.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { Button, ArrowLeftIcon } from "evergreen-ui";
 import { useTheme } from "./ThemeContext";
+import { Button, SelectMenu, ArrowLeftIcon } from "evergreen-ui";
 
 const Header = () => {
-  const { theme } = useTheme();
+  const { theme, setTheme } = useTheme();
   const navigate = useNavigate();
+  const themes = ["sakura", "tokyoNight", "nord"]; 
 
   return (
     <div className={`app ${theme}`}>
@@ -19,6 +20,14 @@ const Header = () => {
       <Button className="theme-header-button" onClick={() => navigate("/")}>
         Homepage
       </Button>
+      <SelectMenu
+        title="Select Theme"
+        options={themes.map((t) => ({ label: t, value: t }))}
+        selected={theme}
+        onSelect={(item) => setTheme(String(item.value))}
+      >
+        <Button className="theme-toggle-button">{theme}</Button>
+      </SelectMenu>
     </div>
   );
 };

diff --git a/ui/app/src/ThemeContext.tsx b/ui/app/src/ThemeContext.tsx
@@ -7,15 +7,13 @@ import React, {
 } from "react";
 
 type ThemeContextType = {
-  theme: string; // The current theme
-  setTheme: (theme: string) => void; // Function to update the theme
+  theme: string;
+  setTheme: (theme: string) => void;
 };
 
-
-
 const ThemeContext = createContext<ThemeContextType>({
-  theme: "sakura", // Default value
-  setTheme: () => {}, // Default function
+  theme: "sakura",
+  setTheme: () => {},
 });
 
 type ThemeProviderProps = {
@@ -30,8 +28,6 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
     localStorage.setItem("theme", theme);
   }, [theme]);
 
-  // No need for toggleTheme if it's not being used
-
   return (
     <ThemeContext.Provider value={{ theme, setTheme }}>
       {children}