Add an animated border to Pool Row card (#1496)

delvtech · Sep 13, 2024 · 9759f5f · 9759f5f
1 parent 2f92e34
commit 9759f5f
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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",