MOAR STYLING!

diyahir · Mar 9, 2024 · 5f98fac · 5f98fac
1 parent d28636a
commit 5f98fac
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 22 deletions.
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -2,6 +2,8 @@
 
 // Import necessary hooks and components
 import { useState } from "react";
+import "../styles/bg.css";
+import "../styles/glowButton.css";
 import { useAccount } from "wagmi";
 // Import your custom components and hooks
 import { HistoryTable } from "~~/components/HistoryTable";
@@ -32,30 +34,37 @@ const Home = () => {
   }
 
   return (
-    <div className="font-plex container mx-auto flex h-[95%] items-center justify-center">
-      <div className="card w-[500px] ">
-        <div className="card-header text-white p-4">
-          <h1
-            className="cursor-pointer text-center text-3xl font-mono mt-10"
-            onClick={() => setBalanceVisibility((balanceVisibility + 1) % 3)}
-          >
-            {getBalanceWithVisibility()}
-          </h1>
-        </div>
-        <div className="card-footer p-4 flex justify-between flex-wrap">
-          <button
-            className={`btn btn-neutral w-[100%] min-w-[136px] disabled:opacity-50`}
-            disabled={!isWebSocketConnected}
-            onClick={onOpen}
-          >
-            Send over Lightning
-          </button>
-        </div>
-        <HistoryTable />
+    <>
+      <div className="bg-oval-gradient justify-center absolute bg-gradient-to-r from-yellow-400 to-violet-800 opacity-25">
+        {/* Your content here */}
       </div>
 
-      <SendModalPopup isOpen={isOpen} onClose={onClose} />
-    </div>
+      <div className="font-plex container mx-auto flex h-[95%] items-center justify-center">
+        <div className="card w-[500px] ">
+          <div className="card-header text-white p-4">
+            <h1
+              className="cursor-pointer text-center text-3xl font-mono mt-10"
+              onClick={() => setBalanceVisibility((balanceVisibility + 1) % 3)}
+            >
+              {getBalanceWithVisibility()}
+            </h1>
+          </div>
+          <div className="card-footer p-4 flex justify-between flex-wrap">
+            <button
+              className={`btn btn-neutral w-full min-w-[136px] disabled:opacity-50 glow glow-on-hover outline-none focus:outline-none ring-violet-800 ring-2 ring-offset-2`}
+              disabled={!isWebSocketConnected}
+              onClick={onOpen}
+            >
+              Send over Lightning
+            </button>
+          </div>
+
+          <HistoryTable />
+        </div>
+
+        <SendModalPopup isOpen={isOpen} onClose={onClose} />
+      </div>
+    </>
   );
 };
 

diff --git a/packages/nextjs/styles/bg.css b/packages/nextjs/styles/bg.css
@@ -0,0 +1,35 @@
+@keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .bg-oval-gradient {
+    --size: 300px;
+    --speed: 25s;
+    --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
+
+    width: var(--size);
+    height: var(--size);
+    filter: blur(calc(var(--size) / 5));
+    animation: rotate var(--speed) var(--easing) alternate infinite;
+    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+  }
+
+  @media (min-width: 720px) {
+    .bg-oval-gradient {
+      --size: 400px;
+      /* position to the center of the screen calculating the vh and vw*/
+        position: absolute;
+        top: 25%;
+        left: 40%;
+    }
+  }
+
+  * {
+    transition: all 0.25s ease-out;
+  }
+
diff --git a/packages/nextjs/styles/glowButton.css b/packages/nextjs/styles/glowButton.css
@@ -0,0 +1,7 @@
+.glow-on-hover:focus, .glow-on-hover:hover {
+    box-shadow: 0 0 15px #9D7FEA, 0 0 20px #9D7FEA; /* Stronger glow on hover/focus */
+  }
+
+  .glow {
+    box-shadow: 0 0 8px #9D7FEA; /* Default glow */
+  }
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -118,6 +118,14 @@ module.exports = {
       fontFamily: {
         plex: ["IBM Plex Mono"],
       },
+      backgroundImage: {
+        "custom-gradient": 'radial-gradient(var(--tw-gradient-stops))',
+      },
+    },
+  },
+  variants: {
+    extend: {
+      backgroundImage: ["dark"],
     },
   },
 };