WJ-91 - New: Header and Footer in signup page;

90lucasgabriel · Oct 24, 2020 · 55fce96 · 55fce96
1 parent 97ed2ff
commit 55fce96
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 48 deletions.
diff --git a/src/screens/Signup/index.tsx b/src/screens/Signup/index.tsx
@@ -10,13 +10,14 @@ import getValidationErrors from 'shared/utils/getValidationErrors';
 import api from 'services/api';
 
 import { Color } from 'shared/enums';
-import { ReactComponent as Logo } from 'assets/logo.svg';
-import Input from 'components/Input';
-import Button from 'components/Button';
+import { ColumnLayout } from 'components/Layout';
+import { Input, Button } from 'components';
+import { Footer, Header } from 'containers';
 import {
-  RowLayout,
+  HeaderContainer,
+  Container,
+  RowContainer,
   SignupContainer,
-  LogoContainer,
   SignupHeader,
   SignupForm,
   ErrorMessage,
@@ -69,44 +70,49 @@ const Signup: React.FC = () => {
   );
 
   return (
-    <RowLayout>
-      <SignupContainer>
-        <LogoContainer>
-          <Logo fill={Color.Primary} />
-        </LogoContainer>
-        <SignupForm ref={formRef} onSubmit={handleSubmit}>
-          <SignupHeader>Criar Conta</SignupHeader>
+    <ColumnLayout>
+      <HeaderContainer>
+        <Header background={Color.Transparent} color={Color.Primary} />
+      </HeaderContainer>
+      <Container>
+        <RowContainer>
+          <SignupContainer>
+            <SignupForm ref={formRef} onSubmit={handleSubmit}>
+              <SignupHeader>Criar Conta</SignupHeader>
 
-          <Input name="name" icon={FiUser} placeholder="Nome" />
-          <Input name="email" icon={FiMail} placeholder="E-mail" />
-          <Input
-            name="password"
-            icon={FiLock}
-            type="password"
-            placeholder="Senha"
-          />
-          <ErrorMessage>{error}</ErrorMessage>
-          <Button type="submit" loading={signupLoading}>
-            CADASTRAR
-          </Button>
-        </SignupForm>
-      </SignupContainer>
+              <Input name="name" icon={FiUser} placeholder="Nome" />
+              <Input name="email" icon={FiMail} placeholder="E-mail" />
+              <Input
+                name="password"
+                icon={FiLock}
+                type="password"
+                placeholder="Senha"
+              />
+              <ErrorMessage>{error}</ErrorMessage>
+              <Button type="submit" loading={signupLoading}>
+                CADASTRAR
+              </Button>
+            </SignupForm>
+          </SignupContainer>
 
-      <LoginContainer>
-        <LoginHeader>Bem-vindo, Jumper!</LoginHeader>
-        <LoginDescription>
-          Para se manter conectado, faça login com suas credenciais.
-        </LoginDescription>
-        <Button
-          type="button"
-          variant="outlined"
-          theme="light"
-          onClick={() => history.push(Route.LOGIN)}
-        >
-          LOGIN
-        </Button>
-      </LoginContainer>
-    </RowLayout>
+          <LoginContainer>
+            <LoginHeader>Bem-vindo, Jumper!</LoginHeader>
+            <LoginDescription>
+              Para se manter conectado, faça login com suas credenciais.
+            </LoginDescription>
+            <Button
+              type="button"
+              variant="outlined"
+              theme="primary"
+              onClick={() => history.push(Route.LOGIN)}
+            >
+              LOGIN
+            </Button>
+          </LoginContainer>
+        </RowContainer>
+      </Container>
+      <Footer />
+    </ColumnLayout>
   );
 };
 

diff --git a/src/screens/Signup/styles.ts b/src/screens/Signup/styles.ts
@@ -1,19 +1,35 @@
 import styled from 'styled-components';
 import { Form } from '@unform/web';
 import { Color, Size } from 'shared/enums';
-import { RowLayout as Row } from 'components/Layout';
 
-export const RowLayout = styled(Row)`
+import { Container as ContainerDefault } from 'components/Layout';
+
+export const HeaderContainer = styled.div`
+  z-index: 5;
+`;
+
+export const Container = styled(ContainerDefault)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  width: 100%;
+`;
+
+export const RowContainer = styled.div`
+  display: flex;
   flex-direction: row-reverse;
+  flex-wrap: wrap;
+  flex: 1;
 `;
 
 export const SignupContainer = styled.div`
   display: flex;
-  flex: 1 1 600px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: ${Size.Default};
+  flex: 1 1 458px;
 `;
 
 export const LogoContainer = styled.div`
@@ -48,26 +64,29 @@ export const ErrorMessage = styled.p`
 
 export const LoginContainer = styled.div`
   display: flex;
-  flex: 1 1 300px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: ${Color.Primary};
   color: ${Color.Fill};
   text-align: center;
   padding: ${Size.Default};
+  flex: 1 1 458px;
+
+  @media (max-width: 915px) {
+    background: ${Color.FillSecondary};
+  }
 `;
 
 export const LoginHeader = styled.h1`
   margin-bottom: ${Size.Large};
   font-size: ${Size.Large};
   font-weight: 400;
-  color: ${Color.Fill};
+  color: ${Color.Primary};
 `;
 
 export const LoginDescription = styled.p`
   margin-bottom: ${Size.Large};
   font-size: ${Size.Default};
   font-weight: 100;
-  color: ${Color.Fill};
+  color: ${Color.Primary};
 `;