Feature/implementing recovery login screen

Sprint 1/README.md

@@ -15,3 +15,5 @@ Nele você poderá criar atas e exportá-las como PDF. Uma amostra do que nossa
 2º - A interface gráfica completa da ferramenta pode ser vista no nosso protótipo visual, em [nosso Figma.](https://www.figma.com/file/Zc5xu1dvWulkhRkqGWU8bS/Typext-Novo-Prot%C3%B3tipo?node-id=0%3A1)
 
 3º - Nossa primeira versão da documentação, contemplando todos os casos de uso e requisitos funcionais, é acessada [clicando aqui.](https://github.com/MatheusCampos-450/typext-frontend/blob/main/docs/Documenta%C3%A7%C3%A3o%20geral%20-%20Casos%20de%20uso%2C%20requisitos%20e%20diagrama%20de%20modelo.pdf)
+
+4º - Apresentação realizada para empresa cliente: [Acesse aqui.](https://www.canva.com/design/DAEaLlaUFec/Sa-mv3LFWQdluoEd9wFDUw/view?utm_content=DAEaLlaUFec&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)

src/App.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 
-import Header from './components/Header/Header';
 import Routes from './routes';
 import GlobalStyle from './styles/global';
 
 function App() {
   return (
     <>
-      <Header />
       <Routes />
       <GlobalStyle />
     </>

src/contexts/MainContext.tsx

@@ -1,11 +1,11 @@
 import React, { createContext } from 'react';
 
-export const MainContext = createContext({});
-
 interface IMainContext {
   children: React.ReactNode;
 }
 
+export const MainContext = createContext({});
+
 export const MainProvider: React.FC<IMainContext> = ({ children }: IMainContext) => {
   return (
     <MainContext.Provider value="teste">

src/pages/Main/index.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import { MainProvider } from 'contexts/MainContext';
 
+import Header from 'components/Header/Header';
 import Initial from './components/Initial/Initial';
 import ProjectInformation from './components/ProjectInformation/ProjectInformation';
 import OptionButtons from './components/OptionButtons';
@@ -53,30 +54,33 @@ const Main = () => {
   };
 
   return (
-    <MainProvider>
-      {showMinute && (
-        <MinuteViewer setShowMinute={setShowMinute} minute={minute} />
-      )}
+    <>
+      <Header />
+      <MainProvider>
+        {showMinute && (
+          <MinuteViewer setShowMinute={setShowMinute} minute={minute} />
+        )}
 
-      {showSchedule && <ScheduleModal setShowSchedule={setShowSchedule} />}
+        {showSchedule && <ScheduleModal setShowSchedule={setShowSchedule} />}
 
-      <Container>
-        <Initial setAddressAndHour={setAddressAndHour} />
-        <ProjectInformation setProjectInfo={setProjectInfo} />
-        <Topics setTopics={setTopics} topics={topics} />
+        <Container>
+          <Initial setAddressAndHour={setAddressAndHour} />
+          <ProjectInformation setProjectInfo={setProjectInfo} />
+          <Topics setTopics={setTopics} topics={topics} />
 
-        <Subjects subjects={subjects} setSubjects={setSubjects} />
-        <Distributions
-          setDistributions={setDistributions}
-          distributions={distributions}
-        />
-        <OptionButtons
-          setShowMinute={setShowMinute}
-          handleGenerateMinute={handleGenerateMinute}
-          setShowSchedule={setShowSchedule}
-        />
-      </Container>
-    </MainProvider>
+          <Subjects subjects={subjects} setSubjects={setSubjects} />
+          <Distributions
+            setDistributions={setDistributions}
+            distributions={distributions}
+          />
+          <OptionButtons
+            setShowMinute={setShowMinute}
+            handleGenerateMinute={handleGenerateMinute}
+            setShowSchedule={setShowSchedule}
+          />
+        </Container>
+      </MainProvider>
+    </>
   );
 };
 

src/pages/NewPassword/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import Input from 'components/Input/Input';
+import Button from 'components/Button/Button';
+import Logo from 'assets/logo.svg';
+
+import StyledNewPassword from './styles';
+
+const index = () => {
+    return (
+      <StyledNewPassword>
+        <img src={Logo} alt="Logo Typext" />
+
+        <div className="NewPassword">
+          <Input
+            title="Inserir nova senha"
+            color="var(--black)"
+            styleWidth="41.875rem"
+            Type="text"
+          />
+
+          <Input
+            title="Confirme nova senha"
+            color="var(--black)"
+            styleWidth="41.875rem"
+            Type="text"
+          />
+
+          <Button
+            color="var(--green)"
+          >
+            Atualizar
+          </Button>
+
+        </div>
+      </StyledNewPassword>
+
+    );
+};
+
+export default index;

src/pages/NewPassword/styles.ts

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export const StyledNewPassword = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    margin-top: 4.375rem;
+
+    .NewPassword {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+
+        margin-top: 13.25rem;
+
+        align-items: flex-end;
+
+        Input {
+            margin-bottom: 2rem;  
+        }
+
+        Button {
+            margin-top: 4rem;
+            width: 14.063rem;
+        }
+    }
+
+`;
+
+export default StyledNewPassword;

src/pages/RecoveryPassword/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import Button from 'components/Button/Button';
+import Input from 'components/Input/Input';
+
+import LogoIcon from 'assets/logo.svg';
+
+import StyledRecoveryPassword from './styles';
+
+const RecoveryPassword = () => {
+  return (
+    <>
+      <StyledRecoveryPassword>
+        <div className="RecoveryPassword">
+          <a href="/recovery-password">
+            <img src={LogoIcon} alt="Typext" />
+          </a>
+
+          <div className="Email">
+            <Input
+              title="Confirme seu e-mail"
+              color="var(--black)"
+              styleWidth="41.875rem"
+              Type="text"
+            />
+
+            <Button
+              color="var(--black)"
+            >
+              Próximo
+            </Button>
+          </div>
+        </div>
+      </StyledRecoveryPassword>
+    </>
+  );
+};
+
+export default RecoveryPassword;

src/pages/RecoveryPassword/styles.ts

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+const StyledRecoveryPassword = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 4.375rem;
+
+  .RecoveryPassword {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    max-width: 102.125rem;
+    width: 100%;
+
+    a {
+      width: 18.125rem;
+      height: 3.125rem;
+
+      img {
+        width: 18.125rem;
+        height: 3.125rem;
+      }
+    }
+
+    .Email {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      justify-content: center;
+
+      width: 41.875rem;
+
+      margin-top: 16rem;
+
+      Button {
+        margin-top: 9.688rem;
+      }
+    }
+  }
+`;
+
+export default StyledRecoveryPassword;

src/routes.tsx

@@ -1,6 +1,8 @@
+import RecoveryPassword from 'pages/RecoveryPassword';
 import React from 'react';
 import { Switch, Route, BrowserRouter } from 'react-router-dom';
 
+import NewPassword from 'pages/NewPassword';
 import Main from './pages/Main';
 import Login from './pages/Login';
 
@@ -9,7 +11,12 @@ export default function Routes() {
     <BrowserRouter>
       <Switch>
         <Route path="/" exact component={Main} />
+<<<<<<< HEAD
+        <Route path="/recovery-password" exact component={RecoveryPassword} />
+        <Route path="/new-password" exact component={NewPassword} />
+=======
         <Route path="/login" exact component={Login} />
+>>>>>>> 0084ab32ef450edc611b3d1fe3d1c34acd8d2b3c
       </Switch>
     </BrowserRouter>
   );