From b4074f5880380f0e162cb7872ab130b24711d2a3 Mon Sep 17 00:00:00 2001
From: Giovanni-Josserand <josserand.giovanni@gmail.com>
Date: Mon, 27 Oct 2025 11:13:37 +0100
Subject: [PATCH] add of hover style

---
 src/assets/accountCircle.svg            |  1 -
 src/assets/person.svg                   |  1 +
 src/components/Header/Header.jsx        |  6 +--
 src/components/Header/Header.module.css | 53 ++++++++++++++++---------
 4 files changed, 38 insertions(+), 23 deletions(-)
 delete mode 100644 src/assets/accountCircle.svg
 create mode 100644 src/assets/person.svg

diff --git a/src/assets/accountCircle.svg b/src/assets/accountCircle.svg
deleted file mode 100644
index 51554a2..0000000
--- a/src/assets/accountCircle.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="grey" d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/person.svg b/src/assets/person.svg
new file mode 100644
index 0000000..22c4d5d
--- /dev/null
+++ b/src/assets/person.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><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.93H180Zm60-60h480v-28.93q0-12.15-7.04-22.5-7.04-10.34-19.11-16.88-51.7-25.46-105.42-38.58Q534.7-367.69 480-367.69q-54.7 0-108.43 13.11-53.72 13.12-105.42 38.58-12.07 6.54-19.11 16.88-7.04 10.35-7.04 22.5v28.93Zm240-304.62q33 0 56.5-23.5t23.5-56.5q0-33-23.5-56.5t-56.5-23.5q-33 0-56.5 23.5t-23.5 56.5q0 33 23.5 56.5t56.5 23.5Zm0-80Zm0 384.62Z"/></svg>
\ No newline at end of file
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index bef4d48..e3e5bac 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -33,7 +33,7 @@ function Header(){
             <header className={`${styles.header} ${"glassCard"}`} >
                 <nav className={styles.headerContent}>
                     <div className={styles.headerLeftContent}>
-                        <NavLink className={styles.link} to="/">
+                        <NavLink className={styles.logoLink} to="/">
                             <img src="/src/assets/logo.png" alt="logo" className={styles.logo}/>
                         </NavLink>
                         <NavLink to="/" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
@@ -56,8 +56,8 @@ function Header(){
                             {unreadNotification ? <span className={styles.notificationBadge}></span> : null}
                         </button>
                         <Link to="" className={styles.profileLink}>
-                            <svg xmlns="http://www.w3.org/2000/svg" height="70" viewBox="0 -960 960 960" width="auto">
-                                <path fill="#000000" d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/>
+                            <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.93H180Zm60-60h480v-28.93q0-12.15-7.04-22.5-7.04-10.34-19.11-16.88-51.7-25.46-105.42-38.58Q534.7-367.69 480-367.69q-54.7 0-108.43 13.11-53.72 13.12-105.42 38.58-12.07 6.54-19.11 16.88-7.04 10.35-7.04 22.5v28.93Zm240-304.62q33 0 56.5-23.5t23.5-56.5q0-33-23.5-56.5t-56.5-23.5q-33 0-56.5 23.5t-23.5 56.5q0 33 23.5 56.5t56.5 23.5Zm0-80Zm0 384.62Z"/>
                             </svg>
                         </Link>
                     </div>
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
index 90875c4..11c550c 100644
--- a/src/components/Header/Header.module.css
+++ b/src/components/Header/Header.module.css
@@ -40,15 +40,21 @@
     width: auto;
 }
 
+.logoLink{
+    width: fit-content;
+}
+
 .link {
-    color: black;
+    color: #000000;
     width: fit-content;
     text-align: center;
     font-weight: bold;
+    border-bottom: 2px solid transparent;
 }
 
-.link:hover {
-    color: #535bf2;
+.link:hover{
+    border-bottom: 2px solid #019AFF;
+
 }
 
 .activeLink {
@@ -56,6 +62,7 @@
     text-align: center;
     font-weight: bold;
     color: #019AFF;
+    border-bottom: 2px solid #019AFF;
 }
 
 
@@ -69,7 +76,7 @@ svg {
 
 
 
-.bellBtn {
+.bellBtn, .profileLink {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -79,15 +86,16 @@ svg {
     background: none;
     padding: 7px;
     border-radius: 50%;
-    width: 75px;
-    height: 50px;
+    width: 55px;
+    height: 55px;
     position: relative;
-    svg {
-        stroke: black;
-        stroke-width: 3.5;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-    }
+}
+
+.bellBtn svg {
+    stroke: black;
+    stroke-width: 3.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
 }
 
 .bellBtn:focus {
@@ -116,15 +124,22 @@ svg {
 
 
 
-.profileLink {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: transform 0.5s ease;
-}
-
 .profileLink:hover {
     transform: translateY(-4px);
+    background: rgba(191, 191, 191, 0.5);
+    svg {
+        fill: #019AFF;
+    }
+}
+
+
+
+.bellBtn svg {
+    height: 28px;
+}
+
+.profileLink svg {
+    height: 40px;
 }