anacarolinaduartecavalcante/desafio-react-e-typescript-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(header): trocando nome do className dos buttons e adicionando aria-label neles

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-01 09:14:19 -03:00
parent 365364fd16
commit e46e5fa592
3 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Header/Header.scss
View File

@ -40,7 +40,7 @@ header {
@media (max-width: 376px) {
width: 91.484%;
}
.Icon__Content {
.Header__Button {
background: transparent;
border: 0;
padding: 0;
@ -216,7 +216,7 @@ header {
left: 16px;
}
}
.closed {
.Closed {
width: 15px;
height: 15px;
@media (max-width: 1025px) {

3
src/components/Header/Header.tsx
View File

@ -6,13 +6,12 @@ import Icon__Menu from "../../assets/imgs/IconMenu.svg";
const Header = () => {
const [menuIsVisible, setMenuIsVisible]= useState(false);
return (
<header>
<ul className="Header__Top">
<button className="Icon__Content" onClick={() => setMenuIsVisible(true)}>
<button className="Header__Button" onClick={() => setMenuIsVisible(true)} aria-label="abrir menu">
<img src={Icon__Menu} alt="ícone de menu" className="Icon__Menu" />
</button>
<HeaderContentTop menuIsVisible={menuIsVisible} setMenuIsVisible={setMenuIsVisible}/>

6
src/components/Header/HeaderContentTop.tsx
View File

@ -32,9 +32,9 @@ const HeaderContentTop = ({menuIsVisible,setMenuIsVisible}: HeaderContentProps)
<ul className="Menu__Header__Top">
<li className={`List__Login ${menuIsVisible && 'opened'}`} onClick={() => setMenuIsVisible(false)}>
<a href="/">Entrar</a>
<button className="Icon__Content closed" onClick={() => setMenuIsVisible(false)}>
<img src={Icon__Menu__Closed} alt="ícone do menu pra fechar" className="Icon__Menu__Closed"/>
</button>
<button className="Header__Button Closed" onClick={() => setMenuIsVisible(false)} aria-label="fechar menu">
<img src={Icon__Menu__Closed} alt="ícone do menu pra fechar" className="Icon__Menu__Closed"/>
</button>
</li>
<li className="List__Cart">
<a href="/" className="cart__content--link">