From f0f606e2b0bbe949ebab07ef151cbdac56a065a5 Mon Sep 17 00:00:00 2001
From: Riba <mrp19@inf.ufpr.br>
Date: Fri, 8 Nov 2019 12:24:26 -0300
Subject: [PATCH] Fixed CSS in section 3(orange), is now styled as the original
---
src/Components/ExpansionPanels.js | 202 ++++++++++++++++--------------
src/Components/Modal.js | 3 -
src/Pages/UserTerms.js | 130 ++++++++++++++-----
3 files changed, 212 insertions(+), 123 deletions(-)
diff --git a/src/Components/ExpansionPanels.js b/src/Components/ExpansionPanels.js
index 64c58066..9a432d10 100644
--- a/src/Components/ExpansionPanels.js
+++ b/src/Components/ExpansionPanels.js
@@ -25,11 +25,29 @@ import { Link } from 'react-router-dom'
import Grid from '@material-ui/core/Grid';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
+import styled from 'styled-components';
+const TypographyColorido = styled(Typography)`
+ color: #666 !important;
+`
+const MuiExpansionPanelMargem = styled(MuiExpansionPanel)`
+ .expanded{
+ margin: 0 0 0 0 !important;
+ }
+`
+
+const MuiExpansionPanelSummaryColorido = styled(MuiExpansionPanelSummary)`
+ background-color:#e5e5e5 !important;
+`
+
+
+const MuiExpansionPanelDetailsColorido = styled(MuiExpansionPanelDetails)`
+ background-color: #fff;
+`
export default function CustomizedExpansionPanels() {
@@ -40,12 +58,12 @@ export default function CustomizedExpansionPanels() {
};
return (
- <div>
- <MuiExpansionPanel square expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel1d-content" id="panel1d-header">
- <Typography>1. CaracterÃsticas da <strong>Plataforma Integrada de RED do MEC</strong></Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ <div style={{backgroundColor: "#e5e5e5"}}>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel1d-content" id="panel1d-header">
+ <TypographyColorido>1. CaracterÃsticas da <strong>Plataforma Integrada de RED do MEC</strong></TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
@@ -75,13 +93,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel2d-content" id="panel2d-header">
- <Typography>2. Cadastro e segurança</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel2d-content" id="panel2d-header">
+ <TypographyColorido>2. Cadastro e segurança</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
@@ -106,13 +124,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel3d-content" id="panel3d-header">
- <Typography>3. Publicações de usuários</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel3d-content" id="panel3d-header">
+ <TypographyColorido>3. Publicações de usuários</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
@@ -169,13 +187,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel4'} onChange={handleChange('panel4')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel4d-content" id="panel4d-header">
- <Typography>4. Licença de uso do conteúdo</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel4'} onChange={handleChange('panel4')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel4d-content" id="panel4d-header">
+ <TypographyColorido>4. Licença de uso do conteúdo</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
@@ -213,13 +231,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel5'} onChange={handleChange('panel5')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel5d-content" id="panel5d-header">
- <Typography>5. Práticas de uso e armazenamento</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel5'} onChange={handleChange('panel5')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel5d-content" id="panel5d-header">
+ <TypographyColorido>5. Práticas de uso e armazenamento</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
@@ -234,13 +252,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel6'} onChange={handleChange('panel6')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel6d-content" id="panel6d-header">
- <Typography>6. Privacidade da informação</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel6'} onChange={handleChange('panel6')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel6d-content" id="panel6d-header">
+ <TypographyColorido>6. Privacidade da informação</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -258,13 +276,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel7'} onChange={handleChange('panel7')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel7d-content" id="panel7d-header">
- <Typography>7. Violação no sistema ou na base de dados</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel7'} onChange={handleChange('panel7')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel7d-content" id="panel7d-header">
+ <TypographyColorido>7. Violação no sistema ou na base de dados</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -279,13 +297,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel8'} onChange={handleChange('panel8')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel8d-content" id="panel8d-header">
- <Typography>8. Sanções</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel8'} onChange={handleChange('panel8')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel8d-content" id="panel8d-header">
+ <TypographyColorido>8. Sanções</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -311,13 +329,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel9'} onChange={handleChange('panel9')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel9d-content" id="panel9d-header">
- <Typography>9. Limitações de responsabilidade</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel9'} onChange={handleChange('panel9')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel9d-content" id="panel9d-header">
+ <TypographyColorido>9. Limitações de responsabilidade</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -336,13 +354,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel10'} onChange={handleChange('panel10')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel10d-content" id="panel10d-header">
- <Typography>10.Inexistência de vÃnculo</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel10'} onChange={handleChange('panel10')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel10d-content" id="panel10d-header">
+ <TypographyColorido>10.Inexistência de vÃnculo</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -357,13 +375,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel11'} onChange={handleChange('panel11')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel11d-content" id="panel11d-header">
- <Typography>11. Como reportar violações</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel11'} onChange={handleChange('panel11')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel11d-content" id="panel11d-header">
+ <TypographyColorido>11. Como reportar violações</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -380,13 +398,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel12'} onChange={handleChange('panel12')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel12d-content" id="panel12d-header">
- <Typography>12. Modificações nos Termos de Uso</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel12'} onChange={handleChange('panel12')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel12d-content" id="panel12d-header">
+ <TypographyColorido>12. Modificações nos Termos de Uso</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -401,13 +419,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel13'} onChange={handleChange('panel13')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel13d-content" id="panel13d-header">
- <Typography>13. Foro</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel13'} onChange={handleChange('panel13')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel13d-content" id="panel13d-header">
+ <TypographyColorido>13. Foro</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -422,8 +440,8 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
</div>
);
}
diff --git a/src/Components/Modal.js b/src/Components/Modal.js
index d4af974b..6c5e7948 100644
--- a/src/Components/Modal.js
+++ b/src/Components/Modal.js
@@ -25,9 +25,6 @@ import Fade from '@material-ui/core/Fade';
import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
-
-
-
import styled from 'styled-components'
diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js
index 7a7c6e34..7cb902e0 100644
--- a/src/Pages/UserTerms.js
+++ b/src/Pages/UserTerms.js
@@ -18,24 +18,30 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, {Component} from 'react';
import ExpansionPanels from '../Components/ExpansionPanels'
import Grid from '@material-ui/core/Grid';
-import Banner1 from "../img/termos/banner.jpg";
import Modal from '../Components/Modal'
+import styled from 'styled-components'
+
+/*Importação de imagens para a página*/
import Busca from "../img/termos/Busca.png"
+import Banner1 from "../img/termos/banner.jpg";
+import Aberto from "../img/termos/Aberto.png";
+import CadeadoAberto from "../img/termos/AbertoG.svg";
+import Fechado from "../img/termos/Fechado.png";
+import CadeadoFechado from "../img/termos/FechadoG.svg";
+import Linha from "../img/termos/linha.svg";
-import styled from 'styled-components'
-const bannerStyle={
- width: "100%",
- backgroundImage: `url(${Banner1})`,
- backgroundSize: "cover",
- backgroundPosition: "topCenter",
- height: "370px",
+const BannerStyle=styled.div`
+ width: 100%;
+ background-image: url(${Banner1});
+ background-size: cover;
+ background-position: top center;
+ height: 370px;
verticalAlign: "middle"
+`
-
-}
const center={
width: "100%",
textAlign: "center"
@@ -69,11 +75,67 @@ const ImagemSeçao2 = styled.div`
background-size: contain;
background-repeat: no-repeat;
}
- height: 100%;
+ color: rgba(0,0,0,0.87);
+ height: auto;
align-items: center;
padding-block: 30px;
`
+const Secao3 = styled.div`
+ background-color: #FF7F00;
+ @media (min-width: 1000px) {
+ background-image: url(${CadeadoAberto}), url(${CadeadoFechado});
+ background-repeat: no-repeat;
+ background-position: bottom left, bottom right;
+ background-position-y: 120%, 120%;
+ height:340px;
+ padding-block:30px;
+ }
+
+ color: #fff;
+ text-align: left;
+
+ h3 {
+ font-family: 'Pompiere', cursive;
+ font-size: 46px;
+ padding-bottom: 20px;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ width: 100%;
+ text-align: center !important;
+ font-weight: 500 ;
+
+ }
+
+ .aberto {
+ background-image: url(${Aberto}), url(${Linha});
+ }
+ .fechado {
+ background-image: url(${Fechado}), url(${Linha});
+ }
+
+ .caixa {
+ background-repeat: no-repeat;
+ background-size: 70px 70px, auto auto;
+ background-position: top left;
+ background-position-x: 0, 35px;
+ padding-left: 90px;
+ .texto{
+ background-image: url(${Linha});
+ background-position: top left;
+ background-repeat: repeat-x;
+ background-size: auto auto;
+ span {
+ font-size: 26px;
+ }
+ p {
+ text-align: left;
+ font-size: 15px;
+ margin: 0 0 10px;
+ }
+ }
+ }
+`
@@ -81,13 +143,13 @@ class UserTerms extends Component {
render() {
return (
- <div >
+ <div style={{color:"rgba(0,0,0,0.87"}} >
<link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
- <div style = {bannerStyle}>
+ <BannerStyle>
<h2 style={{width: "100%",textAlign: "center",marginTop:"0px", paddingTop:"6rem",marginBottom:"16px",fontSize:"52px",fontFamily: "'Pompiere', cursive",color:"#fff",fontWeight:"500"}}>TERMOS DE USO</h2>
<Modal/>
- </div>
+ </BannerStyle>
<ImagemSeçao2>
<Grid container spacing={3}>
@@ -106,26 +168,34 @@ class UserTerms extends Component {
</Grid>
</ImagemSeçao2>
- <div style = {{background: "#ff7f00",color:"#fff"}} >
- <h1 style = {{textAlign: "center",width: "100%",fontSize:"46px",fontFamily: "'Pompiere', cursive",fontWeight:"500"}}>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h1>
- <Grid container spacing ={3}>
+ <Secao3 >
+ <Grid container spacing ={3}>
+ <h3>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h3>
<Grid item xs={12} md={1} ></Grid>
- <Grid item xs={12} md={4} >
- <div>
- <h2>Abertos</h2>
- <p>De acordo com a Declaração de Paris, são recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p>
+ <Grid item xs={12} md={5} >
+ <div class="caixa aberto">
+ <div class ="texto">
+ <span>Abertos</span>
+ <p>De acordo com a Declaração de Paris, são recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p>
+ </div>
</div>
</Grid>
- <Grid item xs={12} md={1} ></Grid>
- <Grid item xs={12} md={4}>
- <div>
- <h2>Fechados</h2>
- <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessÃveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservadosâ€, o sÃmbolo ©). Podem ser gratuitos ou pagos.</p>
+
+ <Grid item xs={12} md={5}>
+ <div class="caixa fechado">
+ <div class ="texto">
+ <span>Fechados</span>
+ <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessÃveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservadosâ€, o sÃmbolo ©). Podem ser gratuitos ou pagos.</p>
+ </div>
</div>
</Grid>
<Grid item xs={12} md={1} ></Grid>
</Grid>
- </div>
+ </Secao3>
+
+
+
+
<Grid container spacing={3}>
<Grid item xs={12} md={1}></Grid>
<Grid item xs={12} md={10}>
@@ -151,11 +221,15 @@ class UserTerms extends Component {
</div>
</Grid>
<Grid item xs={12} md={1}></Grid>
+
+
</Grid>
+
+
<Grid container spacing={3}>
<Grid item xs={12} md={1}></Grid>
<Grid item xs={12} md={10}>
- <div style={{verticalAlign: "middle"}}>
+ <div style={{ marginBottom:"50px"}}>
<ExpansionPanels/>
</div>
</Grid>
--
GitLab