refactor styles and components

rust-bitcoin · Jan 19, 2025 · f4f889e · f4f889e
1 parent bb0ca67
commit f4f889e
Show file tree

Hide file tree

Showing 16 changed files with 572 additions and 392 deletions.
diff --git a/www/src/App.tsx b/www/src/App.tsx
@@ -1,12 +1,11 @@
-import { useEffect, useState } from "react";
+import { useState, useEffect } from "react";
 import { useLaserEyes, MAGIC_EDEN, ProviderType } from "@omnisat/lasereyes";
 import init, { verify } from "@/bip322.js";
 import VerifyForm from "@/components/VerifyForm";
 import ConnectWalletForm from "@/components/ConnectWallet";
 import SignMessageForm from "@/components/SignMessage";
-import "@/index.css";
-import { Button } from "@/components/ui/button";
-import AnimatedContainer from "./components/AnimatedContainer";
+import AnimatedContainer from "@/components/AnimatedContainer";
+import { BaseButton } from "@/components/ui/base-button";
 
 export interface SignMessageState {
   message: string;
@@ -26,15 +25,12 @@ export interface VerifyFormState {
 
 function App() {
   const [isWasmInitialized, setWasmInitialized] = useState(false);
-
   const [isSignFormVisible, setIsSignFormVisible] = useState(false);
   const [isVerifyFormVisible, setIsVerifyFormVisible] = useState(false);
-
   const [signMessageState, setSignMessageState] = useState<SignMessageState>({
     message: "",
     signedData: null,
   });
-
   const [verifyFormState, setVerifyFormState] = useState<VerifyFormState>({
     address: "",
     message: "",
@@ -176,137 +172,93 @@ function App() {
   }
 
   return (
-    <div className="min-h-screen flex flex-col">
-      <header className="hero mt-[calc(var(--common-spacing)*7.5)]">
-        <h1 onClick={() => window.location.reload()}>bip322</h1>
+    <div className="min-h-screen w-full flex flex-col justify-center">
+      <header className="hero h-[calc(var(--size)*0.50)] flex justify-center w-full">
+        <div className="w-[95%] md:w-[80vw] mx-auto">
+          <h1 onClick={() => window.location.reload()}>bip322</h1>
+        </div>
       </header>
 
-      <main className="flex-1 px-4 py-8 flex items-center">
-        <div className="w-full max-w-7xl mx-auto">
-          <div className="grid grid-cols-12 gap-8 lg:gap-12">
-            <div className="col-span-12 md:col-start-3 md:col-span-8">
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 min-h-[50vh]">
-                <div className="h-full flex items-center">
-                  <div className="w-full">
-                    <AnimatedContainer isExpanded={isSignFormVisible}>
-                      <div className="w-full">
-                        {connected && address ? (
-                          <SignMessageForm
-                            address={address}
-                            message={signMessageState.message}
-                            signedData={signMessageState.signedData}
-                            onMessageChange={(message) =>
-                              setSignMessageState((prev) => ({
-                                ...prev,
-                                message,
-                              }))
-                            }
-                            onSign={handleMessageSign}
-                            onReset={resetSignMessageForm}
-                            onBack={handleDisconnect}
-                          />
-                        ) : (
-                          <ConnectWalletForm
-                            provider={provider}
-                            hasWallet={hasWallet}
-                            onConnect={handleConnect}
-                            onDisconnect={() => {
-                              handleDisconnect();
-                              setIsSignFormVisible(false);
-                            }}
-                          />
-                        )}
-                      </div>
-                      <Button
-                        className={`
-                          h-32 w-full
-                          text-[length:var(--font-md)] 
-                          bg-[hsl(var(--light-1))] text-[hsl(var(--dark-1))]
-                          hover:bg-[hsl(var(--light-2))] hover:text-[hsl(var(--dark-1))]
-                          [box-shadow:0_0_7px_#fff]
-                          hover:[box-shadow:0_0_15px_3px_#fff]
-                          rounded-xl
-                          transition-all duration-300
-                          [text-shadow:0_0_4px_rgba(0,0,0,0.3),0_0_8px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)]
-                          hover:[text-shadow:0_0_6px_rgba(0,0,0,0.4),0_0_12px_rgba(0,0,0,0.3),0_0_18px_rgba(0,0,0,0.2)]
-                    `}
-                        variant="ghost"
-                        onClick={() => setIsSignFormVisible(true)}
-                      >
-                        sign
-                      </Button>
-                    </AnimatedContainer>
-                  </div>
+      <main className="w-full">
+        <div className="w-[95%] md:w-[65vw] mx-auto">
+          <div className="flex flex-col lg:flex-row gap-[calc(var(--size)*0.1)] min-h-[50vh] items-center">
+            <div className="flex-1 w-full flex items-center">
+              <AnimatedContainer isExpanded={isSignFormVisible}>
+                <div className="w-full">
+                  {connected && address ? (
+                    <SignMessageForm
+                      address={address}
+                      message={signMessageState.message}
+                      signedData={signMessageState.signedData}
+                      onMessageChange={(message) =>
+                        setSignMessageState((prev) => ({
+                          ...prev,
+                          message,
+                        }))
+                      }
+                      onSign={handleMessageSign}
+                      onReset={resetSignMessageForm}
+                      onBack={handleDisconnect}
+                    />
+                  ) : (
+                    <ConnectWalletForm
+                      provider={provider}
+                      hasWallet={hasWallet}
+                      onConnect={handleConnect}
+                      onDisconnect={() => {
+                        handleDisconnect();
+                        setIsSignFormVisible(false);
+                      }}
+                    />
+                  )}
                 </div>
+                <BaseButton
+                  variant="large"
+                  onClick={() => setIsSignFormVisible(true)}
+                >
+                  sign
+                </BaseButton>
+              </AnimatedContainer>
+            </div>
 
-                <div className="h-full flex items-center">
-                  <div className="w-full">
-                    <AnimatedContainer isExpanded={isVerifyFormVisible}>
-                      <div className="w-full">
-                        <VerifyForm
-                          formData={verifyFormState}
-                          verificationResult={
-                            verifyFormState.verificationResult
-                          }
-                          onSubmit={handleVerification}
-                          onInputChange={handleVerifyFormChange}
-                          onReset={resetVerifyForm}
-                          onBack={() => setIsVerifyFormVisible(false)}
-                        />
-                      </div>
-                      <Button
-                        className={`
-                          h-32 w-full
-                          text-[length:var(--font-md)] 
-                          bg-[hsl(var(--light-1))] text-[hsl(var(--dark-1))]
-                          hover:bg-[hsl(var(--light-2))] hover:text-[hsl(var(--dark-1))]
-                          [box-shadow:0_0_10px_#fff]
-                          hover:[box-shadow:0_0_20px_3px_#fff]
-                          rounded-xl
-                          transition-all duration-300
-                          [text-shadow:0_0_4px_rgba(0,0,0,0.3),0_0_8px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)]
-                          hover:[text-shadow:0_0_6px_rgba(0,0,0,0.4),0_0_12px_rgba(0,0,0,0.3),0_0_18px_rgba(0,0,0,0.2)]
-                    `}
-                        variant="ghost"
-                        onClick={() => setIsVerifyFormVisible(true)}
-                      >
-                        verify
-                      </Button>
-                    </AnimatedContainer>
-                  </div>
+            <div className="flex-1 w-full flex items-center">
+              <AnimatedContainer isExpanded={isVerifyFormVisible}>
+                <div className="w-full">
+                  <VerifyForm
+                    formData={verifyFormState}
+                    verificationResult={verifyFormState.verificationResult}
+                    onSubmit={handleVerification}
+                    onInputChange={handleVerifyFormChange}
+                    onReset={resetVerifyForm}
+                    onBack={() => setIsVerifyFormVisible(false)}
+                  />
                 </div>
-              </div>
+                <BaseButton
+                  variant="large"
+                  onClick={() => setIsVerifyFormVisible(true)}
+                >
+                  verify
+                </BaseButton>
+              </AnimatedContainer>
             </div>
           </div>
         </div>
       </main>
 
-      <footer className="py-8 mb-[calc(var(--common-spacing)*7.5)]">
-        <nav className="flex items-center w-full lg:w-[80vw] mx-auto">
-          <div className="w-full px-4 flex justify-between [&>*:not(:first-child)]:ml-8">
-            <Button
-              asChild
-              variant="link"
-              className="text-center lg:px-8 text-[length:var(--font-md)] lg:text-[length:var(--font-small)]"
-            >
+      <footer className="flex h-[calc(var(--size)*0.40)] items-center w-full">
+        <nav className="w-[95%] md:w-[80%] mx-auto">
+          <div className="flex justify-between gap-4 lg:gap-8">
+            <BaseButton variant="nav" asChild>
               <a href="https://github.com/bitcoin/bips/blob/master/bip-0322.mediawiki">
                 bip
               </a>
-            </Button>
-            <Button
-              asChild
-              variant="link"
-              className="text-center lg:px-8 text-[length:var(--font-md)] lg:text-[length:var(--font-small)]"
-            >
+            </BaseButton>
+            <BaseButton variant="nav" asChild>
               <a href="https://github.com/rust-bitcoin/bip322">github</a>
-            </Button>
-            <Button
-              asChild
-              variant="link"
-              className="text-center lg:px-8 text-[length:var(--font-md)] lg:text-[length:var(--font-small)]"
-            >
+            </BaseButton>
+            <BaseButton variant="nav" asChild>
               <a href="https://crates.io/crates/bip322">crate</a>
-            </Button>
+            </BaseButton>
           </div>
         </nav>
       </footer>

diff --git a/www/src/bip322_bg.wasm b/www/src/bip322_bg.wasm
diff --git a/www/src/components/AnimatedContainer.tsx b/www/src/components/AnimatedContainer.tsx
@@ -12,19 +12,22 @@ const AnimatedContainer: React.FC<AnimatedContainerProps> = ({
   const [formContent, button] = React.Children.toArray(children);
 
   return (
-    <div className="w-full">
-      <div
-        className={`
-        w-full relative
-        transition-all duration-300 ease-in-out 
-        bg-primary/5 border-border/40 backdrop-blur rounded-xl
-        ${isExpanded ? "h-auto" : "h-0"}
-        overflow-hidden mb-0
-      `}
-      >
-        {formContent}
+    <div className="w-full flex justify-center">
+      <div className="w-full relative">
+        <div
+          className={`
+            w-full 
+            transition-all duration-300 ease-in-out 
+            ${isExpanded ? "h-auto opacity-100" : "h-0 opacity-0"}
+            overflow-hidden
+          `}
+        >
+          <div className="w-full bg-primary/5 border-border/40 backdrop-blur rounded-xl">
+            {formContent}
+          </div>
+        </div>
+        {isExpanded ? null : button}
       </div>
-      {isExpanded ? null : button}
     </div>
   );
 };

diff --git a/www/src/components/ConnectWallet.tsx b/www/src/components/ConnectWallet.tsx
@@ -1,10 +1,10 @@
-import { Button } from "@/components/ui/button";
 import {
   ProviderType,
   SUPPORTED_WALLETS,
   WalletIcon,
 } from "@omnisat/lasereyes";
-import FormWrapper from "./FormWrapper";
+import FormWrapper from "@/components/FormWrapper";
+import { BaseButton } from "@/components/ui/base-button";
 
 interface ConnectWalletFormProps {
   provider: string | null;
@@ -14,60 +14,47 @@ interface ConnectWalletFormProps {
   onConnect: (walletName: ProviderType) => Promise<void>;
   onDisconnect: () => void;
 }
+
 const ConnectWalletForm = ({
   hasWallet,
   onConnect,
   onDisconnect,
 }: ConnectWalletFormProps) => {
-  const baseButtonClass = `
-    w-full h-auto 
-    border border-white/80 
-    transition-[all,box-shadow] duration-300 
-    p-2 
-    hover:bg-white hover:text-black 
-    [&_svg]:!w-10 [&_svg]:!h-10
-    rounded-xl
-    [box-shadow:var(--white-glow)]
-    hover:[box-shadow:var(--white-glow-large)]
-  `;
   return (
     <FormWrapper title="connect wallet" onBack={onDisconnect}>
-      <div className="grid grid-cols-3 gap-4">
+      <div className="grid grid-cols-3 gap-[calc(var(--size)*0.06)]">
         {Object.values(SUPPORTED_WALLETS)
           .filter(
             (wallet) => wallet.name !== "op_net" && wallet.name !== "wizz"
           )
           .map((wallet) => {
-            console.log(wallet);
             const isMissingWallet = !hasWallet[wallet.name];
             return (
               <div key={wallet.name} className="w-full">
                 {isMissingWallet ? (
-                  <Button
-                    asChild
-                    className={`${baseButtonClass} bg-transparent/5 backdrop-blur-sm`}
-                  >
+                  <BaseButton variant="icon" asChild>
                     <a
                       href={wallet.url}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="flex items-center justify-center"
                     >
-                      <WalletIcon walletName={wallet.name} size={40} />
+                      <WalletIcon walletName={wallet.name} size={32} />
                     </a>
-                  </Button>
+                  </BaseButton>
                 ) : (
-                  <Button
-                    className={`${baseButtonClass} bg-white/90 text-black backdrop-blur-sm`}
+                  <BaseButton
+                    variant="icon"
+                    className="wallet-button-available"
                     onClick={() => onConnect(wallet.name)}
                   >
-                    <WalletIcon walletName={wallet.name} size={40} />
-                  </Button>
+                    <WalletIcon walletName={wallet.name} size={32} />
+                  </BaseButton>
                 )}
               </div>
             );
           })}
       </div>
+      <div className="input-placeholder"></div>
     </FormWrapper>
   );
 };