From e5e290c0c37a91c89b583bf02017bbb063fe5ac7 Mon Sep 17 00:00:00 2001
From: Andrew <112592168+fletch-r@users.noreply.github.com>
Date: Fri, 30 Aug 2024 14:04:44 +0100
Subject: [PATCH] fix: Improved text legibility on login/create account screens
 (#230)

* style: standardized placeholder text to be color neutral-400

* fix: changed dark:text-neutral-600 to dark:text-neutral-200 as in dark mode text was not visible
---
 src/routes/auth/connect.lazy.tsx | 4 ++--
 src/routes/auth/import.lazy.tsx  | 4 ++--
 src/routes/auth/new.lazy.tsx     | 6 +++---
 src/routes/index.lazy.tsx        | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/routes/auth/connect.lazy.tsx b/src/routes/auth/connect.lazy.tsx
index 58d8465b..8ecd58a8 100644
--- a/src/routes/auth/connect.lazy.tsx
+++ b/src/routes/auth/connect.lazy.tsx
@@ -68,12 +68,12 @@ function Screen() {
 								placeholder="bunker://..."
 								value={uri}
 								onChange={(e) => setUri(e.target.value)}
-								className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none"
+								className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400"
 							/>
 							<button
 								type="button"
 								onClick={() => pasteFromClipboard()}
-								className="absolute top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500"
+								className="absolute top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500 dark:text-blue-300"
 							>
 								Paste
 							</button>
diff --git a/src/routes/auth/import.lazy.tsx b/src/routes/auth/import.lazy.tsx
index 9788beda..a4bd0e8b 100644
--- a/src/routes/auth/import.lazy.tsx
+++ b/src/routes/auth/import.lazy.tsx
@@ -84,12 +84,12 @@ function Screen() {
 									placeholder="nsec or ncryptsec..."
 									value={key}
 									onChange={(e) => setKey(e.target.value)}
-									className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
+									className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400"
 								/>
 								<button
 									type="button"
 									onClick={() => pasteFromClipboard()}
-									className="absolute uppercase top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500"
+									className="absolute top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500 dark:text-blue-300"
 								>
 									Paste
 								</button>
diff --git a/src/routes/auth/new.lazy.tsx b/src/routes/auth/new.lazy.tsx
index 4517453e..0a11af5d 100644
--- a/src/routes/auth/new.lazy.tsx
+++ b/src/routes/auth/new.lazy.tsx
@@ -110,7 +110,7 @@ function Screen() {
 								onChange={(e) => setName(e.target.value)}
 								placeholder="e.g. Alice"
 								spellCheck={false}
-								className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:ring-0 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:text-neutral-600"
+								className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:ring-0 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:text-neutral-200"
 							/>
 						</div>
 						<div className="flex flex-col gap-1">
@@ -126,7 +126,7 @@ function Screen() {
 								onChange={(e) => setAbout(e.target.value)}
 								placeholder="e.g. Artist, anime-lover, and k-pop fan"
 								spellCheck={false}
-								className="px-3 py-1.5 rounded-lg min-h-16 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:ring-0 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:text-neutral-600"
+								className="px-3 py-1.5 rounded-lg min-h-16 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:ring-0 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:text-neutral-200"
 							/>
 						</div>
 						<div className="h-px w-full mt-2 bg-neutral-100 dark:bg-neutral-900" />
@@ -142,7 +142,7 @@ function Screen() {
 								type="password"
 								value={password}
 								onChange={(e) => setPassword(e.target.value)}
-								className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:ring-0 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:text-neutral-600"
+								className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:ring-0 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:text-neutral-200"
 							/>
 						</div>
 					</Frame>
diff --git a/src/routes/index.lazy.tsx b/src/routes/index.lazy.tsx
index 9f921c94..e1e455e9 100644
--- a/src/routes/index.lazy.tsx
+++ b/src/routes/index.lazy.tsx
@@ -148,7 +148,7 @@ function Screen() {
 													if (e.key === "Enter") loginWith();
 												}}
 												placeholder="Password"
-												className="px-3 rounded-full w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
+												className="px-3 rounded-full w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400"
 											/>
 										</div>
 									) : (