UI tweaks/redesign

packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx

@@ -21,7 +21,7 @@ export const AddressComponent = ({
       </div>
       <div className="col-span-5 grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-10">
         <div className="col-span-1 flex flex-col">
-          <div className="bg-base-100 border-base-300 border shadow-md shadow-secondary rounded-3xl px-6 lg:px-8 mb-6 space-y-1 py-4 overflow-x-auto">
+          <div className="bg-base-100 border-base-300 border px-6 lg:px-8 mb-6 space-y-1 py-4 overflow-x-auto">
             <div className="flex">
               <div className="flex flex-col gap-1">
                 <Address address={address} format="long" onlyEnsOrAddress chain={targetNetwork} />

packages/nextjs/app/blockexplorer/_components/SearchBar.tsx

@@ -35,7 +35,7 @@ export const SearchBar = () => {
   return (
     <form onSubmit={handleSearch} className="flex items-center justify-end mb-5 space-x-3 mx-5">
       <input
-        className="border-primary bg-base-100 text-base-content placeholder:text-base-content/50 p-2 mr-2 w-full md:w-1/2 lg:w-1/3 rounded-md shadow-md focus:outline-hidden focus:ring-2 focus:ring-accent"
+        className="border-primary bg-base-100 text-base-content placeholder:text-base-content/50 p-2 mr-2 w-full md:w-1/2 lg:w-1/3 focus:outline-hidden focus:ring-2 focus:ring-accent"
         type="text"
         value={searchInput}
         placeholder="Search by hash or address"

packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx

@@ -11,15 +11,15 @@ export const TransactionsTable = ({ blocks, transactionReceipts }: TransactionsT
 
   return (
     <div className="flex justify-center px-4 md:px-0">
-      <div className="overflow-x-auto w-full shadow-2xl rounded-xl">
+      <div className="overflow-x-auto w-full border border-base-300">
         {!hasTransactions ? (
           <div className="bg-base-100 rounded-xl p-8 text-center text-base-content/70">
             No transactions found on this page.
           </div>
         ) : (
           <table className="table text-xl bg-base-100 table-zebra w-full md:table-md table-sm">
             <thead>
-              <tr className="rounded-xl text-sm text-base-content">
+              <tr className="text-sm text-base-content">
                 <th className="bg-primary">Transaction Hash</th>
                 <th className="bg-primary">Function Called</th>
                 <th className="bg-primary">Block Number</th>

packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx

@@ -45,7 +45,7 @@ const TransactionComp = ({ txHash }: { txHash: Hash }) => {
       {transaction ? (
         <div className="overflow-x-auto">
           <h2 className="text-3xl font-bold mb-4 text-center text-primary-content">Transaction Details</h2>{" "}
-          <table className="table rounded-lg bg-base-100 w-full shadow-lg md:table-lg table-md">
+          <table className="table bg-base-100 w-full border border-base-300 md:table-lg table-md">
             <tbody>
               <tr>
                 <td>

packages/nextjs/app/debug/_components/DebugContracts.tsx

@@ -45,7 +45,7 @@ export function DebugContracts() {
                   className={`btn btn-secondary btn-sm font-light hover:border-transparent ${
                     contractName === selectedContract
                       ? "bg-base-300 hover:bg-base-300 no-animation"
-                      : "bg-base-100 hover:bg-secondary"
+                      : "bg-base-100 hover:bg-secondary hover:text-secondary-content"
                   }`}
                   key={contractName}
                   onClick={() => setSelectedContract(contractName)}

packages/nextjs/app/debug/page.tsx

@@ -11,9 +11,9 @@ const Debug: NextPage = () => {
   return (
     <>
       <DebugContracts />
-      <div className="text-center mt-8 bg-secondary p-10">
+      <div className="text-center mt-8 bg-secondary text-secondary-content p-10">
         <h1 className="text-4xl my-0">Debug Contracts</h1>
-        <p className="text-neutral">
+        <p>
           You can debug & interact with your deployed contracts here.
           <br /> Check{" "}
           <code className="italic bg-base-300 text-base font-bold [word-spacing:-0.5rem] px-1">

packages/nextjs/app/page.tsx

@@ -43,8 +43,8 @@ const Home: NextPage = () => {
 
         <div className="grow bg-base-300 w-full mt-16 px-8 py-12">
           <div className="flex justify-center items-center gap-12 flex-col md:flex-row">
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <BugAntIcon className="h-8 w-8 fill-secondary" />
+            <div className="flex flex-col bg-base-100 border border-base-300 px-10 py-10 text-center items-center max-w-xs">
+              <BugAntIcon className="h-8 w-8" />
               <p>
                 Tinker with your smart contract using the{" "}
                 <Link href="/debug" passHref className="link">
@@ -53,8 +53,8 @@ const Home: NextPage = () => {
                 tab.
               </p>
             </div>
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
+            <div className="flex flex-col bg-base-100 border border-base-300 px-10 py-10 text-center items-center max-w-xs">
+              <MagnifyingGlassIcon className="h-8 w-8" />
               <p>
                 Explore your local transactions with the{" "}
                 <Link href="/blockexplorer" passHref className="link">

packages/nextjs/components/Header.tsx

@@ -35,13 +35,13 @@ export const HeaderMenuLinks = () => {
       {menuLinks.map(({ label, href, icon }) => {
         const isActive = pathname === href;
         return (
-          <li key={href}>
+          <li key={href} className="h-full">
             <Link
               href={href}
               passHref
               className={`${
-                isActive ? "bg-secondary shadow-md" : ""
-              } hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
+                isActive ? "bg-base-300" : ""
+              } hover:bg-base-300 focus:!bg-base-300 h-full px-4 text-sm gap-2 flex items-center`}
             >
               {icon}
               <span>{label}</span>
@@ -66,14 +66,14 @@ export const Header = () => {
   });
 
   return (
-    <div className="sticky lg:static top-0 navbar bg-base-100 min-h-0 shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2">
-      <div className="navbar-start w-auto lg:w-1/2">
+    <div className="sticky lg:static top-0 navbar bg-base-100 min-h-16 shrink-0 justify-between z-20 border-b-2 border-base-300 p-0 sm:px-2">
+      <div className="navbar-start w-auto lg:w-1/2 self-stretch">
         <details className="dropdown" ref={burgerMenuRef}>
           <summary className="ml-1 btn btn-ghost lg:hidden hover:bg-transparent">
             <Bars3Icon className="h-1/2" />
           </summary>
           <ul
-            className="menu menu-compact dropdown-content mt-3 p-2 shadow-sm bg-base-100 rounded-box w-52"
+            className="menu menu-compact dropdown-content mt-3 p-2 shadow-lg bg-base-100 w-52"
             onClick={() => {
               burgerMenuRef?.current?.removeAttribute("open");
             }}
@@ -90,7 +90,7 @@ export const Header = () => {
             <span className="text-xs">Ethereum dev stack</span>
           </div>
         </Link>
-        <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
+        <ul className="hidden lg:flex lg:flex-nowrap h-full m-0 p-0 list-none">
           <HeaderMenuLinks />
         </ul>
       </div>

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
-  <img
-    className="rounded-full"
-    src={ensImage || blo(address as `0x${string}`)}
-    width={size}
-    height={size}
-    alt={`${address} avatar`}
-  />
+  <img src={ensImage || blo(address as `0x${string}`)} width={size} height={size} alt={`${address} avatar`} />
 );

packages/nextjs/components/scaffold-eth/Faucet.tsx

@@ -92,7 +92,7 @@ export const Faucet = () => {
           {/* dummy input to capture event onclick on modal box */}
           <input className="h-0 w-0 absolute top-0 left-0" />
           <h3 className="text-xl font-bold mb-3">Local Faucet</h3>
-          <label htmlFor="faucet-modal" className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+          <label htmlFor="faucet-modal" className="btn btn-ghost btn-sm absolute right-3 top-3">
             ✕
           </label>
           <div className="space-y-3">
@@ -117,7 +117,7 @@ export const Faucet = () => {
                 onValueChange={({ valueInEth }) => setSendValue(valueInEth)}
                 style={{ width: "100%" }}
               />
-              <button className="h-10 btn btn-primary btn-sm px-2 rounded-full" onClick={sendETH} disabled={loading}>
+              <button className="h-10 btn btn-primary btn-sm px-2" onClick={sendETH} disabled={loading}>
                 {!loading ? (
                   <BanknotesIcon className="h-6 w-6" />
                 ) : (

packages/nextjs/components/scaffold-eth/FaucetButton.tsx

@@ -61,7 +61,7 @@ export const FaucetButton = () => {
       }
       data-tip="Grab funds from faucet"
     >
-      <button className="btn btn-secondary btn-sm px-2 rounded-full" onClick={sendETH} disabled={loading}>
+      <button className="btn btn-secondary btn-sm px-2" onClick={sendETH} disabled={loading}>
         {!loading ? (
           <BanknotesIcon className="h-4 w-4" />
         ) : (

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx

@@ -54,18 +54,18 @@ export const AddressInfoDropdown = ({
   return (
     <>
       <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
-        <summary className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 h-auto!">
+        <summary className="btn btn-secondary btn-sm pl-0 pr-2 dropdown-toggle gap-0 h-auto!">
           <BlockieAvatar address={checkSumAddress} size={30} ensImage={ensAvatar} />
           <span className="ml-2 mr-1">
             {isENS(displayName) ? displayName : checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4)}
           </span>
           <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
         </summary>
-        <ul className="dropdown-content menu z-2 p-2 mt-2 shadow-center shadow-accent bg-base-200 rounded-box gap-1">
+        <ul className="dropdown-content menu z-2 p-2 mt-2 shadow-lg bg-base-200 gap-1">
           <NetworkOptions hidden={!selectingNetwork} />
           <li className={selectingNetwork ? "hidden" : ""}>
             <div
-              className="h-8 btn-sm rounded-xl! flex gap-3 py-3 cursor-pointer"
+              className="h-8 btn-sm flex gap-3 py-3 cursor-pointer"
               onClick={() => copyAddressToClipboard(checkSumAddress)}
             >
               {isAddressCopiedToClipboard ? (
@@ -82,13 +82,13 @@ export const AddressInfoDropdown = ({
             </div>
           </li>
           <li className={selectingNetwork ? "hidden" : ""}>
-            <label htmlFor="qrcode-modal" className="h-8 btn-sm rounded-xl! flex gap-3 py-3">
+            <label htmlFor="qrcode-modal" className="h-8 btn-sm flex gap-3 py-3">
               <QrCodeIcon className="h-6 w-4 ml-2 sm:ml-0" />
               <span className="whitespace-nowrap">View QR Code</span>
             </label>
           </li>
           <li className={selectingNetwork ? "hidden" : ""}>
-            <button className="h-8 btn-sm rounded-xl! flex gap-3 py-3" type="button">
+            <button className="h-8 btn-sm flex gap-3 py-3" type="button">
               <ArrowTopRightOnSquareIcon className="h-6 w-4 ml-2 sm:ml-0" />
               <a
                 target="_blank"
@@ -103,7 +103,7 @@ export const AddressInfoDropdown = ({
           {allowedNetworks.length > 1 ? (
             <li className={selectingNetwork ? "hidden" : ""}>
               <button
-                className="h-8 btn-sm rounded-xl! flex gap-3 py-3"
+                className="h-8 btn-sm flex gap-3 py-3"
                 type="button"
                 onClick={() => {
                   setSelectingNetwork(true);
@@ -115,15 +115,15 @@ export const AddressInfoDropdown = ({
           ) : null}
           {connector?.id === BURNER_WALLET_ID ? (
             <li>
-              <label htmlFor="reveal-burner-pk-modal" className="h-8 btn-sm rounded-xl! flex gap-3 py-3 text-error">
+              <label htmlFor="reveal-burner-pk-modal" className="h-8 btn-sm flex gap-3 py-3 text-error">
                 <EyeIcon className="h-6 w-4 ml-2 sm:ml-0" />
                 <span>Reveal Private Key</span>
               </label>
             </li>
           ) : null}
           <li className={selectingNetwork ? "hidden" : ""}>
             <button
-              className="menu-item text-error h-8 btn-sm rounded-xl! flex gap-3 py-3"
+              className="menu-item text-error h-8 btn-sm flex gap-3 py-3"
               type="button"
               onClick={() => disconnect()}
             >

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx

@@ -16,7 +16,7 @@ export const AddressQRCodeModal = ({ address, modalId }: AddressQRCodeModalProps
           <label className="modal-box relative">
             {/* dummy input to capture event onclick on modal box */}
             <input className="h-0 w-0 absolute top-0 left-0" />
-            <label htmlFor={`${modalId}`} className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+            <label htmlFor={`${modalId}`} className="btn btn-ghost btn-sm absolute right-3 top-3">
               ✕
             </label>
             <div className="space-y-3 py-6">

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx

@@ -23,7 +23,7 @@ export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
         .map(allowedNetwork => (
           <li key={allowedNetwork.id} className={hidden ? "hidden" : ""}>
             <button
-              className="menu-item btn-sm rounded-xl! flex gap-3 py-3 whitespace-nowrap"
+              className="menu-item btn-sm flex gap-3 py-3 whitespace-nowrap"
               type="button"
               onClick={() => {
                 switchChain?.({ chainId: allowedNetwork.id });

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/RevealBurnerPKModal.tsx

@@ -32,7 +32,7 @@ export const RevealBurnerPKModal = () => {
           <label className="modal-box relative">
             {/* dummy input to capture event onclick on modal box */}
             <input className="h-0 w-0 absolute top-0 left-0" />
-            <label htmlFor="reveal-burner-pk-modal" className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+            <label htmlFor="reveal-burner-pk-modal" className="btn btn-ghost btn-sm absolute right-3 top-3">
               ✕
             </label>
             <div>

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx

@@ -11,17 +11,10 @@ export const WrongNetworkDropdown = () => {
         <span>Wrong network</span>
         <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
       </label>
-      <ul
-        tabIndex={0}
-        className="dropdown-content menu p-2 mt-1 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
-      >
+      <ul tabIndex={0} className="dropdown-content menu p-2 mt-1 shadow-lg bg-base-200 gap-1">
         <NetworkOptions />
         <li>
-          <button
-            className="menu-item text-error btn-sm rounded-xl! flex gap-3 py-3"
-            type="button"
-            onClick={() => disconnect()}
-          >
+          <button className="menu-item text-error btn-sm flex gap-3 py-3" type="button" onClick={() => disconnect()}>
             <ArrowLeftOnRectangleIcon className="h-6 w-4 ml-2 sm:ml-0" />
             <span>Disconnect</span>
           </button>

packages/nextjs/package.json

@@ -19,8 +19,8 @@
     "@heroicons/react": "^2.2.0",
     "@rainbow-me/rainbowkit": "2.2.9",
     "@react-native-async-storage/async-storage": "^2.2.0",
-    "@scaffold-ui/components": "^0.1.10",
-    "@scaffold-ui/debug-contracts": "^0.1.9",
+    "@scaffold-ui/components": "^0.1.12",
+    "@scaffold-ui/debug-contracts": "^0.1.11",
     "@scaffold-ui/hooks": "^0.1.8",
     "@tanstack/react-query": "^5.59.15",
     "blo": "^2.0.0",

packages/nextjs/styles/globals.css

@@ -33,8 +33,10 @@
   --color-warning: #ffcf72;
   --color-error: #ff8863;
 
-  --radius-field: 1rem;
-  --radius-box: 1rem;
+  --radius-field: 0rem;
+  --radius-box: 0rem;
+  --radius-selector: 0rem;
+
   --tt-tailw: 6px;
 }
 
@@ -58,8 +60,9 @@
   --color-warning: #ffcf72;
   --color-error: #ff8863;
 
-  --radius-field: 1rem;
-  --radius-box: 1rem;
+  --radius-field: 0rem;
+  --radius-box: 0rem;
+  --radius-selector: 0rem;
 
   --tt-tailw: 6px;
   --tt-bg: var(--color-primary);
@@ -105,12 +108,7 @@
 }
 
 .btn {
-  @apply shadow-md;
-  border-radius: 9999rem;
-}
-
-.btn.btn-ghost {
-  @apply shadow-none;
+  box-shadow: none;
 }
 
 .link {

packages/nextjs/utils/scaffold-eth/notification.tsx

@@ -46,7 +46,7 @@ const Notification = ({
   return toast.custom(
     (t: Toast) => (
       <div
-        className={`flex flex-row items-start justify-between max-w-sm rounded-xl shadow-center shadow-accent bg-base-200 p-4 transform-gpu relative transition-all duration-500 ease-in-out space-x-2
+        className={`flex flex-row items-start justify-between max-w-sm shadow-center shadow-accent bg-base-200 p-4 transform-gpu relative transition-all duration-500 ease-in-out space-x-2
         ${
           position.substring(0, 3) == "top"
             ? `hover:translate-y-1 ${t.visible ? "top-0" : "-top-96"}`