style: Auth Error and Preset Items Styling (#2069)

* Change the style of the error message.

* ui preset items

* fix style

* Change the color of the border and adjust the background of the selected input
This commit is contained in:
MACHINSOFT 2024-03-14 16:07:55 +03:00 committed by GitHub
parent f27e7c720f
commit cba135d456
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 35 additions and 24 deletions

View file

@ -64,7 +64,7 @@ const Registration: React.FC = () => {
validation,
)}
aria-invalid={!!errors[id]}
className="webkit-dark-styles peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
className="webkit-dark-styles peer block w-full appearance-none rounded-md border border-black/10 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none dark:border-white/20 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
placeholder=" "
data-testid={id}
></input>
@ -161,7 +161,7 @@ const Registration: React.FC = () => {
</h1>
{error && (
<div
className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700 dark:bg-gray-900 dark:text-red-500"
className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200"
role="alert"
data-testid="registration-error"
>
@ -229,7 +229,7 @@ const Registration: React.FC = () => {
disabled={Object.keys(errors).length > 0}
type="submit"
aria-label="Submit registration"
className="w-full transform rounded-md bg-green-500 px-4 py-3 tracking-wide text-white transition-colors duration-200 hover:bg-green-600 focus:bg-green-600 focus:outline-none disabled:cursor-not-allowed disabled:hover:bg-green-500"
className="w-full transform rounded-md bg-green-500 px-4 py-3 tracking-wide text-white transition-colors duration-200 hover:bg-green-550 focus:bg-green-550 focus:outline-none disabled:cursor-not-allowed disabled:hover:bg-green-500"
>
{localize('com_auth_continue')}
</button>