Refactor/download queue and cleanup visuals overall (#202)

* Move context providers and configuration providers to separate component, extract theme to separate file

* Use custom palette color instead of direct colors

* Replace different clicable things with CardActionArea to get transition and links

* Refactor DownloadQueue, update layout, unify all the download progress indicators

* Unify active filter indicator

* Use divider instead of hr

* Fix background color in extensions light theme

* Fix thumbnail overlay in library screen list view

* Don't show download button on downloaded updates

src/components/navbar/DefaultNavBar.tsx

@@ -25,7 +25,6 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import ArrowBack from '@mui/icons-material/ArrowBack';
 import { Link, useHistory } from 'react-router-dom';
 import NavBarContext from 'components/context/NavbarContext';
-import DarkTheme from 'components/context/DarkTheme';
 import ExtensionOutlinedIcon from 'components/util/CustomExtensionOutlinedIcon';
 import { Box } from '@mui/system';
 import { createPortal } from 'react-dom';
@@ -82,7 +81,6 @@ const navbarItems: Array<NavbarItem> = [
 export default function DefaultNavBar() {
     const { title, action, override } = useContext(NavBarContext);
     const backTo = useBackTo();
-    const { darkTheme } = useContext(DarkTheme);
 
     const theme = useTheme();
     const history = useHistory();
@@ -109,7 +107,7 @@ export default function DefaultNavBar() {
 
     return (
         <Box sx={{ flexGrow: 1 }}>
-            <AppBar position="fixed" color={darkTheme ? 'default' : 'primary'}>
+            <AppBar position="fixed" color="default">
                 <Toolbar>
                     {!isMainRoute && (
                         <IconButton

src/components/navbar/ReaderNavBar.tsx

@@ -17,7 +17,7 @@ import { useHistory, Link } from 'react-router-dom';
 import Slide from '@mui/material/Slide';
 import Fade from '@mui/material/Fade';
 import Zoom from '@mui/material/Zoom';
-import { Switch } from '@mui/material';
+import { Divider, Switch } from '@mui/material';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import MenuItem from '@mui/material/MenuItem';
@@ -39,8 +39,7 @@ const Root = styled('div')(({ theme }) => ({
     backgroundColor: theme.palette.background.default,
 
     '& header': {
-        backgroundColor:
-        theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
+        backgroundColor: theme.palette.action.hover,
         display: 'flex',
         alignItems: 'center',
         minHeight: '64px',
@@ -63,12 +62,6 @@ const Root = styled('div')(({ theme }) => ({
             flexGrow: 1,
         },
     },
-    '& hr': {
-        margin: '0 16px',
-        height: '1px',
-        border: '0',
-        backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
-    },
 }));
 
 const Navigation = styled('div')({
@@ -106,9 +99,9 @@ const OpenDrawerButton = styled(IconButton)(({ theme }) => ({
     height: '40px',
     width: '40px',
     borderRadius: 5,
-    backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white',
+    backgroundColor: theme.palette.custom.main,
     '&:hover': {
-        backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[100],
+        backgroundColor: theme.palette.custom.light,
     },
 }));
 
@@ -313,7 +306,7 @@ export default function ReaderNavBar(props: IProps) {
                             </ListItem>
                         </List>
                     </Collapse>
-                    <hr />
+                    <Divider sx={{ my: 1, mx: 2 }} />
                     <Navigation>
                         <span>
                             {`Currently on page ${curPage + 1} of ${chapter.pageCount}`}
@@ -357,7 +350,6 @@ export default function ReaderNavBar(props: IProps) {
                 <Fade in={!hideOpenButton}>
                     <OpenDrawerButton
                         edge="start"
-                        color="inherit"
                         aria-label="menu"
                         disableRipple
                         disableFocusRipple

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -14,7 +14,7 @@ import { useTheme } from '@mui/material/styles';
 const SideNavBarContainer = styled('div')(({ theme }) => ({
     height: '100vh',
     width: theme.spacing(8),
-    backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+    backgroundColor: theme.palette.custom,
     position: 'fixed',
     top: 0,
     left: 0,

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -16,7 +16,7 @@ const BottomNavContainer = styled('div')(({ theme }) => ({
     left: 0,
     height: theme.spacing(7),
     width: '100vw',
-    backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+    backgroundColor: theme.palette.custom.light,
     position: 'fixed',
     display: 'flex',
     flexDirection: 'row',