Refactor colors of tailwind.config in order to be more flex for impro…

…ve dark mode style
wwWallet · Apr 16, 2024 · 3b841f0 · 3b841f0
1 parent 5095896
commit 3b841f0
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 24 deletions.
diff --git a/src/components/Buttons/GetButton.js b/src/components/Buttons/GetButton.js
@@ -6,13 +6,13 @@ const GetButton = ({ type = 'button', content, onClick, variant = 'custom', addi
 		const commonClasses = 'rounded-lg shadow-sm text-sm px-4 py-2 text-center flex flex-row flex-nowrap items-center justify-center';
 		switch (variant) {
 			case 'primary':
-				return `${commonClasses} text-white ${!disabled ? "bg-primary hover:bg-primary-hover" : "bg-gray-300 cursor-not-allowed hover:bg-gray-300"} dark:text-gray-900 dark:hover:bg-gray-300 dark:bg-secondary`;
-			case 'secondary':
-				return `${commonClasses} text-white ${!disabled ? "bg-secondary hover:bg-secondary-hover" : "bg-gray-300 cursor-not-allowed hover:bg-gray-300"} dark:bg-secondary dark:hover:bg-secondary-hover`;
+				return `${commonClasses} text-white ${!disabled ? "bg-primary hover:bg-primary-hover dark:text-white dark:hover:bg-primary-light-hover dark:bg-primary-light" : "bg-gray-300 cursor-not-allowed hover:bg-gray-300"}`;
+			case 'primary-light':
+				return `${commonClasses} text-white ${!disabled ? "bg-primary-light hover:bg-primary-light-hover" : "bg-gray-300 cursor-not-allowed hover:bg-gray-300"}`;
 			case 'tertiary':
 				return `${commonClasses} text-gray-700 bg-gray-100 hover:bg-gray-200`;
 			case 'cancel':
-				return `${commonClasses} text-gray-900 bg-gray-300 hover:bg-gray-400 dark:text-gray-900 dark:hover:bg-gray-300 dark:bg-secondary`;
+				return `${commonClasses} ${!disabled ? "text-gray-900 bg-gray-300 hover:bg-gray-400" : "text-white bg-gray-300 cursor-not-allowed hover:bg-gray-300"}`;
 			case 'delete':
 				return `${commonClasses} ${!disabled ? "text-white bg-red-600 hover:bg-red-700" : "text-red-400 bg-gray-300 hover:bg-gray-300 cursor-not-allowed"}`;
 			case 'custom':

diff --git a/src/components/SeparatorLine.js b/src/components/SeparatorLine.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 function SeparatorLine({ children, className }) {
 	return (
-		<div className={`${className} flex flex-row flex-nowrap items-stretch justify-between`}>
+		<div className={`${className} dark:text-white flex flex-row flex-nowrap items-stretch justify-between`}>
 			<div className="flex flex-col flex-nowrap grow shrink items-stretch justify-between">
 				<div className="grow shrink border-b-2 border-b-solid border-b-gray-300" />
 				<div className="grow shrink" />

diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js
@@ -27,7 +27,7 @@ const FormInputRow = ({
 }) => (
 	<div className="mb-4 relative">
 		<label className="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2" htmlFor={name}>
-			<IconComponent className="absolute left-3 top-10 z-10 text-gray-500" />
+			<IconComponent className="absolute left-3 top-10 z-10 text-gray-500 dark:text-white" />
 			{label}
 		</label>
 		{children}
@@ -59,7 +59,7 @@ const FormInputField = ({
 	return (
 		<div className="relative">
 			<input
-				className="border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-gray-700 w-full py-1.5 pl-10 pr-3"
+				className="border border-gray-300 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"
 				type={show ? 'text' : type}
 				name={name}
 				placeholder={placeholder}
@@ -78,7 +78,7 @@ const FormInputField = ({
 						aria-label={show ? (t('loginSignup.passwordHideAriaLabel')) : (t('loginSignup.passwordShowAriaLabel'))}
 						title={show ? (t('loginSignup.passwordHideTitle')) : (t('loginSignup.passwordShowTitle'))}
 					>
-						{show ? <FaEyeSlash /> : <FaEye />}
+						{show ? <FaEyeSlash className='dark:text-white'/> : <FaEye className='dark:text-white'/>}
 					</button>
 				</div>
 			)}
@@ -302,7 +302,7 @@ const WebauthnSignupLogin = ({
 										)
 										: (
 											<>
-												<h3 className="text-2xl mt-4 mb-2 font-bold text-primary dark:text-secondary">Almost done!</h3>
+												<h3 className="text-2xl mt-4 mb-2 font-bold text-primary dark:text-primary-light">Almost done!</h3>
 												<p className="dark:text-white pb-3">
 													{isLogin
 														? 'To finish unlocking the wallet, please authenticate with your passkey once more.'
@@ -321,7 +321,7 @@ const WebauthnSignupLogin = ({
 									<GetButton
 										content={t('common.continue')}
 										onClick={() => resolvePrfRetryPrompt(true)}
-										variant="secondary"
+										variant="primary-light"
 										disabled={prfRetryAccepted}
 									/>
 								</div>
@@ -344,7 +344,7 @@ const WebauthnSignupLogin = ({
 											<GetButton
 												type="submit"
 												content={t('loginSignup.tryAgain')}
-												variant="secondary"
+												variant="primary-light"
 											/>
 										</div>
 									</div>
@@ -585,7 +585,7 @@ const Login = () => {
 						<Trans
 							i18nKey="loginSignup.welcomeMessage"
 							components={{
-								highlight: <span className="text-primary dark:text-secondary" />
+								highlight: <span className="text-primary dark:text-primary-light" />
 							}}
 						/>
 					</h1>
@@ -605,15 +605,15 @@ const Login = () => {
 											components={{
 												docLinkPrf: <a
 													href="https://github.com/wwWallet/wallet-frontend#prf-compatibility" target='blank_'
-													className="font-medium text-primary hover:underline dark:text-blue-500"
+													className="font-medium text-primary dark:text-primary-light hover:underline"
 												/>,
 												docLinkLaunchpad: <a
 													href="https://launchpad.wwwallet.org" target='blank_'
-													className="font-medium text-primary hover:underline dark:text-blue-500"
+													className="font-medium text-primary dark:text-primary-light hover:underline"
 												/>,
 												docLinkScenarios: <a
 													href="https://wwwallet.github.io/wallet-docs/docs/showcase/sample-scenarios" target='blank_'
-													className="font-medium text-primary hover:underline dark:text-blue-500"
+													className="font-medium text-primary dark:text-primary-light hover:underline"
 												/>
 											}}
 										/>
@@ -686,7 +686,7 @@ const Login = () => {
 											<GetButton
 												type="submit"
 												content={isSubmitting ? t('loginSignup.submitting') : isLogin ? t('loginSignup.login') : t('loginSignup.signUp')}
-												variant="secondary"
+												variant="primary-light"
 												disabled={isSubmitting}
 												additionalClassName='w-full'
 											/>
@@ -708,7 +708,7 @@ const Login = () => {
 									{isLogin ? t('loginSignup.newHereQuestion') : t('loginSignup.alreadyHaveAccountQuestion')}
 									<a
 										href="/"
-										className="font-medium text-primary hover:underline dark:text-secondary"
+										className="font-medium text-primary hover:underline dark:text-primary-light"
 										onClick={toggleForm}
 									>
 										{isLogin ? t('loginSignup.signUp') : t('loginSignup.login')}

diff --git a/src/pages/NotFound/NotFound.js b/src/pages/NotFound/NotFound.js
@@ -43,7 +43,7 @@ const NotFound = () => {
 							<GetButton
 								content={t('notFound.homeButton')}
 								onClick={handleBackToHome}
-								variant="secondary"
+								variant="primary-light"
 								additionalClassName='w-full'
 							/>
 						</div>

diff --git a/src/pages/Settings/Settings.tsx b/src/pages/Settings/Settings.tsx
@@ -230,7 +230,7 @@ const WebauthnRegistation = ({
 							<GetButton
 								type="submit"
 								content={t('common.save')}
-								variant="secondary"
+								variant="primary-light"
 								disabled={isSubmitting}
 							/>
 						)}
@@ -257,7 +257,7 @@ const WebauthnRegistation = ({
 					<GetButton
 						content={t('common.continue')}
 						onClick={() => resolvePrfRetryPrompt(true)}
-						variant="secondary"
+						variant="primary-light"
 						disabled={prfRetryAccepted}
 					/>
 				</div>
@@ -488,7 +488,7 @@ const WebauthnCredentialItem = ({
 								type="submit"
 								content={t('common.save')}
 								disabled={submitting}
-								variant="secondary"
+								variant="primary-light"
 							/>
 						</div>
 					)
@@ -501,7 +501,7 @@ const WebauthnCredentialItem = ({
 								</>
 							}
 							onClick={() => setEditing(true)}
-							variant="secondary"
+							variant="primary-light"
 							disabled={onDelete && !unlocked}
 							aria-label={t('pageSettings.passkeyItem.renameAriaLabel', { passkeyLabel: currentLabel })}
 							title={onDelete && !unlocked ? t("pageSettings.passkeyItem.renameButtonTitleLocked") : ""}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -12,8 +12,10 @@ module.exports = {
 			colors: {
 				'primary': '#003476',
 				'primary-hover': '#002b62',
-				'secondary': '#4169E1',
-				'secondary-hover': '#0F52BA',
+				'primary-light': '#4169E1',
+				'primary-light-hover': '#0F52BA',
+				'extra-light': '#68caf1',
+				'extra-light-hover': '#5DB5D8',
 			},
 			screens: {
 				'max480': { 'max': '480px' },