refactor: adjust LoginPage layout

The LoginPage component has been refactored to adjust the layout and improve the alignment of its elements.
ateliware · May 9, 2024 · 187dbaa · 187dbaa
1 parent 6235dae
commit 187dbaa
Showing 1 changed file with 57 additions and 61 deletions.
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
@@ -29,75 +29,71 @@ export default function LoginPage() {
   }) as SubmitHandler<FieldValues>;
 
   return (
-    <div className="row justify-center">
-      <div className="col-sm-12 col-md-6">
-        <div className="d-flex justify-center">
-          <div className="d-flex justify-center background-login-page">
-            <form
-              autoComplete="off"
-              className="form-max-height w-100"
-              onSubmit={handleSubmit(onSubmit)}
-            >
-              <img src={logo} alt="logo" width="100%" />
+    <div className="d-flex justify-center">
+      <div className="d-flex justify-center background-login-page">
+        <form
+          autoComplete="off"
+          className="form-max-height w-100"
+          onSubmit={handleSubmit(onSubmit)}
+        >
+          <img src={logo} alt="logo" width="100%" />
 
-              <div className="mb-s-350">
-                <p className="font-weight-bold line-height-small text-primary">
-                  Informe o seu CPF, senha e clique em Entrar
-                </p>
-              </div>
+          <div className="mb-s-350">
+            <p className="font-weight-bold line-height-small text-primary">
+              Informe o seu CPF, senha e clique em Entrar
+            </p>
+          </div>
 
-              <Input
-                className="mb-s-200"
-                form={register('cpf', {
-                  required: 'Obrigatório',
-                  ...formCpfPattern,
-                })}
-                placeholder="Digite o seu CPF"
-                error={!!errors.cpf}
-                caption={errors.cpf?.message as string}
-              />
+          <Input
+            className="mb-s-200"
+            form={register('cpf', {
+              required: 'Obrigatório',
+              ...formCpfPattern,
+            })}
+            placeholder="Digite o seu CPF"
+            error={!!errors.cpf}
+            caption={errors.cpf?.message as string}
+          />
 
-              <PasswordInput
-                className="text-primary"
-                form={register('password', { required: 'Obrigatório' })}
-                placeholder="Insira sua senha"
-                error={!!errors.password}
-                caption={errors.password?.message as string}
-              />
+          <PasswordInput
+            className="text-primary"
+            form={register('password', { required: 'Obrigatório' })}
+            placeholder="Insira sua senha"
+            error={!!errors.password}
+            caption={errors.password?.message as string}
+          />
 
-              <div className="mt-s-200 d-flex justify-end">
-                <a
-                  href="/recover_password"
-                  className="font-s-150 font-weight-regular line-height-medium text-primary text-decoration-underline"
-                >
-                  Esqueci minha senha
-                </a>
-              </div>
+          <div className="mt-s-200 d-flex justify-end">
+            <a
+              href="/recover_password"
+              className="font-s-150 font-weight-regular line-height-medium text-primary text-decoration-underline"
+            >
+              Esqueci minha senha
+            </a>
+          </div>
 
-              <Button
-                type="submit"
-                isLoading={isLoadingRequest}
-                className="!w-100 mt-s-750 mb-s-100"
-                alignText="center"
-              >
-                Entrar
-              </Button>
+          <Button
+            type="submit"
+            isLoading={isLoadingRequest}
+            className="!w-100 mt-s-750 mb-s-100"
+            alignText="center"
+          >
+            Entrar
+          </Button>
 
-              <div className="mt-s-400 d-flex col justify-center flex-direction-column">
-                <p className="font-weight-bold line-height-small text-primary">
-                  Não possui uma conta?
-                </p>
+          <div className="mt-s-400 d-flex col justify-center flex-direction-column">
+            <p className="font-weight-bold line-height-small text-primary">
+              Não possui uma conta?
+            </p>
 
-                <a
-                  className="mt-s-200 font-s-150 font-weight-bold line-height-medium text-primary"
-                  href="/signup"
-                >
-                  Cadastrar-se
-                </a>
-              </div>
-            </form>
+            <a
+              className="mt-s-200 font-s-150 font-weight-bold line-height-medium text-primary"
+              href="/signup"
+            >
+              Cadastrar-se
+            </a>
           </div>
-        </div>
+        </form>
       </div>
     </div>
   );