Merge pull request #157 from ModusCreateOrg/ADE-200

[ADE-200] Sign Up UI Fixes

Author: adamrefaey

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",
@@ -30,6 +30,7 @@
   "signin.title": "Log in",
   "signin.subtitle": "Login to access MedReport AI",
   "signup": "Sign Up",
+  "signup.button": "Create Account",
   "signout": "Sign Out",
   "loading": "Loading...",
   "signin.loading": "Signing in...",

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