Merge pull request #92 from 90lucasgabriel/feature/WJ-91

WJ-91 - Add Header to Login and Signup pages
90lucasgabriel · Oct 24, 2020 · 59ee5bb · 59ee5bb
2 parents ae017dc + 55fce96
commit 59ee5bb
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 95 deletions.
diff --git a/src/screens/Login/index.tsx b/src/screens/Login/index.tsx
@@ -8,15 +8,16 @@ import { useAuth } from 'domains/Auth/hooks';
 import Route from 'routes/enums';
 import LoginFormData from 'screens/Login/dtos/LoginFormData';
 import getValidationErrors from 'shared/utils/getValidationErrors';
-
 import { Color } from 'shared/enums';
-import { RowLayout } from 'components/Layout';
-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 {
+  HeaderContainer,
+  Container,
+  RowContainer,
   LoginContainer,
-  LogoContainer,
   LoginHeader,
   LoginForm,
   ErrorMessage,
@@ -69,43 +70,48 @@ const Login: React.FC = () => {
   );
 
   return (
-    <RowLayout>
-      <LoginContainer>
-        <LogoContainer>
-          <Logo fill={Color.Primary} />
-        </LogoContainer>
-        <LoginForm ref={formRef} onSubmit={handleSubmit}>
-          <LoginHeader>Login</LoginHeader>
+    <ColumnLayout>
+      <HeaderContainer>
+        <Header background={Color.Transparent} color={Color.Primary} />
+      </HeaderContainer>
+      <Container>
+        <RowContainer>
+          <LoginContainer>
+            <LoginForm ref={formRef} onSubmit={handleSubmit}>
+              <LoginHeader>Login</LoginHeader>
 
-          <Input name="email" icon={FiMail} placeholder="E-mail" />
-          <Input
-            name="password"
-            icon={FiLock}
-            type="password"
-            placeholder="Senha"
-          />
-          <ErrorMessage data-testid="errorMessage">{error}</ErrorMessage>
-          <Button type="submit" loading={loginLoading}>
-            ENTRAR
-          </Button>
-        </LoginForm>
-      </LoginContainer>
+              <Input name="email" icon={FiMail} placeholder="E-mail" />
+              <Input
+                name="password"
+                icon={FiLock}
+                type="password"
+                placeholder="Senha"
+              />
+              <ErrorMessage data-testid="errorMessage">{error}</ErrorMessage>
+              <Button type="submit" loading={loginLoading}>
+                ENTRAR
+              </Button>
+            </LoginForm>
+          </LoginContainer>
 
-      <SignupContainer>
-        <SignupHeader>Olá, visitante!</SignupHeader>
-        <SignupDescription>
-          Cadastre-se e conheça as vantagens do Cinejump.
-        </SignupDescription>
-        <Button
-          type="button"
-          variant="outlined"
-          theme="light"
-          onClick={() => history.push(Route.SIGNUP)}
-        >
-          CRIAR CONTA
-        </Button>
-      </SignupContainer>
-    </RowLayout>
+          <SignupContainer>
+            <SignupHeader>Olá, visitante!</SignupHeader>
+            <SignupDescription>
+              Cadastre-se e conheça as vantagens do Cinejump.
+            </SignupDescription>
+            <Button
+              type="button"
+              variant="outlined"
+              theme="primary"
+              onClick={() => history.push(Route.SIGNUP)}
+            >
+              CRIAR CONTA
+            </Button>
+          </SignupContainer>
+        </RowContainer>
+      </Container>
+      <Footer />
+    </ColumnLayout>
   );
 };
 

diff --git a/src/screens/Login/styles.ts b/src/screens/Login/styles.ts
@@ -2,13 +2,34 @@ import styled from 'styled-components';
 import { Form } from '@unform/web';
 import { Color, Size } from 'shared/enums';
 
+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;
+  flex-wrap: wrap;
+  flex: 1;
+`;
+
 export const LoginContainer = 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`
@@ -43,26 +64,30 @@ export const ErrorMessage = styled.p`
 
 export const SignupContainer = styled.div`
   display: flex;
-  flex: 1 1 300px;
+  flex: 1;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: ${Color.Primary};
-  color: ${Color.Fill};
+  color: ${Color.Primary};
   text-align: center;
   padding: ${Size.Default};
+  flex: 1 1 458px;
+
+  @media (max-width: 915px) {
+    background: ${Color.FillSecondary};
+  }
 `;
 
 export const SignupHeader = styled.h1`
   margin-bottom: ${Size.Large};
   font-size: ${Size.Large};
   font-weight: 400;
-  color: ${Color.Fill};
+  color: ${Color.Primary};
 `;
 
 export const SignupDescription = styled.p`
   margin-bottom: ${Size.Large};
   font-size: ${Size.Default};
   font-weight: 100;
-  color: ${Color.Fill};
+  color: ${Color.Primary};
 `;
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};
 `;
diff --git a/src/shared/enums/Color.ts b/src/shared/enums/Color.ts
@@ -6,6 +6,7 @@ enum Color {
   Text = '#777',
   Error = '#c53030',
   Empty = '#0F0F0F',
+  Transparent = 'transparent',
 }
 
 export default Color;