Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change header svg by img tag

Browse Source
This commit is contained in:
Giovanni
2025-12-10 14:57:27 +01:00
parent 3e3b0963be
commit 588c28d29a
3 changed files with 8 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/bell.svg
+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="60px" height="60px" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.325 52.5C33.8855 53.2577 33.2546 53.8866 32.4956 54.3238C31.7365 54.761 30.8759 54.9911 30 54.9911C29.1241 54.9911 28.2635 54.761 27.5044 54.3238C26.7454 53.8866 26.1145 53.2577 25.675 52.5M45 20C45 16.0218 43.4196 12.2064 40.6066 9.3934C37.7936 6.58035 33.9782 5 30 5C26.0218 5 22.2064 6.58035 19.3934 9.3934C16.5804 12.2064 15 16.0218 15 20C15 37.5 7.5 42.5 7.5 42.5H52.5C52.5 42.5 45 37.5 45 20Z" stroke="#1E1E1E" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 605 B

After

Width:  |  Height:  |  Size: 578 B

src/components/Header/Header.jsx
+2 -6
View File
@@ -64,16 +64,12 @@ function Header() {
setunreadNotification(false);
}}
>
<svg width="auto" height="30" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.325 52.5C33.8855 53.2577 33.2546 53.8866 32.4956 54.3238C31.7365 54.761 30.8759 54.9911 30 54.9911C29.1241 54.9911 28.2635 54.761 27.5044 54.3238C26.7454 53.8866 26.1145 53.2577 25.675 52.5M45 20C45 16.0218 43.4196 12.2064 40.6066 9.3934C37.7936 6.58035 33.9782 5 30 5C26.0218 5 22.2064 6.58035 19.3934 9.3934C16.5804 12.2064 15 16.0218 15 20C15 37.5 7.5 42.5 7.5 42.5H52.5C52.5 42.5 45 37.5 45 20Z" stroke="currentStroke" />
</svg>
<img className={styles.notificationsImg} src="bell.svg" alt="notifications"/>
{unreadNotification && <span className={styles.notificationBadge}></span>}
</button>
<Link to="/profile" className={styles.profileLink}>
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="auto" fill="currentFill">
<path d="M480-492.31q-57.75 0-98.87-41.12Q340-574.56 340-632.31q0-57.75 41.13-98.87 41.12-41.13 98.87-41.13 57.75 0 98.87 41.13Q620-690.06 620-632.31q0 57.75-41.13 98.88-41.12 41.12-98.87 41.12ZM180-187.69v-88.93q0-29.38 15.96-54.42 15.96-25.04 42.66-38.5 59.3-29.07 119.65-43.61 60.35-14.54 121.73-14.54t121.73 14.54q60.35 14.54 119.65 43.61 26.7 13.46 42.66 38.5Q780-306 780-276.62v88.93H180Z" />
</svg>
<img className={styles.profileImg} src="person.svg" alt="profile"/>
</Link>
</div>
</nav>
src/components/Header/Header.module.css
+5 -19
View File
@@ -105,10 +105,6 @@
border-bottom: 2px solid #019AFF;
}
svg {
width: fit-content;
}
.bellBtn, .profileLink {
display: flex;
align-items: center;
@@ -124,11 +120,12 @@ svg {
position: relative;
}
.bellBtn svg {
.notificationsImg {
stroke: black;
stroke-width: 3.5;
stroke-linecap: round;
stroke-linejoin: round;
height: 28px;
}
.bellBtn:focus {
@@ -141,33 +138,22 @@ svg {
.activeBellBtn {
transform: translateY(-4px);
background: rgba(191, 191, 191, 0.5);
svg {
stroke: #019AFF;
}
}
.bellBtn:hover {
transform: translateY(-4px);
background: rgba(191, 191, 191, 0.5);
svg {
stroke: #019AFF;
}
}
.profileLink:hover {
transform: translateY(-4px);
background: rgba(191, 191, 191, 0.5);
svg {
fill: #019AFF;
}
}
.bellBtn svg {
height: 28px;
}
.profileLink svg {
.profileImg {
height: 40px;
}
@@ -188,7 +174,6 @@ svg {
z-index: 3;
}
.notification{
margin-bottom: 7%;
display: flex;
@@ -233,6 +218,7 @@ svg {
cursor: pointer;
display: none;
z-index: 10;
background: none;
}
.burgerBar {