diff --git a/package.json b/package.json index 40e1cfa..3da485c 100644 --- 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 index c7fd447..1345125 100644 --- a/public/index.html +++ b/public/index.html @@ -1,14 +1,16 @@ - - - - - - - POSCOMP - - -
- + + + + + + + + + POSCOMP + + +
+ diff --git a/src/components/app/App.css b/src/components/app/App.css index 072edef..eb093d3 100644 --- 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 new file mode 100644 index 0000000..81bb0f7 --- /dev/null +++ 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'; + } + } \ No newline at end of file diff --git a/src/components/card/Card.js b/src/components/card/Card.js new file mode 100644 index 0000000..79f481e --- /dev/null +++ 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 ( +
+
+
+ ); +}; + +Card.PropType = { + question: PropType.shape({ + number: PropType.string, + year: PropType.string, + area: PropType.string, + theme: PropType.string, + textQuestion: PropType.string, + + }) +}; + +export default Card; \ No newline at end of file diff --git a/src/components/content/main/MainField.js b/src/components/content/main/MainField.js index 874309b..2d00fb3 100644 --- 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 ( + + ) }; export default MainField; diff --git a/src/components/header/PageHeader.css b/src/components/header/PageHeader.css index 2126a4e..b5c3577 100644 --- 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 index f4e9ad6..a7d8435 100644 --- 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 (
-

SOLUCIONARIO - POSCOMP

+

SOLUCIONARIO POSCOMP

+
); }; diff --git a/src/components/icon/Icon.js b/src/components/icon/Icon.js new file mode 100644 index 0000000..edc9b52 --- /dev/null +++ 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 }) => ( + + {icon} + +); + +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 new file mode 100644 index 0000000..f5c3316 --- /dev/null +++ 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 new file mode 100644 index 0000000..6ef7c0f --- /dev/null +++ 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 }) => ( +
+ + +

{name.toUpperCase()}

+ +
+); + +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 ; +}; + +Navbar.propTypes = {}; + +export default Navbar; diff --git a/src/components/sidenav/PageSideNav.css b/src/components/sidenav/PageSideNav.css index d202b0c..2e86dfe 100644 --- 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 index f0a1f43..ad3bc48 100644 --- 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"