Merge pull request #160 from ModusCreateOrg/ADE-200-Adam-fixes

[ADE -200] UI fixes

Author: GuidoBR

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

@@ -26,8 +26,8 @@
     "confirm-password": "Confirm Password",
     "verification-code": "Verification Code"
   },
-  "signin": "Sign In",
-  "signin.title": "Log in",
+  "signin": "Log in",
+  "signin.title": "Log In",
   "signin.subtitle": "Login to access MedReport AI",
   "signup": "Sign Up",
   "signup.button": "Create Account",

frontend/src/pages/Auth/SignIn/SignInPage.scss

@@ -25,41 +25,43 @@
   }
 
   &__logo {
-    width: 3.5rem;
+    width: 2.25rem;
     height: auto;
     margin-right: 0.75rem;
   }
 
   &__logo-text {
     color: white;
-    font-size: 1.75rem;
+    font-size: 1.25rem;
     font-weight: 600;
   }
 
   &__card {
-    width: 100%;
     max-width: 30rem;
     background-color: white;
     border-radius: 1.5rem;
     padding: 2.5rem 2rem;
     box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 15%);
     z-index: 1;
+    position: absolute;
+    inset: 130px 20px 20px;
   }
 
   &__header {
     margin-bottom: 2.5rem;
 
     h1 {
-      font-size: 2rem;
-      font-weight: 600;
+      font-size: 1.5rem;
+      font-weight: 800;
       color: #333;
       margin-bottom: 0.5rem;
       margin-top: 0;
     }
 
     p {
-      font-size: 1.125rem;
-      color: #666;
+      font-family: Merriweather, serif;
+      font-size: 0.9rem;
+      color: #5c6d80;
       margin: 0;
     }
   }

frontend/src/pages/Auth/SignIn/components/SignInForm.scss

@@ -1,11 +1,15 @@
 .ls-signin-form {
+  &__fields {
+    min-height: 400px;
+  }
+
   &__field {
     margin-bottom: 1.5rem;
   }
 
   &__label {
     display: block;
-    font-size: 1rem;
+    font-size: 0.8rem;
     color: #333;
     margin-bottom: 0.5rem;
     font-weight: 500;
@@ -15,11 +19,13 @@
     width: 100%;
     border: 1px solid #ccc;
     border-radius: 0.75rem;
+
     --padding-start: 1rem;
     --padding-end: 1rem;
     --padding-top: 0.875rem;
     --padding-bottom: 0.875rem;
     --highlight-color: var(--ion-color-primary);
+
     margin-bottom: 0;
     font-size: 1rem;
     height: 3.25rem;
@@ -77,13 +83,17 @@
 
   &__button {
     margin-bottom: 2rem;
+
     --border-radius: 0.75rem;
     --padding-top: 1rem;
     --padding-bottom: 1rem;
+
     font-weight: 500;
+
     --background: #4261eb;
     --background-activated: #3a56d4;
     --background-hover: #3a56d4;
+
     font-size: 1rem;
     height: 3.25rem;
   }

frontend/src/pages/Auth/SignIn/components/SignInForm.tsx

@@ -148,54 +148,58 @@ const SignInForm = ({ className, testid = 'form-signin' }: SignInFormProps): JSX
       >
         {({ dirty, isSubmitting }) => (
           <Form data-testid={`${testid}-form`}>
-            <div className="ls-signin-form__field">
-              <label className="ls-signin-form__label">{t('label.email', { ns: 'auth' })}</label>
-              <Input
-                name="email"
-                maxlength={50}
-                autocomplete="email"
-                className="ls-signin-form__input"
-                ref={focusInput}
-                data-testid={`${testid}-field-email`}
-                type="email"
-                placeholder=""
-              />
-            </div>
-
-            <div className="ls-signin-form__field">
-              <label className="ls-signin-form__label">{t('label.password', { ns: 'auth' })}</label>
-              <Input
-                type="password"
-                name="password"
-                maxlength={30}
-                autocomplete="current-password"
-                className="ls-signin-form__input"
-                data-testid={`${testid}-field-password`}
-                placeholder=""
-              >
-                <IonInputPasswordToggle slot="end" />
-              </Input>
-            </div>
+            <div className="ls-signin-form__fields">
+              <div className="ls-signin-form__field">
+                <label className="ls-signin-form__label">{t('label.email', { ns: 'auth' })}</label>
+                <Input
+                  name="email"
+                  maxlength={50}
+                  autocomplete="email"
+                  className="ls-signin-form__input"
+                  ref={focusInput}
+                  data-testid={`${testid}-field-email`}
+                  type="email"
+                  placeholder=""
+                />
+              </div>
 
-            <div className="ls-signin-form__remember-forgot">
-              <div className="ls-signin-form__remember">
-                <CheckboxInput
-                  name="rememberMe"
-                  className="ls-signin-form__input-checkbox"
-                  testid={`${testid}-field-rememberme`}
-                  labelPlacement="end"
+              <div className="ls-signin-form__field">
+                <label className="ls-signin-form__label">
+                  {t('label.password', { ns: 'auth' })}
+                </label>
+                <Input
+                  type="password"
+                  name="password"
+                  maxlength={30}
+                  autocomplete="current-password"
+                  className="ls-signin-form__input"
+                  data-testid={`${testid}-field-password`}
+                  placeholder=""
                 >
-                  {t('label.remember-me', { ns: 'auth' })}
-                </CheckboxInput>
+                  <IonInputPasswordToggle slot="end" />
+                </Input>
               </div>
 
-              <a
-                href="/auth/forgot-password"
-                className="ls-signin-form__forgot-link"
-                data-testid={`${testid}-link-forgot-password`}
-              >
-                {t('forgot-password', { ns: 'auth' })}
-              </a>
+              <div className="ls-signin-form__remember-forgot">
+                <div className="ls-signin-form__remember">
+                  <CheckboxInput
+                    name="rememberMe"
+                    className="ls-signin-form__input-checkbox"
+                    testid={`${testid}-field-rememberme`}
+                    labelPlacement="end"
+                  >
+                    {t('label.remember-me', { ns: 'auth' })}
+                  </CheckboxInput>
+                </div>
+
+                <a
+                  href="/auth/forgot-password"
+                  className="ls-signin-form__forgot-link"
+                  data-testid={`${testid}-link-forgot-password`}
+                >
+                  {t('forgot-password', { ns: 'auth' })}
+                </a>
+              </div>
             </div>
 
             <IonButton