Wip: Cabecalho

package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.7.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^4.18.9",
     "eslint-config-prettier": "^8.4.0",
     "eslint-plugin-prettier": "^4.0.0",
     "prettier": "^2.5.1",

src/App.css

@@ -0,0 +1,182 @@
+.health-logo {
+  width: 10%;
+  height: 10%;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: seashell;
+  border-radius: 10px;
+  box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
+  margin-top: 30px;
+}
+
+body {
+  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
+  color: #404040;
+  background: #0cd2a7;
+}
+
+.form-comum {
+  margin: 30px auto;
+  padding: 20px 20px 20px;
+  width: 310px;
+  background: white;
+  border-radius: 3px;
+  box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.form-comum h1 {
+  margin: -20px -20px 21px;
+  line-height: 40px;
+  font-size: 15px;
+  color: #555;
+  text-align: center;
+  background: #f3f3f3;
+  border-bottom: 1px solid #cfcfcf;
+  border-radius: 3px 3px 0 0;
+}
+
+.form-comum p {
+  margin: 20px 0 0;
+}
+
+.form-comum p.submit {
+  text-align: right;
+}
+
+.form-comum input[type='password'],
+input[type='text'] {
+  width: 90%;
+  margin: 5px;
+  padding: 0 10px;
+  height: 34px;
+  color: #404040;
+  background: white;
+  border: 1px solid;
+  border-color: #c4c4c4 #d1d1d1 #d4d4d4;
+  border-radius: 2px;
+  outline: 5px solid #eff4f7;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.form-comum input[type='text']:focus,
+input[type='password']:focus {
+  border-color: #7dc9e2;
+  outline-color: #dceefc;
+  outline-offset: 0;
+}
+
+.form-comum input[type='submit'] {
+  padding: 0 18px;
+  height: 29px;
+  font-size: 12px;
+  font-weight: bold;
+  color: #527881;
+  text-shadow: 0 1px #e3f1f1;
+  background: #cde5ef;
+  border: 1px solid;
+  border-color: #b4ccce #b3c0c8 #9eb9c2;
+  border-radius: 16px;
+  outline: 0;
+  box-sizing: content-box;
+  box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+}
+
+.form-comum input[type='submit']:active {
+  background: #cde5ef;
+  border-color: #9eb9c2 #b3c0c8 #b4ccce;
+  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
+}
+
+.botao-comum {
+  margin: 5px auto;
+  width: 310px;
+
+  font-weight: bold;
+  font-size: 14px;
+  display: block;
+  border-radius: 20px;
+  text-align: center;
+  line-height: 30px;
+
+  cursor: pointer;
+
+  padding: 0 18px;
+  height: 30px;
+  color: #305057;
+  text-shadow: 0 1px #e3f1f1;
+  text-decoration: underline;
+  border: 1px solid;
+  border-color: #b4ccce #b3c0c8 #9eb9c2;
+  background-image: linear-gradient(to bottom, #edf5f8, #cde5ef);
+  box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+.botao-comum:active {
+  background: #cde5ef;
+  border-color: #9eb9c2 #b3c0c8 #b4ccce;
+  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
+}
+
+#footer {
+  color: white;
+  text-align: center;
+  text-shadow: 0 1px #2a85a1;
+  font-size: 14px;
+}
+
+.username-header {
+  color: white;
+  text-align: center;
+  text-shadow: 0 1px #2a85a1;
+  font-size: 14px;
+  margin: 8px;
+  z-index: 999;
+  position: sticky;
+  width: 100%;
+  background-color: inherit;
+  top: 0;
+  justify-items: center;
+  height: 20px;
+}
+
+#username-div {
+  text-align: center;
+  line-height: 1px;
+}
+
+#botao-logout {
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  margin: 0px;
+  margin-right: 5px;
+  width: 100px;
+  height: 20px;
+  line-height: 16px;
+  font-weight: normal;
+  text-decoration: none;
+}
+.usuario {
+  display: flex;
+  align-items: center;
+}
+.usuarioAvatar {
+  float: left;
+  height: 75px;
+  width: 235px;
+  font-family: Veranda;
+}
+
+.usuarioNome {
+  float: right;
+  font-size: 14px;
+  margin-right: 12px;
+}
+
+.menuDropdown {
+  width: 20%;
+  height: 100%;
+}

src/components/Cabecalho.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import 'antd/dist/antd.css';
+import {
+  MenuOutlined,
+  PieChartOutlined,
+  MailOutlined,
+  AppstoreOutlined,
+  DesktopOutlined,
+  ContainerOutlined,
+  UserOutlined,
+  ExportOutlined
+} from '@ant-design/icons';
+import { Menu, PageHeader, Button, Avatar } from 'antd';
+
+const { SubMenu } = Menu;
+
+export default class Cabecalho extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      collapsed: false
+    };
+  }
+
+  toggleCollapsed = () => {
+    this.setState({
+      collapsed: !this.state.collapsed
+    });
+  };
+
+  render() {
+    const username = 'José Itallo';
+    const usuario = {
+      username: 'José Itallo',
+      foto: 'https://avatars.githubusercontent.com/u/56324908?v=4'
+    };
+    return (
+      <>
+        <PageHeader
+          style={{ background: '#0cd2a7' }}
+          backIcon={<MenuOutlined />}
+          className="site-page-header"
+          title="Healt-Track"
+          subTitle="Facilitando o monitoramento de sua saúde"
+          extra={[
+            <div className="usuario">
+              <Avatar
+                className="usuarioAvatar"
+                src={usuario.foto ? usuario.foto : <UserOutlined />}
+              ></Avatar>
+              <h1 className="usuarioNome">{username}</h1>
+              <Button
+                className="botaoSair"
+                type="link"
+                size="small"
+                shape="circle"
+                icon={<ExportOutlined style={{ color: 'black' }} />}
+              ></Button>
+            </div>
+          ]}
+          onBack={() => {
+            this.toggleCollapsed();
+          }}
+          avatar={{
+            src: 'https://media.istockphoto.com/vectors/medic-stethoscope-concept-logotype-template-design-business-logo-icon-vector-id1200712144?s=612x612'
+          }}
+        ></PageHeader>
+
+        <div className="menuDropdown">
+          <Menu
+            defaultSelectedKeys={['1']}
+            defaultOpenKeys={['sub1']}
+            mode="inline"
+            theme="light"
+            inlineCollapsed={this.state.collapsed}
+          >
+            <Menu.Item key="1" icon={<PieChartOutlined />}>
+              Option 1
+            </Menu.Item>
+            <Menu.Item key="2" icon={<DesktopOutlined />}>
+              Option 2
+            </Menu.Item>
+            <Menu.Item key="3" icon={<ContainerOutlined />}>
+              Option 3
+            </Menu.Item>
+            <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
+              <Menu.Item key="5">Option 5</Menu.Item>
+              <Menu.Item key="6">Option 6</Menu.Item>
+              <Menu.Item key="7">Option 7</Menu.Item>
+              <Menu.Item key="8">Option 8</Menu.Item>
+            </SubMenu>
+            <SubMenu
+              key="sub2"
+              icon={<AppstoreOutlined />}
+              title="Navigation Two"
+            >
+              <Menu.Item key="9">Option 9</Menu.Item>
+              <Menu.Item key="10">Option 10</Menu.Item>
+              <SubMenu key="sub3" title="Submenu">
+                <Menu.Item key="11">Option 11</Menu.Item>
+                <Menu.Item key="12">Option 12</Menu.Item>
+              </SubMenu>
+            </SubMenu>
+          </Menu>
+        </div>
+      </>
+    );
+  }
+}

src/pages/Cadastro/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+
+import Logo from '../../assets/logo.png';
+
+function SignUp() {
+  return (
+    <>
+      <div className="username-header" id="username-header" />
+      <Link to="/">
+        <img className="health-logo" src={Logo} alt="" />
+      </Link>
+
+      <div className="form-comum">
+        <h1>Cadastro</h1>
+        <form>
+          <p>
+            <input type="text" id="nome" value="" placeholder="Nome" />
+          </p>
+          <p>
+            <input
+              type="text"
+              id="sobrenome"
+              value=""
+              placeholder="Sobrenome"
+            />
+          </p>
+          <p>
+            <input type="text" id="email" value="" placeholder="E-mail" />
+          </p>
+          <p>
+            <input
+              type="password"
+              id="password"
+              value=""
+              placeholder="Senha (Mínimo 8 caracteres)"
+            />
+          </p>
+          <p>
+            <input
+              type="password"
+              id="password2"
+              value=""
+              placeholder="Confirmacao de senha"
+            />
+          </p>
+          <p className="submit">
+            <input
+              type="submit"
+              id="commit"
+              onClick="validatePasswordisEqual(), validateEmail(), login()"
+              className="submitBtn"
+              value="Entrar"
+            />
+          </p>
+        </form>
+      </div>
+      <div id="footer" style={{ 'font-size': '10px' }}>
+        <p>ENGENHARIA DE SOFTWARE</p>
+      </div>
+    </>
+  );
+}
+
+export default SignUp;