fix color picker

Author: notsidney

src/App.tsx

@@ -1,13 +1,8 @@
-import { useAtomValue } from "jotai";
 import { DownloadIcon } from "lucide-react";
 import Canvas from "./Canvas";
 import Controls from "./Controls";
-import Expand from "./Expand";
-import { imageAtom } from "./atoms";
 
 export default function App() {
-	const image = useAtomValue(imageAtom);
-
 	return (
 		<main className="container mx-auto max-w-md p-4 pt-6 flex flex-col gap-4 select-none">
 			<header>
@@ -17,15 +12,13 @@ export default function App() {
 			<Controls />
 			<Canvas />
 
-			<Expand expanded={image != null}>
-				<div className="flex gap-2">
-					<DownloadIcon />
-					<span>
-						<b className="font-semibold">To save:</b> Touch and hold &gt;
-						Save&nbsp;to&nbsp;Photos
-					</span>
-				</div>
-			</Expand>
+			<div className="flex gap-2">
+				<DownloadIcon />
+				<span>
+					<b className="font-semibold">To save:</b> Touch and hold &gt;
+					Save&nbsp;to&nbsp;Photos
+				</span>
+			</div>
 
 			<footer className="mt-auto text-sm text-slate-500 dark:text-slate-400 flex justify-between">
 				<div>

src/CustomControls.tsx

@@ -86,7 +86,7 @@ export default function CustomControls() {
 					value={color}
 					onChange={(e) => setColor(e.target.value)}
 					aria-label="Color"
-					className="block w-8 h-8"
+					className="input shrink-0 w-8 h-8 box-content"
 				/>
 			</div>
 

src/index.css

@@ -36,16 +36,16 @@
 
 @utility input-base {
 	@apply rounded-lg;
-	@apply block min-w-0 w-full grow py-1 pr-3 pl-1;
+	@apply block min-w-0 w-full grow py-1 px-3;
 	@apply caret-primary-500;
 	@apply font-normal text-right;
 	@apply bg-white dark:bg-slate-950;
 	@apply inset-shadow-xs;
 	@apply border-1 border-slate-300;
 	@apply dark:border-1 dark:border-slate-700;
 
-	@apply focus:outline-offset-0;
 	@apply focus:border-1 focus:border-primary-500;
+	@apply focus:outline-3 focus:outline-offset-0 focus:outline-primary-500/30 dark:focus:outline-primary-400/50;
 }
 
 @utility recessed {
@@ -120,21 +120,18 @@
 		@apply font-medium;
 	}
 
-	/* input[type="color" i] {
-		@apply input-base;
-		@apply p-0;
-	} */
+	input[type="color" i] {
+		@apply p-0 overflow-hidden;
 
-	input[type="color" i]::-webkit-color-swatch-wrapper,
-	input[type="color" i]::-moz-color-swatch-wrapper {
-		@apply p-0;
-	}
+		&::-webkit-color-swatch-wrapper,
+		&::-moz-color-swatch-wrapper {
+			@apply p-0;
+		}
 
-	input[type="color" i]::-webkit-color-swatch,
-	input[type="color" i]::-moz-color-swatch {
-		@apply rounded-lg aspect-square;
-		@apply border-0;
-		@apply inset-ring-1 inset-ring-slate-400/50;
+		&::-webkit-color-swatch,
+		&::-moz-color-swatch {
+			@apply border-0;
+		}
 	}
 
 	.input {