update theme component

massalabs · Jun 16, 2023 · 4ed7923 · 4ed7923
1 parent 145d124
commit 4ed7923
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 14 deletions.
diff --git a/src/components/Icons/Svg/Massa/StationLogo.tsx b/src/components/Icons/Svg/Massa/StationLogo.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import { ComponentPropsWithoutRef } from 'react';
 
 interface SVGProps extends ComponentPropsWithoutRef<'div'> {
-  theme?: 'light' | 'dark' | undefined;
+  theme?: 'theme-light' | 'theme-dark' | undefined;
 }
 
 /* eslint-disable max-len */
@@ -73,9 +73,9 @@ function DarkLogo() {
 /* eslint-enable max-len */
 
 export function StationLogo(props: SVGProps) {
-  let { theme = 'dark', ...rest } = props;
+  let { theme = 'theme-dark', ...rest } = props;
 
-  const isDark = theme === 'dark';
+  const isDark = theme === 'theme-dark';
 
   return (
     <div

diff --git a/src/components/Icons/Svg/SvgIcon.stories.tsx b/src/components/Icons/Svg/SvgIcon.stories.tsx
@@ -20,9 +20,9 @@ export const _MassaWallet = {
 export const _StationLogo = {
   render: () => (
     <>
-      <StationLogo theme="dark" />
+      <StationLogo theme="theme-dark" />
       <br />
-      <StationLogo theme="light" />
+      <StationLogo theme="theme-light" />
     </>
   ),
 };
diff --git a/src/components/LayoutStation/LayoutStation.tsx b/src/components/LayoutStation/LayoutStation.tsx
@@ -20,9 +20,12 @@ export function LayoutStation({ ...props }) {
   const { children, navigator, overwrittenTheme, onSetTheme, customClass } =
     props;
 
-  const [storedTheme] = useLocalStorage<string>('massa-station-theme', 'light');
+  const [storedTheme] = useLocalStorage<string>(
+    'massa-station-theme',
+    'theme-dark',
+  );
   const [selectedTheme, setSelectedTheme] = useState(
-    overwrittenTheme || storedTheme || 'light',
+    overwrittenTheme || storedTheme || 'theme-dark',
   );
 
   function handleSetTheme(theme: string) {

diff --git a/src/components/ThemeMode/ThemeMode.tsx b/src/components/ThemeMode/ThemeMode.tsx
@@ -2,31 +2,35 @@
 // @ts-ignore
 import React from 'react';
 
+import { useState } from 'react';
 import { FiMoon, FiSun } from 'react-icons/fi';
 import { useLocalStorage } from '../../util/useLocalStorage';
-import { ComponentPropsWithoutRef } from 'react';
 
-interface ThemeProps extends ComponentPropsWithoutRef<'div'> {
+interface ThemeProps {
   onSetTheme?: (theme: string) => void;
 }
 
 export function ThemeMode(props: ThemeProps) {
   let { onSetTheme } = props;
 
-  const [theme, setTheme] = useLocalStorage<string>(
+  const [storedTheme, setStoredTheme] = useLocalStorage<string>(
     'massa-station-theme',
     'theme-dark',
   );
+  const [theme, setTheme] = useState(storedTheme || 'theme-dark');
 
   function handleClick() {
-    setTheme(theme === 'theme-dark' ? 'theme-light' : 'theme-dark');
+    const newTheme = theme === 'theme-light' ? 'theme-dark' : 'theme-light';
 
-    onSetTheme?.(theme);
+    setTheme(newTheme);
+    setStoredTheme(newTheme);
+
+    onSetTheme?.(newTheme);
   }
 
   const themeIcons = {
-    dark: <FiSun className="h-8 w-8" />,
-    light: <FiMoon className="h-8 w-8" />,
+    'theme-dark': <FiSun className="h-8 w-8" />,
+    'theme-light': <FiMoon className="h-8 w-8" />,
   };
 
   return (