diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/How.js b/src/Components/HelpCenter/TabsPlataformaMEC/How.js
index 9834d9398962afcdd63315b747f1bb2f5880c2b7..dfb466be66a71ddbdb1a56d4cef8584ec574d606 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/How.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/How.js
@@ -21,7 +21,7 @@ import styled from "styled-components";
export default function How(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -29,11 +29,11 @@ export default function How(props) {
<div style={{ marginBottom: "9px" }}>
<span>{props.title}</span>
</div>
- <div style={{ width: "640px", height: "360px" }}>
+ <div>
<iframe
title="Video Página Ajuda"
- width="640"
- height="360"
+ width="100%"
+ height={window.innerHeight}
src="https://www.youtube.com/embed/CRW5h2pHugM"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
@@ -45,36 +45,29 @@ export default function How(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
}
a {
- color: #00bcd4;
- text-decoration: none;
- :hover {
- text-decoration: underline;
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
}
}
- ul {
- padding-left: 0 !important;
- margin-top: 0;
- margin-bottom: 10px;
- line-height: 1.42857143;
- }
-
- li {
- list-style-type: none;
- font-size: 14px;
- }
-
p {
margin: 0 0 10px;
font-size: 15px;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Software.js b/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
index 9da4c8bddb9a5659b3755d965572926698d3aea7..4bd517979d9845a910c49e7923fc4cb0b454862f 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
@@ -87,7 +87,7 @@ const softwares = [
export default function Software(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -134,24 +134,18 @@ export default function Software(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
}
- a {
- color: #00bcd4;
- text-decoration: none;
- :hover {
- text-decoration: underline;
- }
- }
-
ul {
padding-left: 0 !important;
margin-top: 0;
@@ -164,6 +158,17 @@ const Card = styled.div`
font-size: 14px;
}
+ a {
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
+ }
+ }
+
p {
margin: 0 0 10px;
font-size: 15px;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Types.js b/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
index 1d30662b8f79b6741a0708cd906fb57c38d3547e..0858c1f9a229ace404a106f6a955d05330093255 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
@@ -30,7 +30,7 @@ const tipos = [
export default function Types(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -57,11 +57,13 @@ export default function Types(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
@@ -79,8 +81,19 @@ const Card = styled.div`
font-size: 14px;
}
+ a {
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
+ }
+ }
+
p {
margin: 0 0 10px;
font-size: 15px;
}
-`;
+`;
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js b/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
index 4696bce01ce19794d4adf4f827f263e65f2bc488..d267d1825d2318601eab632b6b822828174fd621 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
@@ -21,7 +21,7 @@ import styled from "styled-components";
export default function Understand(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -59,18 +59,32 @@ export default function Understand(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
}
+ a {
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
+ }
+ }
+
p {
margin: 0 0 10px;
font-size: 15px;
}
`;
+
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/What.js b/src/Components/HelpCenter/TabsPlataformaMEC/What.js
index 8bab746bc3418efd516b158125a50a366cabfa0d..074156625f153fcb8afd37226ef2ad3f4349e3b3 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/What.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/What.js
@@ -21,7 +21,7 @@ import styled from "styled-components";
export default function What(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -92,21 +92,26 @@ export default function What(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
}
a {
- color: #00bcd4;
- text-decoration: none;
- :hover {
- text-decoration: underline;
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
}
}
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Which.js b/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
index b1fe77ed63697519fb011663dbcce423708ef1c7..a03cc587dd0523e9ec74f3bec480664f30f235c8 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
@@ -28,7 +28,7 @@ const parcas = [
export default function Which(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -50,11 +50,13 @@ export default function Which(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
@@ -72,6 +74,17 @@ const Card = styled.div`
font-size: 14px;
}
+ a {
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
+ }
+ }
+
p {
margin: 0 0 10px;
font-size: 15px;
diff --git a/src/Pages/TabsHelp/TabPlataformaMEC.js b/src/Pages/TabsHelp/TabPlataformaMEC.js
index c704d98fed23e0a02df21be202f1233284067c9e..ad0bb152b2cc0b480a06d09baf5cfd9a7176ce17 100644
--- a/src/Pages/TabsHelp/TabPlataformaMEC.js
+++ b/src/Pages/TabsHelp/TabPlataformaMEC.js
@@ -16,10 +16,8 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
import styled from 'styled-components';
-import Tabs from '@material-ui/core/Tabs'
-import Tab from '@material-ui/core/Tab';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import Grid from '@material-ui/core/Grid';
import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
@@ -31,248 +29,213 @@ import Which from '../../Components/HelpCenter/TabsPlataformaMEC/Which';
import Types from '../../Components/HelpCenter/TabsPlataformaMEC/Types';
import Software from '../../Components/HelpCenter/TabsPlataformaMEC/Software';
import How from '../../Components/HelpCenter/TabsPlataformaMEC/How';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+import { Store } from '../../Store';
+export default function TabPlataformaMEC(props) {
+ const { state } = useContext(Store);
-
-
-
-
-
-export default function TabPlataformaMEC (props) {
- const tabs= [
+ const tabs = [
'O que é a plataforma MEC?',
'Como foi construída a Plataforma MEC?',
'Entendendo as 3 áreas da Plataforma',
'Quais são os Portais Parceiros?',
'Tipos de recursos',
'Softwares específicos',
- 'Plataforma MEC'
]
-
+
const [tabValue, setTabValue] = useState(
Number(props.location.state.value) || 0);
- const handleChangeTab = (e, newValue) => {
- setTabValue(newValue)
-}
-
+ const handleChangeTab = (event, index) => {
+ event.preventDefault();
+ setTabValue(index);
+ }
+ return (
+ <MainPage contrast={state.contrast}>
+ <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet" />
- return(
- <div style={{backgroundColor:"#f4f4f4"}}>
- <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
-
<Secao>
<BreadCrumbsDiv>
- <StyledBreadCrumbs>
+ <StyledBreadCrumbs contrast={state.contrast}>
<Link to="/" >
- Página Inicial
+ Página Inicial
</Link>
<Link to="ajuda" >
Ajuda
</Link>
-
+
<span>
- {tabs[6]}
+ Plataforma MEC
</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
- <Grid container spacing={4}>
- <Grid item xs={3}>
- <Menu>
- <h4>{tabs[6]}</h4>
- <TabsStyled orientation = "vertical"
- variant = "scrollable"
- value = {tabValue}
- onChange = {handleChangeTab}
- TabIndicatorProps = {{style:{display: "none"}}}
- >
- <TabStyled label={tabs[0]}></TabStyled>
- <TabStyled label={tabs[1]}></TabStyled>
- <TabStyled label={tabs[2]}></TabStyled>
- <TabStyled label={tabs[3]}></TabStyled>
- <TabStyled label={tabs[4]}></TabStyled>
- <TabStyled label={tabs[5]}></TabStyled>
- </TabsStyled>
- <br/>
- <div className="voltarInicio">
- <a href="ajuda">VOLTAR AO ÍNICIO</a>
- </div>
- <hr/>
- <div className="procurava">
- Não encontrou o que procurava? Entre em
- <a href="contato"> contato</a>
- </div>
+
+ <MainGrid container justify='center' spacing={4}>
+ <Grid xs={12} md={3} sm={4} item>
+ <Menu contrast={state.contrast}>
+ <p className="title">
+ Plataforma MEC
+ </p>
+ <div className="sized-box" />
+
+ {
+ tabs.map((tab, index) => {
+ return (
+ <TabStyled contrast={state.contrast} active={index === tabValue} name={index} onClick={(event) => handleChangeTab(event, index)} key={new Date().toISOString() + index}>
+ {tab}
+ </TabStyled>
+ )
+ })
+ }
+
+ <div className="sized-box" />
+ <Link to="ajuda">
+ <p className="go-back">
+ Voltar ao início
+ </p>
+ </Link>
+
+ <div className="sized-box" />
+ <p className="sub-title">
+ Não encontrou o que procurava? Entre em
+ <Link to="contato">
+ <span className="go-back"> contato</span>
+ </Link>
+ </p>
</Menu>
</Grid>
- <Grid item xs={9}>
+ <Grid xs={12} md={9} sm={8} item>
<Principal>
- {tabValue === 0 && <What title={tabs[0]}/>}
- {tabValue === 1 && <How title={tabs[1]}/>}
- {tabValue === 2 && <Understand title={tabs[2]}/>}
- {tabValue === 3 && <Which title={tabs[3]}/>}
- {tabValue === 4 && <Types title={tabs[4]}/>}
- {tabValue === 5 && <Software title={tabs[5]}/>}
-
- <Grid style={{marginBlock:"50px"}} container spacing={2}>
- <Grid item xs={4}>
- <CardEncontrando/>
- </Grid>
- <Grid item xs={4}>
- <CardParticipando/>
- </Grid>
- <Grid item xs={4}>
- <CardGerenciando/>
- </Grid>
-
- </Grid>
-
+ {tabValue === 0 && <What contrast={state.contrast} title={tabs[0]} />}
+ {tabValue === 1 && <How contrast={state.contrast} title={tabs[1]} />}
+ {tabValue === 2 && <Understand contrast={state.contrast} title={tabs[2]} />}
+ {tabValue === 3 && <Which contrast={state.contrast} title={tabs[3]} />}
+ {tabValue === 4 && <Types contrast={state.contrast} title={tabs[4]} />}
+ {tabValue === 5 && <Software contrast={state.contrast} title={tabs[5]} />}
</Principal>
- </Grid>
- </Grid>
+ </Grid>
+ </MainGrid>
+ <MainGrid container spacing={4}>
+ <Grid xs={12} md={4} item>
+ <CardEncontrando contrast={state.contrast} />
+ </Grid>
+ <Grid item xs={12} md={4} >
+ <CardParticipando contrast={state.contrast} />
+ </Grid>
+
+ <Grid item xs={12} md={4} >
+ <CardGerenciando contrast={state.contrast} />
+ </Grid>
+ </MainGrid>
</Secao>
- </div>
+ </MainPage>
);
}
const StyledBreadCrumbs = styled(Breadcrumbs)`
display : flex;
- justify-content : flex-start;
- max-width : 1170px;
- span {
- color : #a5a5a5;
- }
- a {
- color: #00bcd4;
- text-decoration: none;
- }
+ justify-content : flex-start;
+ max-width : 1170px;
+ a{
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
+ span {
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ }
+`
+const MainPage = styled.div`
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
`
const BreadCrumbsDiv = styled.div`
-
- padding : 10px;
display : flex;
`
-const Principal = styled.div`
- .fixo {
-
- height: 40px;
- text-align: center;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- padding: 30px;
- margin-bottom: 30px;
- color: #666;
-
-
- img {
- height: 50px;
- width: 50px;
- margin-right: 40px;
- vertical-align: middle;
-
- }
-
- span {
- font-size: 20px;
- vertical-align: ;
- }
-
-
-
- }
-
+const MainGrid = styled(Grid)`
+ padding: 1.5em 0;
`
-const TabsStyled = styled(Tabs)`
+const Principal = styled.div`
- .Mui-selected {
- background-color: #e7e4e4;
- }
-
- .MuiTab-root{
- text-transform: none !important;
- }
-
`
-const TabStyled = styled(Tab)`
-
- padding: 4px 15px !important;
- font-weight: 500;
- font-size: 14px !important;
- border-radius: 4px !important;
-
-
-
-
-
- &:hover {
- background-color: #e7e4e4;
+const TabStyled = styled.div`
+ text-align: center;
+ font-family: 'Roboto', 'sans-serif';
+ font-weight: ${props => props.active ? "500" : "lighter"};
+ background: ${props => props.active ? props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)" : ""};
+ padding: 0.5em;
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.active ? "none" : props.contrast === "" ? "none" : "underline"};
+
+ :hover{
+ background: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ cursor: pointer;
+ font-weight: 500;
}
`
const Menu = styled.div`
- width: auto;
- background-color: #fff;
- color: #666;
- padding-block: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
-
- h4 {
- padding-inline: 15px;
- font-size: 18px;
- margin-block: 10px;
- font-weight: 500;
- line-height: 1.1;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "" : "white"};
+ width: 100%;
+ padding: 1em 0;
+
+ .sized-box{
+ border: 0.5px solid #d4d4d4;
+ margin: 1em 0;
}
- .voltarInicio {
- padding: 4px 15px;
- font-size: 15px;
+ .title{
+ padding: 0;
+ margin: 0;
+ font-weight: 500;
text-align: center;
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
- }
+ font-family: 'Roboto', 'sans-serif';
}
- hr {
- border: 0;
- border-top: 1px solid #ccc;
- margin-top: 20px;
- margin-bottom: 20px;
+ .sub-title{
+ padding: 0;
+ margin: 0;
+ font-weight: lighter;
+ text-align: center;
+ font-family: 'Roboto', 'sans-serif';
}
- .procurava {
- padding: 4px 15px;
- font-size: 15px;
+ .go-back{
+ padding: 0;
+ margin: 0;
+ font-weight: lighter;
text-align: center;
-
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
}
-
}
+ .active{
+ background: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ font-weight: 500;
+ }
`
const Secao = styled.div`
- width: 1138px;
- margin-inline: auto;
-
+ width: 90%;
+ margin: 0 auto;
+ padding: 1em 0;
`