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/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