From a1f7d60e198c47b739276fe28723d2829959dd5d Mon Sep 17 00:00:00 2001 From: CrispyBaguette Date: Thu, 5 May 2022 16:54:44 +0200 Subject: [PATCH 01/20] Added spinner over preview image --- client/src/ImagePreview.tsx | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/client/src/ImagePreview.tsx b/client/src/ImagePreview.tsx index 4f045b6..24c5965 100644 --- a/client/src/ImagePreview.tsx +++ b/client/src/ImagePreview.tsx @@ -1,3 +1,5 @@ +import { faSpinner } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useEffect } from "react"; interface ImagePreviewProps { @@ -14,12 +16,20 @@ function ImagePreview({ imageData }: ImagePreviewProps) { }, [imageUrl]); return ( -
- preview +
+
+ preview +
+ +
+
); } From 49b3de25aa49c1898d30b76e9ca5373f4b90a79c Mon Sep 17 00:00:00 2001 From: CrispyBaguette Date: Sun, 8 May 2022 12:42:43 +0200 Subject: [PATCH 02/20] Auto dark mode --- client/src/App.tsx | 2 +- client/src/ImageInput.tsx | 37 +++++++++++++++++++++++++++++++++-- client/src/ImageOutput.tsx | 34 ++++++++++++++++++++++++++++++-- client/src/PalettePreview.tsx | 2 +- client/src/PaletteSelect.tsx | 11 ++++++++++- 5 files changed, 79 insertions(+), 7 deletions(-) diff --git a/client/src/App.tsx b/client/src/App.tsx index 0df90db..2db5f4a 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -33,7 +33,7 @@ function App() { }; return ( -
+
diff --git a/client/src/ImageInput.tsx b/client/src/ImageInput.tsx index 3156e88..60277cc 100644 --- a/client/src/ImageInput.tsx +++ b/client/src/ImageInput.tsx @@ -39,7 +39,26 @@ function ImageInput({ onImageSubmit }: Props) { type="file" accept="image/png, image/jpeg" ref={fileInputRef} - className="block w-full mt-1 text-sm text-nord-0 file:mr-4 file:py-2 file:px-4 file:border-0 file:text-sm file:font-semibold file:bg-nord-4 file:text-nord-0 hover:file:bg-nord-5" + className={ + "block " + + "w-full " + + "mt-1 " + + "text-sm " + + "text-nord-0 " + + "dark:text-nord-5 " + + "file:mr-4 " + + "file:py-2 " + + "file:px-4 " + + "file:border-0 " + + "file:text-sm " + + "file:font-semibold " + + "file:bg-nord-4 " + + "dark:file:bg-nord-1 " + + "file:text-nord-0 " + + "dark:file:text-nord-5 " + + "hover:file:bg-nord-5 " + + "dark:hover:file:bg-nord-2" + } />