Skip to content

Commit b47f062

Browse files
icereedicereed
committed
Introduce dark mode
1 parent cc04527 commit b47f062

8 files changed

+63
-47
lines changed

‎web-app/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html lang="en" class="dark">
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Paperless GPT</title>
88
</head>
9-
<body>
9+
<body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200">
1010
<div id="root"></div>
1111
<script type="module" src="/src/main.tsx"></script>
1212
</body>
13-
</html>
13+
</html>

‎web-app/src/DocumentProcessor.tsx

+6-8
Original file line numberDiff line numberDiff line change
@@ -185,22 +185,20 @@ const DocumentProcessor: React.FC = () => {
185185

186186
if (loading) {
187187
return (
188-
<div className="flex items-center justify-center min-h-screen">
189-
<div className="text-xl font-semibold">Loading documents...</div>
188+
<div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
189+
<div className="text-xl font-semibold text-gray-800 dark:text-gray-200">Loading documents...</div>
190190
</div>
191191
);
192192
}
193193

194194
return (
195-
<div className="max-w-5xl mx-auto p-6">
195+
<div className="max-w-5xl mx-auto p-6 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200">
196196
<header className="text-center">
197-
<h1 className="text-4xl font-bold mb-8 text-gray-800">
198-
Paperless GPT
199-
</h1>
197+
<h1 className="text-4xl font-bold mb-8">Paperless GPT</h1>
200198
</header>
201199

202200
{error && (
203-
<div className="mb-4 p-4 bg-red-100 text-red-800 rounded">
201+
<div className="mb-4 p-4 bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 rounded">
204202
{error}
205203
</div>
206204
)}
@@ -246,4 +244,4 @@ const DocumentProcessor: React.FC = () => {
246244
);
247245
};
248246

249-
export default DocumentProcessor;
247+
export default DocumentProcessor;

‎web-app/src/components/DocumentCard.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ interface DocumentCardProps {
66
}
77

88
const DocumentCard: React.FC<DocumentCardProps> = ({ document }) => (
9-
<div className="bg-white shadow-lg shadow-blue-500/50 rounded-md p-4 relative group overflow-hidden">
10-
<h3 className="text-lg font-semibold text-gray-800">{document.title}</h3>
11-
<p className="text-sm text-gray-600 mt-2 truncate">
9+
<div className="bg-white dark:bg-gray-800 shadow-lg shadow-blue-500/50 rounded-md p-4 relative group overflow-hidden">
10+
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200">{document.title}</h3>
11+
<p className="text-sm text-gray-600 dark:text-gray-400 mt-2 truncate">
1212
{document.content.length > 100
1313
? `${document.content.substring(0, 100)}...`
1414
: document.content}
@@ -17,21 +17,21 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ document }) => (
1717
{document.tags.map((tag) => (
1818
<span
1919
key={tag}
20-
className="bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full"
20+
className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full"
2121
>
2222
{tag}
2323
</span>
2424
))}
2525
</div>
26-
<div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-4 rounded-md">
27-
<div className="text-sm text-white p-2 bg-gray-800 rounded-md w-full max-h-full overflow-y-auto">
26+
<div className="absolute inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-4 rounded-md">
27+
<div className="text-sm text-white p-2 bg-gray-800 dark:bg-gray-900 rounded-md w-full max-h-full overflow-y-auto">
2828
<h3 className="text-lg font-semibold text-white">{document.title}</h3>
2929
<p className="mt-2 whitespace-pre-wrap">{document.content}</p>
3030
<div className="mt-4">
3131
{document.tags.map((tag) => (
3232
<span
3333
key={tag}
34-
className="bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full"
34+
className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full"
3535
>
3636
{tag}
3737
</span>

‎web-app/src/components/DocumentsToProcess.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,19 @@ const DocumentsToProcess: React.FC<DocumentsToProcessProps> = ({
2626
}) => (
2727
<section>
2828
<div className="flex justify-between items-center mb-6">
29-
<h2 className="text-2xl font-semibold text-gray-700">Documents to Process</h2>
29+
<h2 className="text-2xl font-semibold text-gray-700 dark:text-gray-200">Documents to Process</h2>
3030
<div className="flex space-x-2">
3131
<button
3232
onClick={onReload}
3333
disabled={processing}
34-
className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none"
34+
className="bg-blue-600 text-white dark:bg-blue-800 dark:text-gray-200 px-4 py-2 rounded hover:bg-blue-700 dark:hover:bg-blue-900 focus:outline-none"
3535
>
3636
<ArrowPathIcon className="h-5 w-5" />
3737
</button>
3838
<button
3939
onClick={onProcess}
4040
disabled={processing}
41-
className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none"
41+
className="bg-blue-600 text-white dark:bg-blue-800 dark:text-gray-200 px-4 py-2 rounded hover:bg-blue-700 dark:hover:bg-blue-900 focus:outline-none"
4242
>
4343
{processing ? "Processing..." : "Generate Suggestions"}
4444
</button>
@@ -51,16 +51,18 @@ const DocumentsToProcess: React.FC<DocumentsToProcessProps> = ({
5151
type="checkbox"
5252
checked={generateTitles}
5353
onChange={(e) => setGenerateTitles(e.target.checked)}
54+
className="dark:bg-gray-700 dark:border-gray-600"
5455
/>
55-
<span>Generate Titles</span>
56+
<span className="text-gray-700 dark:text-gray-200">Generate Titles</span>
5657
</label>
5758
<label className="flex items-center space-x-2">
5859
<input
5960
type="checkbox"
6061
checked={generateTags}
6162
onChange={(e) => setGenerateTags(e.target.checked)}
63+
className="dark:bg-gray-700 dark:border-gray-600"
6264
/>
63-
<span>Generate Tags</span>
65+
<span className="text-gray-700 dark:text-gray-200">Generate Tags</span>
6466
</label>
6567
</div>
6668

‎web-app/src/components/NoDocuments.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ const NoDocuments: React.FC<NoDocumentsProps> = ({
1212
onReload,
1313
processing,
1414
}) => (
15-
<div className="flex flex-col items-center justify-center min-h-screen">
15+
<div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200">
1616
<p className="text-xl font-semibold mb-4">
1717
No documents found with filter tag{" "}
1818
{filterTag && (
19-
<span className="bg-blue-100 text-blue-800 text-sm font-medium px-2.5 py-0.5 rounded-full">
19+
<span className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-sm font-medium px-2.5 py-0.5 rounded-full">
2020
{filterTag}
2121
</span>
2222
)}
@@ -25,7 +25,7 @@ const NoDocuments: React.FC<NoDocumentsProps> = ({
2525
<button
2626
onClick={onReload}
2727
disabled={processing}
28-
className="flex items-center bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none"
28+
className="flex items-center bg-blue-600 dark:bg-blue-800 text-white dark:text-gray-200 px-4 py-2 rounded hover:bg-blue-700 dark:hover:bg-blue-900 focus:outline-none"
2929
>
3030
Reload
3131
<ArrowPathIcon className="h-5 w-5 ml-2" />

‎web-app/src/components/SuccessModal.tsx

+9-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { Fragment } from "react";
21
import { Dialog, DialogTitle, Transition } from "@headlessui/react";
32
import { CheckCircleIcon } from "@heroicons/react/24/outline";
3+
import React, { Fragment } from "react";
44

55
interface SuccessModalProps {
66
isOpen: boolean;
@@ -25,7 +25,7 @@ const SuccessModal: React.FC<SuccessModalProps> = ({ isOpen, onClose }) => (
2525
leaveFrom="opacity-100"
2626
leaveTo="opacity-0"
2727
>
28-
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
28+
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-800 bg-opacity-75 transition-opacity" />
2929
</Transition.Child>
3030

3131
<span
@@ -44,33 +44,32 @@ const SuccessModal: React.FC<SuccessModalProps> = ({ isOpen, onClose }) => (
4444
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
4545
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
4646
>
47-
<div className="inline-block align-bottom bg-white rounded-lg px-6 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
47+
<div className="inline-block align-bottom bg-white dark:bg-gray-900 rounded-lg px-6 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
4848
<div className="sm:flex sm:items-start">
49-
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-12 sm:w-12">
49+
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900 sm:mx-0 sm:h-12 sm:w-12">
5050
<CheckCircleIcon
51-
className="h-6 w-6 text-green-600"
51+
className="h-6 w-6 text-green-600 dark:text-green-400"
5252
aria-hidden="true"
5353
/>
5454
</div>
5555
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
5656
<DialogTitle
5757
as="h3"
58-
className="text-lg leading-6 font-medium text-gray-900"
58+
className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-200"
5959
>
6060
Documents Updated
6161
</DialogTitle>
6262
<div className="mt-2">
63-
<p className="text-sm text-gray-500">
64-
The documents have been successfully updated with the
65-
new titles and tags.
63+
<p className="text-sm text-gray-500 dark:text-gray-400">
64+
The documents have been successfully updated with the new titles and tags.
6665
</p>
6766
</div>
6867
</div>
6968
</div>
7069
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
7170
<button
7271
onClick={onClose}
73-
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
72+
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 dark:bg-green-700 text-base font-medium text-white hover:bg-green-700 dark:hover:bg-green-800 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
7473
>
7574
OK
7675
</button>

‎web-app/src/components/SuggestionCard.tsx

+24-7
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@ const SuggestionCard: React.FC<SuggestionCardProps> = ({
1919
}) => {
2020
const document = suggestion.original_document;
2121
return (
22-
<div className="bg-white shadow-lg shadow-blue-500/50 rounded-md p-4 relative flex flex-col justify-between h-full">
22+
<div className="bg-white dark:bg-gray-800 shadow-lg shadow-blue-500/50 rounded-md p-4 relative flex flex-col justify-between h-full">
2323
<div className="flex items-center group relative">
2424
<div className="relative">
25-
<h3 className="text-lg font-semibold text-gray-800">
25+
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200">
2626
{document.title}
2727
</h3>
28-
<p className="text-sm text-gray-600 mt-2 truncate">
28+
<p className="text-sm text-gray-600 dark:text-gray-400 mt-2 truncate">
2929
{document.content.length > 40
3030
? `${document.content.substring(0, 40)}...`
3131
: document.content}
@@ -34,15 +34,15 @@ const SuggestionCard: React.FC<SuggestionCardProps> = ({
3434
{document.tags.map((tag) => (
3535
<span
3636
key={tag}
37-
className="bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full"
37+
className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full"
3838
>
3939
{tag}
4040
</span>
4141
))}
4242
</div>
4343
</div>
44-
<div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-4 rounded-md">
45-
<div className="text-sm text-white p-2 bg-gray-800 rounded-md w-full max-h-full overflow-y-auto">
44+
<div className="absolute inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-4 rounded-md">
45+
<div className="text-sm text-white p-2 bg-gray-800 dark:bg-gray-900 rounded-md w-full max-h-full overflow-y-auto">
4646
<p className="mt-2 whitespace-pre-wrap">{document.content}</p>
4747
</div>
4848
</div>
@@ -52,7 +52,7 @@ const SuggestionCard: React.FC<SuggestionCardProps> = ({
5252
type="text"
5353
value={suggestion.suggested_title || ""}
5454
onChange={(e) => onTitleChange(suggestion.id, e.target.value)}
55-
className="w-full border border-gray-300 rounded px-2 py-1 mt-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
55+
className="w-full border border-gray-300 dark:border-gray-600 rounded px-2 py-1 mt-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-gray-200"
5656
/>
5757
<div className="mt-4">
5858
<ReactTags
@@ -79,6 +79,23 @@ const SuggestionCard: React.FC<SuggestionCardProps> = ({
7979
onDelete={(index) => onTagDeletion(suggestion.id, index)}
8080
allowNew={true}
8181
placeholderText="Add a tag"
82+
classNames={{
83+
root: "react-tags dark:bg-gray-800",
84+
rootIsActive: "is-active",
85+
rootIsDisabled: "is-disabled",
86+
rootIsInvalid: "is-invalid",
87+
label: "react-tags__label",
88+
tagList: "react-tags__list",
89+
tagListItem: "react-tags__list-item",
90+
tag: "react-tags__tag dark:bg-blue-900 dark:text-blue-200",
91+
tagName: "react-tags__tag-name",
92+
comboBox: "react-tags__combobox dark:bg-gray-700 dark:text-gray-200",
93+
input: "react-tags__combobox-input dark:bg-gray-700 dark:text-gray-200",
94+
listBox: "react-tags__listbox dark:bg-gray-700 dark:text-gray-200",
95+
option: "react-tags__listbox-option dark:bg-gray-700 dark:text-gray-200 hover:bg-blue-500 dark:hover:bg-blue-800",
96+
optionIsActive: "is-active",
97+
highlight: "react-tags__highlight dark:bg-gray-800",
98+
}}
8299
/>
83100
</div>
84101
</div>

‎web-app/src/components/SuggestionsReview.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const SuggestionsReview: React.FC<SuggestionsReviewProps> = ({
2424
updating,
2525
}) => (
2626
<section>
27-
<h2 className="text-2xl font-semibold text-gray-700 mb-6">
27+
<h2 className="text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-6">
2828
Review and Edit Suggested Titles
2929
</h2>
3030
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -42,7 +42,7 @@ const SuggestionsReview: React.FC<SuggestionsReviewProps> = ({
4242
<div className="flex justify-end space-x-4 mt-6">
4343
<button
4444
onClick={onBack}
45-
className="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300 focus:outline-none"
45+
className="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 px-4 py-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none"
4646
>
4747
Back
4848
</button>
@@ -51,8 +51,8 @@ const SuggestionsReview: React.FC<SuggestionsReviewProps> = ({
5151
disabled={updating}
5252
className={`${
5353
updating
54-
? "bg-green-400 cursor-not-allowed"
55-
: "bg-green-600 hover:bg-green-700"
54+
? "bg-green-400 dark:bg-green-600 cursor-not-allowed"
55+
: "bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-800"
5656
} text-white px-4 py-2 rounded focus:outline-none`}
5757
>
5858
{updating ? "Updating..." : "Apply Suggestions"}

0 commit comments

Comments
 (0)