OpenDevUFCG · ivynasantino · Oct 26, 2019 · Oct 26, 2019 · Oct 26, 2019 · Oct 26, 2019
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.10.1",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "katex": "0.9.0",
+    "material-design-icons": "^3.0.1",
     "path": "^0.12.7",
     "prettier": "^1.18.2",
     "prop-types": "^15.7.2",

diff --git a/public/index.html b/public/index.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <link href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css" rel="stylesheet">
-  <title>POSCOMP</title>
-</head>
-<body>
-  <div id="root"></div>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" />
+    <link href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css" rel="stylesheet" />
+    <title>POSCOMP</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
 </html>
diff --git a/src/components/app/App.css b/src/components/app/App.css
@@ -14,6 +14,11 @@ body,
   box-sizing: border-box;
 }
 
+html {
+  background-color: #FFC09E;
+  font-family: 'Roboto', sans-serif;
+}
+
 body {
   font-family: 'Roboto', sans-serif;
 }
diff --git a/src/components/card/Card.css b/src/components/card/Card.css
@@ -0,0 +1,38 @@
+
+.card__container {
+    background: #FFF7F8;
+    font-family: 'Ikaros', sans-serif;
+    border-radius: 12px;
+    padding: 5% 30%;
+    height: 120px;
+    display: grid;
+    grid-template-areas:
+      'title title'
+      'subtitle subtitle'
+      'left-content right-content';
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    transition: 0.1s;
+    width: 40%;
+  }
+
+  .card__container:hover {
+    box-shadow: 0 16px 32px 0 rgba(0,0,0,0.5);
+  }
+
+  .card__space {
+    padding: 20px 50px;
+  }
+
+  @media screen and (max-width: 1400px) {
+    .card__container {
+      display: grid;
+      padding: 5% 30%;
+      grid-gap: 1em;
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        'title'
+        'subtitle'
+        'content-left'
+        'content-right';
+    }
+  }
diff --git a/src/components/card/Card.js b/src/components/card/Card.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import './Card.css';
+
+import PropType from 'prop-types';
+
+const Card = () => {
+    return (
+    <div className={'card__space'}>
+        <div className={'card__container'}></div>
+    </div>
+    );
+};
+
+Card.PropType = {
+    question: PropType.shape({
+        number: PropType.string,
+        year: PropType.string,
+        area: PropType.string,
+        theme: PropType.string,
+        textQuestion: PropType.string,
+
+    })
+};
+
+export default Card;
diff --git a/src/components/content/main/MainField.js b/src/components/content/main/MainField.js
@@ -1,8 +1,11 @@
 import React from 'react';
 import './MainField.css';
+import Card from '../../card/Card';
 
 const MainField = () => {
-  return <></>;
+  return (
+     <Card />
+  )
 };
 
 export default MainField;
diff --git a/src/components/header/PageHeader.css b/src/components/header/PageHeader.css
@@ -1,7 +1,13 @@
 .page-header {
+  display: grid;
+  grid-auto-flow: column;
 }
 
-@media (min-width: 801px) {
+.page-header__space {
+  grid-row-gap: 1cm;
+}
+
+@media (min-width: 720px) {
   .header-toggle-button {
     display: none;
   }

diff --git a/src/components/header/PageHeader.js b/src/components/header/PageHeader.js
@@ -3,11 +3,14 @@ import PropTypes from 'prop-types';
 import './PageHeader.css';
 import ToggleButton from '../toggleButton/ToggleButton';
 
+import Navbar from '../navbar/Navbar';
+
 const PageHeader = ({ drawerClickHandler }) => {
   return (
     <header className="page-header">
       <ToggleButton className="header-toggle-button" click={drawerClickHandler} />
-      <h1>SOLUCIONARIO - POSCOMP</h1>
+      <h1>SOLUCIONARIO POSCOMP</h1>
+      <Navbar />
     </header>
   );
 };

diff --git a/src/components/icon/Icon.js b/src/components/icon/Icon.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const getIconColorStyle = (color) => ({ color });
+
+const Icon = ({ icon, iconColor }) => (
+  <i className="material-icons" style={getIconColorStyle(iconColor)}>
+    {icon}
+  </i>
+);
+
+Icon.propTypes = {
+  icon: PropTypes.string,
+  iconColor: PropTypes.string,
+};
+
+export default Icon;
diff --git a/src/components/navbar/Navbar.css b/src/components/navbar/Navbar.css
@@ -0,0 +1,23 @@
+.navbar {
+  display: grid;
+  grid-auto-flow: column;
+}
+
+.navbar-option > a {
+  border-bottom: 1px solid white;
+  text-decoration: none;
+  display: grid;
+  grid-gap: 0.5em;
+  padding: 0.8em;
+  justify-content: center;
+  text-align: center;
+  color: #fff7f8;
+}
+
+.navbar-option.selected-option > a {
+  border-bottom: 3px solid white;
+}
+
+.navbar-option > a > i {
+  font-size: 2em;
+}
diff --git a/src/components/navbar/Navbar.js b/src/components/navbar/Navbar.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Navbar.css';
+
+import Icon from '../icon/Icon';
+
+const getNavbarOptionClass = (selected) => 'navbar-option' + (selected ? ' selected-option' : '');
+
+const NavbarOption = ({ name, icon, link, selected }) => (
+  <div className={getNavbarOptionClass(selected)}>
+    <a href={link}>
+      <Icon icon={icon}></Icon>
+      <h2>{name.toUpperCase()}</h2>
+    </a>
+  </div>
+);
+
+const navbarOption = (name, icon, link, selected) => ({ name, icon, link, selected });
+
+const navbarOptions = [
+  navbarOption('Questões', 'assignment', '/', true),
+  navbarOption('Info', 'error_outline', '/info'),
+  navbarOption('Ajuda', 'help_outline', '/ajuda'),
+  navbarOption('Estatísticas', 'assessment', '/estatisticas'),
+];
+
+const Navbar = () => {
+  return <nav className="navbar">{navbarOptions.map(NavbarOption)}</nav>;
+};
+
+Navbar.propTypes = {};
+
+export default Navbar;
diff --git a/src/components/sidenav/PageSideNav.css b/src/components/sidenav/PageSideNav.css
@@ -4,8 +4,8 @@
   /* height: 100%; */
   width: 300px;
   flex-shrink: 0;
-  border-right: 1px solid #ddd;
-  background-color: #fff;
+  border-right: 1px solid #F9DBBD;
+  background-color: #F9DBBD;
   box-sizing: border-box;
 }
 
@@ -14,7 +14,7 @@
   color: #909399;
 }
 
-@media (max-width: 800px) {
+@media screen and (max-width: 1024px) {
   .drawer {
     width: 70%;
     box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);

diff --git a/yarn.lock b/yarn.lock
@@ -5783,12 +5783,12 @@ jsx-ast-utils@^2.0.1, jsx-ast-utils@^2.1.0, jsx-ast-utils@^2.2.1:
     array-includes "^3.0.3"
     object.assign "^4.1.0"
 
-katex@^0.10.2:
-  version "0.10.2"
-  resolved "https://registry.yarnpkg.com/katex/-/katex-0.10.2.tgz#39973edbb65eda5b6f9e7f41648781e557dd4932"
-  integrity sha512-cQOmyIRoMloCoSIOZ1+gEwsksdJZ1EW4SWm3QzxSza/QsnZr6D4U1V9S4q+B/OLm2OQ8TCBecQ8MaIfnScI7cw==
+katex@0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.9.0.tgz#26a7d082c21d53725422d2d71da9b2d8455fbd4a"
+  integrity sha512-lp3x90LT1tDZBW2tjLheJ98wmRMRjUHwk4QpaswT9bhqoQZ+XA4cPcjcQBxgOQNwaOSt6ZeL/a6GKQ1of3LFxQ==
   dependencies:
-    commander "^2.19.0"
+    match-at "^0.1.1"
 
 killable@^1.0.0:
   version "1.0.1"
@@ -6045,6 +6045,16 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+match-at@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/match-at/-/match-at-0.1.1.tgz#25d040d291777704d5e6556bbb79230ec2de0540"
+  integrity sha512-h4Yd392z9mST+dzc+yjuybOGFNOZjmXIPKWjxBd1Bb23r4SmDOsk2NYCU2BMUBGbSpZqwVsZYNq26QS3xfaT3Q==
+
+material-design-icons@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/material-design-icons/-/material-design-icons-3.0.1.tgz#9a71c48747218ebca51e51a66da682038cdcb7bf"
+  integrity sha1-mnHEh0chjrylHlGmbaaCA4zct78=
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"