From 4d38e4c201b657989ef947bef70860da690221fb Mon Sep 17 00:00:00 2001
From: Riba <mrp19@inf.ufpr.br>
Date: Mon, 11 Nov 2019 12:02:38 -0300
Subject: [PATCH] Estilizando o painel expansivo

---
 src/Components/ExpansionPanels.js | 61 +++++++++++++++++++------------
 1 file changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/Components/ExpansionPanels.js b/src/Components/ExpansionPanels.js
index 9a432d10..772e07c6 100644
--- a/src/Components/ExpansionPanels.js
+++ b/src/Components/ExpansionPanels.js
@@ -32,26 +32,41 @@ import styled from 'styled-components';
 const TypographyColorido = styled(Typography)`
 
   color: #666 !important;
+  font-size: 16px !important;
+  font-weight: 400 !important;
 `
 
 const MuiExpansionPanelMargem = styled(MuiExpansionPanel)`
-  .expanded{
-    margin: 0 0 0 0 !important;
-  }
+
+    .Mui-expanded{
+      background-color: black;
+    }
+
 `
 
 const MuiExpansionPanelSummaryColorido = styled(MuiExpansionPanelSummary)`
+
+
   background-color:#e5e5e5 !important;
+
+
 `
 
 
 const MuiExpansionPanelDetailsColorido = styled(MuiExpansionPanelDetails)`
+
   background-color: #fff;
+  font-size: 15px;
+`
+const AColorido = styled.a`
+    color: #00BCD4;
+    text-decoration:none;
+
 `
 
 
 export default function CustomizedExpansionPanels() {
-  const [expanded, setExpanded] = React.useState('panel1');
+  const [expanded, setExpanded] = React.useState(false);
 
   const handleChange = panel => (event, newExpanded) => {
     setExpanded(newExpanded ? panel : false);
@@ -68,7 +83,7 @@ export default function CustomizedExpansionPanels() {
             <Grid item xs={12} md={7}>
               <div>
                 <p>A <strong>Plataforma Integrada de RED do MEC</strong> é um é sítio (website) em formato de plataforma
-                interativa colaborativa para propiciar a formação de uma rede de pessoas interessadas em usar, criar e compartilhar recursos e materiais educacionais. Seu objetivo é reunir e disponibilizar conteúdos do acervo do MEC, antes distribuídos em diferentes portais (Portal do Professor, Banco Internacional de Objetos Educacionais, Domínio Público e TV Escola), conteúdo de organizações parceiras, bem como fomentar espaços de participação, criação e compartilhamento de conhecimento entre usuários para temas relacionados à educação básica brasileira. A <strong>Plataforma Integrada de RED do MEC</strong> foi criada em software livre, cujas informações para desenvolvedores estão disponíveis em <a style={{color:"#00BCD4"}} href="https://gitlab.c3sl.ufpr.br/portalmec" target="_blank">gitlab.c3sl.ufpr.br/portalmec</a>.</p>
+                interativa colaborativa para propiciar a formação de uma rede de pessoas interessadas em usar, criar e compartilhar recursos e materiais educacionais. Seu objetivo é reunir e disponibilizar conteúdos do acervo do MEC, antes distribuídos em diferentes portais (Portal do Professor, Banco Internacional de Objetos Educacionais, Domínio Público e TV Escola), conteúdo de organizações parceiras, bem como fomentar espaços de participação, criação e compartilhamento de conhecimento entre usuários para temas relacionados à educação básica brasileira. A <strong>Plataforma Integrada de RED do MEC</strong> foi criada em software livre, cujas informações para desenvolvedores estão disponíveis em <AColorido href="https://gitlab.c3sl.ufpr.br/portalmec" target="_blank">gitlab.c3sl.ufpr.br/portalmec</AColorido>.</p>
                 <p>A <strong>Plataforma Integrada de RED do MEC</strong> funciona ao mesmo tempo como repositório e referatório:</p>
                 <ul>
                   <li>
@@ -80,12 +95,12 @@ export default function CustomizedExpansionPanels() {
                 </ul>
                 <p>No que se refere ao Repositório, a <strong>Plataforma Integrada de RED do MEC</strong> disponibiliza recursos educacionais digitais e materiais de formação de seu acervo e também permite que usuários (pessoas físicas) depositem (publiquem, façam upload) seus recursos e materiais para serem armazenados, desde que façam seu cadastro, disponibilizem as informações necessárias no momento da publicação e respeitem as regras estabelecidas neste Termo.</p>
                 <p>Os usuários terão acesso a uma variedade de recursos on-line. Para além, mediante cadastro, terão a sua disposição um maior número de funcionalidades, incluindo ferramentas de comunicação e interação, mecanismos de consulta, poderão fazer upload e download de recursos educacionais digitais. Poderão utilizar serviços relacionados à criação, à consulta e ao acompanhamento de coleções de recursos educacionais digitais de outros usuários, dentre outras funcionalidades. Professores cadastrados e identificados poderão ainda fazer upload de RED.</p>
-                <p>No que se refere ao Referatório, a <strong>Plataforma Integrada de RED do MEC</strong> indica e organiza links externos para recursos e materiais de terceiros. Os recursos serão disponibilizados mediante a adesão aos critérios específicos levantados pelo MEC. Para mais informações, utilize a página de <a style={{color:"#00BCD4"}} href="contato">Contato</a> da plataforma.</p>
+                <p>No que se refere ao Referatório, a <strong>Plataforma Integrada de RED do MEC</strong> indica e organiza links externos para recursos e materiais de terceiros. Os recursos serão disponibilizados mediante a adesão aos critérios específicos levantados pelo MEC. Para mais informações, utilize a página de <AColorido href="contato">Contato</AColorido> da plataforma.</p>
               </div>
             </Grid>
             <Grid item  xs={12} md={1}></Grid>
             <Grid item xs={12} md={4}>
-              <div style={{color:"#00BCD4"}}>
+              <div style={{color:"#00BCD4",fontSize:"18px"}}>
                 <p>BASICAMENTE,</p>
                 <p>A Plataforma MEC RED reúne e disponibiliza conteúdos do acervo do MEC que antes estavam distribuídos em diferentes portais.</p>
                 <p>Esses conteúdos podem estar armazenados na própria Plataforma, ou podem estar em sites externos, sendo indicados pela Plataforma e acessados por meio dela. </p>
@@ -115,7 +130,7 @@ export default function CustomizedExpansionPanels() {
             </Grid>
             <Grid item xs={12} md={1}></Grid>
             <Grid item xs={12} md={4}>
-              <div style={{color:"#00BCD4"}}>
+              <div style={{color:"#00BCD4",fontSize:"18px"}}>
                 <p>BASICAMENTE,</p>
                 <p>Para utilizar determinados recursos e ferramentas, o usuário precisa efetuar o cadastro no sistema, informando um e-mail válido e cadastrando uma senha.</p>
                 <p>O usuário é o único responsável pelas informações que fornece. E a Plataforma MEC RED se reserva o direito de conferir a veracidade desses dados, caso julgue necessário.</p>
@@ -155,13 +170,13 @@ export default function CustomizedExpansionPanels() {
                 <h6 style={{fontSize:"18px",marginBlock: "10px"}}>3.2 É vedado ao usuário:</h6>
                 <ul>
                   <li>
-                    <p>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o <a style={{color:"#00BCD4"}} href="http://www.planalto.gov.br/ccivil_03/leis/L8069.htm" target="_blank">Estatuto da Criança e do Adolescente</a>), que invada a privacidade de terceiros, que tenha cunho comercial, viole os <a style={{color:"#00BCD4"}} href="http://www.onu.org.br/img/2014/09/DUDH.pdf" target="_blank">Direitos Humanos</a> ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário às cláusulas destes Termos de Uso;</p>
+                    <p>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o <AColorido href="http://www.planalto.gov.br/ccivil_03/leis/L8069.htm" target="_blank">Estatuto da Criança e do Adolescente</AColorido>), que invada a privacidade de terceiros, que tenha cunho comercial, viole os <AColorido href="http://www.onu.org.br/img/2014/09/DUDH.pdf" target="_blank">Direitos Humanos</AColorido> ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário às cláusulas destes Termos de Uso;</p>
                   </li>
                   <li>
                     <p>Assumir a identidade de outra pessoa, física ou jurídica; forjar cabeçalhos, ou de qualquer outra forma manipular identificadores, a fim de disfarçar a origem de qualquer material contido na plataforma, com sentido de desmoralizar, desprestigiar ou se fazer passar pela <strong>Plataforma Integrada de RED do MEC</strong>;</p>
                   </li>
                   <li>
-                    <p>Disponibilizar conteúdo em desconformidade com a <a style={{color:"#00BCD4"}} href="http://www.planalto.gov.br/ccivil_03/leis/L9610.htm" target="_blank">legislação de Direito Autoral</a>, incluindo conteúdo que viole marca registrada, patente, segredo de negócio, direito autoral ou qualquer outro direito de terceiro; disponibilizar conteúdo com qualquer tipo de propaganda, material promocional, spam (mensagens não solicitadas), correntes ou esquemas de pirâmide;</p>
+                    <p>Disponibilizar conteúdo em desconformidade com a <AColorido href="http://www.planalto.gov.br/ccivil_03/leis/L9610.htm" target="_blank">legislação de Direito Autoral</AColorido>, incluindo conteúdo que viole marca registrada, patente, segredo de negócio, direito autoral ou qualquer outro direito de terceiro; disponibilizar conteúdo com qualquer tipo de propaganda, material promocional, spam (mensagens não solicitadas), correntes ou esquemas de pirâmide;</p>
                   </li>
                   <li>
                     <p>Disponibilizar conteúdo que contenha vírus ou qualquer outro código, arquivo ou programa de computador, com o propósito de interromper, destruir ou limitar a funcionalidade de qualquer software, hardware ou equipamento de telecomunicações;</p>
@@ -177,7 +192,7 @@ export default function CustomizedExpansionPanels() {
             </Grid>
             <Grid item xs={12} md={1}></Grid>
             <Grid item xs={12} md={4}>
-              <div style={{color:"#00BCD4"}}>
+              <div style={{color:"#00BCD4",fontSize:"18px"}}>
                 <p>BASICAMENTE,</p>
                 <p>O conteúdo disponibilizado pelo usuário é de sua inteira responsabilidade. Os recursos publicados tevem ter cunho educacional, em conformidade com estes Termos.</p>
                 <p>Todas informações publicadas na Plataforma MEC RED são cosideradas públicas, visíveis por qualquer pessoa.</p>
@@ -197,9 +212,9 @@ export default function CustomizedExpansionPanels() {
           <Grid container spacing={3}>
             <Grid item xs={12} md={7}>
               <div>
-                <p>A <strong>Plataforma Integrada de RED do MEC</strong>, entendida como obra intelectual em seu conjunto, é de titularidade do Ministério da Educação. Sua disponibilização ocorrerá de acordo com os termos da <a style={{color:"#00BCD4"}} href="https://creativecommons.org/licenses/by-sa/4.0/deed.pt_BR" target="_blank">Licença Pública Creative Commons do tipo CC BY-SA</a>, exceto nos casos em que for indicado de outra forma.</p>
+                <p>A <strong>Plataforma Integrada de RED do MEC</strong>, entendida como obra intelectual em seu conjunto, é de titularidade do Ministério da Educação. Sua disponibilização ocorrerá de acordo com os termos da <AColorido href="https://creativecommons.org/licenses/by-sa/4.0/deed.pt_BR" target="_blank">Licença Pública Creative Commons do tipo CC BY-SA</AColorido>, exceto nos casos em que for indicado de outra forma.</p>
                 <p>A licença CC BY SA é uma licença aberta e permite que seja feita cópia, redistribuição, adaptação e criação de obras derivadas, inclusive uso comercial, desde que o autor seja referenciado e que a licença da obra derivada seja também CC BY SA, garantindo o constante caráter aberto das produções.</p>
-                <p>Aplica-se aos códigos de software desenvolvidos pela <strong>Plataforma Integrada de RED do MEC</strong> a <a style={{color:"#00BCD4"}} href="https://www.gnu.org/licenses/gpl.html" target="_blank">Licença Pública Geral Affero GNU GPL</a> (veja a tradução livre <a style={{color:"#00BCD4"}} href="https://creativecommons.org/licenses/GPL/2.0/legalcode.pt" target="_blank">aqui</a>), que visa garantir a liberdade de compartilhar e de modificar softwares livres.</p>
+                <p>Aplica-se aos códigos de software desenvolvidos pela <strong>Plataforma Integrada de RED do MEC</strong> a <AColorido href="https://www.gnu.org/licenses/gpl.html" target="_blank">Licença Pública Geral Affero GNU GPL</AColorido> (veja a tradução livre <AColorido href="https://creativecommons.org/licenses/GPL/2.0/legalcode.pt" target="_blank">aqui</AColorido>), que visa garantir a liberdade de compartilhar e de modificar softwares livres.</p>
                 <p>O usuário que utilizar a <strong>Plataforma Integrada de RED do MEC</strong> como repositório, ou seja, para armazenamento de conteúdo, garante que detém todos os direitos e autorizações para a publicação do conteúdo e deverá escolher uma das licenças Creative Commons elencadas no formulário no momento de cadastro do material. As licenças Creative Commons relacionadas abaixo serão aceitas na <strong>Plataforma Integrada de RED do MEC</strong>, pois garantem o devido crédito pela criação original do usuário e permitem as seguintes ações de uso:</p>
                 <ul>
                   <li>
@@ -215,7 +230,7 @@ export default function CustomizedExpansionPanels() {
                     <p><strong>CC-BY-NC-SA</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</p>
                   </li>
                 </ul>
-                <p>Cabe ao Usuário verificar a compatibilidade da licença do material obtido na <strong>Plataforma Integrada de RED do MEC</strong> para utilizar em outras produções. Para consultar a compatibilidade das licenças Creative Commons, há uma ferramenta disponível no site <a style={{color:"#00BCD4"}} href="http://aberta.org.br/compatibilidade/" target="_blank">Iniciativa Educação Aberta</a>.</p>
+                <p>Cabe ao Usuário verificar a compatibilidade da licença do material obtido na <strong>Plataforma Integrada de RED do MEC</strong> para utilizar em outras produções. Para consultar a compatibilidade das licenças Creative Commons, há uma ferramenta disponível no site <AColorido href="http://aberta.org.br/compatibilidade/" target="_blank">Iniciativa Educação Aberta</AColorido>.</p>
                 <p>O usuário da <strong>Plataforma Integrada de RED do MEC</strong> responde por todo o conteúdo publicado por meio de seu perfil, inclusive no que diz respeito à violação dos direitos autorais relacionados a tais postagens. Ao inserir um conteúdo de sua autoria para armazenamento, o usuário concorda e autoriza o licenciamento ao escolher uma das licenças abertas descritas no formulário de publicação, de forma a permitir não só o seu reconhecimento pleno de autoria, como também a possibilidade de replicação, reedição e reformulação de suas postagens por terceiros, com o objetivo de possibilitar o compartilhamento e a reutilização de conteúdo educacional.</p>
                 <p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá disponibilizar endereços eletrônicos de outros sítios externos, por meio de links, o que não significa que estes sejam de sua propriedade ou por ele operados. A presença de links para outros sites não implica relação de sociedade ou de supervisão da <strong>Plataforma Integrada de RED do MEC</strong> com esses sites e seus conteúdos. Os campos descritivos de cada recurso conterão informações específicas sobre as licenças dos mesmos. Cabe ao usuário verificar a licença de cada recurso.</p>
                 <p>É vedado o uso não autorizado da obra ou seu uso em desconformidade com a legislação autoral e com os termos da licença mencionada.</p>
@@ -223,7 +238,7 @@ export default function CustomizedExpansionPanels() {
             </Grid>
             <Grid item xs={12} md={1}></Grid>
             <Grid item xs={12} md={4}>
-              <div style={{color:"#00BCD4"}}>
+              <div style={{color:"#00BCD4",fontSize:"18px"}}>
                 <p>BASICAMENTE.</p>
                 <p>A Plataforma MEC RED, por ser entendida como obra intelectual, possui uma licença aberta de uso que permite a reutilização e o compartilhamento do conteúdo, inclusive para uso comercial, desde que o autor seja referenciado. Além disso, no caso de obras derivadas, a licença deverá ser a mesma da obra original.</p>
                 <p>Os códigos de software desenvolvidos para a Plataforma, possuem uma licença pública, de software livre, que garante a liberdade de compartilhamento e modificação dos mesmos.</p>
@@ -269,7 +284,7 @@ export default function CustomizedExpansionPanels() {
             </Grid>
             <Grid item xs={12} md={1}></Grid>
             <Grid item xs={12} md={4}>
-              <div style={{color:"#00BCD4"}}>
+              <div style={{color:"#00BCD4",fontSize:"18px"}}>
                 <p>BASICAMENTE,</p>
                 <p>Para manter a confidencialidade e a segurança dos dados, a Plataforma MEC RED tomará todas as medidas possíveis.</p>
                 <p>Os dados sobre interação e comportamento dos usuários nunca serão comercializados, mas poderão ser analisados para fins de pesquisa, divulgação e melhorias, sem a identificação dos usuários.</p>
@@ -291,7 +306,7 @@ export default function CustomizedExpansionPanels() {
           </Grid>
           <Grid item xs={12} md={1}></Grid>
           <Grid item xs={12} md={4}>
-            <div style={{color:"#00BCD4"}}>
+            <div style={{color:"#00BCD4",fontSize:"18px"}}>
               <p>BASICAMENTE,</p>
               <p>Serão aplicadas as sanções previstas ou as ações legais ao responsável por intromissão, ou tentativa de intromissão, na Plataforma MEC RED.</p>
             </div>
@@ -323,7 +338,7 @@ export default function CustomizedExpansionPanels() {
           </Grid>
           <Grid item xs={12} md={1}></Grid>
           <Grid item xs={12} md={4}>
-            <div style={{color:"#00BCD4"}}>
+            <div style={{color:"#00BCD4",fontSize:"18px"}}>
               <p>BASICAMENTE,</p>
               <p>No caso do usuário não cumprir qualquer item destes Termos, praticar atos fraudulentos ou dolosos ou causar dano a alguém ou à Plataforma MEC RED, sua conta poderá ser bloqueada, desativada ou removida, em caráter temporário ou definitivo.</p>
             </div>
@@ -347,7 +362,7 @@ export default function CustomizedExpansionPanels() {
           </Grid>
           <Grid item xs={12} md={1}></Grid>
           <Grid item xs={12} md={4}>
-            <div style={{color:"#00BCD4"}}>
+            <div style={{color:"#00BCD4",fontSize:"18px"}}>
               <p>BASICAMENTE,</p>
               <p>A Plataforma MEC RED e o Ministério da Educação não serão responsáveis por danos, prejuízos ou outro efeito relacionados ao uso da Plataforma por parte de qualquer pessoa.</p>
               <p>O usuário é integralmente responsável pelos materiais enviados e por qualquer conteúdo publicado, se comprometendo a responder por eles, quando necessário.</p>
@@ -369,7 +384,7 @@ export default function CustomizedExpansionPanels() {
           </Grid>
           <Grid item xs={12} md={1}></Grid>
           <Grid item xs={12} md={4}>
-            <div style={{color:"#00BCD4"}}>
+            <div style={{color:"#00BCD4",fontSize:"18px"}}>
               <p>BASICAMENTE,</p>
               <p>Não há nenhum tipo de vínculo (trabalhista, parceria, etc) entre a Plataforma e o usuário.</p>
             </div>
@@ -392,7 +407,7 @@ export default function CustomizedExpansionPanels() {
           </Grid>
           <Grid item xs={12} md={1}></Grid>
           <Grid item xs={12} md={4}>
-            <div style={{color:"#00BCD4"}}>
+            <div style={{color:"#00BCD4",fontSize:"18px"}}>
               <p>BASICAMENTE,</p>
               <p>O usuário poderá reportar,
utilizando a funcionalidade “Reportar” ou pelo formulário de “Contato”, qualquer tipo de conteúdo publicado na Plataforma MEC RED que viole os direitos dos usuários, de terceiros ou a legislação aplicável.</p>
             </div>
@@ -413,7 +428,7 @@ export default function CustomizedExpansionPanels() {
           </Grid>
           <Grid item xs={12} md={1}></Grid>
           <Grid item xs={12} md={4}>
-            <div style={{color:"#00BCD4"}}>
+            <div style={{color:"#00BCD4",fontSize:"18px"}}>
               <p>BASICAMENTE,</p>
               <p>Com o objetivo de melhorar os serviços prestados, estes Termos podem ser alterados, a qualquer tempo. Caso ocorra, os usuários serão notificados e terão um período para se manifestar em relação às alterações.</p>
             </div>
@@ -434,7 +449,7 @@ export default function CustomizedExpansionPanels() {
           </Grid>
           <Grid item xs={12} md={1}></Grid>
           <Grid item xs={12} md={4}>
-            <div style={{color:"#00BCD4"}}>
+            <div style={{color:"#00BCD4",fontSize:"18px"}}>
               <p>BASICAMENTE,</p>
               <p>Em caso de dúvidas ou litígios, é preciso recorrer ao Foro da Justiça Federal.</p>
             </div>
-- 
GitLab