style: Login and registration 🛂 (#1214)

client/src/components/Auth/Login.tsx

@@ -39,7 +39,7 @@ function Login() {
           <p className="my-4 text-center text-sm font-light text-gray-700">
             {' '}
             {localize('com_auth_no_account')}{' '}
-            <a href="/register" className="p-1 text-green-500 hover:underline">
+            <a href="/register" className="p-1 font-medium text-green-500 hover:underline">
               {localize('com_auth_sign_up')}
             </a>
           </p>

client/src/components/Auth/LoginForm.tsx

@@ -45,18 +45,18 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
               },
             })}
             aria-invalid={!!errors.email}
-            className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
             placeholder=" "
           ></input>
           <label
             htmlFor="email"
-            className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
+            className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
           >
             {localize('com_auth_email_address')}
           </label>
         </div>
         {errors.email && (
-          <span role="alert" className="mt-1 text-sm text-red-600">
+          <span role="alert" className="mt-1 text-sm text-black">
             {/* @ts-ignore not sure why*/}
             {errors.email.message}
           </span>
@@ -81,25 +81,25 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
               },
             })}
             aria-invalid={!!errors.password}
-            className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
             placeholder=" "
           ></input>
           <label
             htmlFor="password"
-            className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
+            className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
           >
             {localize('com_auth_password')}
           </label>
         </div>
 
         {errors.password && (
-          <span role="alert" className="mt-1 text-sm text-red-600">
+          <span role="alert" className="mt-1 text-sm text-black">
             {/* @ts-ignore not sure why*/}
             {errors.password.message}
           </span>
         )}
       </div>
-      <a href="/forgot-password" className="text-sm text-green-500 hover:underline">
+      <a href="/forgot-password" className="text-sm font-medium text-green-500 hover:underline">
         {localize('com_auth_password_forgot')}
       </a>
       <div className="mt-6">
@@ -107,8 +107,7 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
           aria-label="Sign in"
           data-testid="login-button"
           type="submit"
-          className="w-full transform rounded-sm 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"
-        >
+          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">
           {localize('com_auth_continue')}
         </button>
       </div>

client/src/components/Auth/Registration.tsx

@@ -90,19 +90,19 @@ function Registration() {
                   },
                 })}
                 aria-invalid={!!errors.name}
-                className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+                className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
                 placeholder=" "
               ></input>
               <label
                 htmlFor="name"
-                className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
+                className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
               >
                 {localize('com_auth_full_name')}
               </label>
             </div>
 
             {errors.name && (
-              <span role="alert" className="mt-1 text-sm text-red-600">
+              <span role="alert" className="mt-1 text-sm text-black">
                 {/* @ts-ignore not sure why*/}
                 {errors.name.message}
               </span>
@@ -126,20 +126,20 @@ function Registration() {
                   },
                 })}
                 aria-invalid={!!errors.username}
-                className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+                className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
                 placeholder=" "
                 autoComplete="off"
               ></input>
               <label
                 htmlFor="username"
-                className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
+                className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
               >
                 {localize('com_auth_username')}
               </label>
             </div>
 
             {errors.username && (
-              <span role="alert" className="mt-1 text-sm text-red-600">
+              <span role="alert" className="mt-1 text-sm text-black">
                 {/* @ts-ignore not sure why */}
                 {errors.username.message}
               </span>
@@ -168,18 +168,18 @@ function Registration() {
                   },
                 })}
                 aria-invalid={!!errors.email}
-                className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+                className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
                 placeholder=" "
               ></input>
               <label
                 htmlFor="email"
-                className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
+                className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
               >
                 {localize('com_auth_email')}
               </label>
             </div>
             {errors.email && (
-              <span role="alert" className="mt-1 text-sm text-red-600">
+              <span role="alert" className="mt-1 text-sm text-black">
                 {/* @ts-ignore - Type 'string | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined' is not assignable to type 'ReactNode' */}
                 {errors.email.message}
               </span>
@@ -205,19 +205,19 @@ function Registration() {
                   },
                 })}
                 aria-invalid={!!errors.password}
-                className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+                className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
                 placeholder=" "
               ></input>
               <label
                 htmlFor="password"
-                className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
+                className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
               >
                 {localize('com_auth_password')}
               </label>
             </div>
 
             {errors.password && (
-              <span role="alert" className="mt-1 text-sm text-red-600">
+              <span role="alert" className="mt-1 text-sm text-black">
                 {/* @ts-ignore not sure why */}
                 {errors.password.message}
               </span>
@@ -240,19 +240,19 @@ function Registration() {
                     value === password || localize('com_auth_password_not_match'),
                 })}
                 aria-invalid={!!errors.confirm_password}
-                className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+                className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
                 placeholder=" "
               ></input>
               <label
                 htmlFor="confirm_password"
-                className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
+                className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
               >
                 {localize('com_auth_password_confirm')}
               </label>
             </div>
 
             {errors.confirm_password && (
-              <span role="alert" className="mt-1 text-sm text-red-600">
+              <span role="alert" className="mt-1 text-sm text-black">
                 {/* @ts-ignore not sure why */}
                 {errors.confirm_password.message}
               </span>
@@ -269,7 +269,7 @@ function Registration() {
               }
               type="submit"
               aria-label="Submit registration"
-              className="w-full transform rounded-sm 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:opacity-50 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-600 focus:bg-green-600 focus:outline-none disabled:cursor-not-allowed disabled:hover:bg-green-500"
             >
               {localize('com_auth_continue')}
             </button>
@@ -281,8 +281,7 @@ function Registration() {
           <a
             href="/login"
             aria-label="Login"
-            className="p-1 font-medium text-green-500 hover:underline"
-          >
+            className="p-1 font-medium text-green-500 hover:underline">
             {localize('com_auth_login')}
           </a>
         </p>

client/src/components/Auth/RequestPasswordReset.tsx

@@ -111,18 +111,17 @@ function RequestPasswordReset() {
                     },
                   })}
                   aria-invalid={!!errors.email}
-                  className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+                  className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
                   placeholder=" "
                 ></input>
                 <label
                   htmlFor="email"
-                  className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
-                >
+                  className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500">
                   {localize('com_auth_email_address')}
                 </label>
               </div>
               {errors.email && (
-                <span role="alert" className="mt-1 text-sm text-red-600">
+                <span role="alert" className="mt-1 text-sm text-black">
                   {/* @ts-ignore not sure why */}
                   {errors.email.message}
                 </span>
@@ -132,8 +131,7 @@ function RequestPasswordReset() {
               <button
                 type="submit"
                 disabled={!!errors.email}
-                className="w-full rounded-sm border border-transparent bg-green-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-green-600 focus:outline-none active: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-600 focus:bg-green-600 focus:outline-none">
                 {localize('com_auth_continue')}
               </button>
             </div>

client/src/components/Auth/ResetPassword.tsx

@@ -44,7 +44,7 @@ function ResetPassword() {
           <button
             onClick={() => navigate('/login')}
             aria-label={localize('com_auth_sign_in')}
-            className="w-full transform rounded-sm 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"
+            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"
           >
             {localize('com_auth_continue')}
           </button>
@@ -109,19 +109,19 @@ function ResetPassword() {
                     },
                   })}
                   aria-invalid={!!errors.password}
-                  className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+                  className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
                   placeholder=" "
                 ></input>
                 <label
                   htmlFor="password"
-                  className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
+                  className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
                 >
                   {localize('com_auth_password')}
                 </label>
               </div>
 
               {errors.password && (
-                <span role="alert" className="mt-1 text-sm text-red-600">
+                <span role="alert" className="mt-1 text-sm text-black">
                   {/* @ts-ignore not sure why */}
                   {errors.password.message}
                 </span>
@@ -143,30 +143,30 @@ function ResetPassword() {
                       value === password || localize('com_auth_password_not_match'),
                   })}
                   aria-invalid={!!errors.confirm_password}
-                  className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+                  className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
                   placeholder=" "
                 ></input>
                 <label
                   htmlFor="confirm_password"
-                  className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
+                  className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
                 >
                   {localize('com_auth_password_confirm')}
                 </label>
               </div>
               {errors.confirm_password && (
-                <span role="alert" className="mt-1 text-sm text-red-600">
+                <span role="alert" className="mt-1 text-sm text-black">
                   {/* @ts-ignore not sure why */}
                   {errors.confirm_password.message}
                 </span>
               )}
               {errors.token && (
-                <span role="alert" className="mt-1 text-sm text-red-600">
+                <span role="alert" className="mt-1 text-sm text-black">
                   {/* @ts-ignore not sure why */}
                   {errors.token.message}
                 </span>
               )}
               {errors.userId && (
-                <span role="alert" className="mt-1 text-sm text-red-600">
+                <span role="alert" className="mt-1 text-sm text-black">
                   {/* @ts-ignore not sure why */}
                   {errors.userId.message}
                 </span>
@@ -177,8 +177,7 @@ function ResetPassword() {
                 disabled={!!errors.password || !!errors.confirm_password}
                 type="submit"
                 aria-label={localize('com_auth_submit_registration')}
-                className="w-full transform rounded-sm 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"
-              >
+                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">
                 {localize('com_auth_continue')}
               </button>
             </div>