From 4de148a4cc62cd8c7957aecd2c8041c45c23a1a4 Mon Sep 17 00:00:00 2001
From: gkatrakazas <grigoriskatrakazas@gmail.com>
Date: Mon, 20 May 2024 11:23:03 +0300
Subject: [PATCH] Add custom styles for autofilled input fields in light and
 dark themes

---
 src/components/Popups/PinInput.js            |  2 +-
 src/index.css                                | 12 ++++++++++++
 src/pages/AddCredentials/AddCredentials.js   |  2 +-
 src/pages/Login/Login.js                     |  2 +-
 src/pages/SendCredentials/SendCredentials.js |  2 +-
 src/pages/Settings/Settings.tsx              |  4 ++--
 6 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/Popups/PinInput.js b/src/components/Popups/PinInput.js
index fa36c6ab..acc85d6c 100644
--- a/src/components/Popups/PinInput.js
+++ b/src/components/Popups/PinInput.js
@@ -144,7 +144,7 @@ function PinInput({ showPopup, setShowPopup }) {
 						onClick={() => handleInputClick(index)}
 						onPaste={(e) => handleInputPaste(e.clipboardData.getData('Text'))}
 						onKeyPress={(e) => handleInputKeyPress(e)}
-						className="w-10 px-3 mx-1 my-2 py-2 dark:bg-gray-700 dark:text-white border border-gray-300 dark:border-gray-500 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+						className="w-10 px-3 mx-1 my-2 py-2 dark:bg-gray-700 dark:text-white border border-gray-300 dark:border-gray-500 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:inputDarkModeOverride"
 						ref={inputRefs[index]}
 					/>
 				))}
diff --git a/src/index.css b/src/index.css
index 114fc50d..1d5471da 100644
--- a/src/index.css
+++ b/src/index.css
@@ -96,3 +96,15 @@ button.reactour__close {
 	top: 12px;
 	right: 12px;
 }
+
+/* Light and Dark mode input autofill */
+input:-webkit-autofill {
+	-webkit-box-shadow: 0 0 0 30px rgb(245, 245, 245) inset !important;
+}
+
+@layer components {
+	.inputDarkModeOverride:-webkit-autofill {
+		-webkit-box-shadow: 0 0 0 30px rgb(70, 70, 70) inset !important;
+		-webkit-text-fill-color: white;
+	}
+}
diff --git a/src/pages/AddCredentials/AddCredentials.js b/src/pages/AddCredentials/AddCredentials.js
index a91bf4c8..66ddc17e 100644
--- a/src/pages/AddCredentials/AddCredentials.js
+++ b/src/pages/AddCredentials/AddCredentials.js
@@ -137,7 +137,7 @@ const Issuers = () => {
 					<input
 						type="text"
 						placeholder={t('pageAddCredentials.searchPlaceholder')}
-						className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+						className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:inputDarkModeOverride"
 						value={searchQuery}
 						onChange={handleSearch}
 					/>
diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js
index 6ffb4ab5..40c7e538 100644
--- a/src/pages/Login/Login.js
+++ b/src/pages/Login/Login.js
@@ -59,7 +59,7 @@ const FormInputField = ({
 	return (
 		<div className="relative">
 			<input
-				className="border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-gray-700 dark:bg-transparent dark:text-white w-full py-1.5 pl-10 pr-3"
+				className="border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-gray-700 dark:bg-transparent dark:text-white dark:inputDarkModeOverride w-full py-1.5 pl-10 pr-3"
 				type={show ? 'text' : type}
 				name={name}
 				placeholder={placeholder}
diff --git a/src/pages/SendCredentials/SendCredentials.js b/src/pages/SendCredentials/SendCredentials.js
index fb0a3550..51878384 100644
--- a/src/pages/SendCredentials/SendCredentials.js
+++ b/src/pages/SendCredentials/SendCredentials.js
@@ -122,7 +122,7 @@ const Verifiers = () => {
 					<input
 						type="text"
 						placeholder={t('pageSendCredentials.searchPlaceholder')}
-						className="border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 w-full px-3 py-2"
+						className="border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:inputDarkModeOverride w-full px-3 py-2"
 						value={searchQuery}
 						onChange={handleSearch}
 					/>
diff --git a/src/pages/Settings/Settings.tsx b/src/pages/Settings/Settings.tsx
index fbd6fcfc..f61e92da 100644
--- a/src/pages/Settings/Settings.tsx
+++ b/src/pages/Settings/Settings.tsx
@@ -202,7 +202,7 @@ const WebauthnRegistation = ({
 								<p className="mb-2 dark:text-white">{t('pageSettings.registerPasskey.giveNickname')}</p>
 								<input
 									type="text"
-									className="border border-gray-300 dark:border-gray-500 dark:bg-gray-700 dark:text-white rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 py-1.5 px-3"
+									className="border border-gray-300 dark:border-gray-500 dark:bg-gray-700 dark:text-white rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:inputDarkModeOverride py-1.5 px-3"
 									aria-label="Nickname for new credential"
 									autoFocus={true}
 									disabled={isSubmitting}
@@ -429,7 +429,7 @@ const WebauthnCredentialItem = ({
 									{t('pageSettings.passkeyItem.nickname')}:&nbsp;
 								</p>
 								<input
-									className="border border-gray-300 dark:border-gray-500 dark:bg-gray-800 dark:text-white rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 py-1.5 px-3 w-36"
+									className="border border-gray-300 dark:border-gray-500 dark:bg-gray-800 dark:text-white rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:inputDarkModeOverride py-1.5 px-3 w-36"
 
 									type="text"
 									placeholder={t('pageSettings.passkeyItem.nicknameInput')}