Improve Responsivity of page TabResourceFIndHelp

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

src/Pages/TabsHelp/TabResourseFind.js

@@ -73,38 +73,30 @@ export default function TabResourseFind (props) {
           </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">
+              <Menu>
+                <div className="fixo">
                 <img src={EncontrandoRecurso} alt="Encontrando Recursos"/>
-                <span>{tabs[3]}</span>
-              </div>
+                  <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 && <HowToDo title={tabs[0]}/>}
               {tabValue === 1 && <HowToFilter title={tabs[1]}/>}
               {tabValue === 2 && <HowToRank title={tabs[2]}/>}
@@ -114,22 +106,23 @@ export default function TabResourseFind (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}>
-                  <CardPublicando/>
-                </Grid>
-                <Grid item xs={4}>
-                  <CardParticipando/>
-                </Grid>
-                <Grid item xs={4}>
-                  <CardGerenciando/>
-                </Grid>
-              </Grid>
+              
 
             </Principal>
           </Grid>  
         </Grid>        
-
+        <Grid style={{paddingBottom:"50px"}} container justify={"center"}>
+          <Grid item xs={12} md={3} style={{margin:5}}>
+            <CardPublicando/>
+          </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>
     </div>
@@ -139,7 +132,6 @@ export default function TabResourseFind (props) {
 const StyledBreadCrumbs = styled(Breadcrumbs)`
   display : flex;
   justify-content : flex-start;
-  max-width : 1170px;
   span {
     color : #a5a5a5;
   }
@@ -156,13 +148,13 @@ const BreadCrumbsDiv = styled.div`
   display : flex;
 `
 
+
 const Principal = styled.div`
   .fixo {
     
     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;
@@ -219,7 +211,10 @@ const TabsStyled = styled(Tabs)`
 
   .MuiTab-root{
     text-transform: none !important;
+    max-width:100%
   }
+  text-align: center;
+  width:100%
 
 `
 
@@ -229,6 +224,7 @@ const TabStyled = styled(Tab)`
   font-weight: 500;
   font-size: 14px !important;
   border-radius: 4px !important;
+  text-align: center;
 
 
   
@@ -246,6 +242,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;
@@ -291,7 +289,6 @@ const Menu = styled.div`
 `
 
 const Secao = styled.div`
-  width: 1138px;
   margin-inline: auto;
 
 `