From 62fdbf1fc147a504387d2e7183ec79e3993ea07a Mon Sep 17 00:00:00 2001
From: Timothy Pidashev <pidashev.tim@gmail.com>
Date: Mon, 18 Mar 2024 22:12:39 -0700
Subject: [PATCH] Change header flair to underline from bubble

---
 src/web/src/components/header.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/web/src/components/header.jsx b/src/web/src/components/header.jsx
index 07d9c01..74148b5 100644
--- a/src/web/src/components/header.jsx
+++ b/src/web/src/components/header.jsx
@@ -43,16 +43,16 @@ function Header() {
               onClick={() => setActiveTab(tab.id)}
               className={`${
                 activeTab === tab.id ? "" : "hover:text-white/60"
-              } relative rounded-full px-3 py-1.5 text-sm font-medium text-white outline-sky-400 transition focus-visible:outline-2`}
+              } relative rounded-full px-3 py-1.5 text-sm font-medium text-light-foreground dark:text-dark-foreground outline-sky-400 transition focus-visible:outline-2`}
               style={{
                 WebkitTapHighlightColor: "transparent",
               }}
             >
               {activeTab === tab.id && (
-                <motion.span
-                  layoutId="bubble"
-                  className="absolute inset-0 z-10 bg-white mix-blend-difference"
-                  style={{ borderRadius: 9999 }}
+                <motion.div
+                  layoutId="underline"
+                  className="absolute inset-x-0 bottom-0 h-1 bg-light-green-1 dark:bg-dark-green-1"
+                  style={{ marginLeft: "0.75em", marginRight: "0.75em", borderRadius: 9999  }}
                   transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
                 />
               )}