frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

Dark mode refactor #98

Merged
rishighan merged 32 commits from dark-mode-refactor into main 2023-12-21 21:23:29 +00:00
Conversation 0 Commits 32 Files Changed 35 +161 -134
3 changed files with 161 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4034c4e2b4 - Show all commits

2
index.html
View File

@@ -7,7 +7,7 @@
<title>Three Two!</title>
</head>
<body>
<body class="dark:bg-slate-600">
<div id="root"></div>
<script type="module" src="/src/client/index.tsx"></script>
</body>

36
src/client/components/Import/Import.tsx
View File

@@ -129,17 +129,42 @@ export const Import = (props: IProps): ReactElement => {
}
};
return (
<div className="container">
<section className="section is-small">
<h1 className="title">Import Comics</h1>
<div>
<section>
<header className="bg-slate-200 dark:bg-slate-500">
<div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-12 lg:px-8">
<div className="sm:flex sm:items-center sm:justify-between">
<div className="text-center sm:text-left">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
Import
</h1>
<p className="mt-1.5 text-sm text-gray-500 dark:text-white">
Import comics into the ThreeTwo library.
</p>
</div>
<div className="mt-4 flex flex-col gap-4 sm:mt-0 sm:flex-row sm:items-center">
<button
className="block rounded-lg bg-indigo-600 px-5 py-3 text-sm font-medium text-white transition hover:bg-indigo-700 focus:outline-none focus:ring"
type="button"
>
Create Post
</button>
</div>
</div>
</div>
</header>
<div className="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
<article className="message is-dark">
<div className="message-body">
<p className="mb-2">
<span className="tag is-medium is-info is-light">
Import Comics
</span>
will add comics identified from the mapped folder into ThreeTwo's
database.
will add comics identified from the mapped folder into
ThreeTwo's database.
</p>
<p>
Metadata from ComicInfo.xml, if present, will also be extracted.
@@ -268,6 +293,7 @@ export const Import = (props: IProps): ReactElement => {
</table>
</>
)}
</div>
</section>
</div>
);

17
src/client/components/shared/Navbar2.tsx
View File

@@ -1,10 +1,11 @@
import React, { ReactElement, useState } from "react";
import { Link } from "react-router-dom";
import { useDarkMode } from "../../hooks/useDarkMode";
export const Navbar2 = (): ReactElement => {
const [colorTheme, setTheme] = useDarkMode();
const [darkMode, setDarkMode] = useState(false);
console.log("as", darkMode);
const toggleDarkMode = (checked) => {
setTheme(colorTheme);
setDarkMode(!darkMode);
@@ -12,7 +13,7 @@ export const Navbar2 = (): ReactElement => {
};
return (
<header className="bg-white dark:bg-gray-900 gap-8 px-5 py-5 h-18 border-b-2 dark:border-amber-100">
<header className="bg-white dark:bg-gray-900 gap-8 px-5 py-5 h-18 border-b-2 border-gray-300 dark:border-slate-200">
{/* Logo */}
<div className="mx-auto flex">
<img src="/src/client/assets/img/threetwo.png" alt="ThreeTwo!" />
@@ -34,21 +35,21 @@ export const Navbar2 = (): ReactElement => {
</li>
<li>
<a
<Link
to="/import"
className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/"
>
Import
</a>
</Link>
</li>
<li>
<a
<Link
to="/library"
className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/"
>
Library
</a>
</Link>
</li>
<li>