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
2022-11-26 13:51:56 +01:00
parent bfca70a44c
commit 8dfc89ee17
16 changed files with 618 additions and 601 deletions
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { Theme, createTheme as createMuiTheme } from '@mui/material/styles';
+
+declare module '@mui/styles/defaultTheme' {
+    interface DefaultTheme extends Theme {}
+}
+
+declare module '@mui/material/styles' {
+    interface PaletteOptions {
+        custom?: PaletteOptions['primary'];
+    }
+
+}
+
+const createTheme = (dark?: boolean) => {
+    const baseTheme = createMuiTheme({
+        palette: {
+            mode: dark ? 'dark' : 'light',
+        },
+    });
+
+    const tachideskTheme = createMuiTheme({
+        palette: {
+            custom: {
+                main: dark ? baseTheme.palette.common.black : baseTheme.palette.common.white,
+                light: dark ? baseTheme.palette.grey[900] : baseTheme.palette.grey[100],
+            },
+        },
+        components: {
+            MuiCssBaseline: {
+                styleOverrides: `
+                *::-webkit-scrollbar {
+                    width: 10px;
+                    background: ${dark ? '#222' : '#e1e1e1'};   
+                }
+                
+                *::-webkit-scrollbar-thumb {
+                    background: ${dark ? '#111' : '#aaa'};
+                    border-radius: 5px;
+                }
+            `,
+            },
+        },
+    }, baseTheme);
+
+    return tachideskTheme;
+};
+
+export default createTheme;