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

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

@@ -129,17 +129,42 @@ export const Import = (props: IProps): ReactElement => {
} }
}; };
return ( return (
<div className="container"> <div>
<section className="section is-small"> <section>
<h1 className="title">Import Comics</h1> <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"> <article className="message is-dark">
<div className="message-body"> <div className="message-body">
<p className="mb-2"> <p className="mb-2">
<span className="tag is-medium is-info is-light"> <span className="tag is-medium is-info is-light">
Import Comics Import Comics
</span> </span>
will add comics identified from the mapped folder into ThreeTwo's will add comics identified from the mapped folder into
database. ThreeTwo's database.
</p> </p>
<p> <p>
Metadata from ComicInfo.xml, if present, will also be extracted. Metadata from ComicInfo.xml, if present, will also be extracted.
@@ -268,6 +293,7 @@ export const Import = (props: IProps): ReactElement => {
</table> </table>
</> </>
)} )}
</div>
</section> </section>
</div> </div>
); );

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

@@ -1,10 +1,11 @@
import React, { ReactElement, useState } from "react"; import React, { ReactElement, useState } from "react";
import { Link } from "react-router-dom";
import { useDarkMode } from "../../hooks/useDarkMode"; import { useDarkMode } from "../../hooks/useDarkMode";
export const Navbar2 = (): ReactElement => { export const Navbar2 = (): ReactElement => {
const [colorTheme, setTheme] = useDarkMode(); const [colorTheme, setTheme] = useDarkMode();
const [darkMode, setDarkMode] = useState(false); const [darkMode, setDarkMode] = useState(false);
console.log("as", darkMode);
const toggleDarkMode = (checked) => { const toggleDarkMode = (checked) => {
setTheme(colorTheme); setTheme(colorTheme);
setDarkMode(!darkMode); setDarkMode(!darkMode);
@@ -12,7 +13,7 @@ export const Navbar2 = (): ReactElement => {
}; };
return ( 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 */} {/* Logo */}
<div className="mx-auto flex"> <div className="mx-auto flex">
<img src="/src/client/assets/img/threetwo.png" alt="ThreeTwo!" /> <img src="/src/client/assets/img/threetwo.png" alt="ThreeTwo!" />
@@ -34,21 +35,21 @@ export const Navbar2 = (): ReactElement => {
</li> </li>
<li> <li>
<a <Link
to="/import"
className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75" className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/"
> >
Import Import
</a> </Link>
</li> </li>
<li> <li>
<a <Link
to="/library"
className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75" className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/"
> >
Library Library
</a> </Link>
</li> </li>
<li> <li>