feat: change theme to drk/light instead of day/night (#162)

* feat: change theme to drk/light instead of day/night * refactor: add aria-label to XPTransactionList component * Refactor NavBar Links component
chain4travel · Dec 29, 2023 · 757dd0b · 757dd0b
1 parent 4599849
commit 757dd0b
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 19 deletions.
diff --git a/src/app/components/NavBar/Links.tsx b/src/app/components/NavBar/Links.tsx
@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react'
-import Tabs from '@mui/material/Tabs'
-import Tab from '@mui/material/Tab'
-import Box from '@mui/material/Box'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { RoutesConfig } from 'utils/route-paths'
+
+import Box from '@mui/material/Box'
 import { ChainType } from 'utils/types/chain-type'
-import { getChainTypeFromUrl } from 'utils/route-utils'
+import { RoutesConfig } from 'utils/route-paths'
 import { STATISTICS_LINK } from '../../../utils/types/statistics-type'
+import Tab from '@mui/material/Tab'
+import Tabs from '@mui/material/Tabs'
+import { getChainTypeFromUrl } from 'utils/route-utils'
 
 function a11yProps(index: number) {
     return {
@@ -29,7 +30,6 @@ const activeTab = (path: string): number => {
 }
 
 export default function Links() {
-
     const routes = RoutesConfig()
     const location = useLocation()
     const [value, setValue] = useState(activeTab(getChainTypeFromUrl()))
@@ -58,7 +58,6 @@ export default function Links() {
                 cursor: 'pointer',
                 width: '100%',
                 height: '48px',
-                backgroundColor: 'card.navBar',
             }}
         >
             <Tabs
@@ -92,7 +91,14 @@ export default function Links() {
                     {...a11yProps(2)}
                     sx={{ alignItems: { xs: 'baseline', sm: 'self-start' } }}
                 />
-                <Tab className="tab" value={5} disableRipple label="Statistics" {...a11yProps(5)} />
+                <Tab
+                    className="tab"
+                    value={5}
+                    disableRipple
+                    label="Statistics"
+                    {...a11yProps(5)}
+                    sx={{ alignItems: { xs: 'baseline', sm: 'self-start' } }}
+                />
             </Tabs>
         </Box>
     )

diff --git a/src/app/components/NavBar/index.tsx b/src/app/components/NavBar/index.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react'
-import { Box, Container, Toolbar, AppBar, useTheme } from '@mui/material'
-import SearchInput from './SearchInput'
+
+import { AppBar, Box, Container, Toolbar, useTheme } from '@mui/material'
+
 import Links from './Links'
+import SearchInput from './SearchInput'
 import useWidth from 'app/hooks/useWidth'
 
 export function NavBar() {
@@ -43,7 +45,6 @@ export function NavBar() {
                         sx={{
                             display: 'flex',
                             height: 'auto',
-                            backgroundColor: 'card.navBar',
                             py: '1rem',
                             px: '0rem !important',
                             justifyContent: 'space-between',

diff --git a/src/app/components/XChainPageComponents/XPTransactionList.tsx b/src/app/components/XChainPageComponents/XPTransactionList.tsx
@@ -1,7 +1,8 @@
+import { Box, Paper, Tooltip, Typography } from '@mui/material'
+
+import Icon from '@mdi/react'
 import React from 'react'
-import { Paper, Typography, Box, Tooltip } from '@mui/material'
 import ShowAllButton from '../../pages/CChainPages/LatestBlocksAndTransactionsList/ShowAllButton'
-import Icon from '@mdi/react'
 import { mdiInformationOutline } from '@mdi/js'
 
 export default function XPTransactionList({
@@ -14,6 +15,7 @@ export default function XPTransactionList({
     return (
         <Paper
             variant="outlined"
+            aria-label="transaction-list"
             sx={{
                 display: 'flex',
                 flexDirection: 'column',

diff --git a/src/styles/theme/ThemeProvider.tsx b/src/styles/theme/ThemeProvider.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useState, useMemo, useContext } from 'react'
-import { PaletteMode } from '@mui/material'
-
-import { lightTheme, darkTheme } from './themes'
-import { ThemeOptions, useTheme } from '@mui/material/styles'
 import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles'
+import React, { useContext, useEffect, useMemo, useState } from 'react'
+import { ThemeOptions, useTheme } from '@mui/material/styles'
+import { darkTheme, lightTheme } from './themes'
+
+import { PaletteMode } from '@mui/material'
 
 const getDesignTokens = (mode: PaletteMode): ThemeOptions => ({
     ...(mode === 'light' ? lightTheme : darkTheme),
@@ -18,7 +18,9 @@ export const ColorModeContext = React.createContext<{
 })
 
 export const ThemeProvider = (props: { children: React.ReactChild }) => {
-    const [mode, setMode] = useState<PaletteMode>('dark') // light or dark default mode is light
+    const [mode, setMode] = useState<PaletteMode>(
+        (localStorage.getItem('theme') as PaletteMode) || 'dark',
+    )
 
     const colorMode = useMemo(
         () => ({