feat: fixed styles issue, enhancend some styles, added container clas…

…s, added D_D favicon.ico file
Developer-DAO · Nov 3, 2023 · 36a8cf3 · 36a8cf3
1 parent ee8bdb3
commit 36a8cf3
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 312 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,3 @@
+NEXT_PUBLIC_WALLETCONNECTCLOUD_PROJECT_ID=""
+
+NEXT_PUBLIC_TIERNFT_CONTRACT_ADDRESS=""
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -81,7 +81,7 @@ export default function Home() {
   }, [tokenData, tokenURI]);
 
   return (
-    <>
+    <div className={styles.container}>
       <Head>
         <title>NFT Minter</title>
         <meta
@@ -91,15 +91,15 @@ export default function Home() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <header className="header">
+      <header style={header}>
         <h1>TierNFTs</h1>
         <ConnectButton />
       </header>
       {isUserConnected ? (
         <main className={styles.main}>
-          <div className="NFTFlex">
-            <div className="NFTCard">
-              Tier 0
+          <div style={NFTFlex}>
+            <div style={NFTCard}>
+              <h2> Tier 0</h2>
               <Image
                 src="/nfts/0_basic.svg"
                 width="200"
@@ -109,14 +109,14 @@ export default function Home() {
               <button
                 value="0.01"
                 onClick={(e) => mintToken(e)}
-                className="NFTMint"
+                style={NFTMint}
                 disabled={isMintLoading}
               >
                 Mint
               </button>
             </div>
-            <div className="NFTCard">
-              Tier 1
+            <div style={NFTCard}>
+              <h2> Tier 1</h2>
               <Image
                 src="/nfts/1_medium.svg"
                 width="200"
@@ -126,14 +126,14 @@ export default function Home() {
               <button
                 value="0.02"
                 onClick={(e) => mintToken(e)}
-                className="NFTMint"
+                style={NFTMint}
                 disabled={isMintLoading}
               >
                 Mint
               </button>
             </div>
-            <div className="NFTCard">
-              Tier 2
+            <div style={NFTCard}>
+              <h2>Tier 2</h2>
               <Image
                 src="/nfts/2_premium.svg"
                 width="200"
@@ -143,7 +143,7 @@ export default function Home() {
               <button
                 value="0.05"
                 onClick={(e) => mintToken(e)}
-                className="NFTMint"
+                style={NFTMint}
                 disabled={isMintLoading}
               >
                 Mint
@@ -202,6 +202,91 @@ export default function Home() {
           <div>Please connect your wallet.</div>
         </main>
       )}
-    </>
+    </div>
   );
 }
+
+const header = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  paddingTop: "20px",
+  paddingLeft: "50px",
+  paddingRight: "50px",
+};
+
+const NFTFlex = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-evenly",
+  gap: "50px",
+};
+
+const NFTCard = {
+  display: "flex",
+  flexDirection: "column",
+  border: "2px solid white",
+  borderRadius: "10px",
+  padding: "20px",
+  alignItems: "center",
+  gap: "10px",
+  fontWeight: "bold",
+};
+
+const NFTMint = {
+  fontWeight: "700",
+  padding: "5px 20px",
+  border: "2px solid white",
+  color: "white",
+  backgroundColor: "black",
+  borderRadius: "5px",
+  cursor: "pointer",
+};
+
+const modal = {
+  position: "fixed",
+  left: "0",
+  top: "0",
+  right: "0",
+  bottom: "0",
+  backgroundColor: "rgba(0, 0, 0, 0.8)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  zIndex: "1",
+};
+
+const modalContent = {
+  backgroundColor: "#fff",
+  padding: "10px 30px",
+  borderRadius: "16px",
+  color: "#000",
+};
+
+const modalBody = {
+  padding: "20px",
+  borderTop: "1px solid #eee",
+  borderBottom: "1px solid #eee",
+};
+
+const modalFooter = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "10px",
+  padding: "20px",
+  justifyContent: "space-evenly",
+};
+
+const modalButton = {
+  padding: "10px 20px",
+  backgroundColor: "#fff",
+  color: "#666",
+  border: "0",
+  borderRadius: "10px",
+  fontSize: "18px",
+  fontWeight: "700",
+  boxShadow:
+    "0 0.2em 0.4em 0 rgba(0, 0, 0, 0.2), 0 0.3em 1em 0 rgba(0, 0, 0, 0.19)",
+  cursor: "pointer",
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		NEXT_PUBLIC_WALLETCONNECTCLOUD_PROJECT_ID=""

		NEXT_PUBLIC_TIERNFT_CONTRACT_ADDRESS=""