From 137545c606a55d15ff0fd536fd9310413f0c1e0e Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Thu, 29 Aug 2024 23:49:28 +0530
Subject: [PATCH] fix: tooltips can show if one button is focused & another is
 hovered

---
 src/components/FlickerList.tsx | 19 +++++++++++++------
 src/index.css                  |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/FlickerList.tsx b/src/components/FlickerList.tsx
index bd85082..3ed94a1 100644
--- a/src/components/FlickerList.tsx
+++ b/src/components/FlickerList.tsx
@@ -42,14 +42,14 @@ const Flicker: React.FC<{
 			className={css`
 				position: relative;
 
-				& button:focus ~ .tooltip,
-				& button:hover ~ .tooltip {
+				&&& button:focus ~ .tooltip,
+				&&& button:hover ~ .tooltip {
 					opacity: 1;
 				}
 
-				& button:focus,
-				& button:hover {
-					opacity: 1 !important;
+				&&& button:focus,
+				&&& button:hover {
+					opacity: 1;
 				}
 			`}>
 			<button
@@ -138,7 +138,14 @@ const FlickerList: React.FC<{
 
 				&:has(> li button:focus) li button:not(:focus),
 				&:has(> li button:hover) li button:not(:hover) {
-					opacity: 0.5 !important;
+					opacity: 0.5;
+				}
+
+				/* any button that has a subsequent button focused, hide its tooltip */
+				&&&& li:has(~ li button:focus) .tooltip,
+				/* any button that has a previous button focused, hide its tooltip */
+				&&&& li:has(button:focus) ~ li .tooltip {
+					opacity: 0;
 				}
 			`}>
 			{[
diff --git a/src/index.css b/src/index.css
index cead6ab..3f16377 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,7 +4,7 @@
 	--card-tags: rgb(34, 34, 34);
 	--card-tags-hover: rgb(25, 25, 25);
 	--primary-colour: rgb(255, 85, 85);
-	--text-colour: rgb(211, 207, 201);
+	--text-colour: rgb(210, 210, 210);
 	--text-subdued: rgb(150, 150, 150);
 	--card-active: rgb(45, 45, 45);
 	--card-active-border: rgb(60, 60, 60);