Small improvements to Sign Up page

Author: GuidoBR

frontend/src/common/utils/i18n/resources/en/auth.json

@@ -20,7 +20,7 @@
     "password": "Password",
     "remember-me": "Remember me",
     "username": "Username",
-    "email": "Email Address",
+    "email": "Email",
     "first-name": "First Name",
     "last-name": "Last Name",
     "confirm-password": "Confirm Password",

frontend/src/pages/Auth/SignUp/SignUpPage.scss

@@ -1,13 +1,38 @@
 .ls-signup-page {
-  .ls-signup-page__container {
-    max-width: 32rem;
+  &__content {
+    --padding-start: 0;
+    --padding-end: 0;
+    --padding-top: 0;
+    --padding-bottom: 0;
+  }
+
+  &__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
     height: 100%;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: -1;
+  }
+
+  &__container {
     display: flex;
     flex-direction: column;
-    padding-top: 1rem;
+    justify-content: center;
+    align-items: center;
+    min-height: 100%;
+    padding: 1rem;
   }
 
-  .ls-signup-page__form {
+  &__form {
     width: 100%;
+    max-width: 400px;
+    border-radius: 16px;
+    background-color: white;
+    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
+    overflow: hidden;
   }
 }

frontend/src/pages/Auth/SignUp/SignUpPage.tsx

@@ -1,12 +1,11 @@
 import { IonContent, IonPage } from '@ionic/react';
-import { useTranslation } from 'react-i18next';
 
 import './SignUpPage.scss';
 import { PropsWithTestId } from 'common/components/types';
 import ProgressProvider from 'common/providers/ProgressProvider';
-import Header from 'common/components/Header/Header';
 import SignUpForm from './components/SignUpForm';
 import Container from 'common/components/Content/Container';
+import splashBg from 'assets/Splash.png';
 
 /**
  * Properties for the `SignUpPage` component.
@@ -19,15 +18,15 @@ interface SignUpPageProps extends PropsWithTestId {}
  * @returns {JSX.Element} JSX
  */
 const SignUpPage = ({ testid = 'page-signup' }: SignUpPageProps): JSX.Element => {
-  const { t } = useTranslation();
-
   return (
     <IonPage className="ls-signup-page" data-testid={testid}>
       <ProgressProvider>
-        <Header title={t('signup', { ns: 'auth' })} />
-
-        <IonContent fullscreen className="ion-padding" scrollY={true}>
-          <Container className="ls-signup-page__container" fixed>
+        <IonContent fullscreen scrollY={true} className="ls-signup-page__content">
+          <div
+            className="ls-signup-page__background"
+            style={{ backgroundImage: `url(${splashBg})` }}
+          />
+          <Container className="ls-signup-page__container">
             <SignUpForm className="ls-signup-page__form" />
           </Container>
         </IonContent>

frontend/src/pages/Auth/SignUp/components/SignUpForm.scss

@@ -1,39 +1,95 @@
 .ls-signup-form {
-  padding: 1rem;
+  width: 100%;
 
-  .ls-signup-form__input {
-    margin-bottom: 1rem;
+  &__content {
+    padding: 1.5rem;
   }
 
-  .ls-signup-form__button {
-    margin-top: 1rem;
+  &__title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0 0 0.25rem;
+    color: #333;
   }
 
-  &__password-guidelines {
-    margin-top: -0.5rem;
+  &__subtitle {
+    font-size: 0.9rem;
+    margin: 0 0 1.5rem;
+    color: #666;
+  }
+
+  &__input {
     margin-bottom: 1rem;
-    font-size: 0.85rem;
 
-    &-header {
-      margin-bottom: 0.25rem;
+    ion-input {
+      --border-radius: 8px;
+      --border-width: 1px;
+      --border-color: #d1d1d1;
+      --padding-start: 12px;
+      --padding-end: 12px;
+      --padding-top: 12px;
+      --padding-bottom: 12px;
+      --background: #fff;
+    }
+  }
+
+  &__button {
+    margin-top: 1.5rem;
+
+    --border-radius: 8px;
+    --background: #734bff;
+    --background-activated: #5a3acc;
+    --background-focused: #5a3acc;
+    --background-hover: #5a3acc;
+    --color: white;
+
+    font-weight: 500;
+    height: 48px;
+    text-transform: none;
+
+    &[disabled] {
+      --background: #e6e6e6;
+      --color: #a0a0a0;
+
+      opacity: 1;
+    }
+  }
+
+  &__login-link {
+    text-align: center;
+    margin-top: 1.25rem;
+    font-size: 0.9rem;
+
+    a {
+      color: #734bff;
       font-weight: 500;
+      text-decoration: none;
     }
+  }
+
+  &__password-guidelines {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: -0.25rem;
+    margin-bottom: 1rem;
+    font-size: 0.85rem;
 
     &-item {
       display: flex;
       align-items: center;
-      margin-bottom: 0.125rem;
 
       &-icon {
         margin-right: 0.375rem;
+        font-size: 1.1rem;
       }
 
       &-valid {
         color: var(--ion-color-success);
       }
 
       &-invalid {
-        color: var(--ion-color-medium);
+        color: #c5c5c5;
       }
     }
   }

frontend/src/pages/Auth/SignUp/components/SignUpForm.tsx

@@ -13,15 +13,14 @@ import classNames from 'classnames';
 import { Form, Formik, useFormikContext } from 'formik';
 import { object, string, ref } from 'yup';
 import { useTranslation } from 'react-i18next';
-import { checkmarkCircle, closeCircle } from 'ionicons/icons';
+import { checkmarkCircle, ellipseOutline } from 'ionicons/icons';
 
 import './SignUpForm.scss';
 import { BaseComponentProps } from 'common/components/types';
 import { AuthError } from 'common/models/auth';
 import { useSignUp } from 'common/hooks/useAuth';
 import { useProgress } from 'common/hooks/useProgress';
 import Input from 'common/components/Input/Input';
-import HeaderRow from 'common/components/Text/HeaderRow';
 import { formatAuthError } from 'common/utils/auth-errors';
 import AuthErrorDisplay from 'common/components/Auth/AuthErrorDisplay';
 import AuthLoadingIndicator from 'common/components/Auth/AuthLoadingIndicator';
@@ -63,7 +62,7 @@ const PasswordGuidelines = () => {
         }`}
       >
         <IonIcon
-          icon={isValid ? checkmarkCircle : closeCircle}
+          icon={isValid ? checkmarkCircle : ellipseOutline}
           className="ls-signup-form__password-guidelines-item-icon"
         />
         <span>{text}</span>
@@ -74,9 +73,9 @@ const PasswordGuidelines = () => {
   return (
     <div className="ls-signup-form__password-guidelines">
       {renderGuideline(hasMinLength, t('validation.min-length', { length: 8, ns: 'auth' }))}
+      {renderGuideline(hasSpecialChar, t('validation.special-char', { ns: 'auth' }))}
       {renderGuideline(hasUppercase, t('validation.uppercase', { ns: 'auth' }))}
       {renderGuideline(hasNumber, t('validation.number', { ns: 'auth' }))}
-      {renderGuideline(hasSpecialChar, t('validation.special-char', { ns: 'auth' }))}
     </div>
   );
 };
@@ -173,12 +172,8 @@ const SignUpForm = ({ className, testid = 'form-signup' }: SignUpFormProps): JSX
         }}
         validationSchema={validationSchema}
       >
-        {({ dirty, isSubmitting }) => (
+        {({ dirty, isSubmitting, isValid }) => (
           <Form data-testid={`${testid}-form`}>
-            <HeaderRow border>
-              <div>{t('signup', { ns: 'auth' })}</div>
-            </HeaderRow>
-
             <div className="ls-signup-form__content">
               <h2 className="ls-signup-form__title">{t('signup', { ns: 'auth' })}</h2>
               <p className="ls-signup-form__subtitle">
@@ -253,7 +248,7 @@ const SignUpForm = ({ className, testid = 'form-signup' }: SignUpFormProps): JSX
                 color="primary"
                 className="ls-signup-form__button"
                 expand="block"
-                disabled={isSubmitting || !dirty || isSignUpLoading || isLoading}
+                disabled={isSubmitting || !isValid || !dirty || isSignUpLoading || isLoading}
                 data-testid={`${testid}-button-submit`}
               >
                 {t('signup.button', { ns: 'auth' })}