diff --git a/templates/base/packages/nextjs/app/debug/_components/DebugContracts.tsx b/templates/base/packages/nextjs/app/debug/_components/DebugContracts.tsx
index 39736725e5..7e6a7046a2 100644
--- a/templates/base/packages/nextjs/app/debug/_components/DebugContracts.tsx
+++ b/templates/base/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)}
diff --git a/templates/base/packages/nextjs/app/debug/page.tsx b/templates/base/packages/nextjs/app/debug/page.tsx
index e6fb89f50b..09a0b64bdc 100644
--- a/templates/base/packages/nextjs/app/debug/page.tsx
+++ b/templates/base/packages/nextjs/app/debug/page.tsx
@@ -11,9 +11,9 @@ const Debug: NextPage = () => {
return (
<>
-
+
Debug Contracts
-
+
You can debug & interact with your deployed contracts here.
Check{" "}
diff --git a/templates/base/packages/nextjs/app/page.tsx.template.mjs b/templates/base/packages/nextjs/app/page.tsx.template.mjs
index c2594b7914..dc12e2f8e6 100644
--- a/templates/base/packages/nextjs/app/page.tsx.template.mjs
+++ b/templates/base/packages/nextjs/app/page.tsx.template.mjs
@@ -38,8 +38,8 @@ const Home: NextPage = () => {
-
-
+
+
Tinker with your smart contract using the{" "}
@@ -48,8 +48,8 @@ const Home: NextPage = () => {
tab.
-
-
+
+
Explore your local transactions with the{" "}
diff --git a/templates/base/packages/nextjs/components/Header.tsx.template.mjs b/templates/base/packages/nextjs/components/Header.tsx.template.mjs
index 7a0fb475b4..b113e5a7be 100644
--- a/templates/base/packages/nextjs/components/Header.tsx.template.mjs
+++ b/templates/base/packages/nextjs/components/Header.tsx.template.mjs
@@ -45,13 +45,13 @@ export const HeaderMenuLinks = () => {
{menuLinks.map(({ label, href, icon }) => {
const isActive = pathname === href;
return (
-
+
{icon}
{label}
@@ -76,14 +76,14 @@ export const Header = () => {
});
return (
-
-
+
+
{
burgerMenuRef?.current?.removeAttribute("open");
}}
@@ -100,7 +100,7 @@ export const Header = () => {
${logoSubtitle}
-
diff --git a/templates/base/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx b/templates/base/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx
index 46f47b5af7..389f315f5f 100644
--- a/templates/base/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx
+++ b/templates/base/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
- 
+ 
);
diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Faucet.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Faucet.tsx
index 4a7c972532..1a09567b30 100644
--- a/templates/base/packages/nextjs/components/scaffold-eth/Faucet.tsx
+++ b/templates/base/packages/nextjs/components/scaffold-eth/Faucet.tsx
@@ -92,7 +92,7 @@ export const Faucet = () => {
{/* dummy input to capture event onclick on modal box */}
Local Faucet
- |