Fixed responsive errors on mobile

luloxi · Sep 20, 2024 · 023b5e1 · 023b5e1
1 parent 6a3966b
commit 023b5e1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/packages/nextjs/app/simpleMint/_components/SimpleMint.tsx b/packages/nextjs/app/simpleMint/_components/SimpleMint.tsx
@@ -207,7 +207,7 @@ export const SimpleMint: NextPage = () => {
 
       <div className="flex flex-col md:flex-row items-start flex-grow">
         {/* Input Fields Section */}
-        <div className="w-full md:w-1/2 px-4 mt-8 md:mt-0 py-6 sticky top-0">
+        <div className="w-full md:w-1/2 px-4 mt-8 md:mt-0 py-6 top-0">
           <div className="flex flex-col items-center">
             <h3 className="text-2xl font-bold mb-2">Enter your NFT details here</h3>
             <span className="text-red-500">* required fields</span>

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -95,6 +95,18 @@ export const Header = () => {
               }}
             >
               <HeaderMenuLinks />
+              {/* Add My Profile to mobile dropdown */}
+              <li>
+                <Link
+                  href="/myProfile"
+                  className={`${
+                    pathname === "/myProfile" ? "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`}
+                >
+                  <UserIcon className="h-4 w-4" />
+                  <span>My Profile</span>
+                </Link>
+              </li>
             </ul>
           )}
         </div>
@@ -113,16 +125,18 @@ export const Header = () => {
         </ul>
       </div>
       <div className="navbar-end flex-grow mr-4 flex gap-2 items-center">
-        {/* My Profile link with active style */}
-        <Link
-          href="/myProfile"
-          className={`${
-            pathname === "/myProfile" ? "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`}
-        >
-          <UserIcon className="h-4 w-4" />
-          <span>My Profile</span>
-        </Link>
+        {/* My Profile link on desktop */}
+        <div className="hidden lg:flex items-center">
+          <Link
+            href="/myProfile"
+            className={`${
+              pathname === "/myProfile" ? "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`}
+          >
+            <UserIcon className="h-4 w-4" />
+            <span>My Profile</span>
+          </Link>
+        </div>
 
         <RainbowKitCustomConnectButton />
         <FaucetButton />

diff --git a/packages/nextjs/contracts/deployedContracts.ts b/packages/nextjs/contracts/deployedContracts.ts
@@ -7,7 +7,7 @@ import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
 const deployedContracts = {
   31337: {
     SimpleMint: {
-      address: "0xca8c8688914e0f7096c920146cd0ad85cd7ae8b9",
+      address: "0x4bf010f1b9beda5450a8dd702ed602a104ff65ee",
       abi: [
         {
           type: "constructor",
@@ -320,7 +320,7 @@ const deployedContracts = {
       },
     },
     MockNFT: {
-      address: "0xb0f05d25e41fbc2b52013099ed9616f1206ae21b",
+      address: "0x40a42baf86fc821f972ad2ac878729063ceef403",
       abi: [
         {
           type: "constructor",
@@ -940,7 +940,7 @@ const deployedContracts = {
       },
     },
     MockUSDC: {
-      address: "0x5feaebfb4439f3516c74939a9d04e95afe82c4ae",
+      address: "0x96f3ce39ad2bfdcf92c0f6e2c2cabf83874660fc",
       abi: [
         {
           type: "constructor",
@@ -1397,7 +1397,7 @@ const deployedContracts = {
       },
     },
     Marketplace: {
-      address: "0x976fcd02f7c4773dd89c309fbf55d5923b4c98a1",
+      address: "0x986aaa537b8cc170761fdac6ac4fc7f9d8a20a8c",
       abi: [
         {
           type: "constructor",