From 071259d32b2140c7fb3d258df00bae95f3e561dd Mon Sep 17 00:00:00 2001
From: Gabriela del Pilar Rojas <gabrieladelpilarrojas21@gmail.com>
Date: Thu, 18 Apr 2024 23:22:34 -0500
Subject: [PATCH]  challenge0 ui

---
 packages/nextjs/app/ipfsDownload/page.tsx     |  9 ++++----
 packages/nextjs/app/ipfsUpload/page.tsx       |  7 +++---
 packages/nextjs/app/myNFTs/page.tsx           |  2 +-
 packages/nextjs/components/Footer.tsx         | 22 +++++++++----------
 .../nextjs/components/SimpleNFT/NFTcard.tsx   |  6 ++---
 5 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/nextjs/app/ipfsDownload/page.tsx b/packages/nextjs/app/ipfsDownload/page.tsx
index 32abf59b..0188f1f2 100644
--- a/packages/nextjs/app/ipfsDownload/page.tsx
+++ b/packages/nextjs/app/ipfsDownload/page.tsx
@@ -3,6 +3,7 @@
 import { lazy, useEffect, useState } from "react";
 import type { NextPage } from "next";
 import { notification } from "~~/utils/scaffold-stark/notification";
+import ButtonStyle from "~~/components/ButtonStyle/ButtonStyle";
 // import { getMetadataFromIPFS } from "~~/utils/simpleNFT/ipfs-fetch";
 
 const LazyReactJson = lazy(() => import("react-json-view"));
@@ -49,13 +50,13 @@ const IpfsDownload: NextPage = () => {
             autoComplete="off"
           />
         </div>
-        <button
-          className={`btn btn-secondary my-6 ${loading ? "loading" : ""}`}
-          disabled={loading}
+        <ButtonStyle
+          // className={`btn btn-secondary my-6 ${loading ? "loading" : ""}`}
+          // disabled={loading}
         //   onClick={handleIpfsDownload}
         >
           Download from IPFS
-        </button>
+        </ButtonStyle>
 
         {mounted && (
           <LazyReactJson
diff --git a/packages/nextjs/app/ipfsUpload/page.tsx b/packages/nextjs/app/ipfsUpload/page.tsx
index 0e7f3b82..0df2145a 100644
--- a/packages/nextjs/app/ipfsUpload/page.tsx
+++ b/packages/nextjs/app/ipfsUpload/page.tsx
@@ -5,6 +5,7 @@ import type { NextPage } from "next";
 import { notification } from "~~/utils/scaffold-stark/notification";
 // import { addToIPFS } from "~~/utils/simpleNFT/ipfs-fetch";
 import nftsMetadata from "~~/utils/scaffold-stark/simpleNFT/nftsMetadata";
+import ButtonStyle from "~~/components/ButtonStyle/ButtonStyle";
 
 const LazyReactJson = lazy(() => import("react-json-view"));
 
@@ -59,13 +60,11 @@ const IpfsUpload: NextPage = () => {
             }}
           />
         )}
-        <button
-          className={`btn btn-secondary mt-4 ${loading ? "loading" : ""}`}
-          disabled={loading}
+        <ButtonStyle
         //   onClick={handleIpfsUpload}
         >
           Upload to IPFS
-        </button>
+        </ButtonStyle>
         {/* {uploadedIpfsPath && (
           <div className="mt-4">
             <a href={`https://ipfs.io/ipfs/${uploadedIpfsPath}`} target="_blank" rel="noreferrer">
diff --git a/packages/nextjs/app/myNFTs/page.tsx b/packages/nextjs/app/myNFTs/page.tsx
index a4fdd767..28acb85a 100644
--- a/packages/nextjs/app/myNFTs/page.tsx
+++ b/packages/nextjs/app/myNFTs/page.tsx
@@ -5,7 +5,7 @@ function Page() {
     return (
         <main className="flex flex-col flex-1">
             <div className="flex flex-col items-center p-10">
-                <h1>My NFTs</h1>
+                <h1 className="text-4xl font-bold text-center mb-4">My NFTs</h1>
                 <ButtonStyle>Mint NFT</ButtonStyle>
                 <MyHoldings></MyHoldings>
             </div>
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
index 96641f33..11125876 100644
--- a/packages/nextjs/components/Footer.tsx
+++ b/packages/nextjs/components/Footer.tsx
@@ -8,26 +8,26 @@ import {
 import { HeartIcon } from "@heroicons/react/24/outline";
 import { SwitchTheme } from "~~/components/SwitchTheme";
 import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
-//  import { FaucetMenu } from "~~/components/FaucetMenu";
-//  import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+ import  FaucetMenu  from "~~/components/FaucetMenu";
+  import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
 import { useGlobalState } from "~~/services/store/store";
 
 /**
  * Site footer
  */
 export const Footer = () => {
-  //   const nativeCurrencyPrice = useGlobalState(
-  //      (state) => state.nativeCurrencyPrice
-  //   );
-  //   const { targetNetwork } = useTargetNetwork();
-  // const isLocalNetwork = false;
+     const nativeCurrencyPrice = useGlobalState(
+        (state) => state.nativeCurrencyPrice
+    );
+    const { targetNetwork } = useTargetNetwork();
+  const isLocalNetwork = false;
 
   return (
     <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
       <div>
         <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 && (
+           {nativeCurrencyPrice > 0 && (
               <div>
                 <div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto">
                   <CurrencyDollarIcon className="h-4 w-4" />
@@ -47,13 +47,13 @@ export const Footer = () => {
                   <span>Block Explorer</span>
                 </Link>
               </>
-            )}  */}
+            )} 
           </div>
-          {/* <SwitchTheme
+          <SwitchTheme
             className={`pointer-events-auto ${
               isLocalNetwork ? "self-end md:self-auto" : ""
             }`}
-          /> */}
+          /> 
         </div>
       </div>
       <div className="w-full">
diff --git a/packages/nextjs/components/SimpleNFT/NFTcard.tsx b/packages/nextjs/components/SimpleNFT/NFTcard.tsx
index ac61f919..6b25047c 100644
--- a/packages/nextjs/components/SimpleNFT/NFTcard.tsx
+++ b/packages/nextjs/components/SimpleNFT/NFTcard.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { NFTMetaData } from "~~/utils/scaffold-stark/simpleNFT/nftsMetadata";
+import ButtonStyle from "../ButtonStyle/ButtonStyle";
 
 export const NFTCard = ({ nft }:any) => {
 
@@ -39,11 +40,10 @@ export const NFTCard = ({ nft }:any) => {
           /> */}
         </div>
         <div className="card-actions justify-end">
-          <button
-            className="btn btn-secondary btn-md px-8 tracking-wide"
+          <ButtonStyle
           >
             Send
-          </button>
+          </ButtonStyle>
         </div>
       </div>
     </div>