From ff82ab8465cd9391cdbfffe97986f70de0fc8b47 Mon Sep 17 00:00:00 2001
From: Algusto-RC <algustorc@gmail.com>
Date: Wed, 22 Nov 2023 22:05:44 -0300
Subject: [PATCH] Melhorias no header

---
 frontend/src/components/Footer/index.js  | 11 +--
 frontend/src/components/Header/index.js  | 60 ++++++++++++++++
 frontend/src/components/Header/styles.js | 28 ++++++++
 frontend/src/pages/Home/index.js         | 89 ++----------------------
 4 files changed, 96 insertions(+), 92 deletions(-)
 create mode 100644 frontend/src/components/Header/index.js
 create mode 100644 frontend/src/components/Header/styles.js

diff --git a/frontend/src/components/Footer/index.js b/frontend/src/components/Footer/index.js
index cc2804ad..392110f3 100644
--- a/frontend/src/components/Footer/index.js
+++ b/frontend/src/components/Footer/index.js
@@ -1,15 +1,10 @@
 import React from "react";
 import * as C from "./styles";
 
-const Footer = ({ type, placeholder, value, onChange }) => {
+const Footer = () => {
   return (
-    <C.Input
-      value={value}
-      onChange={onChange}
-      type={type}
-      placeholder={placeholder}
-    />
+    <></>
   );
 };
 
-export default Input;
+export default Footer;
diff --git a/frontend/src/components/Header/index.js b/frontend/src/components/Header/index.js
new file mode 100644
index 00000000..c1d2a06d
--- /dev/null
+++ b/frontend/src/components/Header/index.js
@@ -0,0 +1,60 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Flex, Box, Spacer, Menu, MenuButton } from "@chakra-ui/react";
+import { Image } from '@chakra-ui/react'
+import cmtnLogo from '../../img/cmtnLogo.png'
+import menuHamburguer from '../../icon/menuHamburguer.png'
+import userIcon from '../../icon/usuario-do-circulo 1.png';
+import settingsIcon from '../../icon/definicoes 1.png';
+import helpIcon from '../../icon/interrogatorio 1.png';
+import logoutIcon from '../../icon/sair-alt 1.png';
+import { StyledMenuList, StyledImage, StyledMenuItem } from "./styles";
+
+
+const Header = () => {
+
+  return (
+    <Flex
+      as="header"
+      align="center"
+      justify="space-between"
+      padding="1rem"
+      backgroundColor="#243A69"
+      color="white"
+    >
+      <Box maxWidth={'16vh'} maxHeight={'16vh'}  paddingLeft='3vh'>
+        <Link to="/Home">
+          <Image src={cmtnLogo} alt='student' style={{ maxWidth: '100%', height: 'auto' }} />
+        </Link>
+      </Box>
+      <Spacer />
+      <Box maxWidth={'5vh'} maxHeight={'2vh'} marginTop={'-0.5px'} marginBottom={'3vh'} >
+        <Menu>
+          <MenuButton border={'none'} bgColor={'#243A69'} >
+            <Image src={menuHamburguer} alt='menuHamburguer' style={{ maxWidth: '100%', height: 'auto' }}/>
+          </MenuButton>
+          <StyledMenuList>
+            <StyledMenuItem>
+              <StyledImage src={userIcon} alt='User Icon' />
+                Conta
+              </StyledMenuItem>
+            <StyledMenuItem>
+              <StyledImage src={settingsIcon} alt='Settings Icon' />
+                Configuração
+              </StyledMenuItem>
+            <StyledMenuItem>
+              <StyledImage src={helpIcon} alt='Help Icon' />
+                Ajuda
+              </StyledMenuItem>
+            <StyledMenuItem>
+              <StyledImage src={logoutIcon} alt='Logout Icon' />
+              <button>Sair</button>
+            </StyledMenuItem>
+          </StyledMenuList>
+        </Menu>
+      </Box>
+    </Flex>
+  );
+};
+
+export default Header;
diff --git a/frontend/src/components/Header/styles.js b/frontend/src/components/Header/styles.js
new file mode 100644
index 00000000..7da96508
--- /dev/null
+++ b/frontend/src/components/Header/styles.js
@@ -0,0 +1,28 @@
+import { chakra, MenuList, MenuItem, Image } from '@chakra-ui/react';
+
+export const StyledMenuList = chakra(MenuList, {
+  baseStyle: {
+    listStyle: 'circle',
+    padding: 0,
+    margin: 0,
+  },
+});
+
+export const StyledMenuItem = chakra(MenuItem, {
+  baseStyle: {
+    display: 'flex',
+    alignItems: 'center',
+    marginBottom: '10px',
+    color: 'white', // Cor azul para o texto
+    fontFamily: 'Arial, sans-serif', // Altera a fonte
+    backgroundColor: '#243A69',
+  },
+});
+
+export const StyledImage = chakra(Image, {
+  baseStyle: {
+    maxWidth: '24px',
+    maxHeight: '24px',
+    marginRight: '10px', // Adiciona um espaçamento entre a imagem e o texto
+  },
+});
diff --git a/frontend/src/pages/Home/index.js b/frontend/src/pages/Home/index.js
index 99957ce2..02462060 100644
--- a/frontend/src/pages/Home/index.js
+++ b/frontend/src/pages/Home/index.js
@@ -1,90 +1,11 @@
 import React from "react";
-import axios from "axios"
-import styled from "styled-components";
-import { Link } from "react-router-dom";
-import { Flex, Box, Heading, Spacer, Menu, MenuButton, MenuList, MenuItem } from "@chakra-ui/react";
-import { Image } from '@chakra-ui/react'
-import cmtnLogo from '../../img/cmtnLogo.png'
-import menuHamburguer from '../../icon/menuHamburguer.png'
-import userIcon from '../../icon/usuario-do-circulo 1.png';
-import settingsIcon from '../../icon/definicoes 1.png';
-import helpIcon from '../../icon/interrogatorio 1.png';
-import logoutIcon from '../../icon/sair-alt 1.png';
+import Header from '../../components/Header/index.js'
 
+const Home = () => {
 
-
-const Header = () => {
-
-
-  
-  const StyledMenuList = styled(MenuList)`
-    list-style: 'circle';
-    padding: 0;
-    margin: 0;
-  `;
-
-  const StyledMenuItem = styled(MenuItem)`
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-    color: white; /* Cor azul para o texto */
-    font-family: Arial, sans-serif; /* Altera a fonte */
-    background-color: #243A69;
-  `;
-
-  const StyledImage = styled(Image)`
-    max-width: 24px;
-    max-height: 24px;
-    margin-right: 10px; /* Adiciona um espaçamento entre a imagem e o texto */
-  `;
-
-  return (
-    <Flex
-      as="header"
-      align="center"
-      justify="space-between"
-      padding="1rem"
-      backgroundColor="#243A69"
-      color="white"
-    >
-      <Box>
-        <Heading as="h1" size="lg">
-          <Box maxWidth={'16vh'} maxHeight={'16vh'}  paddingLeft='3vh'>
-            <Image src={cmtnLogo} alt='student' style={{ maxWidth: '100%', height: 'auto' }} />
-          </Box>
-        </Heading>
-      </Box>
-      <Spacer />
-      <Box>
-        <Link to="/">Home</Link>
-        <Box maxWidth={'5vh'} maxHeight={'2vh'} marginTop={'-0.5px'} marginBottom={'3vh'} >
-          <Menu>
-            <MenuButton border={'none'} bgColor={'#243A69'} >
-              <Image src={menuHamburguer} alt='menuHamburguer' style={{ maxWidth: '100%', height: 'auto' }}/>
-            </MenuButton>
-            <StyledMenuList>
-              <StyledMenuItem>
-                <StyledImage src={userIcon} alt='User Icon' />
-                Conta
-              </StyledMenuItem>
-              <StyledMenuItem>
-                <StyledImage src={settingsIcon} alt='Settings Icon' />
-                Configuração
-              </StyledMenuItem>
-              <StyledMenuItem>
-                <StyledImage src={helpIcon} alt='Help Icon' />
-                Ajuda
-              </StyledMenuItem>
-              <StyledMenuItem>
-                <StyledImage src={logoutIcon} alt='Logout Icon' />
-                <button>Sair</button>
-              </StyledMenuItem>
-            </StyledMenuList>
-          </Menu>
-        </Box>
-      </Box>
-    </Flex>
+return (
+    <Header></Header>
   );
 };
 
-export default Header;
+export default Home;