feat: Profile

sswellington · Mar 27, 2020 · 1ccd1c7 · 1ccd1c7
1 parent 8fe61c8
commit 1ccd1c7
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 13 deletions.
diff --git a/frontend/src/pages/NewIncident/index.js b/frontend/src/pages/NewIncident/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import './styles.css';
+
+import logoImg from '../../assets/logo.svg';
+
+export default function NewIncident() {
+    return (<h1>NewIncident</h1>);
+}
diff --git a/frontend/src/pages/NewIncident/styles.css b/frontend/src/pages/NewIncident/styles.css
diff --git a/frontend/src/pages/Profile/index.js b/frontend/src/pages/Profile/index.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { FiPower, FiTrash2 } from 'react-icons/fi';
+
+import './styles.css';
+
+import logoImg from '../../assets/logo.svg';
+
+export default function Profile() {
+	return (
+		<div className="profile-container">
+			<header>
+				<img src={logoImg} alt="Be The Hero" />
+				<span> Bem vinda, APAD </span>
+				<Link className="button" to="/incidents/new"> Cadastrar novo caso</Link>
+				<button type="button"> <FiPower size={18} color="#E02041" /> </button>
+			</header>
+
+			<h1>Casos cadastrados</h1>
+			<ul>
+				<li>
+					<strong>CASOS: </strong>
+					<p>Caso teste</p>
+
+					<strong>DESCRIÇÃO: </strong>
+					<p>Descrição teste</p>
+
+					<strong>VALOR: </strong>
+					<p>R$ 120,00</p>
+
+					<button type="button"><FiTrash2 size={20} color="#a8a8b3" /></button>
+				</li>
+			</ul>
+			<ul>
+				<li>
+					<strong>CASOS: </strong>
+					<p>Caso teste</p>
+
+					<strong>DESCRIÇÃO: </strong>
+					<p>Descrição teste</p>
+
+					<strong>VALOR: </strong>
+					<p>R$ 120,00</p>
+
+					<button type="button"><FiTrash2 size={20} color="#a8a8b3" /></button>
+				</li>
+			</ul>
+			<ul>
+				<li>
+					<strong>CASOS: </strong>
+					<p>Caso teste</p>
+
+					<strong>DESCRIÇÃO: </strong>
+					<p>Descrição teste</p>
+
+					<strong>VALOR: </strong>
+					<p>R$ 120,00</p>
+
+					<button type="button"><FiTrash2 size={20} color="#a8a8b3" /></button>
+				</li>
+			</ul>
+
+		</div>
+	);
+}
diff --git a/frontend/src/pages/Profile/styles.css b/frontend/src/pages/Profile/styles.css
@@ -0,0 +1,88 @@
+.profile-container{
+    width: 100%;
+    max-width: 1180px;
+    padding: 0 30px;
+    margin: 32px auto;
+}
+
+.profile-container header{
+    display: flex;
+    align-items: center;
+}
+
+.profile-container header span{
+    font-size: 20px;
+    margin-left: 24px;
+}
+
+.profile-container header img{
+    height: 64px;
+}
+
+.profile-container header a{
+    width: 260px;
+    margin-left: auto;
+    margin-top: 0;
+}
+
+.profile-container header button{
+    height: 60px;
+    width: 60px;
+    border-radius: 4px;
+    border: 1px solid #dcdce6;
+    background: transparent;
+    margin-left: 16px;
+    transition: border-color 0.2s;
+}
+
+.profile-container header button:hover{
+    border-color: #999;
+}
+
+
+.profile-container h1{
+    margin-top: 80px;
+    margin-bottom: 24px;
+}
+
+.profile-container ul{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 24px;
+    list-style: none;
+}
+
+.profile-container ul li {
+    background: #fff;
+    padding: 24px;
+    border-radius: 8px;
+    position: relative;
+  }
+
+  .profile-container ul li button {
+    position: absolute;
+    background:transparent;
+    right: 24px;
+    top: 24px;
+    border: 0;
+  }
+
+  .profile-container ul li button:hover {
+    opacity: 0.8;
+  }
+
+  .profile-container ul li strong {
+    display: block;
+    margin-bottom: 16px;
+    color: #41414d;
+  }
+
+  .profile-container ul li p + strong {
+    margin-top: 32px;
+  }
+
+  .profile-container ul li p {
+    color: #737380;
+    line-height: 21px;
+    font-size: 16px;
+  }
diff --git a/frontend/src/pages/Register/index.js b/frontend/src/pages/Register/index.js
@@ -18,19 +18,17 @@ export default function Register() {
                         Não tenho cadastro
                     </Link>
                 </section>
-                <section>
-                    <form>
-                        <input placeholder="Nome da ONG" />
-                        <input type="email" placeholder="E-mail" />
-                        <input placeholder="WhatsApp" />
+                <form>
+                    <input placeholder="Nome da ONG" />
+                    <input type="email" placeholder="E-mail" />
+                    <input placeholder="WhatsApp" />
 
-                        <div className="input-group">
-                            <input placeholder="Cidade" />
-                            <input placeholder="UF" style={{ width: 80 }} />
-                        </div>
-                        <button className="button" type="submit">Cadastrar</button>
-                    </form>
-                </section>
+                    <div className="input-group">
+                        <input placeholder="Cidade" />
+                        <input placeholder="UF" style={{ width: 80 }} />
+                    </div>
+                    <button className="button" type="submit">Cadastrar</button>
+                </form>
             </div>
         </div>
     );

diff --git a/frontend/src/routes.js b/frontend/src/routes.js
@@ -5,13 +5,17 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
 import Logon from './pages/Logon';
 import Register from './pages/Register';
+import Profile from './pages/Profile';
+import NewIncident from './pages/NewIncident';
 
 export default function Routes() {
     return (
         <BrowserRouter>
             <Switch>
                 <Route path="/" exact component={Logon} />
-                <Route path="/register" exact component={Register} />
+                <Route path="/register" component={Register} />
+                <Route path="/profile" component={Profile} />
+                <Route path="/incidents/new" component={NewIncident} />
             </Switch>
         </BrowserRouter>
     );