Merge branch 'master' into enh/render-new-vc

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]}
 					/>
 				))}

src/index.css

@@ -124,4 +124,14 @@ button.reactour__close {
 
 .fade-in {
 	animation: fade-in 1s ease-in-out;
+/* 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;
+	}
 }

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}
 					/>

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}

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}
 					/>

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')}