minor theme fixes

src/renderer/components/about/About.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 const { ipcRenderer } = require('electron');
-import { Title, Group } from '@mantine/core';
+import { Group } from '@mantine/core';
 import packageJson from '../../../../package.json';
 import ipcChannels from '@/common/constants/ipcChannels.json';
 import { IconGitFork, IconHome, IconNotebook, IconScale } from '@tabler/icons';

src/renderer/components/downloads/DeleteDownloadsModal.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Group } from '@mantine/core';
+import DefaultModal from '../general/DefaultModal';
+import DefaultText from '../general/DefaultText';
+import DefaultButton from '../general/DefaultButton';
+
+type Props = {
+  count: number;
+  showing: boolean;
+  deleteFunc: () => void;
+  close: () => void;
+};
+
+const DeleteDownloadsModal: React.FC<Props> = (props: Props) => {
+  const onDelete = () => {
+    props.deleteFunc();
+    props.close();
+  };
+
+  return (
+    <DefaultModal opened={props.showing} title="Deleting downloaded chapters" onClose={props.close}>
+      <DefaultText size="sm" mb="sm">
+        Are you sure you want to delete {props.count} downloaded chapters?
+      </DefaultText>
+      <Group justify="flex-end" mt="sm">
+        <DefaultButton onClick={props.close}>Cancel</DefaultButton>
+        <DefaultButton oc="red" onClick={onDelete}>
+          Delete
+        </DefaultButton>
+      </Group>
+    </DefaultModal>
+  );
+};
+
+export default DeleteDownloadsModal;

src/renderer/components/downloads/MyDownloads.tsx

@@ -4,7 +4,6 @@ const { ipcRenderer } = require('electron');
 import { useRecoilValue } from 'recoil';
 import { Accordion, Badge, Group, Stack } from '@mantine/core';
 import { IconTrash } from '@tabler/icons';
-import { openConfirmModal } from '@mantine/modals';
 import ipcChannels from '@/common/constants/ipcChannels.json';
 import library from '@/renderer/services/library';
 import { customDownloadsDirState } from '@/renderer/state/settingStates';
@@ -14,13 +13,15 @@ import DefaultCheckbox from '../general/DefaultCheckbox';
 import DefaultText from '../general/DefaultText';
 import DefaultButton from '../general/DefaultButton';
 import DefaultTitle from '../general/DefaultTitle';
+import DeleteDownloadsModal from './DeleteDownloadsModal';
 
 const defaultDownloadsDir = await ipcRenderer.invoke(ipcChannels.GET_PATH.DEFAULT_DOWNLOADS_DIR);
 
 const MyDownloads: React.FC = () => {
   const [seriesList, setSeriesList] = useState<Series[]>([]);
   const [chapterLists, setChapterLists] = useState<{ [key: string]: Chapter[] }>({});
   const [checkedChapters, setCheckedChapters] = useState<string[]>([]);
+  const [showingDeleteModal, setShowingDeleteModal] = useState(false);
   const customDownloadsDir = useRecoilValue(customDownloadsDirState);
 
   const loadDownloads = async () => {
@@ -71,21 +72,7 @@ const MyDownloads: React.FC = () => {
     const count = new Set(checkedChapters).size;
 
     if (count > 1) {
-      openConfirmModal({
-        title: 'Deleting downloaded chapters',
-        children: (
-          <DefaultText size="sm">
-            Are you sure you want to delete{' '}
-            <DefaultText c="teal" component="span" fw={700}>
-              {count}
-            </DefaultText>{' '}
-            downloaded chapters?
-          </DefaultText>
-        ),
-        labels: { confirm: 'Delete', cancel: 'Cancel' },
-        confirmProps: { color: 'red' },
-        onConfirm: deleteChecked,
-      });
+      setShowingDeleteModal(true);
     } else {
       deleteChecked();
     }
@@ -146,6 +133,12 @@ const MyDownloads: React.FC = () => {
 
   return (
     <>
+      <DeleteDownloadsModal
+        count={checkedChapters.length}
+        deleteFunc={deleteChecked}
+        showing={showingDeleteModal}
+        close={() => setShowingDeleteModal(false)}
+      />
       {renderHeader()}
       {seriesList.length === 0 || Object.keys(chapterLists).length === 0 ? (
         <DefaultText>

src/renderer/components/library/Library.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Series } from '@tiyo/common';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import { ScrollArea, Text } from '@mantine/core';
+import { ScrollArea } from '@mantine/core';
 import LibraryControlBar from './LibraryControlBar';
 import { LibrarySort, LibraryView, ProgressFilter } from '@/common/models/types';
 import {
@@ -25,6 +25,7 @@ import LibraryList from './LibraryList';
 import library from '@/renderer/services/library';
 import EditCategoriesModal from './EditCategoriesModal';
 import LibraryControlBarMultiSelect from './LibraryControlBarMultiSelect';
+import DefaultText from '../general/DefaultText';
 
 type Props = unknown;
 
@@ -128,19 +129,19 @@ const Library: React.FC<Props> = () => {
 
   const renderEmptyMessage = () => {
     return (
-      <Text ta="center" style={{ paddingTop: '30vh' }}>
+      <DefaultText ta="center" style={{ paddingTop: '30vh' }}>
         Your library is empty. Install{' '}
-        <Text component="span" c="violet" fw={700}>
+        <DefaultText component="span" c="violet" fw={700}>
           Plugins
-        </Text>{' '}
+        </DefaultText>{' '}
         from the tab on the left,
         <br />
         and then go to{' '}
-        <Text component="span" c="teal" fw={700}>
+        <DefaultText component="span" c="teal" fw={700}>
           Add Series
-        </Text>{' '}
+        </DefaultText>{' '}
         to start building your library.
-      </Text>
+      </DefaultText>
     );
   };
 

src/renderer/index.tsx

@@ -10,6 +10,7 @@ import { MantineProvider } from '@mantine/core';
 import { ErrorBoundary } from './components/general/ErrorBoundary';
 import { themeState } from './state/settingStates';
 import { themeProps, THEMES } from './util/themes';
+import { Theme } from '@/common/models/types';
 
 const main = document.createElement('main');
 document.body.appendChild(main);
@@ -18,8 +19,11 @@ const root = createRoot(main);
 function Root() {
   const theme = useRecoilValue(themeState);
 
+  // TODO hack to ignore some remaning theme changes
+  const forceColorScheme = theme === Theme.Light ? 'light' : 'dark';
+
   return (
-    <MantineProvider theme={THEMES[theme]} forceColorScheme="dark">
+    <MantineProvider theme={THEMES[theme]} forceColorScheme={forceColorScheme}>
       <header id="titlebar">
         <Titlebar />
       </header>

src/renderer/services/ipc.tsx

@@ -99,7 +99,7 @@ export const createRendererIpcHandlers = () => {
             Houdoku v{updateInfo.version} was released on{' '}
             {new Date(updateInfo.releaseDate).toLocaleDateString()}.
           </Text>
-          <Box bg={'dark.8'} p="xs">
+          <Box p="xs">
             <Text size="sm">
               {parse(updateInfo.releaseNotes as string, {
                 transform(reactNode) {