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/manga/ChapterCard.tsx

@@ -16,8 +16,7 @@ import Download from '@mui/icons-material/Download';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import RemoveDone from '@mui/icons-material/RemoveDone';
 import {
-    LinearProgress,
-    Checkbox, ListItemIcon, ListItemText, Stack,
+    CardActionArea, Checkbox, ListItemIcon, ListItemText, Stack,
 } from '@mui/material';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
@@ -26,6 +25,7 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
+import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import client from 'util/client';
@@ -107,21 +107,12 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
                 sx={{
                     position: 'relative',
                     margin: 1,
-                    ':hover': {
-                        backgroundColor: 'action.hover',
-                        transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-                        cursor: 'pointer',
-                    },
-                    ':active': {
-                        backgroundColor: 'action.selected',
-                        transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-                    },
                 }}
             >
-                <Link
+                <CardActionArea
+                    component={Link}
                     to={{ pathname: `/manga/${chapter.mangaId}/chapter/${chapter.index}`, state: { backLink: BACK } }}
                     style={{
-                        textDecoration: 'none',
                         color: theme.palette.text[chapter.read ? 'disabled' : 'primary'],
                     }}
                     onClick={handleClick}
@@ -148,10 +139,11 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
                             <Typography variant="caption">
                                 {dateStr}
                                 {isDownloaded && ' • Downloaded'}
-                                {dc && ` • Downloading (${(dc.progress * 100).toFixed(2)}%)`}
                             </Typography>
                         </Stack>
 
+                        {dc && <DownloadStateIndicator download={dc} />}
+
                         {selected === null ? (
                             <IconButton aria-label="more" onClick={handleMenuClick} size="large">
                                 <MoreVertIcon />
@@ -160,17 +152,7 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
                             <Checkbox checked={selected} />
                         )}
                     </CardContent>
-                </Link>
-                {dc != null && (
-                    <LinearProgress
-                        sx={{
-                            position: 'absolute', bottom: 0, width: '100%', opacity: 0.5,
-                        }}
-                        variant="determinate"
-                        value={dc.progress * 100}
-                        color="inherit"
-                    />
-                )}
+                </CardActionArea>
                 <Menu
                     anchorEl={anchorEl}
                     keepMounted

src/components/manga/ChaptersToolbarMenu.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import FilterList from '@mui/icons-material/FilterList';
-import { Badge, IconButton } from '@mui/material';
+import { IconButton } from '@mui/material';
 import * as React from 'react';
 import ChapterOptions from './ChapterOptions';
 import { isFilterActive } from './util';
@@ -23,9 +23,7 @@ const ChaptersToolbarMenu = ({ options, optionsDispatch }: IProps) => {
     return (
         <>
             <IconButton onClick={() => setOpen(true)}>
-                <Badge color="primary" variant="dot" invisible={!isFiltered}>
-                    <FilterList />
-                </Badge>
+                <FilterList color={isFiltered ? 'warning' : undefined} />
             </IconButton>
             <ChapterOptions
                 open={open}