chain4travel · Ayagoumi · Dec 29, 2023 · Dec 21, 2023 · Dec 27, 2023 · Dec 29, 2023
diff --git a/cypress/e2e/explorer_latest_transaction_list_Xchain.cy.ts b/cypress/e2e/explorer_latest_transaction_list_Xchain.cy.ts
@@ -1,5 +1,3 @@
-import { expect } from 'chai'
-
 let transactionsBody = {
     transactions: [
         {
@@ -279,7 +277,7 @@ describe('latest transaction list Xchainet', { tags: ['@explorer', '@suite'] },
                 })
         })
         cy.wait('@transactions').then(() => {
-            cy.get('.css-1voxykv-MuiPaper-root').should('be.visible')
+            cy.get('[aria-label="transaction-list"]').should('be.visible')
             cy.get(
                 ':nth-child(1) > .MuiGrid-grid-md-4 > .MuiGrid-container > .MuiGrid-grid-xs-8 > a > .MuiTypography-root',
             )

diff --git a/public/index.html b/public/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="night">
+<html lang="en">
     <head>
         <meta charset="utf-8" />
-        <link rel="manifest"  href="/manifest.json"/>
+        <link rel="manifest" href="/manifest.json" />
         <link rel="icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#000000" />
@@ -38,12 +38,12 @@
         <div id="app"></div>
     </body>
     <style>
-        html[data-theme='day'] {
+        html[data-theme='light'] {
             --background-color: #fff;
             --secondary-background-color: #f1f5f9;
             --text-color: #0f172a;
         }
-        html[data-theme='night'] {
+        html[data-theme='dark'] {
             --background-color: #0f172a;
             --secondary-background-color: #1e293b;
             --text-color: #ffffff;
@@ -101,6 +101,9 @@
         ></noscript
     >
     <script>
+        // set data-theme based on localStorage
+        const theme = localStorage.getItem('theme')
+        if (theme) document.documentElement.setAttribute('data-theme', theme)
         let intervalId
 
         function checkAppLoading() {

diff --git a/src/components/Navbar/ThemeSwitcher.tsx b/src/components/Navbar/ThemeSwitcher.tsx
@@ -1,12 +1,13 @@
-import { mdiWhiteBalanceSunny } from '@mdi/js'
-import Icon from '@mdi/react'
 import { Button, Typography, useTheme } from '@mui/material'
-import { useStore } from 'Explorer/useStore'
+import { getTheme, toggleTheme } from '../../redux/slices/theme'
+import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
+
+import Icon from '@mdi/react'
 import React from 'react'
+import { mdiWhiteBalanceSunny } from '@mdi/js'
 import store from 'wallet/store'
-import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
+import { useStore } from 'Explorer/useStore'
 import useWidth from '../../hooks/useWidth'
-import { getTheme, toggleTheme } from '../../redux/slices/theme'
 
 export default function ThemeSwitcher() {
     const { isDesktop, isMobile } = useWidth()
@@ -15,17 +16,19 @@ export default function ThemeSwitcher() {
     const currentTheme = useAppSelector(getTheme)
     const { changeTheme } = useStore()
     const auth = useAppSelector(state => state.appConfig.isAuth)
+
+    const handleChangeTheme = () => {
+        if (currentTheme === 'light') document.documentElement.setAttribute('data-theme', 'dark')
+        else document.documentElement.setAttribute('data-theme', 'light')
+        changeTheme(currentTheme === 'light' ? 'dark' : 'light')
+        store.commit('updateTheme')
+        dispatch(toggleTheme())
+    }
+
     return (
         <Button
             variant="text"
-            onClick={() => {
-                if (currentTheme === 'light')
-                    document.documentElement.setAttribute('data-theme', 'night')
-                else document.documentElement.setAttribute('data-theme', 'day')
-                changeTheme(currentTheme === 'light' ? 'dark' : 'light')
-                store.commit('updateTheme')
-                dispatch(toggleTheme())
-            }}
+            onClick={handleChangeTheme}
             startIcon={<Icon path={mdiWhiteBalanceSunny} size={1} />}
             disableRipple
             sx={{

diff --git a/src/index.css b/src/index.css
@@ -34,7 +34,7 @@
     --spacing-space-lg: 24px;
 }
 
-html[data-theme='day'] {
+html[data-theme='light'] {
     --bg: #f1f5f9;
     --bg-1: 255, 255, 255;
     --bg-light: #e2e8f0;
@@ -75,7 +75,7 @@ html[data-theme='day'] {
     --camino-error-color: rgba(229, 67, 31, 1);
 }
 
-html[data-theme='night'] {
+html[data-theme='dark'] {
     --bg: #0f172a;
     --bg-1: 36, 39, 41;
     --bg-light: #1e293b;

diff --git a/src/layout/MainLayout.tsx b/src/layout/MainLayout.tsx
@@ -104,7 +104,6 @@ const MainLayout = ({ children }) => {
                             marginLeft: '10px',
                             marginRight: '10px',
                             minHeight: '200px',
-                            backgroundColor: 'var(--camino-slate-slate-800)',
                             maxWidth: '500px',
                         }}
                     >
@@ -115,21 +114,13 @@ const MainLayout = ({ children }) => {
                                 fontSize: '1.25rem !important',
                                 mb: theme => theme.spacing(3),
                                 textAlign: 'center',
-                                color: 'var(--tailwind-slate-slate-200)',
                             }}
                         >
                             {!loadNetworks
                                 ? `Connecting to a new network, please wait.`
                                 : `Loading networks, please wait.`}
                         </Typography>
-                        <Typography
-                            variant="caption"
-                            gutterBottom
-                            sx={{
-                                textAlign: 'center',
-                                color: 'var(--tailwind-slate-slate-200)',
-                            }}
-                        >
+                        <Typography variant="caption" gutterBottom sx={{ textAlign: 'center' }}>
                             This will only take a few seconds. Please do not close the window.
                         </Typography>
                         <Box

diff --git a/src/redux/slices/theme.ts b/src/redux/slices/theme.ts
@@ -5,14 +5,13 @@ interface ITheme {
 }
 
 const getThemeFromLocalStorage = () => {
-    return 'dark'
-    // let theme = localStorage.getItem("theme") || undefined;
-
-    // if (theme) return theme;
-    // else {
-    //   localStorage.setItem("theme", JSON.stringify("light"));
-    //   return "light";
-    // }
+    let theme = localStorage.getItem('theme') || undefined
+
+    if (theme) return theme
+    else {
+        localStorage.setItem('theme', JSON.stringify('light'))
+        return 'light'
+    }
 }
 
 let initialState: ITheme = {