From 3ee01c16d93cb6a7c0c1f180a4bc13c174fd1351 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20S=C3=A1nchez?= Date: Wed, 6 May 2026 16:20:12 +0200 Subject: [PATCH 01/12] ui: sharp/no-radius redesign MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - --radius-field/box → 0 (light + dark) - .btn: drop shadow-md + rounded-full, add font-weight 600 - drop rounded-* / tinted-shadow utilities on cards, dropdowns, tables, avatar, faucet - thin borders for separation where shadows used to do the job Co-Authored-By: Claude Opus 4.7 (1M context) --- .../_components/AddressComponent.tsx | 2 +- .../app/blockexplorer/_components/SearchBar.tsx | 2 +- .../_components/TransactionsTable.tsx | 4 ++-- .../transaction/_components/TransactionComp.tsx | 2 +- packages/nextjs/app/page.tsx | 4 ++-- .../components/scaffold-eth/BlockieAvatar.tsx | 8 +------- .../nextjs/components/scaffold-eth/Faucet.tsx | 2 +- .../components/scaffold-eth/FaucetButton.tsx | 2 +- .../AddressInfoDropdown.tsx | 16 ++++++++-------- .../NetworkOptions.tsx | 2 +- .../WrongNetworkDropdown.tsx | 11 ++--------- packages/nextjs/styles/globals.css | 16 ++++++---------- 12 files changed, 27 insertions(+), 44 deletions(-) diff --git a/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx b/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx index a4a0d05d9b..a1adca9c5b 100644 --- a/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx +++ b/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx @@ -21,7 +21,7 @@ export const AddressComponent = ({
-
+
diff --git a/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx b/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx index 8f3cbb5d0f..28c68c9b1e 100644 --- a/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx +++ b/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx @@ -35,7 +35,7 @@ export const SearchBar = () => { return (
-
+
- + diff --git a/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx b/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx index 0024f2e011..ca9d28c257 100644 --- a/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx +++ b/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx @@ -45,7 +45,7 @@ const TransactionComp = ({ txHash }: { txHash: Hash }) => { {transaction ? (

Transaction Details

{" "} -
Transaction Hash Function Called Block Number
+
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index 0e02056728..cb29474761 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -43,7 +43,7 @@ const Home: NextPage = () => {
-
+

Tinker with your smart contract using the{" "} @@ -53,7 +53,7 @@ const Home: NextPage = () => { tab.

-
+

Explore your local transactions with the{" "} diff --git a/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx b/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx index 46f47b5af7..389f315f5f 100644 --- a/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx +++ b/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx @@ -7,11 +7,5 @@ import { blo } from "blo"; export const BlockieAvatar: AvatarComponent = ({ address, ensImage, size }) => ( // Don't want to use nextJS Image here (and adding remote patterns for the URL) // eslint-disable-next-line @next/next/no-img-element - {`${address} + {`${address} ); diff --git a/packages/nextjs/components/scaffold-eth/Faucet.tsx b/packages/nextjs/components/scaffold-eth/Faucet.tsx index 4a7c972532..10ca34cd29 100644 --- a/packages/nextjs/components/scaffold-eth/Faucet.tsx +++ b/packages/nextjs/components/scaffold-eth/Faucet.tsx @@ -117,7 +117,7 @@ export const Faucet = () => { onValueChange={({ valueInEth }) => setSendValue(valueInEth)} style={{ width: "100%" }} /> - diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css index 37baff6aca..be0f0cb5c2 100644 --- a/packages/nextjs/styles/globals.css +++ b/packages/nextjs/styles/globals.css @@ -33,8 +33,8 @@ --color-warning: #ffcf72; --color-error: #ff8863; - --radius-field: 1rem; - --radius-box: 1rem; + --radius-field: 0rem; + --radius-box: 0rem; --tt-tailw: 6px; } @@ -58,8 +58,8 @@ --color-warning: #ffcf72; --color-error: #ff8863; - --radius-field: 1rem; - --radius-box: 1rem; + --radius-field: 0rem; + --radius-box: 0rem; --tt-tailw: 6px; --tt-bg: var(--color-primary); @@ -105,12 +105,8 @@ } .btn { - @apply shadow-md; - border-radius: 9999rem; -} - -.btn.btn-ghost { - @apply shadow-none; + font-weight: 600; + box-shadow: none; } .link { From 3134c24c952bc025108a673a9b9571b70b0cab87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20S=C3=A1nchez?= Date: Wed, 6 May 2026 16:21:01 +0200 Subject: [PATCH 02/12] ui(header): full-item-height nav links MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - min-h-16 + border-b-2 border-base-300 (drop shadow) - self-stretch on navbar-start; raw

    instead of daisy menu menu-horizontal - nav links span full header height (h-full) with no rounding - mobile dropdown shadow-sm → shadow-lg Co-Authored-By: Claude Opus 4.7 (1M context) --- packages/nextjs/components/Header.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index fba0c29a9a..a3443ef8fb 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -35,13 +35,13 @@ export const HeaderMenuLinks = () => { {menuLinks.map(({ label, href, icon }) => { const isActive = pathname === href; return ( -
  • +
  • {icon} {label} @@ -66,14 +66,14 @@ export const Header = () => { }); return ( -
    -
    +
    +
      { burgerMenuRef?.current?.removeAttribute("open"); }} @@ -90,7 +90,7 @@ export const Header = () => { Ethereum dev stack
    -
      +
    From b35a7fa93e9890a9db582aec1d46ab3b0f990d0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20S=C3=A1nchez?= Date: Wed, 6 May 2026 16:22:09 +0200 Subject: [PATCH 03/12] test: add /test page for theme/component preview Static page surfacing all DaisyUI variants (buttons, bg, text, borders, icons, form controls, badges, alerts, links) for theme work. Linked from header nav via SwatchIcon. Will be removed before merge. Co-Authored-By: Claude Opus 4.7 (1M context) --- packages/nextjs/app/test/page.tsx | 225 ++++++++++++++++++++++++++ packages/nextjs/components/Header.tsx | 7 +- packages/nextjs/styles/globals.css | 1 - 3 files changed, 231 insertions(+), 2 deletions(-) create mode 100644 packages/nextjs/app/test/page.tsx diff --git a/packages/nextjs/app/test/page.tsx b/packages/nextjs/app/test/page.tsx new file mode 100644 index 0000000000..6b36d70798 --- /dev/null +++ b/packages/nextjs/app/test/page.tsx @@ -0,0 +1,225 @@ +import type { NextPage } from "next"; +import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; + +const Section = ({ title, children }: { title: string; children: React.ReactNode }) => ( +
    +

    {title}

    + {children} +
    +); + +const Test: NextPage = () => { + return ( +
    +

    Theme Test Page

    + +
    +
    + + + + + + + + + + + +
    +
    + +
    +
    + + + + + + + + +
    +
    + +
    +
    + + + + + + + + +
    +
    + +
    +
    + + + + +
    +
    + +
    +
    + + + +
    +
    + +
    +
    +
    bg-primary
    +
    bg-secondary
    +
    bg-accent
    +
    bg-neutral
    +
    bg-info
    +
    bg-success
    +
    bg-warning
    +
    bg-error
    +
    +
    + +
    +
    +
    bg-base-100
    +
    bg-base-200
    +
    bg-base-300
    +
    +
    + +
    +
    +

    text-primary

    +

    text-secondary

    +

    text-accent

    +

    text-neutral

    +

    text-info

    +

    text-success

    +

    text-warning

    +

    text-error

    +

    text-base-content

    +
    +
    + +
    +
    +
    border-primary
    +
    border-secondary
    +
    border-accent
    +
    border-neutral
    +
    border-info
    +
    border-success
    +
    border-warning
    +
    border-error
    +
    +
    + +
    +
    +
    + + fill-primary +
    +
    + + fill-secondary +
    +
    + + fill-accent +
    +
    + + fill-neutral +
    +
    + + fill-secondary on base-100 +
    +
    +
    + +
    +
    + + + +
    + + + + +
    +
    + + + +
    +
    + + + + +
    +
    +
    + +
    +
    + badge-primary + badge-secondary + badge-accent + badge-neutral + badge-info + badge-success + badge-warning + badge-error +
    +
    + +
    +
    +
    alert-info
    +
    alert-success
    +
    alert-warning
    +
    alert-error
    +
    +
    + +
    +
    +

    Card title

    +

    Body text on base-100. Border uses base-300.

    +
    + + + +
    +
    +
    + +
    + +
    +
    + ); +}; + +export default Test; diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index a3443ef8fb..32642c49b6 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -5,7 +5,7 @@ import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { hardhat } from "viem/chains"; -import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline"; +import { Bars3Icon, BugAntIcon, SwatchIcon } from "@heroicons/react/24/outline"; import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth"; import { useOutsideClick, useTargetNetwork } from "~~/hooks/scaffold-eth"; @@ -25,6 +25,11 @@ export const menuLinks: HeaderMenuLink[] = [ href: "/debug", icon: , }, + { + label: "Test", + href: "/test", + icon: , + }, ]; export const HeaderMenuLinks = () => { diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css index be0f0cb5c2..7437261413 100644 --- a/packages/nextjs/styles/globals.css +++ b/packages/nextjs/styles/globals.css @@ -105,7 +105,6 @@ } .btn { - font-weight: 600; box-shadow: none; } From 94a7c1ee58e67e3f57514ab8eb17f19e896a26b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20S=C3=A1nchez?= Date: Wed, 6 May 2026 16:53:39 +0200 Subject: [PATCH 04/12] test: palette picker on /test page with localStorage persistence - components/test/palettes.ts holds palette data (Default + Slate, light + dark) + apply/reset helpers - components/test/PaletteLoader.tsx mounts in root layout, replays stored palette on boot - /test page picker writes palette name to localStorage on Apply, removes on Reset - override applies via injected