diff --git a/src/Pages/TabsHelp/TabManageAc.js b/src/Pages/TabsHelp/TabManageAc.js index ab485dd16d8ee5c976d9fff0cd335e209d5b7673..9aa293b3fac8e07bc551a59e97f6161618f4d4f9 100644 --- a/src/Pages/TabsHelp/TabManageAc.js +++ b/src/Pages/TabsHelp/TabManageAc.js @@ -65,41 +65,32 @@ export default function TabManageAc(props) { <span>{tabs[5]}</span> </StyledBreadCrumbs> </BreadCrumbsDiv> - <Grid container spacing={4}> - <Grid item xs={3}> - <Menu> - <h4>{tabs[5]}</h4> - <TabsStyled - orientation="vertical" - variant="scrollable" - value={tabValue} - onChange={handleChangeTab} - TabIndicatorProps={{ style: { display: "none" } }} - > + <Grid container justify="center"> + <Grid item xs={12} md={10} > + <Principal> + <Menu> + <div className="fixo"> + <img src={GerenciandoConta} alt="Gerenciando a conta" /> + <span>{tabs[5]}</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> <TabStyled label={tabs[3]}></TabStyled> <TabStyled label={tabs[4]}></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> + </TabsStyled> + <br/> + <div className="voltarInicio"> + <a href="ajuda">VOLTAR AO ÃNICIO</a> + </div> + </Menu> - <Grid item xs={9}> - <Principal> - <div className="fixo"> - <img src={GerenciandoConta} alt="Gerenciando a conta" /> - <span>{tabs[5]}</span> - </div> {tabValue === 0 && <Why title={tabs[0]} />} {tabValue === 1 && <HowToDo title={tabs[1]} />} {tabValue === 2 && <HowToChange title={tabs[2]} />} @@ -108,69 +99,77 @@ export default function TabManageAc(props) { <div className="resultadosProcura"> <span>Não era bem o que você procurava?</span> <div className="subtitulo"> - <span> - Você pode navegar pelos tópicos de ajuda ou entrar em{" "} - <a href="contato">Contato</a>. - </span> + <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={{ marginBottom: "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}}> <CardParticipando /> </Grid> </Grid> - </Principal> - </Grid> - </Grid> </Secao> </div> ); } const StyledBreadCrumbs = styled(Breadcrumbs)` - display: flex; - justify-content: flex-start; - max-width: 1170px; + display : flex; + justify-content : flex-start; span { - color: #a5a5a5; + color : #a5a5a5; } a { color: #00bcd4; text-decoration: none; } -`; + +` const BreadCrumbsDiv = styled.div` - padding: 10px; - display: flex; -`; + + padding : 10px; + display : flex; +` + const Principal = styled.div` .fixo { + height: 40px; text-align: center; background-color: #fff; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); padding: 30px; margin-bottom: 30px; color: #666; + img { height: 50px; width: 50px; margin-right: 40px; vertical-align: middle; + } span { font-size: 20px; + vertical-align: ; } + + + } .resultadosProcura { text-align: center; @@ -184,46 +183,62 @@ const Principal = styled.div` margin-top: 10px; span { - font-size: 15px; + font-size: 15px } a { font-size: 15px; padding: 0; - color: #00bcd4; + color:#00bcd4; text-decoration: none; } + } } -`; + +` const TabsStyled = styled(Tabs)` + .Mui-selected { background-color: #e7e4e4; } - .MuiTab-root { + .MuiTab-root{ text-transform: none !important; + max-width:100% } -`; + text-align: center; + width:100% + +` const TabStyled = styled(Tab)` + padding: 4px 15px !important; font-weight: 500; font-size: 14px !important; border-radius: 4px !important; + text-align: center; + + + + &:hover { background-color: #e7e4e4; } -`; +` + const Menu = styled.div` width: auto; background-color: #fff; color: #666; padding-block: 10px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + 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; @@ -240,7 +255,7 @@ const Menu = styled.div` a { font-size: 15px; padding: 0; - color: #00bcd4; + color:#00bcd4; text-decoration: none; } } @@ -260,13 +275,15 @@ const Menu = styled.div` a { font-size: 15px; padding: 0; - color: #00bcd4; + color:#00bcd4; text-decoration: none; } + } -`; + +` const Secao = styled.div` - width: 1138px; margin-inline: auto; -`; + +`