create-stylus 0.1.4 → 0.1.5

package/templates/base/packages/nextjs/app/debug/_components/contract/TxReceipt.tsx

@@ -1,42 +1,58 @@
+import { useState } from "react";
 import { TransactionReceipt } from "viem";
-import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+import { CheckCircleIcon, DocumentDuplicateIcon, ChevronUpIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
 import { ObjectFieldDisplay } from "~~/app/debug/_components/contract";
 import { useCopyToClipboard } from "~~/hooks/scaffold-eth/useCopyToClipboard";
 import { replacer } from "~~/utils/scaffold-eth/common";
 
 export const TxReceipt = ({ txResult }: { txResult: TransactionReceipt }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
   const { copyToClipboard: copyTxResultToClipboard, isCopiedToClipboard: isTxResultCopiedToClipboard } =
     useCopyToClipboard();
 
   return (
-    <div className="flex text-sm rounded-3xl peer-checked:rounded-b-none min-h-0 bg-secondary py-0">
-      <div className="mt-1 pl-2">
-        {isTxResultCopiedToClipboard ? (
-          <CheckCircleIcon
-            className="ml-1.5 text-xl font-normal text-base-content h-5 w-5 cursor-pointer"
-            aria-hidden="true"
-          />
-        ) : (
-          <DocumentDuplicateIcon
-            className="ml-1.5 text-xl font-normal h-5 w-5 cursor-pointer"
-            aria-hidden="true"
-            onClick={() => copyTxResultToClipboard(JSON.stringify(txResult, replacer, 2))}
-          />
-        )}
-      </div>
-      <div tabIndex={0} className="flex-wrap collapse collapse-arrow">
-        <input type="checkbox" className="min-h-0! peer" />
-        <div className="collapse-title text-sm min-h-0! py-1.5 pl-1 after:top-4!">
+    <div
+      className="text-sm rounded-lg min-h-0 p-4"
+      style={{
+        background: "var(--bg-surface-input-20, rgba(255, 255, 255, 0.04))",
+        backdropFilter: "blur(25px)",
+        border: "none",
+      }}
+    >
+      {/* Fixed Header */}
+      <div className="flex items-center">
+        <div className="flex items-center">
+          {isTxResultCopiedToClipboard ? (
+            <CheckCircleIcon
+              className="text-xl font-normal text-base-content h-5 w-5 cursor-pointer"
+              aria-hidden="true"
+            />
+          ) : (
+            <DocumentDuplicateIcon
+              className="text-xl font-normal h-5 w-5 cursor-pointer"
+              aria-hidden="true"
+              onClick={() => copyTxResultToClipboard(JSON.stringify(txResult, replacer, 2))}
+            />
+          )}
+        </div>
+        <div className="flex-1 flex items-center pl-2">
           <strong>Transaction Receipt</strong>
         </div>
-        <div className="collapse-content overflow-auto bg-secondary rounded-t-none rounded-3xl pl-0!">
+        <div className="cursor-pointer" onClick={() => setIsExpanded(!isExpanded)}>
+          {isExpanded ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
+        </div>
+      </div>
+
+      {/* Collapsible Content */}
+      {isExpanded && (
+        <div className="overflow-auto rounded-t-none mt-2">
           <pre className="text-xs">
             {Object.entries(txResult).map(([k, v]) => (
               <ObjectFieldDisplay name={k} value={v} size="xs" leftPad={false} key={k} />
             ))}
           </pre>
         </div>
-      </div>
+      )}
     </div>
   );
 };

package/templates/base/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx

@@ -95,7 +95,7 @@ export const WriteOnlyFunctionForm = ({
   return (
     <div className="py-5 space-y-3 first:pt-0 last:pb-1">
       <div className={`flex gap-3 ${zeroInputs ? "flex-row justify-between items-center" : "flex-col"}`}>
-        <p className="font-medium my-0 break-words">
+        <p className="font-medium my-0 break-words function-name">
           {abiFunction.name}
           <InheritanceTooltip inheritedFrom={inheritedFrom} />
         </p>
@@ -104,7 +104,7 @@ export const WriteOnlyFunctionForm = ({
           <div className="flex flex-col gap-1.5 w-full">
             <div className="flex items-center ml-2">
               <span className="text-xs font-medium mr-2 leading-none">payable value</span>
-              <span className="block text-xs font-extralight leading-none">wei</span>
+              <span className="block text-xs font-extralight leading-none param-type">wei</span>
             </div>
             <IntegerInput
               value={txValue}
@@ -116,26 +116,28 @@ export const WriteOnlyFunctionForm = ({
             />
           </div>
         ) : null}
-        <div className="flex justify-between gap-2">
+        <div className="flex flex-col gap-2">
           {!zeroInputs && (
-            <div className="grow basis-0">{displayedTxResult ? <TxReceipt txResult={displayedTxResult} /> : null}</div>
+            <div className="w-full">{displayedTxResult ? <TxReceipt txResult={displayedTxResult} /> : null}</div>
           )}
-          <div
-            className={`flex ${
-              writeDisabled &&
-              "tooltip tooltip-bottom tooltip-secondary before:content-[attr(data-tip)] before:-translate-x-1/3 before:left-auto before:transform-none"
-            }`}
-            data-tip={`${writeDisabled && "Wallet not connected or in the wrong network"}`}
-          >
-            <button className="btn btn-secondary btn-sm" disabled={writeDisabled || isPending} onClick={handleWrite}>
-              {isPending && <span className="loading loading-spinner loading-xs"></span>}
-              Send 💸
-            </button>
+          <div className="flex justify-end">
+            <div
+              className={`flex ${
+                writeDisabled &&
+                "tooltip tooltip-bottom tooltip-secondary before:content-[attr(data-tip)] before:-translate-x-1/3 before:left-auto before:transform-none"
+              }`}
+              data-tip={`${writeDisabled && "Wallet not connected or in the wrong network"}`}
+            >
+              <button className="send-button" disabled={writeDisabled || isPending} onClick={handleWrite}>
+                {isPending && <span className="loading loading-spinner loading-xs"></span>}
+                Send
+              </button>
+            </div>
           </div>
         </div>
       </div>
       {zeroInputs && txResult ? (
-        <div className="grow basis-0">
+        <div className="w-full">
           <TxReceipt txResult={txResult} />
         </div>
       ) : null}

package/templates/base/packages/nextjs/app/layout.tsx

@@ -1,13 +1,19 @@
-import { DM_Sans } from "next/font/google";
+import { Inter, Orbitron } from "next/font/google";
 import "@rainbow-me/rainbowkit/styles.css";
 import { Metadata } from "next";
 import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
 import { ThemeProvider } from "~~/components/ThemeProvider";
 import "~~/styles/globals.css";
 
-const dmSans = DM_Sans({
+const inter = Inter({
   subsets: ["latin"],
-  variable: "--font-dm-sans",
+  variable: "--font-inter",
+});
+
+const orbitron = Orbitron({
+  subsets: ["latin"],
+  variable: "--font-orbitron",
+  weight: ["400", "700", "900"],
 });
 
 const baseUrl = process.env.VERCEL_URL
@@ -55,7 +61,7 @@ export const metadata: Metadata = {
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <html suppressHydrationWarning>
-      <body className={`${dmSans.variable} font-sans`} suppressHydrationWarning>
+      <body className={`${inter.variable} ${orbitron.variable} font-sans`} suppressHydrationWarning>
         <ThemeProvider>
           <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
         </ThemeProvider>

package/templates/base/packages/nextjs/components/AngularBorder.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+interface AngularBorderProps {
+  width: number;
+  height: number;
+  color?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const AngularBorder: React.FC<AngularBorderProps> = ({
+  width,
+  height,
+  color = "#FD0077",
+  className = "",
+  style = {},
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      fill="none"
+      className={className}
+      style={{
+        position: "absolute",
+        top: "-3px",
+        left: 0,
+        pointerEvents: "none",
+        ...style,
+      }}
+    >
+      <path
+        d={`M${width - 20}.132 0.5L${width - 1}.5 ${height / 2}.2109V${height - 1}.5H19.0811L0.5 ${height / 2}.7871V0.5H${width - 20}.132Z`}
+        stroke={color}
+        strokeWidth="1"
+      />
+    </svg>
+  );
+};

package/templates/base/packages/nextjs/components/Footer.tsx

@@ -1,13 +1,15 @@
 import React, { useMemo } from "react";
 import Link from "next/link";
 import { useTheme } from "next-themes";
-import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 //import { HeartIcon } from "@heroicons/react/24/outline";
 //import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
+import { AngularBorder } from "~~/components/AngularBorder";
 import { Faucet } from "~~/components/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { useGlobalState } from "~~/services/store/store";
 import { arbitrumNitro } from "~~/utils/scaffold-stylus/supportedChains";
+import EthIcon from "~~/icons/EthIcon";
 
 /**
  * Site footer
@@ -33,60 +35,167 @@ export const Footer = () => {
         <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
           <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
             {nativeCurrencyPrice > 0 && (
-              <div>
-                <div className="btn btn-sm font-normal gap-1 cursor-auto border-round-color bg-base-100">
-                  <CurrencyDollarIcon className="h-4 w-4 stroke-[#E3066E]" />
-                  <span>{nativeCurrencyPrice.toFixed(2)}</span>
+              <div className="relative">
+                <AngularBorder width={140} height={40} color="rgba(227, 6, 110, 1)" />
+                <div
+                  className="flex items-center gap-2 px-6 cursor-auto rounded-lg"
+                  style={{
+                    width: "140px",
+                    height: "40px",
+                    display: "flex",
+                    alignItems: "flex-start",
+                    paddingTop: "6px",
+                    position: "relative",
+                    zIndex: 1,
+                  }}
+                >
+                  <EthIcon width={20} height={20} />
+                  <span
+                    style={{
+                      fontFamily: "Orbitron, sans-serif",
+                      fontSize: "13px",
+                      fontWeight: 700,
+                      textTransform: "uppercase",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                    }}
+                  >
+                    {nativeCurrencyPrice.toFixed(2)}
+                  </span>
                 </div>
               </div>
             )}
             {isLocalNetwork && (
               <>
                 <Faucet />
-                <Link
-                  href="/blockexplorer"
-                  passHref
-                  className="btn btn-sm font-normal gap-1 border-round-color bg-base-100"
-                >
-                  <MagnifyingGlassIcon className="h-4 w-4 stroke-[#E3066E]" />
-                  <span>Block Explorer</span>
-                </Link>
+                <div className="relative">
+                  <AngularBorder width={210} height={40} color="rgba(227, 6, 110, 1)" />
+                  <Link
+                    href="/blockexplorer"
+                    passHref
+                    className="flex items-center gap-2 px-4 py-2 rounded-lg"
+                    style={{
+                      width: "210px",
+                      height: "40px",
+                      display: "flex",
+                      alignItems: "flex-start",
+                      paddingTop: "8px",
+                      position: "relative",
+                      zIndex: 1,
+                    }}
+                  >
+                    <MagnifyingGlassIcon className="h-4 w-4" style={{ color: "rgba(227, 6, 110, 1)" }} />
+                    <span
+                      style={{
+                        color: isDarkMode ? "#FFF" : "black",
+                        fontFamily: "Orbitron, sans-serif",
+                        fontSize: "14px",
+                        fontWeight: 700,
+                        textTransform: "uppercase",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                      }}
+                    >
+                      Block Explorer
+                    </span>
+                  </Link>
+                </div>
               </>
             )}
           </div>
         </div>
       </div>
-      <div className="w-full">
-        <ul className="menu menu-horizontal w-full">
-          <div className="flex justify-center items-center gap-2 text-sm w-full">
-            <div className="text-center">
-              <a href="https://github.com/Arb-Stylus/scaffold-stylus" target="_blank" rel="noreferrer" className="link">
-                Fork me
-              </a>
-            </div>
-            <span>·</span>
-            {/*<div className="flex justify-center items-center gap-2">
-              <p className="m-0 text-center">
-                Built with <HeartIcon className="inline-block h-4 w-4" /> at
-              </p>
-              <a
-                className="flex justify-center items-center gap-1"
-                href="https://buidlguidl.com/"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <BuidlGuidlLogo className="w-3 h-5 pb-1" />
-                <span className="link">BuidlGuidl</span>
-              </a>
-            </div>
-            <span>·</span>*/}
-            <div className="text-center">
-              <a href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA" target="_blank" rel="noreferrer" className="link">
-                Support
-              </a>
-            </div>
-          </div>
-        </ul>
+      <div className="w-full flex justify-end">
+        <div className="flex gap-2">
+          {/* Fork me button */}
+          <a
+            href="https://github.com/Arb-Stylus/scaffold-stylus"
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center gap-2 px-4 py-2 rounded-2xl border"
+            style={{
+              width: "120px",
+              height: "32px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderColor: isDarkMode ? "#353535" : "rgba(0, 0, 0, 0.1)",
+              backgroundColor: isDarkMode ? "transparent" : "rgba(0, 0, 0, 0.04)",
+            }}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              style={{ color: isDarkMode ? "#FFF" : "rgba(227, 6, 110, 1)" }}
+            >
+              <path
+                d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
+                fill="currentColor"
+              />
+            </svg>
+            <span
+              style={{
+                color: isDarkMode ? "#FFF" : "black",
+                fontFamily: "Inter, sans-serif",
+                fontSize: "12px",
+                fontWeight: 500,
+                textTransform: "uppercase",
+                whiteSpace: "nowrap",
+              }}
+            >
+              Fork me
+            </span>
+          </a>
+
+          {/* Support button */}
+          <a
+            href="https://t.me/arbitrum_stylus"
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center gap-2 px-4 py-2 rounded-2xl border"
+            style={{
+              width: "120px",
+              height: "32px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderColor: isDarkMode ? "#353535" : "rgba(0, 0, 0, 0.1)",
+              backgroundColor: isDarkMode ? "transparent" : "rgba(0, 0, 0, 0.04)",
+            }}
+          >
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 18 18"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              style={{ color: isDarkMode ? "#FFF" : "rgba(227, 6, 110, 1)" }}
+            >
+              <path
+                d="M8.99987 0.144531C5.52104 0.144531 2.58863 2.52009 2.01657 5.68428H1.50821C0.752731 5.68428 0.144531 6.2925 0.144531 7.048V10.9528C0.144531 11.7083 0.752731 12.3165 1.50821 12.3165H2.16195C2.91743 12.3165 3.52563 11.7083 3.52563 10.9528V6.8144C3.52563 4.02827 5.92511 1.75454 9.0005 1.75454C12.076 1.75454 14.4754 4.02827 14.4754 6.8144V11.1864C14.4754 13.9725 12.076 16.2454 9.0005 16.2454C8.55585 16.2454 8.19544 16.606 8.19551 17.0506C8.19556 17.4952 8.55592 17.8556 9.0005 17.8556C12.4794 17.8556 15.4117 15.4806 15.9838 12.3165H16.492C17.2475 12.3165 17.8556 11.7083 17.8556 10.9528V7.048C17.8556 6.2925 17.2475 5.68428 16.492 5.68428H15.9838C15.4117 2.52009 12.4794 0.144531 9.0005 0.144531H8.99987ZM7.47643 11.8637C7.02965 11.8637 6.65446 12.2387 6.80565 12.6568C7.13012 13.5546 7.98997 14.1963 8.99967 14.1963C10.0094 14.1963 10.8694 13.5546 11.1939 12.6568C11.345 12.2387 10.9699 11.8637 10.5231 11.8637H7.47643Z"
+                fill="currentColor"
+              />
+            </svg>
+
+            <span
+              style={{
+                color: isDarkMode ? "#FFF" : "black",
+                fontFamily: "Inter, sans-serif",
+                fontSize: "12px",
+                fontWeight: 500,
+                textTransform: "uppercase",
+                whiteSpace: "nowrap",
+              }}
+            >
+              Support
+            </span>
+          </a>
+        </div>
       </div>
     </div>
   );

package/templates/base/packages/nextjs/components/Header.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useRef, useState, useMemo } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useTheme } from "next-themes";
 import { SwitchTheme } from "./SwitchTheme";
-import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
+import { Bars3Icon } from "@heroicons/react/24/outline";
 import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick, useTargetNetwork } from "~~/hooks/scaffold-eth";
 import { arbitrumNitro } from "~~/utils/scaffold-stylus/supportedChains";
@@ -24,25 +25,46 @@ export const menuLinks: HeaderMenuLink[] = [
   {
     label: "Debug Contracts",
     href: "/debug",
-    icon: <BugAntIcon className="h-4 w-4" />,
+    // icon: <BugAntIcon className="h-4 w-4" />,
   },
 ];
 
 export const HeaderMenuLinks = () => {
   const pathname = usePathname();
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = useMemo(() => resolvedTheme === "dark", [resolvedTheme]);
 
   return (
     <>
       {menuLinks.map(({ label, href, icon }) => {
         const isActive = pathname === href;
+
         return (
           <li key={href}>
             <Link
               href={href}
               passHref
               className={`${
-                isActive ? "bg-secondary shadow-md" : ""
+                isActive ? "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`}
+              style={{
+                color: isActive
+                  ? isDarkMode
+                    ? "#2B2B2B"
+                    : "black"
+                  : isDarkMode
+                    ? "var(--text-sub-600, rgba(255, 255, 255, 0.60))"
+                    : "black",
+                fontFamily: "Orbitron, sans-serif",
+                fontSize: "14px",
+                fontWeight: 700,
+                letterSpacing: "-0.28px",
+                textTransform: "uppercase",
+                background: isActive ? "linear-gradient(180deg, #FFF 18.79%, #D5D5D5 100%)" : undefined,
+                borderBottom: isActive ? "2px solid #ABABAB" : undefined,
+                borderRadius: isActive ? "8px" : undefined,
+                padding: isActive ? "8px 16px" : undefined,
+              }}
             >
               {icon}
               <span>{label}</span>
@@ -61,6 +83,8 @@ export const Header = () => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const burgerMenuRef = useRef<HTMLDivElement>(null);
   const { targetNetwork } = useTargetNetwork();
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = useMemo(() => resolvedTheme === "dark", [resolvedTheme]);
   const isLocalNetwork = targetNetwork?.id === arbitrumNitro.id;
   useOutsideClick(
     burgerMenuRef,
@@ -68,7 +92,18 @@ export const Header = () => {
   );
 
   return (
-    <div className="sticky lg:static top-0 navbar min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
+    <div
+      className="sticky lg:static top-0 navbar min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2"
+      style={{
+        display: "flex",
+        // height: "46px",
+        padding: "12px var(--spacing-2xl, 16px)",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "var(--spacing-md, 8px)",
+        alignSelf: "stretch",
+      }}
+    >
       <div className="navbar-start w-auto lg:w-1/2">
         <div className="lg:hidden dropdown" ref={burgerMenuRef}>
           <label
@@ -93,20 +128,48 @@ export const Header = () => {
           )}
         </div>
         <Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
-          <div className="flex relative w-10 h-10">
-            <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
+          <div className="flex relative w-12 h-12">
+            <Image alt="Scaffold Stylus logo" className="cursor-pointer" fill src="/logo.svg" />
           </div>
           <div className="flex flex-col">
-            <span className="font-bold leading-tight">Scaffold Stylus</span>
-            <span className="text-xs">Arbitrum dev stack</span>
+            <span
+              style={{
+                color: isDarkMode ? "#FFF" : "black",
+                fontFamily: "Orbitron, sans-serif",
+                fontSize: "16px",
+                fontWeight: 700,
+                lineHeight: "normal",
+                letterSpacing: "-0.32px",
+                textTransform: "uppercase",
+              }}
+            >
+              SCAFFOLD STYLUS
+            </span>
+            <span
+              style={{
+                color: isDarkMode ? "#FFF" : "black",
+                fontFamily: "Inter, sans-serif",
+                fontSize: "12px",
+                fontWeight: 600,
+                lineHeight: "20px",
+              }}
+            >
+              Arbitrum dev stack
+            </span>
           </div>
         </Link>
         <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
           <HeaderMenuLinks />
         </ul>
       </div>
-      <div className="flex gap-4 navbar-end flex-grow mr-4">
+      <div className="flex items-center gap-4 navbar-end flex-grow mr-4">
         <RainbowKitCustomConnectButton />
+        <div
+          className="h-6 w-px opacity-20"
+          style={{
+            backgroundColor: isDarkMode ? "white" : "black",
+          }}
+        ></div>
         <SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
       </div>
     </div>

package/templates/base/packages/nextjs/components/SwitchTheme.tsx

@@ -25,15 +25,46 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
   if (!mounted) return null;
 
   return (
-    <div className={`flex space-x-2 h-5 items-center justify-center text-sm border-l border-neutral px-4 ${className}`}>
+    <div className={`flex space-x-2 h-5 items-center justify-center text-sm px-4 ${className}`}>
       {
         <label
           htmlFor="theme-toggle"
           className={`swap swap-rotate ${!isDarkMode ? "swap-active" : ""}`}
           onClick={handleToggle}
+          style={{
+            width: "44px",
+            height: "44px",
+            aspectRatio: "1/1",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "pointer",
+            borderRadius: "50%",
+            background: isDarkMode ? "rgba(25, 144, 196, 0.30)" : "rgba(227, 6, 110, 0.30)",
+            border: isDarkMode ? "1px solid #30B4ED" : "1px solid rgba(227, 6, 110, 1)",
+            position: "relative",
+          }}
         >
-          <SunIcon className="swap-on h-5 w-5" />
-          <MoonIcon className="swap-off h-5 w-5" />
+          <SunIcon
+            className="swap-on h-5 w-5"
+            style={{
+              color: isDarkMode ? "#30B4ED" : "rgba(227, 6, 110, 1)",
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+            }}
+          />
+          <MoonIcon
+            className="swap-off h-5 w-5"
+            style={{
+              color: "#30B4ED",
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+            }}
+          />
         </label>
       }
     </div>