richecr · Oct 20, 2020 · Oct 16, 2020 · Oct 17, 2020 · tuliocll · Oct 16, 2020
diff --git a/public/index.html b/public/index.html
@@ -27,6 +27,8 @@
       rel="stylesheet"
     />
     <title>Câmara dos Deputados</title>
+
+    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
   </head>
   <body>
     <noscript>

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -25,7 +25,7 @@ export default function Header() {
       <div className="headerRight">
         <ul>
           <li>
-            <FaSearch className="iconMenu" size={25} color="#000000" />
+            <FaSearch className="iconMenu" size={25} />
           </li>
           <li>
             <a
@@ -34,7 +34,7 @@ export default function Header() {
               rel="noopener noreferrer"
               className="iconMenu"
             >
-              <FaGithub size={25} color="#000000" />
+              <FaGithub size={25} color="#2f2f2f" />
             </a>
           </li>
         </ul>

diff --git a/src/components/Header/styles.scss b/src/components/Header/styles.scss
@@ -15,6 +15,7 @@ header {
   align-items: center;
   background-color: #ffffff;
   filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.25));
+  padding-top: 15px;
 }
 
 .headerLeft {

diff --git a/src/global.scss b/src/global.scss
@@ -1,4 +1,14 @@
+html {
+  height: 100%;
+}
+
 body {
-  font-family: 'Roboto Slab', serif;
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  line-height: 37px;
   background-color: #e5e5e5;
+  color: #2f2f2f;
+  min-height: 100%;
+  min-width: fit-content;
 }
diff --git a/src/pages/PartidoInfo/index.js b/src/pages/PartidoInfo/index.js
@@ -1,8 +1,8 @@
-/* eslint-disable jsx-a11y/alt-text */
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import PropTypes from 'prop-types';
 
+import noImage from '../../assets/placeholder-user.png';
 import './styles.scss';
 
 const PartidoInfo = ({ match }) => {
@@ -27,65 +27,63 @@ const PartidoInfo = ({ match }) => {
   }, [id]);
 
   return (
-    <div>
-      <section className="hero is-dark">
-        <div className="hero-body">
-          <div className="container">
-            <h1 className="title is-4">
-              {partido.nome} - {partido.sigla}
+    <div className="columns divPartido">
+      <div className="column is-two-fifths">
+        <div className="partido">
+          <div>
+            <h1>
+              {partido.sigla} - {partido.nome}
             </h1>
-            <h2 className="subtitle">
-              <img src={partido.urlLogo} />
-            </h2>
+            <img
+              className="deputado-img"
+              src={partido.urlLogo}
+              onError={(e) => {
+                e.currentTarget.src = noImage;
+              }}
+              alt="Logo do partido"
+            />
           </div>
         </div>
-      </section>
-
-      <div className="container partido-single">
-        <div className="columns is-centered columns-fix">
-          <div className="column">
-            <div className="card">
-              <div className="card-content">
-                <div className="media">
-                  <div className="media-content">
-                    <p className="title is-4">Status</p>
-                  </div>
-                </div>
-                <div className="content">
-                  <strong>Situação: </strong> {status.situacao}
-                  <br />
-                  <strong>Total de posse: </strong> {status.totalPosse}
-                  <br />
-                  <strong>Total de membros: </strong> {status.totalMembros}
-                </div>
-              </div>
-            </div>
+        <div className="status">
+          <div>
+            <h1>Informações</h1>
           </div>
+          <div className="informations">
+            <div>
+              <label>Situação: </label>
+              <label className="backgroundYellow">{status.situacao}</label>
+            </div>
+            <div>
+              <label>Total de posse: </label>
+              <label className="backgroundYellow">{status.totalPosse}</label>
+            </div>
+            <div>
+              <label>Total de membros: </label>
+              <label className="backgroundYellow">{status.totalMembros}</label>
+            </div>
 
-          <div className="column">
-            <div className="card">
-              <div className="card-image">
-                <figure className="image">
-                  <div
-                    style={{ backgroundImage: `url(${lider.urlFoto})` }}
-                    className="image-lider"
-                  />
-                </figure>
-              </div>
-              <div className="card-content">
-                <div className="media">
-                  <div className="media-content">
-                    <p className="title is-6">Nome: {lider.nome}</p>
-                    <p className="subtitle is-8">
-                      Sigla Partido: {lider.siglaPartido}
-                    </p>
-                  </div>
-                </div>
-              </div>
+            <div>
+              <label>Total de membros: </label>
+              <label className="backgroundYellow">{status.totalMembros}</label>
             </div>
           </div>
         </div>
       </div>
+
+      <div className="column">
+        <div className="infoPresidente">
+          <h1 className="">Presidente</h1>
+          <img
+            className="image-lider"
+            src={lider.urlFoto}
+            onError={(e) => {
+              e.currentTarget.src = noImage;
+            }}
+            alt="Foto do líder"
+          />
+          <p>{lider.nome}</p>
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/src/pages/PartidoInfo/styles.scss b/src/pages/PartidoInfo/styles.scss
@@ -1,81 +1,106 @@
-.titulo {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.divPartido {
+  margin-top: 60px;
+  margin-left: 66px;
+  margin-right: 66px;
+
+  h1 {
+    font-size: 30px;
+  }
 }
 
-.titulo-img {
+.partido {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   align-items: center;
+  background: #ffffff;
+  border: 1px solid #adadad;
+  box-sizing: border-box;
+  padding: 10px;
+  margin-bottom: 25px;
+
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 61px;
+    margin-bottom: 58px;
+  }
+
+  img {
+    height: 60%;
+    width: 60%;
+    margin-top: 10px;
+  }
 }
 
 .status {
-  max-width: 300px;
-  margin: 20px 0px 0px;
-  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border: 1px solid #adadad;
+  box-sizing: border-box;
+  padding: 10px;
+  // height: 100%;
 
-  h1 {
-    color: #da552f;
+  > div:first-child {
+    text-align: center;
   }
 
-  article {
-    margin-left: 15px;
-    border: 1px solid #ddd;
-    border-radius: 10px;
-    padding: 10px;
+  div {
+    margin-bottom: 15px;
+  }
 
-    strong {
-      font-weight: bold;
-      font-size: 16px;
-      color: darkblue;
+  .informations {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    div {
+      display: flex;
+      height: fit-content;
     }
   }
-}
 
-.lider {
-  max-width: 300px;
-  padding-left: 20px;
+  label {
+    margin-top: 10px;
+    font-size: 12px;
+    line-height: 14px;
+    padding: 5px 0px 5px 10px;
 
-  h1 {
-    color: #da552f;
+    background: #e7e7e7;
+    border-radius: 6px 0px 0px 6px;
   }
 
-  article {
-    margin-left: 15px;
-    border: 1px solid #ddd;
-    border-radius: 10px;
-    padding: 10px;
-
-    strong {
-      font-weight: bold;
-      font-size: 16px;
-      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
-        'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-      color: darkblue;
-    }
+  .backgroundYellow {
+    padding: 5px 10px 5px 10px;
+    background: #f3a62d;
+    border-radius: 0px 6px 6px 0px;
+    margin-right: 10px;
   }
 }
 
-.partidos-lista {
-  .title {
-    font-size: 14px;
-    line-height: 20px;
-  }
+.infoPresidente {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #ffffff;
+  border: 1px solid #adadad;
+  box-sizing: border-box;
+  padding: 10px;
 
-  .subtitle {
-    text-align: center;
-    font-size: 14px;
-    margin-top: 0px !important;
+  > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 100px;
   }
-}
 
-.partido-single {
-  height: 400px;
   .image-lider {
-    background-size: contain;
-    height: 400px;
-    background-position: center;
-    background-repeat: no-repeat;
+    width: 250px;
+  }
+
+  p {
+    font-size: 24px;
+    text-align: center;
   }
 }