Improve Responsivity of page TabResourceHelpNetPart

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

src/Pages/TabsHelp/TabNetPart.js

@@ -73,37 +73,29 @@ export default function TabNetPart (props) {
           </StyledBreadCrumbs>
 
         </BreadCrumbsDiv>
-        <Grid container spacing={4}>
-          <Grid item xs={3}>
-            <Menu>
-              <h4>{tabs[2]}</h4>
-              <TabsStyled orientation = "vertical"
-                          variant = "scrollable"
-                          value = {tabValue}
-                          onChange = {handleChangeTab}
-                          TabIndicatorProps = {{style:{display: "none"}}}
-              >
-              <TabStyled label={tabs[0]}></TabStyled>
-              <TabStyled label={tabs[1]}></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">
+              <Menu>
+                <div className="fixo">
                 <img src={ParticipandoRede} alt="Participando da Rede"/>
-                <span>{tabs[2]}</span>
-              </div>
+                  <span>{tabs[2]}</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>
+                </TabsStyled>
+                <br/>
+                <div className="voltarInicio">
+                  <a href="ajuda">VOLTAR AO ÍNICIO</a>
+                </div>
+              </Menu>
+
               {tabValue === 0 && <How title={tabs[0]}/>}
               {tabValue === 1 && <What title={tabs[1]}/>}
               <div className="resultadosProcura">
@@ -112,24 +104,25 @@ export default function TabNetPart (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}>
+
+            </Principal>
+          </Grid>  
+        </Grid>
+          
+              
+          <Grid style={{paddingBottom:"50px"}} container justify={"center"}>
+                <Grid item xs={12} md={3} style={{margin:5}}>
                   <CardPublicando/>
                 </Grid>
-                <Grid item xs={4}>
+                <Grid item xs={12} md={3} style={{margin:5}}>
                   <CardEncontrando/>
                 </Grid>
-                <Grid item xs={4}>
+                <Grid item xs={12} md={3} style={{margin:5}}>
                   <CardGerenciando/>
                 </Grid>
               </Grid>
 
 
-            </Principal>
-          </Grid>  
-        </Grid>        
-
-
       </Secao>
     </div>
   );
@@ -137,7 +130,6 @@ export default function TabNetPart (props) {
 const StyledBreadCrumbs = styled(Breadcrumbs)`
   display : flex;
   justify-content : flex-start;
-  max-width : 1170px;
   span {
     color : #a5a5a5;
   }
@@ -161,7 +153,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;
@@ -218,7 +209,10 @@ const TabsStyled = styled(Tabs)`
 
   .MuiTab-root{
     text-transform: none !important;
+    max-width:100%
   }
+  text-align: center;
+  width:100%
 
 `
 
@@ -228,6 +222,7 @@ const TabStyled = styled(Tab)`
   font-weight: 500;
   font-size: 14px !important;
   border-radius: 4px !important;
+  text-align: center;
 
 
   
@@ -245,6 +240,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;
@@ -290,7 +287,6 @@ const Menu = styled.div`
 `
 
 const Secao = styled.div`
-  width: 1138px;
   margin-inline: auto;
 
 `