Michilis/SatsFaucet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign frontend with Sats Flow theme and restore homepage sidebars.

Browse Source 
Apply the glassmorphic Bitcoin-orange design system across the claim flow and all pages, add the eligibility draw animation, and flank the claim wizard with deposit and stats panels again.
This commit is contained in:
SatsFaucet
2026-06-09 05:23:29 +02:00
parent 6ece47e3ed
commit e7daa57ab4
10 changed files with 1567 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+27 -43
View File
@@ -11,22 +11,6 @@ import { SponsorsPage } from "./pages/SponsorsPage";
import { MyAdsPage } from "./pages/MyAdsPage";
import { SponsorsSection } from "./components/SponsorsSection";
const FaucetSvg = () => (
<svg className="faucet-svg" viewBox="0 0 100 140" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="52" cy="14" rx="10" ry="6" fill="#c0392b" />
<rect x="49" y="14" width="6" height="16" fill="#c0392b" />
<rect x="30" y="28" width="44" height="30" rx="6" fill="#c0392b" />
<rect x="72" y="36" width="24" height="14" rx="4" fill="#c0392b" />
<rect x="85" y="50" width="12" height="32" rx="4" fill="#c0392b" />
<ellipse cx="89" cy="91" rx="3" ry="5" fill="#5dade2" opacity="0.85" />
<ellipse cx="92" cy="102" rx="2" ry="4" fill="#5dade2" opacity="0.65" />
<ellipse cx="87" cy="108" rx="2" ry="3.5" fill="#5dade2" opacity="0.5" />
<ellipse cx="91" cy="116" rx="1.5" ry="3" fill="#5dade2" opacity="0.35" />
<rect x="10" y="33" width="22" height="18" rx="3" fill="#c0392b" />
<rect x="6" y="36" width="8" height="12" rx="2" fill="#922b21" />
</svg>
);
export default function App() {
const [pubkey, setPubkey] = useState<string | null>(null);
const [loginMethod, setLoginMethod] = useState<LoginMethod | null>(null);
@@ -75,7 +59,7 @@ export default function App() {
return (
<BrowserRouter>
<div className="app">
<div className="app sats-flow">
<Header pubkey={pubkey} onLogout={handleLogout} onLoginSuccess={handlePubkeyChange} />
<div className="topbar" />
<div className="app-body">
@@ -84,23 +68,27 @@ export default function App() {
path="/"
element={
<>
<div className="container">
<aside className="sidebar sidebar-left">
<div className="funding-panel">
<DepositSection />
</div>
</aside>
<main className="main">
<div className="header">
<FaucetSvg />
<h1>Sats Faucet</h1>
</div>
<ClaimWizard pubkey={pubkey} loginMethod={loginMethod} onPubkeyChange={handlePubkeyChange} onClaimSuccess={handleClaimSuccess} />
</main>
<aside className="sidebar sidebar-right">
<StatsSection refetchTrigger={statsRefetchTrigger} />
</aside>
</div>
<section className="claim-flow-page claim-flow-page--grid">
<div className="sf-ambient-glow" aria-hidden />
<div className="claim-flow-grid">
<aside className="sidebar sidebar-left">
<div className="funding-panel">
<DepositSection />
</div>
</aside>
<main className="claim-flow-main">
<ClaimWizard
pubkey={pubkey}
loginMethod={loginMethod}
onPubkeyChange={handlePubkeyChange}
onClaimSuccess={handleClaimSuccess}
/>
</main>
<aside className="sidebar sidebar-right">
<StatsSection refetchTrigger={statsRefetchTrigger} />
</aside>
</div>
</section>
<SponsorsSection />
</>
}
@@ -108,17 +96,15 @@ export default function App() {
<Route
path="/transactions"
element={
<div className="container container--single container--transactions">
<main className="main main--full">
<TransactionsPage />
</main>
<div className="sf-page">
<TransactionsPage />
</div>
}
/>
<Route
path="/sponsors"
element={
<div className="sponsors-route">
<div className="sponsors-route sf-page">
<SponsorsPage />
</div>
}
@@ -126,10 +112,8 @@ export default function App() {
<Route
path="/my-ads"
element={
<div className="container container--single">
<main className="main main--full">
<MyAdsPage />
</main>
<div className="sf-page">
<MyAdsPage />
</div>
}
/>