diff --git a/src/Pages/TabsHelp/TabResourseFind.js b/src/Pages/TabsHelp/TabResourseFind.js index 0398c28b69f62e73bdac18f43a561068cea761d1..8691d2822ea4f4f7100eb8a413f104a78db94788 100644 --- a/src/Pages/TabsHelp/TabResourseFind.js +++ b/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; `