From 57c52b705c35b478661da2f6817ce23682e99608 Mon Sep 17 00:00:00 2001
From: Danny Delott <dannydelott@gmail.com>
Date: Thu, 12 Sep 2024 17:33:40 -0700
Subject: [PATCH] Animate hover on pool row

---
 .../src/ui/app/Navbar/Navbar.tsx              | 16 ++++++------
 .../src/ui/base/components/Well/Well.tsx      | 25 +++++++++++++++++--
 .../ui/markets/PoolDetails/PoolDetails.tsx    |  2 +-
 apps/hyperdrive-trading/tailwind.config.js    | 12 +++++++++
 4 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx b/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx
index ecf2063b2..7600c883f 100644
--- a/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx
+++ b/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx
@@ -36,24 +36,24 @@ export function Navbar(): ReactElement {
               All Pools
             </span>
           </Link>
-          <Link to={"/bridge"}>
+          <Link to={"/portfolio"}>
             <span
               className={classNames("text-md", {
-                "text-white": location.pathname === "/bridge",
-                "text-neutral-content": location.pathname !== "/bridge",
+                "text-white": location.pathname === "/portfolio",
+                "text-neutral-content": location.pathname !== "/portfolio",
               })}
             >
-              Bridge
+              Portfolio
             </span>
           </Link>
-          <Link to={"/portfolio"}>
+          <Link to={"/bridge"}>
             <span
               className={classNames("text-md", {
-                "text-white": location.pathname === "/portfolio",
-                "text-neutral-content": location.pathname !== "/portfolio",
+                "text-white": location.pathname === "/bridge",
+                "text-neutral-content": location.pathname !== "/bridge",
               })}
             >
-              Portfolio
+              Bridge
             </span>
           </Link>
         </div>
diff --git a/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx b/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx
index 766be955f..38c96624f 100644
--- a/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx
+++ b/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx
@@ -45,12 +45,33 @@ export function Well<T extends ElementType = "div">({
       "shadow-md": elevation === "elevated",
       "bg-gray-800": !transparent,
       "w-full": block,
-      "hover:-translate-y-0.5 hover:scale-[1.01] transition duration-300 hover:shadow-xl ease-in-out hover:shadow-primary/5":
-        isInteractive,
       "hover:cursor-pointer": onClick,
     },
   );
 
+  if (isInteractive) {
+    return (
+      <Component
+        className={classNames(
+          "group relative z-10 flex w-full cursor-pointer items-center overflow-hidden rounded-xl p-[1.5px] transition duration-300 hover:-translate-y-0.5 hover:scale-[1.01] hover:shadow-xl hover:shadow-primary/5",
+        )}
+        onClick={onClick}
+        disabled={disabled}
+        {...rest}
+      >
+        <div className="absolute inset-0 size-full rounded-full group-hover:-translate-y-0.5 group-hover:scale-[1.01] group-hover:animate-rotate group-hover:bg-[conic-gradient(#11cc89_20deg,transparent_120deg)]"></div>
+        <div
+          className={classNames(
+            "relative z-20 flex w-full rounded-[0.60rem] bg-base-100 p-2",
+            className,
+          )}
+        >
+          {children}
+        </div>
+      </Component>
+    );
+  }
+
   return (
     <Component
       className={className}
diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolDetails/PoolDetails.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolDetails/PoolDetails.tsx
index b39022123..c9a9dad8c 100644
--- a/apps/hyperdrive-trading/src/ui/markets/PoolDetails/PoolDetails.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/PoolDetails/PoolDetails.tsx
@@ -39,7 +39,7 @@ export function PoolDetails({
           className="flex items-center py-2 text-xs font-semibold text-neutral-content"
         >
           <ArrowLeftIcon className="mr-1 size-3" />
-          Back to home
+          Back to All Pools
         </Link>
         <h1 className="flex items-center gap-2 text-h2">
           <AssetStack hyperdriveAddress={hyperdrive.address} />
diff --git a/apps/hyperdrive-trading/tailwind.config.js b/apps/hyperdrive-trading/tailwind.config.js
index 056006211..8265f3dc2 100644
--- a/apps/hyperdrive-trading/tailwind.config.js
+++ b/apps/hyperdrive-trading/tailwind.config.js
@@ -2,6 +2,18 @@
 module.exports = {
   content: ["./src/**/*.{js,ts,jsx,tsx,css}", "index.html"],
   theme: {
+    extend: {
+      animation: {
+        rotate: "rotate 1s linear 1 forwards",
+      },
+      keyframes: {
+        rotate: {
+          "0%": { transform: "rotate(0deg) scale(10)", opacity: 0 },
+          "50%": { transform: "rotate(-180deg) scale(10)", opacity: 0.25 },
+          "100%": { transform: "rotate(-360deg) scale(10)", opacity: 0 },
+        },
+      },
+    },
     colors: {
       aquamarine: {
         100: "#E8FFF7",