Ajustando css e mudança de padrão

src/Components/Modal.js

@@ -24,9 +24,13 @@ import Backdrop from '@material-ui/core/Backdrop';
 import Fade from '@material-ui/core/Fade';
 import VisibilityIcon from '@material-ui/icons/Visibility';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
+import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 
 
 
+import styled from 'styled-components'
+
+
 
 
 const useStyles = makeStyles(theme => ({
@@ -48,6 +52,29 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
+const CarouselStyled = styled(Carousel)`
+  .carousel .control-dots{
+    position: inherit !important;
+  }
+  .carousel .control-arrow {
+    background: black !important;
+    position: relative !impontant;
+  }
+  .carousel .control-next.control-arrow::before{
+    content: {<ArrowForwardIosIcon/>} !important;
+  }
+  .carousel.carousel-slider .control-arrow {
+      top: 40% !important;
+      bottom: 50% !important;
+      border-radius: 100% !important;
+      opacity: 0.8 !important;
+      padding: 12px !important;
+  }
+  .MuiPaper-elevation1-209{
+    box-shadow: none !important;
+  }
+`
+
 export default function TransitionsModal() {
   const classes = useStyles();
   const [open, setOpen] = React.useState(false);
@@ -78,7 +105,7 @@ export default function TransitionsModal() {
         }}
       >
         <Fade in={open}>
-          <Carousel className={classes.carousel} showArrows={<ArrowBackIosIcon/>} showThumbs={false} infiniteLoop={true} showStatus={false}>
+          <CarouselStyled className={classes.carousel} showArrows={true} showThumbs={false} infiniteLoop={true} showStatus={false}>
             <div>
               <p>A Plataforma Integrada MEC RED é parte do Compromisso 6 do 3º Plano de Ação da Parceria para Governo Aberto (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”.</p>
             </div>
@@ -154,7 +181,7 @@ export default function TransitionsModal() {
 
               <p>Dúvidas? Leia a íntegra dos <span ng-click="hide()">Termos de Uso</span> ou fale conosco por meio do <span ui-sref="contato">formulário de contato</span>.</p>
             </div>
-          </Carousel>
+          </CarouselStyled>
         </Fade>
       </Modal>
     </div>

src/Pages/UserTerms.js

@@ -68,14 +68,20 @@ class UserTerms extends Component {
           </div>
 
           <div style= {secao2}>
-            <div style = {container}>
-              <h3 style= {{textAlign: "center",fontWeight: "normal"}}><strong>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br/>uma iniciativa do Ministério da Educação!</h3>
-
-              <p style={{textAlign:"justify"}}>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <a href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</a> (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”.
-              </p>
-              <p style={{textAlign:"justify"}}>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domínio público ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.” <a href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</a>.
-              </p>
-            </div>
+            <Grid container spacing={3}>
+              <Grid item xs={2}></Grid>
+              <Grid item xs={8}>
+                <div>
+                  <h3 style= {{textAlign: "center",fontWeight: "100",fontFamily:"'Roboto', sans-serif",fontSize:"30px"}}><strong style={{fontWeight:"700"}}>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br/>uma iniciativa do Ministério da Educação!</h3>
+
+                  <p style={{textAlign:"justify"}}>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <a href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</a> (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”.
+                  </p>
+                  <p style={{textAlign:"justify"}}>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domínio público ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.” <a style={{color:"#00BCD4"}} href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</a>.
+                  </p>
+                </div>
+              </Grid>
+              <Grid item xs={2}></Grid>
+            </Grid>
           </div>
 
           <div style = {{background: "#ff7f00"}} >
@@ -131,7 +137,7 @@ A aceitação destes "Termos de Uso" é indispensável à utilização da <stron
             </spam>
 
           </div>
-          <Grid container spacing={2}>
+          <Grid container spacing={3}>
           <Grid item xs={2}></Grid>
           <Grid item xs={8}>
           <div style={{verticalAlign: "middle"}}>