From ffc0d37f6550e780db7a9d4ab3744414d15c3437 Mon Sep 17 00:00:00 2001
From: Jules-2MJ <146131402+2MJ-DEV@users.noreply.github.com>
Date: Mon, 17 Mar 2025 13:36:43 +0100
Subject: [PATCH 1/4] New update. - Edit profil info page. - Changed input
 borders.

---
 src/pages/edit-profil-info.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/pages/edit-profil-info.html b/src/pages/edit-profil-info.html
index 15b1d3f..b63bb96 100644
--- a/src/pages/edit-profil-info.html
+++ b/src/pages/edit-profil-info.html
@@ -284,7 +284,7 @@
                 <input
                   type="text"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="julesmukadi"
                 />
               </div>
@@ -296,7 +296,7 @@
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:border-white/5 dark:border-gray-600"
                 >
                   <svg
                     class="w-4 h-4 text-gray-500 dark:text-gray-400"
@@ -313,7 +313,7 @@
                 <input
                   type="text"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="Jules MUKADI"
                 />
               </div>
@@ -332,7 +332,7 @@
                 <input
                   type="text"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="Front-end Developer"
                 />
               </div>
@@ -351,7 +351,7 @@
                 <input
                   type="email"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="infinitytech@exemple.com"
                 />
               </div>
@@ -378,7 +378,7 @@ <h1 class="mb-3">Social profiles</h1>
                 <input
                   type="text"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="https://www.linkedin.com/in/username/"
                 />
               </div>
@@ -390,14 +390,14 @@ <h1 class="mb-3">Social profiles</h1>
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-white/5"
                 >
                   <ion-icon name="logo-github" class="size-4"></ion-icon>
                 </span>
                 <input
                   type="text"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="https://github.com/username/"
                 />
               </div>
@@ -419,14 +419,14 @@ <h1 class="mb-3">Social profiles</h1>
                 <input
                   type="text"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="https://infinitytech.com"
                 />
               </div>
             </div>
             <button
               type="button"
-              class="text-white flex justify-center items-center gap-2 mt-12 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+              class="text-white flex justify-center items-center gap-2 mt-12 bg-blue-700 hover:bg-blue-800 focus:ring-0 focus:ring-zinc-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
             >
               Update
               <svg

From d2e5cdfa417997a303f91b080e8bc72fdbea08d4 Mon Sep 17 00:00:00 2001
From: Jules-2MJ <146131402+2MJ-DEV@users.noreply.github.com>
Date: Mon, 17 Mar 2025 14:14:26 +0100
Subject: [PATCH 2/4] New update. - Changed input borders. - Added a new avatar
 to indicate that the image should be inserted here! - Changed the background
 color of icons on inputs. - Changed the background color of the input fields.
 - Changed the background color of the input fields when they are focused.

---
 src/assets/avatar-profile.svg   |  7 +++++++
 src/pages/edit-profil-info.html | 20 ++++++++++----------
 2 files changed, 17 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/avatar-profile.svg

diff --git a/src/assets/avatar-profile.svg b/src/assets/avatar-profile.svg
new file mode 100644
index 0000000..9b70cda
--- /dev/null
+++ b/src/assets/avatar-profile.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#3f3f46" width="198px" height="198px" viewBox="-4.44 -4.44 40.61 40.61" xmlns="http://www.w3.org/2000/svg" stroke="#3f3f46" stroke-width="0.00031726000000000004">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g transform="translate(-418.388 -194.16)"> <path d="M434.032,213.971a21.533,21.533,0,0,1,13.327,4.569,1.862,1.862,0,0,1,.755,1.463v1.975H420.388v-2.3a1.862,1.862,0,0,1,.773-1.478,21.492,21.492,0,0,1,12.871-4.232m0-2a23.546,23.546,0,0,0-14.06,4.624,3.848,3.848,0,0,0-1.584,3.086v2.674a1.623,1.623,0,0,0,1.623,1.623h28.48a1.623,1.623,0,0,0,1.623-1.623V220a3.867,3.867,0,0,0-1.528-3.043,23.647,23.647,0,0,0-14.554-4.989Z"/> <path d="M434.042,196.16a7.856,7.856,0,1,1-7.856,7.856,7.865,7.865,0,0,1,7.856-7.856m0-2a9.856,9.856,0,1,0,9.856,9.856,9.856,9.856,0,0,0-9.856-9.856Z"/> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/pages/edit-profil-info.html b/src/pages/edit-profil-info.html
index b63bb96..4da7194 100644
--- a/src/pages/edit-profil-info.html
+++ b/src/pages/edit-profil-info.html
@@ -215,10 +215,10 @@
           <div
             class="flex flex-col md:flex-row md:items-center mt-4 mb-4 gap-9"
           >
-            <img
+              <img
               id="previewImage"
-              class="w-36 h-36 rounded-full object-cover border border-gray-300 bg-zinc-100 dark:bg-zinc-800 mt-4"
-              src=""
+              class="w-36 h-36 rounded-full object-cover border border-zinc-500 bg-zinc-100 dark:bg-zinc-800 mt-4"
+              src="../assets/avatar-profile.svg"
               alt=""
             />
             <div class="flex flex-col justify-center items-start">
@@ -264,7 +264,7 @@
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-zinc-800 dark:border-white/5 dark:text-gray-400"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -296,7 +296,7 @@
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:border-white/5 dark:border-gray-600"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-zinc-800 dark:border-white/5"
                 >
                   <svg
                     class="w-4 h-4 text-gray-500 dark:text-gray-400"
@@ -325,7 +325,7 @@
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-zinc-800 dark:border-white/5 dark:text-gray-400"
                 >
                   <ion-icon name="file-tray-stacked-outline"></ion-icon>
                 </span>
@@ -344,7 +344,7 @@
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
                 >
                   <ion-icon name="mail-outline" class="size-4"></ion-icon>
                 </span>
@@ -371,7 +371,7 @@ <h1 class="mb-3">Social profiles</h1>
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
                 >
                   <ion-icon name="logo-linkedin" class="size-4"></ion-icon>
                 </span>
@@ -390,7 +390,7 @@ <h1 class="mb-3">Social profiles</h1>
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-white/5"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
                 >
                   <ion-icon name="logo-github" class="size-4"></ion-icon>
                 </span>
@@ -409,7 +409,7 @@ <h1 class="mb-3">Social profiles</h1>
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-zinc-500 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
                 >
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
   <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />

From eb62de06dede29bf1df315b7060c7686f406c6f8 Mon Sep 17 00:00:00 2001
From: Jules-2MJ <146131402+2MJ-DEV@users.noreply.github.com>
Date: Mon, 17 Mar 2025 14:39:40 +0100
Subject: [PATCH 3/4] New commit - Modified input borders and span backgrounds
 to match page colors. - Added two images and a script to adapt to changes in
 dark or light mode.

---
 src/assets/avatar-dark.svg      |  7 +++++++
 src/assets/avatar-light.svg     |  7 +++++++
 src/assets/avatar-profile.svg   |  7 -------
 src/main.js                     | 19 +++++++++++++++++++
 src/pages/edit-profil-info.html | 24 ++++++++++++------------
 5 files changed, 45 insertions(+), 19 deletions(-)
 create mode 100644 src/assets/avatar-dark.svg
 create mode 100644 src/assets/avatar-light.svg
 delete mode 100644 src/assets/avatar-profile.svg

diff --git a/src/assets/avatar-dark.svg b/src/assets/avatar-dark.svg
new file mode 100644
index 0000000..aace7fc
--- /dev/null
+++ b/src/assets/avatar-dark.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="256px" height="256px" viewBox="0 0 9.81 9.81" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" fill="#d4d4d8">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <defs> <style type="text/css">  .fil0 {fill:none} .fil2 {fill:#3f3f46;fill-rule:nonzero} .fil1 {fill:#3f3f46;fill-rule:nonzero}  </style> </defs> <g id="Layer_x0020_1"> <rect class="fil0" height="9.81" width="9.81"/> <path class="fil1" d="M4.91 4.92c-0.27,0 -0.51,-0.11 -0.68,-0.28l0 0c-0.18,-0.18 -0.29,-0.42 -0.29,-0.68 0,-0.27 0.11,-0.51 0.29,-0.68l0 0c0.17,-0.18 0.41,-0.29 0.68,-0.29 0.26,0 0.5,0.11 0.68,0.29l0 0c0.17,0.17 0.28,0.41 0.28,0.68 0,0.26 -0.11,0.5 -0.28,0.68l0 0c-0.18,0.17 -0.42,0.28 -0.68,0.28zm-0.46 -0.51c0.12,0.12 0.28,0.19 0.46,0.19 0.17,0 0.34,-0.07 0.45,-0.19 0.12,-0.11 0.19,-0.27 0.19,-0.45 0,-0.18 -0.07,-0.34 -0.19,-0.46 -0.11,-0.12 -0.28,-0.19 -0.45,-0.19 -0.18,0 -0.34,0.07 -0.46,0.19 -0.12,0.12 -0.19,0.28 -0.19,0.46 0,0.18 0.07,0.34 0.19,0.45z"/> <path class="fil2" d="M4.91 6.82l-1.61 0c-0.09,0 -0.16,-0.07 -0.16,-0.16l0 -0.55c0,-0.44 0.47,-0.71 1.08,-0.82 0.22,-0.04 0.45,-0.06 0.69,-0.06 0.23,0 0.46,0.02 0.68,0.06 0.61,0.11 1.08,0.38 1.08,0.82l0 0.55c0,0.09 -0.07,0.16 -0.15,0.16l-1.61 0zm-1.45 -0.32l2.9 0 0 -0.39c0,-0.25 -0.36,-0.43 -0.82,-0.51 -0.2,-0.04 -0.42,-0.05 -0.63,-0.05 -0.22,0 -0.44,0.01 -0.63,0.05 -0.46,0.08 -0.82,0.26 -0.82,0.51l0 0.39z"/> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/assets/avatar-light.svg b/src/assets/avatar-light.svg
new file mode 100644
index 0000000..347edd6
--- /dev/null
+++ b/src/assets/avatar-light.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="256px" height="256px" viewBox="0 0 9.81 9.81" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" fill="#d4d4d8">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <defs> <style type="text/css">  .fil0 {fill:none} .fil2 {fill:#d4d4d8;fill-rule:nonzero} .fil1 {fill:#d4d4d8;fill-rule:nonzero}  </style> </defs> <g id="Layer_x0020_1"> <rect class="fil0" height="9.81" width="9.81"/> <path class="fil1" d="M4.91 4.92c-0.27,0 -0.51,-0.11 -0.68,-0.28l0 0c-0.18,-0.18 -0.29,-0.42 -0.29,-0.68 0,-0.27 0.11,-0.51 0.29,-0.68l0 0c0.17,-0.18 0.41,-0.29 0.68,-0.29 0.26,0 0.5,0.11 0.68,0.29l0 0c0.17,0.17 0.28,0.41 0.28,0.68 0,0.26 -0.11,0.5 -0.28,0.68l0 0c-0.18,0.17 -0.42,0.28 -0.68,0.28zm-0.46 -0.51c0.12,0.12 0.28,0.19 0.46,0.19 0.17,0 0.34,-0.07 0.45,-0.19 0.12,-0.11 0.19,-0.27 0.19,-0.45 0,-0.18 -0.07,-0.34 -0.19,-0.46 -0.11,-0.12 -0.28,-0.19 -0.45,-0.19 -0.18,0 -0.34,0.07 -0.46,0.19 -0.12,0.12 -0.19,0.28 -0.19,0.46 0,0.18 0.07,0.34 0.19,0.45z"/> <path class="fil2" d="M4.91 6.82l-1.61 0c-0.09,0 -0.16,-0.07 -0.16,-0.16l0 -0.55c0,-0.44 0.47,-0.71 1.08,-0.82 0.22,-0.04 0.45,-0.06 0.69,-0.06 0.23,0 0.46,0.02 0.68,0.06 0.61,0.11 1.08,0.38 1.08,0.82l0 0.55c0,0.09 -0.07,0.16 -0.15,0.16l-1.61 0zm-1.45 -0.32l2.9 0 0 -0.39c0,-0.25 -0.36,-0.43 -0.82,-0.51 -0.2,-0.04 -0.42,-0.05 -0.63,-0.05 -0.22,0 -0.44,0.01 -0.63,0.05 -0.46,0.08 -0.82,0.26 -0.82,0.51l0 0.39z"/> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/assets/avatar-profile.svg b/src/assets/avatar-profile.svg
deleted file mode 100644
index 9b70cda..0000000
--- a/src/assets/avatar-profile.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg fill="#3f3f46" width="198px" height="198px" viewBox="-4.44 -4.44 40.61 40.61" xmlns="http://www.w3.org/2000/svg" stroke="#3f3f46" stroke-width="0.00031726000000000004">
-
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
-
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-
<g id="SVGRepo_iconCarrier"> <g transform="translate(-418.388 -194.16)"> <path d="M434.032,213.971a21.533,21.533,0,0,1,13.327,4.569,1.862,1.862,0,0,1,.755,1.463v1.975H420.388v-2.3a1.862,1.862,0,0,1,.773-1.478,21.492,21.492,0,0,1,12.871-4.232m0-2a23.546,23.546,0,0,0-14.06,4.624,3.848,3.848,0,0,0-1.584,3.086v2.674a1.623,1.623,0,0,0,1.623,1.623h28.48a1.623,1.623,0,0,0,1.623-1.623V220a3.867,3.867,0,0,0-1.528-3.043,23.647,23.647,0,0,0-14.554-4.989Z"/> <path d="M434.042,196.16a7.856,7.856,0,1,1-7.856,7.856,7.865,7.865,0,0,1,7.856-7.856m0-2a9.856,9.856,0,1,0,9.856,9.856,9.856,9.856,0,0,0-9.856-9.856Z"/> </g> </g>
-
</svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index ffb7d9e..a183bca 100644
--- a/src/main.js
+++ b/src/main.js
@@ -207,3 +207,22 @@ document.getElementById("profileImage").addEventListener("change", function(even
         reader.readAsDataURL(file);
     }
 });
+
+// Pour l'adaptation de l'avatar dans edit-profil-info.html au darck mode
+function updateImage() {
+        const img = document.getElementById("previewImage");
+        if (document.documentElement.classList.contains("dark")) {
+			// Image pour le mode sombre
+            img.src = "../assets/avatar-dark.svg"; 
+        } else {
+			 // Image pour le mode clair
+            img.src = "../assets/avatar-light.svg";
+        }
+    }
+
+    // Vérifier et mettre à jour au chargement de la page
+    updateImage();
+
+    // Détecter le changement de mode sombre
+    const observer = new MutationObserver(updateImage);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
\ No newline at end of file
diff --git a/src/pages/edit-profil-info.html b/src/pages/edit-profil-info.html
index 4da7194..3ecbc66 100644
--- a/src/pages/edit-profil-info.html
+++ b/src/pages/edit-profil-info.html
@@ -217,8 +217,8 @@
           >
               <img
               id="previewImage"
-              class="w-36 h-36 rounded-full object-cover border border-zinc-500 bg-zinc-100 dark:bg-zinc-800 mt-4"
-              src="../assets/avatar-profile.svg"
+              class="w-36 h-36 rounded-full object-cover border border-zinc-300 bg-zinc-100 dark:bg-zinc-800 mt-4"
+              src=""
               alt=""
             />
             <div class="flex flex-col justify-center items-start">
@@ -264,7 +264,7 @@
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-zinc-800 dark:border-white/5 dark:text-gray-400"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-zinc-100 border-e-0 rounded-s-md dark:bg-zinc-800 dark:border-white/5 dark:text-gray-400"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -296,7 +296,7 @@
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-zinc-800 dark:border-white/5"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-zinc-100 border-e-0 rounded-s-md dark:bg-zinc-800 dark:border-white/5"
                 >
                   <svg
                     class="w-4 h-4 text-gray-500 dark:text-gray-400"
@@ -325,7 +325,7 @@
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-zinc-800 dark:border-white/5 dark:text-gray-400"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-zinc-100 border-e-0 rounded-s-md dark:bg-zinc-800 dark:border-white/5 dark:text-gray-400"
                 >
                   <ion-icon name="file-tray-stacked-outline"></ion-icon>
                 </span>
@@ -344,7 +344,7 @@
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-zinc-100 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
                 >
                   <ion-icon name="mail-outline" class="size-4"></ion-icon>
                 </span>
@@ -371,14 +371,14 @@ <h1 class="mb-3">Social profiles</h1>
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-zinc-100 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
                 >
                   <ion-icon name="logo-linkedin" class="size-4"></ion-icon>
                 </span>
                 <input
                   type="text"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-zinc-100 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="https://www.linkedin.com/in/username/"
                 />
               </div>
@@ -390,14 +390,14 @@ <h1 class="mb-3">Social profiles</h1>
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 border-zinc-100 bg-gray-200 border rounded-e-0 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
                 >
                   <ion-icon name="logo-github" class="size-4"></ion-icon>
                 </span>
                 <input
                   type="text"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-zinc-100 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="https://github.com/username/"
                 />
               </div>
@@ -409,7 +409,7 @@ <h1 class="mb-3">Social profiles</h1>
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-zinc-500 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-zinc-100 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
                 >
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
   <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
@@ -419,7 +419,7 @@ <h1 class="mb-3">Social profiles</h1>
                 <input
                   type="text"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-zinc-100 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="https://infinitytech.com"
                 />
               </div>

From 20c88a9966cbc238e1aa215d785c75107d07e30c Mon Sep 17 00:00:00 2001
From: Jules-2MJ <146131402+2MJ-DEV@users.noreply.github.com>
Date: Mon, 17 Mar 2025 14:49:26 +0100
Subject: [PATCH 4/4] Linking the profile page to edit-profile

---
 src/pages/profil-info.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/profil-info.html b/src/pages/profil-info.html
index d6fb111..cdca22c 100644
--- a/src/pages/profil-info.html
+++ b/src/pages/profil-info.html
@@ -243,7 +243,7 @@ <h1 class="text-2xl text-black dark:text-white font-bold p-0">
               <div class="flex items-center gap-2">
                 <!-- Bouton Edit -->
                 <a
-                  href="#"
+                  href="edit-profil-info.html"
                   class="bg-blue-700 hover:bg-blue-500 duration-300 text-white px-4 py-2 rounded-full flex items-center gap-2 text-sm font-medium"
                 >
                   <ion-icon name="pencil-outline" class="text-base"></ion-icon>