Improve Responsivity of page TabResourceHelp

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

src/Pages/TabsHelp/TabResoursePub.js

@@ -60,48 +60,37 @@ export default function TabResoursePub (props) {
             </Link>
             <Link to="ajuda" >
               Ajuda
-            </Link>
-            
+            </Link>            
             <span>
                 {tabs[3]}
             </span>
-
-
           </StyledBreadCrumbs>
 
         </BreadCrumbsDiv>
-        <Grid container spacing={4}>
-          <Grid item xs={3}>
-            <Menu>
-              <h4>{tabs[3]}</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>
-              </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>
-            </Menu>
-          </Grid>
-
-          <Grid item xs={9}>
+        <Grid container justify="center">
+          <Grid item xs={12} md={10} >
             <Principal>
-              <div className="fixo">
-                <img src={PublicandoRecursos} alt="Publicando Recursos"/>
-                <span>{tabs[3]}</span>
-              </div>
+              <Menu>
+                <div className="fixo">
+                  <img src={PublicandoRecursos} alt="Publicando Recursos"/>
+                  <span>{tabs[3]}</span>
+                </div>
+                <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>
+                </TabsStyled>
+                <br/>
+                <div className="voltarInicio">
+                  <a href="ajuda">VOLTAR AO ÍNICIO</a>
+                </div>
+              </Menu>
+
               {tabValue === 0 && <Why title={tabs[0]}/>}
               {tabValue === 1 && <How title={tabs[1]}/>}
               {tabValue === 2 && <Which title={tabs[2]}/>}
@@ -111,22 +100,22 @@ export default function TabResoursePub (props) {
                   <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
                 </div>
               </div>
-              <Grid style={{marginBottom:"50px"}} container spacing={2}>
-                <Grid item xs={4}>
-                  <CardEncontrando/>
-                </Grid>
-                <Grid item xs={4}>
-                  <CardParticipando/>
-                </Grid>
-                <Grid item xs={4}>
-                  <CardGerenciando/>
-                </Grid>
-
-              </Grid>
 
             </Principal>
           </Grid>  
-        </Grid>        
+        </Grid>   
+        <Grid style={{paddingBottom:"50px"}} container justify={"center"}>
+          <Grid item xs={12} md={3} style={{margin:5}}>
+            <CardEncontrando/>
+          </Grid>
+          <Grid item xs={12} md={3} style={{margin:5}}>
+            <CardParticipando/>
+          </Grid>
+          <Grid item xs={12} md={3} style={{margin:5}}>
+            <CardGerenciando/>
+          </Grid>
+
+        </Grid>     
 
 
       </Secao>
@@ -136,7 +125,6 @@ export default function TabResoursePub (props) {
 const StyledBreadCrumbs = styled(Breadcrumbs)`
   display : flex;
   justify-content : flex-start;
-  max-width : 1170px;
   span {
     color : #a5a5a5;
   }
@@ -160,7 +148,6 @@ const Principal = styled.div`
     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;
@@ -217,7 +204,10 @@ const TabsStyled = styled(Tabs)`
 
   .MuiTab-root{
     text-transform: none !important;
+    max-width:100%
   }
+  text-align: center;
+  width:100%
 
 `
 
@@ -227,6 +217,7 @@ const TabStyled = styled(Tab)`
   font-weight: 500;
   font-size: 14px !important;
   border-radius: 4px !important;
+  text-align: center;
 
 
   
@@ -244,6 +235,8 @@ const Menu = styled.div`
   color: #666;
   padding-block: 10px;
   box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px  rgba(0,0,0,.24);
+  margin-bottom:30px
+
 
   h4 {
     padding-inline: 15px;
@@ -289,7 +282,6 @@ const Menu = styled.div`
 `
 
 const Secao = styled.div`
-  width: 1138px;
   margin-inline: auto;
 
 `