Merge pull request #15 from Typext/feature/register-new-user

finished implement register new user screen

Author: MatheusCampos-450

src/pages/RegisterNewUser/index.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import LogoIcon from 'assets/logo.svg';
+import Input from 'components/Input/Input';
+import Button from 'components/Button/Button';
+import StyledRegisterNewUser from './styles';
+
+const RegisterNewUser = () => {
+  return (
+    <StyledRegisterNewUser>
+      <a href="/recovery-password">
+        <img src={LogoIcon} alt="Typext" />
+      </a>
+
+      <div className="RegisterNewUser">
+        <div className="Content">
+          <div className="LeftContent">
+            <Input
+              title="Nome completo"
+              color="var(--black)"
+              styleWidth="41.875rem"
+              Type="text"
+            />
+
+            <Input
+              title="Título / Cargo"
+              color="var(--black)"
+              styleWidth="41.875rem"
+              Type="text"
+            />
+
+            <Input
+              title="Área"
+              color="var(--black)"
+              styleWidth="41.875rem"
+              Type="text"
+            />
+
+            <Input
+              title="Empresa"
+              color="var(--black)"
+              styleWidth="41.875rem"
+              Type="text"
+            />
+          </div>
+
+          <div className="RightContent">
+            <Input
+              title="E-mail"
+              color="var(--black)"
+              styleWidth="41.875rem"
+              Type="text"
+            />
+
+            <Input
+              title="Telefone"
+              color="var(--black)"
+              styleWidth="41.875rem"
+              Type="text"
+            />
+
+            <Input
+              title="Senha"
+              color="var(--black)"
+              styleWidth="41.875rem"
+              Type="text"
+            />
+
+            <Input
+              title="Confirme a senha"
+              color="var(--black)"
+              styleWidth="41.875rem"
+              Type="text"
+            />
+          </div>
+        </div>
+
+        <Button
+          color="var(--green)"
+        >
+          Cadastrar
+        </Button>
+      </div>
+    </StyledRegisterNewUser>
+  );
+};
+
+export default RegisterNewUser;

src/pages/RegisterNewUser/styles.ts

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+
+const StyledRegisterNewUser = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 4.375rem;
+
+  a {
+    width: 18.125rem;
+    height: 3.125rem;
+
+    img {
+      width: 18.125rem;
+      height: 3.125rem;
+    }
+  }
+
+  .RegisterNewUser{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+
+    .Content {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 7.25rem;
+
+      margin-top: 8.75rem;
+
+      Input {
+        margin-bottom: 1.25rem;
+      }
+    }
+
+    Button {
+      margin-top: 5.625rem;
+    }
+  }
+`;
+
+export default StyledRegisterNewUser;

src/routes.tsx

@@ -3,6 +3,7 @@ import RecoveryPassword from 'pages/RecoveryPassword';
 import { Switch, Route, BrowserRouter } from 'react-router-dom';
 
 import NewPassword from 'pages/NewPassword';
+import RegisterNewUser from 'pages/RegisterNewUser';
 import Main from './pages/Main';
 import Login from './pages/Login';
 import InviteUsers from './pages/InviteUsers';
@@ -12,9 +13,10 @@ export default function Routes() {
     <BrowserRouter>
       <Switch>
         <Route path="/" exact component={Main} />
-        <Route path="/recovery-password" exact component={RecoveryPassword} />
         <Route path="/new-password" exact component={NewPassword} />
+        <Route path="/recovery-password" exact component={RecoveryPassword} />
         <Route path="/login" exact component={Login} />
+        <Route path="/register-new-user" exact component={RegisterNewUser} />
         <Route path="/invite-users" exact component={InviteUsers} />
       </Switch>
     </BrowserRouter>