From 5a891c085d8b9fdf42db2a94fe3c43357e676000 Mon Sep 17 00:00:00 2001
From: Jottyfan <jottyfan@mail.de>
Date: Thu, 27 Mar 2025 22:29:39 +0100
Subject: [PATCH] login icon hover effect

---
 src/main/resources/static/css/style.css       | 13 ++++++
 .../static/images/Icon_Profil_hover.svg       | 42 +++++++++++++++++++
 src/main/resources/templates/template.html    |  2 +-
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 src/main/resources/static/images/Icon_Profil_hover.svg

diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index 751f23e..18c291d 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -63,6 +63,19 @@ body {
 	background-image: url('../images/logo_hover.png');
 }
 
+.icon_profile {
+	width: 32px;
+	height: 32px;
+	background-size: 32px;
+	background-repeat: no-repeat;
+	background-image: url('../images/Icon_Profil.svg');
+	display: inline-block;
+}
+
+.icon_profile:hover {
+	background-image: url('../images/Icon_Profil_hover.svg');
+}
+
 a {
 	font-family: 'Fira Sans';
 }
diff --git a/src/main/resources/static/images/Icon_Profil_hover.svg b/src/main/resources/static/images/Icon_Profil_hover.svg
new file mode 100644
index 0000000..0fe003a
--- /dev/null
+++ b/src/main/resources/static/images/Icon_Profil_hover.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 71.44 71.44">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: .5px;
+      }
+
+      .cls-1, .cls-2 {
+        stroke: #008b8b;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        fill: none;
+      }
+
+      .cls-4 {
+        clip-path: url(#clippath);
+      }
+
+      .cls-2 {
+        stroke-miterlimit: 10;
+      }
+    </style>
+    <clipPath id="clippath">
+      <circle class="cls-3" cx="35.72" cy="35.72" r="35.22"/>
+    </clipPath>
+  </defs>
+  <g id="Ebene_1-2" data-name="Ebene 1">
+    <circle class="cls-2" cx="35.72" cy="35.72" r="35.22"/>
+    <g class="cls-4">
+      <g>
+        <path class="cls-1" d="m26.52,40.74c.1.18,2.36-1.36,2.36-1.36.7,1.22-8.38,7.81-7.67,9.05,1.64,2.84,16.71-10.45,17.06-9.85,0,0-19.7,11.6-17.8,14.89,1.1,1.91,23.09-13.33,23.09-13.33.64,1.11-24.96,17.34-24.23,18.61l27.74-16.02c1.97,3.41-28.1,17.71-26.74,20.06,1.11,1.92,28.55-18.65,29.48-17.02l-29.78,21.81,31.45-18.16c1.78,3.08-31.55,21.22-30.85,22.43.13.22,31.02-17.91,31.02-17.91,2.48,4.3-28.57,20.86-28.46,21.05l27.99-16.16c1.06,1.84-18.76,15.45-18.76,15.45.49.85,18.85-10.88,18.85-10.88l-10.45,10.65s9.95-7.97,10.91-6.3c.39.68-4.82,5.99-4.21,7.05.28.48,3.6-2.08,3.6-2.08"/>
+        <path class="cls-1" d="m27.35,10.64c.22.37,2.8-2.3,3.09-1.79l-9.63,10.18c.69,1.2,18.44-11.86,18.96-10.95,0,0-19,13.93-18.28,15.17.99,1.71,20.42-16.02,22.25-12.85,1.25,2.16-24.58,13.41-22.24,17.46,2.06,3.57,26.29-15.18,26.29-15.18,2.08,3.6-27.69,14.43-25.02,19.06l25.92-14.96s-23.11,17.33-22.84,17.8c2.55,4.41,24.69-14.25,24.69-14.25,0,0-19.83,14.92-19.34,15.78.46.79,18.25-14.34,19.9-11.49,0,0-15.86,10.69-14.52,13l11.54-6.66"/>
+        <path class="cls-2" d="m35.72,37.67h0c8.62,0,15.61,6.99,15.61,15.61v21.27h-31.22v-21.27c0-8.62,6.99-15.61,15.61-15.61Z"/>
+        <circle class="cls-2" cx="35.72" cy="22.8" r="14.87"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/main/resources/templates/template.html b/src/main/resources/templates/template.html
index 74ba9be..e738c4d 100644
--- a/src/main/resources/templates/template.html
+++ b/src/main/resources/templates/template.html
@@ -126,7 +126,7 @@
 				<li class="nav-item">
 					<div class="dropdown">
 						<button class="btn btn-hoverborder navbar-collapse" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-							<img th:src="@{/images/Icon_Profil.svg}" width="24px" height="24px" />
+							<span class="icon_profile"></span>
 						</button>
 						<ul class="dropdown-menu dropdown-menu-end" th:if="${#strings.isEmpty(currentUser)}">
 							<li><a class="dropdown-item" th:href="@{/dashboard}">einloggen</a></li>