Merge pull request #11 from Typext/feature/login-screen

Feature/login screen

Author: MatheusCampos-450

src/assets/logo.svg

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import Input from 'components/Input/Input';
+import Button from 'components/Button/Button';
+import Logo from 'assets/logo.svg';
+import Content from './styles';
+
+function Login() {
+    return (
+      <>
+        <Content>
+
+          <div className="Login">
+
+            <a href="/#">
+              <img src={Logo} alt="Logo" />
+            </a>
+
+            <div className="EmailPassword">
+              <Input
+                title="E-mail"
+                color="black"
+                Size="large"
+                styleWidth="large"
+              />
+
+              <Input
+                title="Senha"
+                color="black"
+                Size="large"
+                styleWidth="large"
+              />
+
+            </div>
+
+            <div className="LoginPassForgot">
+              <Button
+                color="var(--black)"
+                colorText="white"
+                size="23.75rem"
+              >
+                Login
+
+              </Button>
+
+              <a href="/recovery-password">
+                Esqueceu a senha?
+                {' '}
+                <strong> Clique aqui.</strong>
+              </a>
+
+            </div>
+
+          </div>
+
+        </Content>
+      </>
+    );
+}
+
+export default Login;

src/pages/Login/index.tsx

@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+
+const Content = styled.div`
+  
+  display: flex;
+  justify-content: center;
+
+  margin-top: 4.375rem;
+
+
+  .Login {
+    
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+
+      a {
+      width: 18.125rem;
+      height: 3.125rem;
+
+      img {
+        width: 18.125rem;
+        height: 3.125rem;
+      }
+    }
+
+    .EmailPassword {
+
+        margin-top: 13.25rem;
+
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+
+        Input {
+            margin-bottom: 2rem;  
+        }
+
+
+    }
+
+    .LoginPassForgot { 
+
+        margin-top: 4rem;
+        width: 100%;
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        Button {
+            width: 14.063rem;
+        }
+
+        a {
+            display: flex;
+            align-items: center;
+            color: var(--red-pink);
+        }
+
+        strong {
+            margin-left: 0.2rem;
+        }
+
+    }
+
+    
+
+  }
+
+  
+
+`;
+
+export default Content;

src/pages/Login/styles.ts

@@ -2,12 +2,14 @@ import React from 'react';
 import { Switch, Route, BrowserRouter } from 'react-router-dom';
 
 import Main from './pages/Main';
+import Login from './pages/Login';
 
 export default function Routes() {
   return (
     <BrowserRouter>
       <Switch>
         <Route path="/" exact component={Main} />
+        <Route path="/login" exact component={Login} />
       </Switch>
     </BrowserRouter>
   );