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

🌜 Added Dark mode to the body

Browse Source
This commit is contained in:
Rishi Ghan
2023-12-05 05:24:33 -05:00
parent 9c4f2ae9b0
commit 4034c4e2b4
3 changed files with 161 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>

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

@@ -129,145 +129,171 @@ 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">
<article className="message is-dark"> <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-12 lg:px-8">
<div className="message-body"> <div className="sm:flex sm:items-center sm:justify-between">
<p className="mb-2"> <div className="text-center sm:text-left">
<span className="tag is-medium is-info is-light"> <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
Import Comics Import
</span> </h1>
will add comics identified from the mapped folder into ThreeTwo's
database.
</p>
<p>
Metadata from ComicInfo.xml, if present, will also be extracted.
</p>
<p>
This process could take a while, if you have a lot of comics, or
are importing over a network connection.
</p>
</div>
</article>
<p className="buttons">
<button
className={
importJobQueue.status === "drained" ||
importJobQueue.status === undefined
? "button is-medium"
: "button is-loading is-medium"
}
onClick={() => {
initiateImport();
importJobQueue.setStatus("running");
}}
>
<span className="icon">
<i className="fas fa-file-import"></i>
</span>
<span>Start Import</span>
</button>
</p>
{importJobQueue.status !== "drained" && <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
!isUndefined(importJobQueue.status) && ( 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.
</p>
<p>
Metadata from ComicInfo.xml, if present, will also be extracted.
</p>
<p>
This process could take a while, if you have a lot of comics, or
are importing over a network connection.
</p>
</div>
</article>
<p className="buttons">
<button
className={
importJobQueue.status === "drained" ||
importJobQueue.status === undefined
? "button is-medium"
: "button is-loading is-medium"
}
onClick={() => {
initiateImport();
importJobQueue.setStatus("running");
}}
>
<span className="icon">
<i className="fas fa-file-import"></i>
</span>
<span>Start Import</span>
</button>
</p>
{importJobQueue.status !== "drained" &&
!isUndefined(importJobQueue.status) && (
<>
<table className="table">
<thead>
<tr>
<th>Completed Jobs</th>
<th>Failed Jobs</th>
<th>Queue Controls</th>
<th>Queue Status</th>
</tr>
</thead>
<tbody>
<tr>
<th>
{importJobQueue.successfulJobCount > 0 && (
<div className="box has-background-success-light has-text-centered">
<span className="is-size-2 has-text-weight-bold">
{importJobQueue.successfulJobCount}
</span>
</div>
)}
</th>
<td>
{importJobQueue.failedJobCount > 0 && (
<div className="box has-background-danger has-text-centered">
<span className="is-size-2 has-text-weight-bold">
{importJobQueue.failedJobCount}
</span>
</div>
)}
</td>
<td>{renderQueueControls(importJobQueue.status)}</td>
<td>
{importJobQueue.status !== undefined ? (
<span className="tag is-warning">
{importJobQueue.status}
</span>
) : null}
</td>
</tr>
</tbody>
</table>
Imported{" "}
<span className="has-text-weight-bold">
{importJobQueue.mostRecentImport}
</span>
</>
)}
{/* Past imports */}
{!isLoading && !isEmpty(data?.data) && (
<> <>
<table className="table"> <h3 className="subtitle is-4 mt-5">Past Imports</h3>
<table className="table is-striped">
<thead> <thead>
<tr> <tr>
<th>Completed Jobs</th> <th>Time Started</th>
<th>Failed Jobs</th> <th>Session Id</th>
<th>Queue Controls</th> <th>Imported</th>
<th>Queue Status</th> <th>Failed</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> {data?.data.map((jobResult, id) => {
<th> return (
{importJobQueue.successfulJobCount > 0 && ( <tr key={id}>
<div className="box has-background-success-light has-text-centered"> <td>
<span className="is-size-2 has-text-weight-bold"> {format(
{importJobQueue.successfulJobCount} new Date(jobResult.earliestTimestamp),
"EEEE, hh:mma, do LLLL Y",
)}
</td>
<td>
<span className="tag is-warning">
{jobResult.sessionId}
</span> </span>
</div> </td>
)} <td>
</th> <span className="tag is-success">
<td> {jobResult.completedJobs}
{importJobQueue.failedJobCount > 0 && (
<div className="box has-background-danger has-text-centered">
<span className="is-size-2 has-text-weight-bold">
{importJobQueue.failedJobCount}
</span> </span>
</div> </td>
)} <td>
</td> <span className="tag is-danger">
{jobResult.failedJobs}
<td>{renderQueueControls(importJobQueue.status)}</td> </span>
<td> </td>
{importJobQueue.status !== undefined ? ( </tr>
<span className="tag is-warning"> );
{importJobQueue.status} })}
</span>
) : null}
</td>
</tr>
</tbody> </tbody>
</table> </table>
Imported{" "}
<span className="has-text-weight-bold">
{importJobQueue.mostRecentImport}
</span>
</> </>
)} )}
</div>
{/* Past imports */}
{!isLoading && !isEmpty(data?.data) && (
<>
<h3 className="subtitle is-4 mt-5">Past Imports</h3>
<table className="table is-striped">
<thead>
<tr>
<th>Time Started</th>
<th>Session Id</th>
<th>Imported</th>
<th>Failed</th>
</tr>
</thead>
<tbody>
{data?.data.map((jobResult, id) => {
return (
<tr key={id}>
<td>
{format(
new Date(jobResult.earliestTimestamp),
"EEEE, hh:mma, do LLLL Y",
)}
</td>
<td>
<span className="tag is-warning">
{jobResult.sessionId}
</span>
</td>
<td>
<span className="tag is-success">
{jobResult.completedJobs}
</span>
</td>
<td>
<span className="tag is-danger">
{jobResult.failedJobs}
</span>
</td>
</tr>
);
})}
</tbody>
</table>
</>
)}
</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>