From 69e3bb2ed3b6afb0b2c18738931418590149231c Mon Sep 17 00:00:00 2001
From: Jordan Berlyn <jberlyn@gmail.com>
Date: Fri, 4 Sep 2026 08:16:18 +0000
Subject: [PATCH] UI: Fix input placeholder contrast and focus styling in dark
 mode

---
 frontend/src/Author/Details/FilterSearchInput.css | 10 ++++++++--
 frontend/src/Components/Form/Input.css            |  5 +++++
 frontend/src/Styles/scaffolding.css               |  6 ++++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Author/Details/FilterSearchInput.css b/frontend/src/Author/Details/FilterSearchInput.css
index fb7b6630..54c1fec3 100644
--- a/frontend/src/Author/Details/FilterSearchInput.css
+++ b/frontend/src/Author/Details/FilterSearchInput.css
@@ -21,16 +21,22 @@
   padding-left: 38px;
   padding-right: 30px;
   height: 35px;
-  border-radius: 20px;
   border: 1px solid var(--inputBorderColor);
+  border-radius: 20px;
   background-color: var(--inputBackgroundColor);
+  color: var(--textColor);
   transition: all 0.2s ease-in-out;
+
+  &::placeholder {
+    color: var(--gray);
+    opacity: 1;
+  }
 }
 
 .searchInput:focus {
+  outline: 0;
   border-color: var(--inputFocusBorderColor);
   box-shadow: 0 0 0 1px var(--inputFocusBorderColor);
-  background-color: var(--white);
 }
 
 .clearIcon {
diff --git a/frontend/src/Components/Form/Input.css b/frontend/src/Components/Form/Input.css
index dd9ee888..67dbd56e 100644
--- a/frontend/src/Components/Form/Input.css
+++ b/frontend/src/Components/Form/Input.css
@@ -8,6 +8,11 @@
   box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
   color: var(--textColor);
 
+  &::placeholder {
+    color: var(--gray);
+    opacity: 1;
+  }
+
   &:focus {
     outline: 0;
     border-color: var(--inputFocusBorderColor);
diff --git a/frontend/src/Styles/scaffolding.css b/frontend/src/Styles/scaffolding.css
index 3f5f0fa6..e54e9a0a 100644
--- a/frontend/src/Styles/scaffolding.css
+++ b/frontend/src/Styles/scaffolding.css
@@ -37,6 +37,12 @@ textarea {
   line-height: 1.528571429; /* 20/14 */
 }
 
+input::placeholder,
+textarea::placeholder {
+  color: var(--gray);
+  opacity: 1;
+}
+
 /* Better defaults for unordererd lists */
 
 ul {