From 5ae266d89593a1b053deb72ac855dd985febfedf Mon Sep 17 00:00:00 2001
From: Eric Amodio <eamodio@gmail.com>
Date: Mon, 5 Jun 2023 11:28:28 -0400
Subject: [PATCH] Fixes Welcome hover

---
 src/webviews/apps/welcome/welcome.html | 12 +++++------
 src/webviews/apps/welcome/welcome.scss | 37 +++++++++++++++++++++++++++++++---
 src/webviews/apps/welcome/welcome.ts   |  4 ++--
 3 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/src/webviews/apps/welcome/welcome.html b/src/webviews/apps/welcome/welcome.html
index fd99259..a19893e 100644
--- a/src/webviews/apps/welcome/welcome.html
+++ b/src/webviews/apps/welcome/welcome.html
@@ -63,30 +63,30 @@
 						class="hover welcome__illustration"
 						width="600"
 						height="177"
-						viewBox="0 0 80 177"
+						viewBox="30 0 80 177"
 						fill="none"
 						xmlns="http://www.w3.org/2000/svg"
 					>
-						<rect width="340" height="177" rx="3"></rect>
+						<rect width="370" height="177" rx="3"></rect>
 						<text x="9" y="41" text-anchor="start"><tspan class="codicon" font-size="32">&#xeb99;</tspan></text>
 						<text>
-							<tspan class="hover__author hover__link" x="47" y="30">You</tspan><tspan>, 6 years ago via PR&nbsp;</tspan><tspan class="hover__author hover__link">#1</tspan><tspan class="hover__date" dx="9">(November 12th, 2016 3:41pm)</tspan><tspan x="47" y="55">Supercharge Git</tspan>
+							<tspan class="hover__author hover__link" x="52" y="30">You</tspan><tspan>, 6 years ago via PR&nbsp;</tspan><tspan class="hover__author hover__link">#1</tspan><tspan class="hover__date" dx="12">(November 12th, 2016 3:41pm)</tspan><tspan x="52" y="55">Supercharge Git</tspan>
 						</text>
 
-						<line x1="0" y1="70" x2="341" y2="70" />
+						<line x1="0" y1="70" x2="371" y2="70" />
 
 						<text y="89">
 							<tspan x="9" dy="1.5" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">29ad3a0</tspan><tspan dx="9" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeafd;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xea82;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeb01;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xea7c;</tspan>
 						</text>
 
-						<line x1="0" y1="99" x2="341" y2="99" />
+						<line x1="0" y1="99" x2="371" y2="99" />
 
 						<text class="hover__diff">
 							<tspan class="hover__diff-removed" x="9" y="119">- return git;</tspan>
 							<tspan class="hover__diff-added" x="9" y="136">+ return supercharged(git);</tspan>
 						</text>
 
-						<line x1="0" y1="147" x2="341" y2="147" />
+						<line x1="0" y1="147" x2="371" y2="147" />
 
 						<text y="166">
 							<tspan x="9">Changes</tspan><tspan dx="12" dy="1.5" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">3ac1d3f</tspan><tspan dx="9" dy="1.5" class="codicon">&#xea99;</tspan><tspan dx="6" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">29ad3a0</tspan><tspan dx="9" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeafd;</tspan>
diff --git a/src/webviews/apps/welcome/welcome.scss b/src/webviews/apps/welcome/welcome.scss
index 2f6781a..6f96b59 100644
--- a/src/webviews/apps/welcome/welcome.scss
+++ b/src/webviews/apps/welcome/welcome.scss
@@ -684,15 +684,46 @@ gk-card p {
 	}
 }
 
+@keyframes fadeInHover {
+	0% {
+		opacity: 0;
+		visibility: visible;
+	}
+
+	100% {
+		opacity: 1;
+		visibility: visible;
+	}
+}
+
+@keyframes fadeOutHover {
+	0% {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	100% {
+		opacity: 0;
+		visibility: hidden;
+	}
+}
+
 .hover {
 	opacity: 0;
-	transition: opacity 200ms ease-in-out;
+	visibility: hidden;
 	position: absolute;
 	bottom: 30px;
 	right: -30px;
+	animation-duration: 0.2s;
+	animation-timing-function: ease-in-out;
+	animation-fill-mode: forwards;
 
-	&.hovering {
-		opacity: 1;
+	&[hovering='true'] {
+		animation-name: fadeInHover;
+	}
+
+	&[hovering='false'] {
+		animation-name: fadeOutHover;
 	}
 
 	&__box {
diff --git a/src/webviews/apps/welcome/welcome.ts b/src/webviews/apps/welcome/welcome.ts
index 904aecf..37fb00e 100644
--- a/src/webviews/apps/welcome/welcome.ts
+++ b/src/webviews/apps/welcome/welcome.ts
@@ -30,13 +30,13 @@ export class WelcomeApp extends App<State> {
 				const hoverTargetId = target.dataset.hover;
 				if (!hoverTargetId) return;
 
-				document.getElementById(hoverTargetId)?.classList.add('hovering');
+				document.getElementById(hoverTargetId)?.setAttribute('hovering', 'true');
 			}),
 			DOM.on('[data-hover]', 'mouseout', (e, target: HTMLElement) => {
 				const hoverTargetId = target.dataset.hover;
 				if (!hoverTargetId) return;
 
-				document.getElementById(hoverTargetId)?.classList.remove('hovering');
+				document.getElementById(hoverTargetId)?.setAttribute('hovering', 'false');
 			}),
 		];
 		return disposables;