Merge branch '202410-themes' of github.com:the-standard/decentralised…

…-dashboard-fork into beta
the-standard · Nov 1, 2024 · a3270d2 · a3270d2
2 parents 676da86 + 8d6c2aa
commit a3270d2
Show file tree

Hide file tree

Showing 11 changed files with 295 additions and 166 deletions.
diff --git a/src/components/ThemeHandler.jsx b/src/components/ThemeHandler.jsx
@@ -4,34 +4,89 @@ import {
 } from 'react-daisyui';
 
 import {
-  useCurrentTheme,
+  useLocalThemeStore,
+  useLocalThemeModeStore,
+  useLocalThemeModePrefStore,
 } from "../store/Store";
 
+import ThemeSettings from "./ui/ThemeSettings";
+
 const ThemeHandler = ({children}) => {
-  const { currentTheme, setCurrentTheme } = useCurrentTheme();
+  const { localThemeStore, setLocalThemeStore } = useLocalThemeStore();
+  const { localThemeModeStore, setLocalThemeModeStore } = useLocalThemeModeStore();
+  const { localThemeModePrefStore, setLocalThemeModePrefStore } = useLocalThemeModePrefStore();
 
   const localTheme = localStorage.getItem('theme');
+  const localModePref = localStorage.getItem('modePref');
 
   useEffect(() => {
+    let useTheme = 'deluxe';
     if (localTheme) {
-      setCurrentTheme(localTheme);
-    } else {
-      if (
-        window.matchMedia &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches
-      ) {
-        localStorage.setItem("theme", "deluxe-dark");
-        setCurrentTheme("deluxe-dark");
+      if (localTheme.includes('deluxe')) {
+        useTheme = 'deluxe';
+      } else
+      if (localTheme.includes('nebula')) {
+        useTheme = 'nebula';
+      } else
+      if (localTheme.includes('simple')) {
+        useTheme = 'simple';
       } else {
-        localStorage.setItem("theme", "deluxe-light");
-        setCurrentTheme("deluxe-light");
+        useTheme = 'deluxe';
       }
     }
+    setLocalThemeStore(useTheme);
+
+    let useModePref = 'device';
+    if (localModePref) {
+      useModePref = localModePref;
+    }
+    setLocalThemeModePrefStore(useModePref);
   }, [])
 
+  useEffect(() => {
+    localStorage.setItem('theme', localThemeStore)
+  }, [localThemeStore])
+
+  useEffect(() => {
+    localStorage.setItem('modePref', localThemeModePrefStore)
+    handleDarkMode();
+  }, [localThemeModePrefStore])
+
+  const handleDarkMode = () => {
+    switch(localThemeModePrefStore){
+      case 'dark':
+        setLocalThemeModeStore('dark');
+        break;
+      case 'light':
+        setLocalThemeModeStore('light');
+        break;
+      case 'device':
+        useDeviceAppearance();
+        break;  
+      default:
+        useDeviceAppearance();
+        break;
+    }
+  }
+
+  const useDeviceAppearance = () => {
+    if (window.matchMedia) {
+      if(window.matchMedia('(prefers-color-scheme: dark)').matches){
+        setLocalThemeModeStore('dark');
+      } else {
+        setLocalThemeModeStore('light');
+      }
+    } else {
+      setLocalThemeModeStore('dark');
+    }
+  }
+
+  const useDaisyTheme = `${localThemeStore}-${localThemeModeStore}`;
+
   return (
-    <Theme dataTheme={currentTheme} className="tst-bg">
+    <Theme dataTheme={useDaisyTheme} className="tst-bg">
       {children}
+      <ThemeSettings />
     </Theme>
   )
 };

diff --git a/src/components/WalletProvider.jsx b/src/components/WalletProvider.jsx
@@ -10,7 +10,7 @@ import {
 import '@rainbow-me/rainbowkit/styles.css';
 
 import {
-  useCurrentTheme,
+  useLocalThemeModeStore,
   useCurrentWagmiConfig
 } from "../store/Store";
 
@@ -19,9 +19,9 @@ import CenterLoader from "./ui/CenterLoader";
 const projectId = import.meta.env.VITE_WALLETCONNECT_ID;
 
 const WalletProvider = ({ children }) => {
-  const { currentTheme } = useCurrentTheme();
+  const { localThemeModeStore } = useLocalThemeModeStore();
   const { setCurrentWagmiConfig } = useCurrentWagmiConfig();
-  const isLight = currentTheme && currentTheme.includes('light');
+  const isLight = localThemeModeStore && localThemeModeStore.includes('light');
 
   const { chains, isLoading } = useAvailableChains();
 

diff --git a/src/components/ui/DashLayout.jsx b/src/components/ui/DashLayout.jsx
@@ -5,7 +5,7 @@ import {
 } from 'react-daisyui';
 
 import {
-  useCurrentTheme,
+  useLocalThemeModeStore,
 } from "../../store/Store";
 
 import {
@@ -32,8 +32,8 @@ const DashLayout = ({children}) => {
     setShowSideNav(visible => !visible);
   }, []);
 
-  const { currentTheme } = useCurrentTheme();
-  const isLight = currentTheme && currentTheme.includes('light');
+  const { localThemeModeStore } = useLocalThemeModeStore();
+  const isLight = localThemeModeStore && localThemeModeStore.includes('light');
 
   return (
     <div className="tst-con">

diff --git a/src/components/ui/Footer.jsx b/src/components/ui/Footer.jsx
@@ -1,5 +1,5 @@
 import {
-  useCurrentTheme,
+  useLocalThemeModeStore,
 } from "../../store/Store";
 
 import Button from "./Button";
@@ -53,8 +53,8 @@ const icons = [
 ];
 
 const Footer = (props) => {
-  const { currentTheme } = useCurrentTheme();
-  const isLight = currentTheme && currentTheme.includes('light');
+  const { localThemeModeStore } = useLocalThemeModeStore();
+  const isLight = localThemeModeStore && localThemeModeStore.includes('light');
 
   return (
     <footer className="tst-footer items-center p-4 tst-footer mt-20 gap-2 flex flex-col md:flex-row">

diff --git a/src/components/ui/Notifications.jsx b/src/components/ui/Notifications.jsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import moment from 'moment';
 
 import {
-  useCurrentTheme,
+  useLocalThemeModeStore,
 } from "../../store/Store";
 
 import {
@@ -20,8 +20,8 @@ const notifDate = '20240722';
 
 const Notifications = (props) => {
   const [isOpen, setIsOpen] = useState(false);
-  const { currentTheme } = useCurrentTheme();
-  const isLight = currentTheme && currentTheme.includes('light');
+  const { localThemeModeStore } = useLocalThemeModeStore();
+  const isLight = localThemeModeStore && localThemeModeStore.includes('light');
 
   const notifRead = localStorage.getItem("notifRead");
 

diff --git a/src/components/ui/SideNav.jsx b/src/components/ui/SideNav.jsx
@@ -13,22 +13,22 @@ import {
 } from '@heroicons/react/24/outline';
 
 import {
-  useCurrentTheme,
+  useLocalThemeModeStore,
 } from "../../store/Store";
 
 import StandardioLogoWhite from "../../assets/standardiologo-white.svg";
 import StandardioLogoBlack from "../../assets/standardiologo-black.svg";
 
 import Button from "./Button";
-import ThemeToggle from "./ThemeToggle";
+import ThemeButton from "./ThemeButton";
 
 const SideNav = (props) => {
   const { toggleVisible } = props;
   const location = useLocation();
   const navigate = useNavigate();
-  const { currentTheme } = useCurrentTheme();
+  const { localThemeModeStore } = useLocalThemeModeStore();
 
-  const isLight = currentTheme && currentTheme.includes('light');
+  const isLight = localThemeModeStore && localThemeModeStore.includes('light');
 
   return (
     <Menu className="p-0 text-base-content tst-sidenav">
@@ -44,7 +44,6 @@ const SideNav = (props) => {
             alt="TheStandard.io Logo"
             className="h-5"
           />
-          {/* {import.meta.env.VITE_COMPANY_DAPP_NAME || ''} */}
         </Button>
         <Button color="ghost" onClick={toggleVisible}>
           <XMarkIcon className="h-6 w-6 inline-block"/>
@@ -195,7 +194,7 @@ const SideNav = (props) => {
         </Tooltip>
       </div>
       <div className="block md:hidden self-center mt-auto pb-4">
-        <ThemeToggle className="dropdown-top" />
+        <ThemeButton />
       </div>
     </Menu>
   );

diff --git a/src/components/ui/ThemeButton.jsx b/src/components/ui/ThemeButton.jsx
@@ -0,0 +1,39 @@
+import {
+  useThemeSettingsOpenStore,
+  useLocalThemeModeStore,
+} from "../../store/Store";
+
+import Button from "./Button";
+
+import {
+  SunIcon,
+  MoonIcon,
+} from '@heroicons/react/24/solid';
+
+const ThemeButton = () => {
+  const { setThemeSettingsOpenStore } = useThemeSettingsOpenStore();
+
+  const { localThemeModeStore } = useLocalThemeModeStore();
+
+  const isLight = localThemeModeStore && localThemeModeStore.includes('light');
+
+  return (
+    <>
+      <Button
+        shape="circle"
+        color="ghost"
+        className="md:mr-2"
+        onClick={() => setThemeSettingsOpenStore(true)}
+      >
+        {isLight ? (
+          <SunIcon className="w-6 h-6"/>
+        ) : (
+          <MoonIcon className="w-6 h-6"/>
+        )}
+      </Button>
+    </>
+  )
+
+};
+
+export default ThemeButton;