From af436ca03399f58d1ea5cb5967f1c1eb2327a069 Mon Sep 17 00:00:00 2001
From: Kevin Qu <kevinqu88@gmail.com>
Date: Fri, 7 Jul 2023 00:12:18 -0400
Subject: [PATCH] bg changes

---
 src/history/History.tsx |  7 +++----
 src/routes/Layout.tsx   | 16 ++++------------
 src/top-nav/TopNav.tsx  |  2 +-
 3 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/history/History.tsx b/src/history/History.tsx
index 18cb395..0f49cb8 100644
--- 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
index 96c35dd..2bcc7e1 100644
--- 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
index 0528fca..178ce40 100644
--- 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">