Chore/header adjusts

README.md

@@ -1,94 +1,3 @@
-![typext_cover](https://user-images.githubusercontent.com/56441371/112768034-52dbed80-8ff0-11eb-8a72-5190c56f1090.png)
-
-
-O Typext nasceu através da necessidade de resolução de um problema do nosso cliente: a falta de uma forma de criar e gerenciar atas digitais.
-O projeto está sendo desenvolvido a partir de uma parceria com a Fatec São José dos Campos - Prof. Jessen Vidal.
-
-### - Disciplinas Integradas
-
-- **Engenharia de Software III**
-
-    Prof. Me. Giuliano Araujo Bertoti
-
-- **Testes de Software**
-
-    Prof. Me. Gerson Penha Neto
-
-- **Banco de Dados**
-
-    Profª. Ma. Juliana Forin Pasquini Martinez
-
-
-### Time
-
-- Evandro Braga - PO - [LinkedIn](https://www.linkedin.com/in/evandro-rodrigues-de-melo-braga-1aa677149/)
-- José Danrley - Scrum Master - [LinkedIn](https://www.linkedin.com/in/jos%C3%A9-danrley-069827191/)
-- Cristiane Rodrigues - DEV Team - [LinkedIn](https://www.linkedin.com/in/cristiane-rodrigues-20b3b61b2)
-- Leonardo Messias  - DEV Team - [LinkedIn](https://www.linkedin.com/in/leonardo-messias-89568818a/)
-- Lucas Okazaki - DEV Team - [LinkedIn](https://www.linkedin.com/in/lucas-okazaki-83a1b0193/)
-- Luis Guilherme - DEV Team - [LinkedIn](https://www.linkedin.com/mwlite/in/luis-guilherme-a17b58185)
-- Matheus Amauri - DEV Team - [LinkedIn](https://www.linkedin.com/in/matheus-campos-9b8550192)
-- Raquel Ribeiro - DEV Team - [LinkedIn](https://www.linkedin.com/in/raquel-rodrigues-ribeiro-a9537818b)
-- Washington Henrique - DEV Team - [LinkedIn](https://www.linkedin.com/in/justhenrique/)
-
-### Objetivo
-
-Desenvolver um sistema de criação e gerenciamento de atas de reuniões
-
-### O Projeto
-
-O Projeto consiste em um sistema web para criação e gerenciamento de atas digitais. A plataforma possibilita a avaliação dos documentos para todos os participantes, sem a precisar estar cadastrado na ferramenta. O Typext conta também com um sistema de assinatura digital para maior controle e segurança.
-
-### Requisitos funcionais
-
-Para acessar a documentação de requisitos clique em: [Documentação geral](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)
-
-### Requisitos não funcionais:
-
-![typext_tecs](https://user-images.githubusercontent.com/56441371/112768909-c122af00-8ff4-11eb-98b4-5c08e4501299.png)
-
-As principais tecnologias que utilizamos para o desenvolvumento do projeto foram: TypeScript - React - Node.js - Postgres
-
-### Backlog do Projeto
-
-![typext_sprints](https://user-images.githubusercontent.com/56441371/112768962-ffb86980-8ff4-11eb-8490-3e0e63db3c0e.png)
-
-### Entregas
-
-[Sprint 1](https://github.com/MatheusCampos-450/typext-frontend/tree/main/Sprint%201) -  08/03/2021 a 28/03/2021
-
-Sprint 2 -  29/03/2021 a 18/04/2020
-
-Sprint 3 - 02/11/2020 a 08/11/2020
-
-Sprint 4 - 23/11/2020 a 29/11/2020
-
-### Requisitos necessários para o funcionamento do software
-
-- Para executar o protótipo entregue nessa primeira sprint, será necessário somente o Node para rodar o protótipo funcional
-
-### Para instalar o node no linux
-
-Rode os comandos no terminal
-
-**Ubuntu**
-```
-curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
-sudo apt-get install -y nodejs
-```
-
-**Debian, as root**
-```
-curl -fsSL https://deb.nodesource.com/setup_14.x | bash -
-apt-get install -y nodejs
-```
-
-### Para instalar o node no windows
-
-Entre no site do [node](https://nodejs.org/en/) e baixe a versão LTS
-
-![image](https://user-images.githubusercontent.com/56441371/112771142-d7366c80-9000-11eb-93e4-5a7bcbcb232f.png)
-
 ## Rodando o projeto
 
 Para rodar o projeto localmente basta clonar o repositório e inserir o comando no terminal na pasta raiz do projeto

src/components/Header/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import addIcon from '../../assets/add_icon.svg';
@@ -11,26 +11,42 @@ import { StyledHeader } from './styles';
 const Header = () => {
   const history = useHistory();
 
-  const handleNavigateToHome = () => {
+  const handleLogout = useCallback(() => {
     history.push('/');
-  };
+    localStorage.removeItem('tpxt_user');
+    localStorage.removeItem('tpxt_tkn');
+  }, [history]);
+
+  const handleNavigateToHome = useCallback(() => {
+    history.push('/');
+  }, [history]);
+
+  const handleNavigateToMinute = useCallback(() => {
+    history.push('/minute');
+  }, [history]);
 
   return (
     <StyledHeader>
       <section className="shortOptions">
         <button type="button" onClick={handleNavigateToHome}>
-          <img src={homeIcon} alt="" />
+          <img src={homeIcon} alt="home" />
         </button>
 
-        <img src={addIcon} alt="" />
+        <button type="button" onClick={handleNavigateToMinute}>
+          <img src={addIcon} alt="minute" />
+        </button>
       </section>
 
-      <img src={shortLogo} className="logo" alt="" />
+      <figure>
+        <img src={shortLogo} className="logo" alt="" />
+      </figure>
 
       <section className="usernameAndLogout">
         <h1>Nome do usuário</h1>
 
-        <img src={logoutIcon} alt="" />
+        <button type="button" onClick={handleLogout}>
+          <img src={logoutIcon} alt="logout" />
+        </button>
       </section>
     </StyledHeader>
   );

src/components/Header/styles.ts

@@ -1,15 +1,32 @@
 import styled from 'styled-components';
 
 export const StyledHeader = styled.header`
+  display: grid;
+  grid-template-columns: 20rem 1fr 20rem;
+
   height: 5rem;
   background: #f8f8f8;
   padding: 0 2.5rem;
 
-  &,
   section {
     display: flex;
     justify-content: space-between;
     align-items: center;
+
+    &:first-child {
+      justify-content: flex-start;
+    }
+
+    &:last-child {
+      justify-content: flex-end;
+    }
+  }
+
+  figure {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0%
   }
 
   h1 {
@@ -38,4 +55,10 @@ export const StyledHeader = styled.header`
     border: none;
     background: none;
   }
+
+  .shortOptions {
+    max-width: 150px;
+    width: 100%;
+    justify-content: flex-start;
+  }
 `;