From cabbda37f21f93b8a39520dec04091cd8df3b696 Mon Sep 17 00:00:00 2001
From: dertyp7 <dertyp7@tealfire.de>
Date: Sat, 13 Jan 2024 18:26:16 +0100
Subject: [PATCH] Update ScrollToTop component and styles

---
 src/components/ScrollToTop.tsx |  4 ++--
 src/styles/ScrollToTop.scss    | 31 +++++++++++++++++++++++++++----
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
index 47e3c52..6fe54d7 100644
--- a/src/components/ScrollToTop.tsx
+++ b/src/components/ScrollToTop.tsx
@@ -38,8 +38,8 @@ export default function ScrollToTop() {
 				<svg
 					className={`arrow ${isScrolledUp ? "up" : "down"}`}
 					xmlns="http://www.w3.org/2000/svg"
-					width="24"
-					height="24"
+					width="32"
+					height="32"
 					viewBox="0 0 24 24"
 					fill="none"
 					stroke="currentColor"
diff --git a/src/styles/ScrollToTop.scss b/src/styles/ScrollToTop.scss
index a2436e3..f99d9f4 100644
--- a/src/styles/ScrollToTop.scss
+++ b/src/styles/ScrollToTop.scss
@@ -1,4 +1,3 @@
-// src/styles/ScrollToTop.scss
 .scrollToTop {
 	position: fixed;
 	bottom: 20px;
@@ -6,23 +5,35 @@
 	cursor: pointer;
 
 	.arrow {
-		transition: transform 200ms ease-in-out;
+		transition: transform 300ms ease-in-out;
 
 		&.up {
 			transform: rotate(0deg);
+
+			&:hover {
+				animation: pulseUp 1s infinite;
+			}
 		}
 
 		&.down {
 			transform: rotate(-180deg);
+			width: 50px;
+			height: 50px;
+			position: fixed;
+			bottom: 15px;
+			right: 50%;
+
+			&:hover {
+				animation: pulseDown 1s infinite;
+			}
 		}
 	}
 
 	&:hover {
-		animation: pulse 1s infinite;
 		color: var(--color-accent);
 	}
 
-	@keyframes pulse {
+	@keyframes pulseUp {
 		0% {
 			transform: scale(1);
 		}
@@ -33,4 +44,16 @@
 			transform: scale(1);
 		}
 	}
+
+	@keyframes pulseDown {
+		0% {
+			transform: scale(1) rotate(-180deg);
+		}
+		50% {
+			transform: scale(1.4) rotate(-180deg);
+		}
+		100% {
+			transform: scale(1) rotate(-180deg);
+		}
+	}
 }