Fix/light mode (#249)

app/error/Main.tsx

@@ -10,7 +10,7 @@ const Main = () => {
     <div className="relative space-y-12 z-50 w-96 -translate-x-96">
       <div>
         <Typography darkMode="text-white" isBold color="text-white" type="text-h2">{t('errorPage.title')}</Typography>
-        <Typography color="text-white" darkMode="text-white" type="text-subtitle3">{t('error.title')}</Typography>
+        <Typography color="text-white" darkMode="text-white" type="text-subtitle3">{t('errorPage.subText')}</Typography>
       </div>
       <div>
         <Button href="/" type={ButtonFace.SECONDARY}>{t('errorPage.cta')}</Button>

app/setup/health-check/Main.tsx

@@ -39,6 +39,7 @@ const Main: FC<MainProps> = ({ initNodeHealth, beaconSpec, initSyncData }) => {
 
   useEffect(() => {
     setHealthCheck(true)
+    document.documentElement.classList.remove('dark');
   }, [])
 
   const nextUrl = beaconPercentage >= 95 ? '/dashboard' : '/setup/node-sync'

app/setup/node-sync/Main.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next'
 import BeaconSyncCard from '../../../src/components/BeaconSyncCard/BeaconSyncCard'
 import SyncDisclosure from '../../../src/components/Disclosures/SyncDisclosure'
@@ -28,6 +28,10 @@ const Main: FC<MainProps> = ({ initSyncData, beaconSpec }) => {
 
   const { beaconSync, executionSync } = syncData
 
+  useEffect(() => {
+    document.documentElement.classList.remove('dark');
+  }, [])
+
   return (
     <div className='relative h-screen w-screen overflow-hidden flex'>
       <ValidatorSetupLayout

src/components/AccountEarnings/EarningsLayout.tsx

@@ -11,7 +11,7 @@ const EarningsLayout: FC<EarningsLayoutProps> = ({ children, className }) => {
     <div className={`${className || ''} w-full relative overflow-hidden`}>
       <div className='w-full h-full bg-primaryBright absolute left-0 top-0 blur-3xl origin-center -rotate-45 translate-x-36 scale-125' />
       <div className='z-20 w-full h-36 absolute left-0 bottom-0 bg-gradient-to-t dark:from-dark750 from-white to-transparent' />
-      <AnimatedHeader speed={.1} name="a_earnings" className="w-full h-full absolute left-0 top-0"/>
+      <AnimatedHeader speed={.1} name="a_earnings" color="#ffffff" className="w-full h-full absolute left-0 top-0"/>
       {children}
     </div>
   )

src/components/AnimatedHeader/AnimatedHeader.tsx

@@ -1,14 +1,17 @@
 import { FC, useEffect } from 'react';
-import useDivDimensions from "../../hooks/useDivDimensions";
+import { UiMode } from '../../constants/enums';
+import useDivDimensions from '../../hooks/useDivDimensions';
+import useUiMode from '../../hooks/useUiMode';
 import Topography, { TopographyCanvasProps } from '../Topography/Topography';
 
 export interface AnimatedHeaderProps extends Omit<TopographyCanvasProps, 'height' | 'width'> {
   className: string
   isReady?: boolean | undefined
 }
 
-const AnimatedHeader:FC<AnimatedHeaderProps> = ({className, isReady, speed, name, animate = true}) => {
+const AnimatedHeader:FC<AnimatedHeaderProps> = ({className, isReady, speed, name, color, animate = true}) => {
   const { ref, dimensions, measure } = useDivDimensions()
+  const {mode} = useUiMode()
 
   useEffect(() => {
     if(isReady) {
@@ -17,12 +20,13 @@ const AnimatedHeader:FC<AnimatedHeaderProps> = ({className, isReady, speed, name
   }, [isReady, measure])
 
   const validDimensions = (dimensions?.width || 0) > 0 && (dimensions?.height || 0) > 0;
+  const fallbackColor = mode === UiMode.DARK ? "#ffffff" : '#A9A9A9'
 
   return (
     <div ref={ref} className={className}>
       <div className="w-full h-full opacity-20 -translate-y-1/2">
         {dimensions && validDimensions && (
-          <Topography speed={speed} height={dimensions.height * 2} width={dimensions.width} name={name} animate={animate}/>
+          <Topography speed={speed} height={dimensions.height * 2} width={dimensions.width} color={color || fallbackColor} name={name} animate={animate}/>
         )}
       </div>
     </div>

src/components/AuthPrompt/AuthPrompt.tsx

@@ -16,20 +16,21 @@ export interface AuthModalProps extends Omit<AuthFormProps, 'children'>{
   isNamePrompt?: boolean
   onClose?: () => void
   mode: UiMode
+  maxHeight?: string
 }
 
-const AuthPrompt:FC<AuthModalProps> = ({onSubmit, isVisible, isLoading, mode, onClose, isNamePrompt}) => {
+const AuthPrompt:FC<AuthModalProps> = ({onSubmit, isVisible, isLoading, mode, onClose, isNamePrompt, maxHeight = '550px'}) => {
   const {t} = useTranslation()
   const [isReady, setReady] = useState(false)
 
   const showAnim = () => setReady(true)
 
   return (
-    <RodalModal onAnimationEnd={showAnim as any} styles={{ maxWidth: '500px', height: 'auto', maxHeight: '550px' }} onClose={onClose} isVisible={isVisible}>
+    <RodalModal onAnimationEnd={showAnim as any} styles={{ maxWidth: '500px', height: 'auto', maxHeight }} onClose={onClose} isVisible={isVisible}>
       <AuthenticationForm isVisible={isVisible} onSubmit={onSubmit}>
         {({control, isValid}) => (
           <div>
-            <AnimatedHeader speed={.1} name="auth-prompt" isReady={isReady} className="w-full h-24 overflow-hidden bg-gradient-to-r from-primary to-tertiary"/>
+            <AnimatedHeader speed={.1} name="auth-prompt" isReady={isReady} color="#ffffff" className="w-full h-24 overflow-hidden bg-gradient-to-r from-primary to-tertiary"/>
             <div className="p-6 relative">
               <div className="rounded-full p-1 absolute left-1/2 -translate-x-1/2 flex item-center justify-center top-0 -translate-y-1/2 bg-gradient-to-r from-primary to-tertiary">
                 <Lighthouse className="text-white w-18 h-18"/>

src/components/DashboardWrapper/DashboardWrapper.tsx

@@ -1,8 +1,9 @@
-import React, { FC, MutableRefObject, ReactNode, useEffect } from 'react';
+import React, { FC, MutableRefObject, ReactNode, useEffect, useState } from 'react';
 import { useSetRecoilState } from 'recoil';
-import { Storage, UiMode } from '../../constants/enums';
+import { Storage } from '../../constants/enums';
 import useLocalStorage from '../../hooks/useLocalStorage';
-import { beaconNodeSpec, uiMode } from '../../recoil/atoms';
+import useUiMode from '../../hooks/useUiMode';
+import { beaconNodeSpec } from '../../recoil/atoms';
 import { BeaconNodeSpecResults, SyncData } from '../../types/beacon';
 import { Diagnostics } from '../../types/diagnostic';
 import { UiThemeStorage } from '../../types/storage';
@@ -33,16 +34,18 @@ const DashboardWrapper: FC<DashboardWrapperProps> = ({
   const {
     beaconSync: { isSyncing },
   } = syncData
-  const setUiTheme = useSetRecoilState(uiMode)
+  const [isReady, setReady] = useState(false)
+  const { toggleUiMode } = useUiMode()
   const setBeaconSpec = useSetRecoilState(beaconNodeSpec)
   const [uiThemeStorage] = useLocalStorage<UiThemeStorage>(Storage.UI, undefined)
 
   useEffect(() => {
-    setUiTheme(uiThemeStorage || UiMode.LIGHT)
-    if(uiThemeStorage === UiMode.DARK) {
-      document.body.style.backgroundColor = '#1E1E1E';
+    if(isReady) {
+      toggleUiMode(uiThemeStorage)
     }
-  }, [uiThemeStorage, setUiTheme])
+
+    setReady(true)
+  }, [isReady, setReady])
 
   useEffect(() => {
     setBeaconSpec(beaconSpec)

src/components/SideBar/SideBar.tsx

@@ -65,7 +65,7 @@ const SideBar = () => {
               </SideItem>
             ))}
             <div className='w-full h-6 flex items-center justify-center'>
-              <UiModeIcon onClick={toggleUiMode} mode={mode} />
+              <UiModeIcon onClick={toggleUi} mode={mode} />
             </div>
           </ul>
         </div>

src/components/ValidatorDetailTable/ValidatorDetailTable.tsx

@@ -153,28 +153,28 @@ export const ValidatorDetailTable: FC<ValidatorDetailTableProps> = ({
               {income.toFixed(4)}
             </Typography>
           </div>
-          <div className='w-20 @1600:w-28 py-4 px-6 opacity-20'>
-            <Typography color='text-dark400' type='text-caption1'>
+          <div className='w-20 @1600:w-28 py-4 px-6 opacity-40'>
+            <Typography color='text-darkFull' darkMode="dark:text-dark400" type='text-caption1'>
               -
             </Typography>
           </div>
-          <div className='w-20 @1600:w-28 py-4 px-6 opacity-20'>
-            <Typography color='text-dark400' type='text-caption1'>
+          <div className='w-20 @1600:w-28 py-4 px-6 opacity-40'>
+            <Typography color='text-darkFull' darkMode="dark:text-dark400" type='text-caption1'>
               -
             </Typography>
           </div>
-          <div className='w-20 @1600:w-28 py-4 px-6 opacity-20'>
-            <Typography color='text-dark400' type='text-caption1'>
+          <div className='w-20 @1600:w-28 py-4 px-6 opacity-40'>
+            <Typography color='text-darkFull' darkMode="dark:text-dark400" type='text-caption1'>
               -
             </Typography>
           </div>
-          <div className='w-12 @1600:w-20 py-4 px-6 opacity-20'>
-            <Typography color='text-dark400' type='text-caption1'>
+          <div className='w-12 @1600:w-20 py-4 px-6 opacity-40'>
+            <Typography color='text-darkFull' darkMode="dark:text-dark400" type='text-caption1'>
               -
             </Typography>
           </div>
-          <div className='w-24 @1600:w-32 py-4 px-6 opacity-20'>
-            <Typography color='text-dark400' type='text-caption1'>
+          <div className='w-24 @1600:w-32 py-4 px-6 opacity-40'>
+            <Typography color='text-darkFull' darkMode="dark:text-dark400" type='text-caption1'>
               -
             </Typography>
           </div>

src/components/ValidatorModal/views/ValidatorExit.tsx

@@ -51,7 +51,6 @@ const ValidatorExit: FC<ValidatorExitProps> = ({ validator, validatorEpochData,
     }
     displayToast(message, ToastType.ERROR)
     setPromptLoading(false)
-    // setAuthPrompt(false)
     setLoading(false)
   }
 
@@ -101,7 +100,7 @@ const ValidatorExit: FC<ValidatorExitProps> = ({ validator, validatorEpochData,
   return (
     <>
       <div className='pt-2 exit-validator-modal relative'>
-        <AuthPrompt mode={mode} isLoading={isPromptLoading} onClose={closePrompt} isVisible={isAuthPrompt} onSubmit={confirmExit}/>
+        <AuthPrompt mode={mode} isLoading={isPromptLoading} maxHeight="400px" onClose={closePrompt} isVisible={isAuthPrompt} onSubmit={confirmExit}/>
         <div className='py-4 px-6 flex justify-between'>
           <div className='space-x-4 flex items-center'>
             <i onClick={viewDetails} className='bi-chevron-left dark:text-dark300 cursor-pointer' />

src/hooks/useUiMode.ts

@@ -4,13 +4,12 @@ import { uiMode } from '../recoil/atoms';
 import { UiThemeStorage } from '../types/storage';
 import useLocalStorage from './useLocalStorage';
 
-const useUiMode = (): { mode: UiMode; toggleUiMode: () => void } => {
+const useUiMode = (): { mode: UiMode; toggleUiMode: (uiMode?: UiMode) => void } => {
   const [mode, setMode] = useRecoilState(uiMode)
   const [, setThemeStorage] = useLocalStorage<UiThemeStorage>(Storage.UI, undefined)
 
-  const toggleUiMode = () => {
-    const theme = mode === UiMode.LIGHT ? UiMode.DARK : UiMode.LIGHT
-
+  const toggleUiMode = (uiMode?: UiMode | undefined) => {
+    const theme = uiMode || (mode === UiMode.LIGHT ? UiMode.DARK : UiMode.LIGHT)
     if (theme === UiMode.DARK) {
       document.documentElement.classList.add('dark');
       document.body.style.backgroundColor = '#1E1E1E';