Improve resposivity of HelpCenter

Signed-off-by: Henrique V. Ehrenfried <hvehrenfried@inf.ufpr.br>

src/Components/HelpCenter/Cards/CardEncontrando.js

@@ -75,7 +75,7 @@ const CardAjuda = styled.div`
 
   height: 360px;
   margin-bottom: 20px;
-
+  width: 100%
 
   .card {
     height: 280px;
@@ -84,7 +84,7 @@ const CardAjuda = styled.div`
     font-size: 14px;
     background-color:#fff;
     box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
-
+    margin-top:30px
     h3 {
       font-size: 23px;
       font-weight: 400;

src/Components/HelpCenter/Cards/CardGerenciando.js

@@ -93,7 +93,7 @@ const CardAjuda = styled.div`
 
   height: 360px;
   margin-bottom: 20px;
-
+  width: 100%
 
   .card {
     height: 280px;
@@ -102,6 +102,7 @@ const CardAjuda = styled.div`
     font-size: 14px;
     background-color:#fff;
     box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+    margin-top:30px
 
     h3 {
       font-size: 23px;

src/Components/HelpCenter/Cards/CardParticipando.js

@@ -66,7 +66,8 @@ const CardAjuda = styled.div`
 
   height: 360px;
   margin-bottom: 20px;
-
+  width: 100%
+  
 
   .card {
     height: 280px;
@@ -75,6 +76,8 @@ const CardAjuda = styled.div`
     font-size: 14px;
     background-color:#fff;
     box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+    margin-top:30px
+    
 
     h3 {
       font-size: 23px;

src/Components/HelpCenter/Cards/CardPublicando.js

@@ -74,7 +74,7 @@ const CardAjuda = styled.div`
 
 height: 360px;
 margin-bottom: 20px;
-
+width: 100%
 
 .card {
   height: 280px;
@@ -83,7 +83,7 @@ margin-bottom: 20px;
   font-size: 14px;
   background-color:#fff;
   box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
-
+  margin-top:30px
   h3 {
     font-size: 23px;
     font-weight: 400;

src/Components/ResourceList.js

@@ -36,7 +36,6 @@ function Alert(props) {
 
 
 export default function ResourceList(props) {
-	console.log(props);
 
 	const [selected, setSelected] = useState(Array.apply(
 		null, {length: props.resources.length}).map(i => false));

src/Pages/HelpCenter.js

@@ -34,13 +34,20 @@ import CardGerenciando from '../Components/HelpCenter/Cards/CardGerenciando';
 
 
 function HelpCenter(props) {
+  let windowWidth = window.innerWidth
+
   return(
     <div style={{backgroundColor: "#f4f4f4"}}>
       <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
 
       <Secao1>
         <div className= "container">
-          <img src={Banner3} alt="banner3"/>
+          {
+            windowWidth > 420?
+              <img src={Banner3} alt="banner3"/>
+            :
+              <div/>
+          }
           <div className= "conteudo">
             <div className= "title">
               <h2>OLÁ! COMO PODEMOS AJUDAR?</h2>
@@ -57,17 +64,17 @@ function HelpCenter(props) {
                 <h2>Tópicos de Ajuda</h2>
               </div>
               <div>
-                <Grid container spacing={2}>
-                  <Grid item xs={3}>
+                <Grid container justify="center" style={{margin:-8}}>
+                  <Grid item xs={12} md={5} style={{padding:8}}>
                     <CardPublicando/>                  
                   </Grid>
-                  <Grid item xs={3}>
+                  <Grid item xs={12} md={5} style={{padding:8}}>
                     <CardEncontrando/>
                   </Grid>
-                  <Grid item xs={3}>
+                  <Grid item xs={12} md={5} style={{padding:8}}>
                     <CardParticipando/>
                   </Grid>
-                  <Grid item xs={3}>
+                  <Grid item xs={12} md={5} style={{padding:8}}>
                     <CardGerenciando/>
                   </Grid>
                 </Grid>
@@ -77,64 +84,66 @@ function HelpCenter(props) {
         </div>
 
       </Secao2>
-
+    <div style={{width:"100%"}}>
       <Secao3>
-        <Grid style={{height:"100%"}} container spacing={2}>
-          <Grid style={{backgroundColor: "#333",paddingInline:"0" }} item xs={6}>
-            <iframe title="Vídeo página ajuda" src="https://player.vimeo.com/video/231609051" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
-          </Grid>
-          <Grid item xs={6}>
-            <p className="titulo-sobre-ajuda">Plataforma MEC de Recursos Educacionais Digitais</p>
-            <p className="conteudo-sobre-ajuda">
-              Construa conosco a plataforma e amplie sua rede de conhecimento<br/>
-              interagindo com pessoas envolvidas com experiências que ocorrem<br/>
-              em todo o Brasil!
-            </p>
-            <hr/>
-            <Grid container spacing={1}>
-              <Grid item xs={6}>
-                <p className="links">
-                  <br/>
-                  <Link to={{
-                    pathname : 'plataforma-mec',
-                    state : {value : '0'}
-                  }}>O que é a Plataforma MEC</Link>
-                  <br/>
-                  <Link to={{
-                    pathname : 'plataforma-mec',
-                    state : {value : '1'}
-                  }}>Como foi construida a Plataforma<br/>MEC?</Link>
-                  <br/>
-                  <Link to={{
-                    pathname : 'plataforma-mec',
-                    state : {value : '3'}
-                  }}>Quais são os Portais Parceiros?</Link>
-                </p>
-              </Grid>
-              <Grid item xs={6}>
-                <p className="links">
-                  <br/>
-                  <Link to={{
-                    pathname : 'plataforma-mec',
-                    state : {value : '2'}
-                  }}>Entendendo as 3 áreas</Link>
-                  <br/>
-                  <Link to={{
-                    pathname : 'plataforma-mec',
-                    state : {value : '4'}
-                  }}>Tipos de recursos</Link>
-                  <br/>
-                  <Link to={{
-                    pathname : 'plataforma-mec',
-                    state : {value : '5'}
-                  }}>Softwares específicos</Link>
+          <Grid style={{height:"100%"}} container justify="center">
+            <Grid style={{backgroundColor: "#333",paddingInline:"0" }} item xs={12} md={6}>
+              <iframe title="Vídeo página ajuda" src="https://player.vimeo.com/video/231609051" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <div>
+                <p className="titulo-sobre-ajuda">Plataforma MEC de Recursos Educacionais Digitais</p>
+                <p className="conteudo-sobre-ajuda">
+                  Construa conosco a plataforma e amplie sua rede de conhecimento
+                  interagindo com pessoas envolvidas com experiências que ocorrem
+                  em todo o Brasil!
                 </p>
+              </div>
+              <Grid container>
+                <Grid item xs={12} md={6}>
+                  <p className="links">
+                    <br/>
+                    <Link to={{
+                      pathname : 'plataforma-mec',
+                      state : {value : '0'}
+                    }}>O que é a Plataforma MEC</Link>
+                    <br/>
+                    <Link to={{
+                      pathname : 'plataforma-mec',
+                      state : {value : '1'}
+                    }}>Como foi construida a Plataforma<br/>MEC?</Link>
+                    <br/>
+                    <Link to={{
+                      pathname : 'plataforma-mec',
+                      state : {value : '3'}
+                    }}>Quais são os Portais Parceiros?</Link>
+                  </p>
+                </Grid>
+                <Grid item xs={12} md={6}>
+                  <p className="links">
+                    <br/>
+                    <Link to={{
+                      pathname : 'plataforma-mec',
+                      state : {value : '2'}
+                    }}>Entendendo as 3 áreas</Link>
+                    <br/>
+                    <Link to={{
+                      pathname : 'plataforma-mec',
+                      state : {value : '4'}
+                    }}>Tipos de recursos</Link>
+                    <br/>
+                    <Link to={{
+                      pathname : 'plataforma-mec',
+                      state : {value : '5'}
+                    }}>Softwares específicos</Link>
+                  </p>
+                </Grid>
               </Grid>
-            </Grid>
 
+            </Grid>
           </Grid>
-        </Grid>
-      </Secao3>
+        </Secao3>
+      </div>
 
       <Secao4>
         <div className="container">
@@ -142,7 +151,7 @@ function HelpCenter(props) {
             <h2>Não encontrou o que você precisa?</h2>
             <span>Entre em contato com a nossa Central de Ajuda</span>
             <br/>
-            <button><a href="contato">ENTRAR EM CONTATO</a></button>
+            <button style={{marginBottom:50, marginTop:20}}><a href="contato">ENTRAR EM CONTATO</a></button>
 
           </div>
         </div>
@@ -156,27 +165,25 @@ export default HelpCenter;
 
 
 const Secao1 = styled.div`
-  height: 374px;
   background-color:#00bcd4;
   text-align: center;
+  width: 100%;
   .container {
     height: 100%;
-    width: 1170px;
     display: flex;
     -webkit-box-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     align-items: center;
-    padding-right: 15px;
     padding-left: 15px;
     margin-right: auto;
     margin-left: auto;
 
     img {
       position: relative;
-      left: 82px;
       top: 41.6%;
-      width: 230px;
+      max-width: 230px;
+      width: 90%;
       float: left;
       min-height: 1px;
       padding-right: 15px;
@@ -208,14 +215,13 @@ const Secao1 = styled.div`
 `
 
 const Secao2 = styled.div`
-  height: 536px;
   background-color:#f4f4f4;
   text-align: center;
   margin-bottom: 20px;
-
+  padding-bottom: 50px
+  width: 100%;
   .container {
     height: 100%;
-    width: 1170px;
     margin-right: auto;
     margin-left: auto;
 
@@ -243,7 +249,7 @@ const Secao2 = styled.div`
 
           .card {
             height: 280px;
-            padding: 40px 15px;
+            padding: 40px 0px;
             text-align: center;
             font-size: 14px;
             background-color:#fff;
@@ -258,13 +264,6 @@ const Secao2 = styled.div`
               line-height: 1.1;
             }
 
-            hr {
-              margin-top: 20px;
-              margin-bottom: 20px;
-              border: 0;
-              border-top: 1px solid #eee;
-              color: #a5a5a5;
-            }
 
             a {
               font-size: 15px;
@@ -321,14 +320,12 @@ const Secao2 = styled.div`
 `
 
 const Secao3 = styled.div`
-  height: 375px;
   padding: 0;
   text-align: center;
   background-color: #fff;
-  width: 1170px;
   margin-inline: auto;
   color: rgba(0,0,0,0.87);
-
+  width: 100%;
   .links {
     font-size: 15px;
     font-weight: lighter;
@@ -356,26 +353,16 @@ const Secao3 = styled.div`
     margin: 0 0 10px;
   }
 
-  hr {
-    width: 350px;
-    border: 0;
-    border-top: 1px solid #ccc;
-    margin-top: 20px;
-    margin-bottom: 20px;
-
-  }
 
 
 
 `
 
 const Secao4 = styled.div`
-  height: 290px;
-
+  width: 100%;
   .container {
     height: 100%;
     color: #a5a5a5;
-    width: 1170px;
     margin-inline: auto;
     display: flex;
     flex-direction: column;