bg changes

yiqu · Jul 7, 2023 · af436ca · af436ca
1 parent dc5e222
commit af436ca
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 17 deletions.
diff --git a/src/history/History.tsx b/src/history/History.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, DialogContent, Divider, LinearProgress, List, ListItem, ListItemText, Skeleton, Stack, Typography } from '@mui/material';
+import { Box, Button, DialogContent, Divider, LinearProgress, List, ListItem, ListItemText, Skeleton, Stack, Typography, useTheme } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { useGetUserHistoryQuery } from '../store/user-history/user-history.api';
 import ErrorPage from '../404/ErrorPage';
@@ -25,9 +25,8 @@ import { shortenUserAgentHash } from '../shared/utils/user-agent';
 import DialogLayout from '../shared/components/dialog/DialogLayout';
 
 
-
 function HistoryList() {
-
+  const {palette: { mode }} = useTheme();
   const { data, sortedByDate, isError, isLoading, isFetching, refetch, error } = useGetUserHistoryQuery(undefined, {
     selectFromResult: (data) => {
       const copy = produce(data.data, draft => {
@@ -133,7 +132,7 @@ function HistoryList() {
               sortedByDate.map((history: UserHistory) => (
                 <TableRow
                   key={ history.fireId }
-                  sx={ { '&:hover': {backgroundColor: GREY[300]} } }
+                  sx={ { '&:hover': { backgroundColor: mode === 'light' ? GREY[0] : '#000' } } }
                 >
                   {
                     TABLE_COLUMNS.map((col, index) => {

diff --git a/src/routes/Layout.tsx b/src/routes/Layout.tsx
@@ -22,27 +22,19 @@ const Layout = () => {
 
   return (
     <ThemeProvider theme={ theme }>
-      <Box sx={ { display: 'flex', height: '100%' } } mb={ 5 } id="main-box">
+      <Box sx={ { display: 'flex', height: '100%', bgcolor:(theme) => theme.palette.mode === 'light' ? GREY[0] : '#000' } } pb={ 5 } id="main-box">
 
-        <Box component="main" sx={ { flexGrow: 1, bgcolor:(theme) => theme.palette.mode === 'light' ? GREY[0] : null } }>
+        <Box component="main" sx={ { flexGrow: 1 } }>
 
-          <Grid container xs={ 12 } sx={ {
-            bgcolor:(theme) => theme.palette.mode === 'light' ? GREY[0] : '#000',
-            background: 'url(logo1.png)',
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: '10rem',
-            backgroundPosition: '95% 100%'
-          } }>
+          <Grid container xs={ 12 }>
             <LayoutWithGutter size='skinny'>
               <>
                 <TopNav />
-
                 <Outlet />
               </>
             </LayoutWithGutter>
-
-
           </Grid>
+
         </Box>
         <Toaster
           position="top-center"

diff --git a/src/top-nav/TopNav.tsx b/src/top-nav/TopNav.tsx
@@ -58,7 +58,7 @@ export default function TopNav() {
           <Toolbar>
             <Stack direction="row" justifyContent="center" alignItems="center" mr={ 2 }
               component={ Link } to={ "/" }>
-              <Image src="/snorlax.png" height={ '30px' } alt="logo" showLoading />
+              <Image src="/logo1.png" height={ '64px' } alt="logo" />
             </Stack>
             <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
               <Stack direction="row" justifyContent="start" alignItems="center">