Merge pull request #16 from citydaoproject/mnorman-issue3

chore: [#3] better icons, better NFT image, and green checkbox

components/ClaimModal/ClaimModal.tsx

@@ -38,11 +38,17 @@ export const ClaimModal: FC<ClaimModalProps> = ({ eligibleNftsCount, onClaim, on
           <input
             id="cb1"
             type="checkbox"
+            style={{ display: 'none' }}
             checked={isTermsAccepted}
             onChange={(e) => setIsTermsAccepted(e.target.checked)}
           />
-          <label htmlFor="cb1">
-            Accept Parcel 0{' '}
+          <label htmlFor="cb1" className="checkbox-label">
+            {isTermsAccepted ? (
+              <img className="checkbox-icon" src="/icons/icon_check.png" alt="Checked" />
+            ) : (
+              <img className="checkbox-icon" src="/icons/icon_unchecked.png" alt="Unchecked" />
+            )}
+            &nbsp;Accept Parcel 0{' '}
             <a target="_blank" href={AGREEMENT_IPFS_URL} className="text-primary" rel="noreferrer">
               Terms & Conditions
             </a>

components/MintedNftsView/MintedNftsView.tsx

@@ -12,7 +12,12 @@ export const MintedNftsView: FC<MintedNftsViewProps> = ({ navigateToHome, number
     <br />
     <div className="mintedNftImagesWrapper">
       {[...Array(numberOfNfts)].map((value: undefined, index: number) => (
-        <img className="mintedNftImage" alt="Parcel 0 NFT Art" key={index} src="/citydao-parcel-0-NFT-Art-sm2.png" />
+        <img
+          className="mintedNftImage"
+          alt="Parcel 0 NFT Art"
+          key={index}
+          src="/citydao-parcel-0-claimed-NFT-art.png"
+        />
       ))}
     </div>
   </div>

components/ParcelProperty/ParcelProperty.tsx

@@ -5,20 +5,21 @@ export type ParcelPropertyProps = {
   value: string;
   tooltip?: string;
   iconPath: string;
+  altText?: string;
 };
-export const ParcelProperty: FC<ParcelPropertyProps> = ({ name, value, tooltip, iconPath }) => (
+export const ParcelProperty: FC<ParcelPropertyProps> = ({ name, value, tooltip, iconPath, altText }) => (
   <div className="property">
     <div className="leftSide">
       <div className="propName">
         {tooltip && (
           <div data-multiline={true} data-tip={tooltip}>
-            {name} <img src="/icons/info.png" alt="" />
+            {name} <img src="/icons/info.png" alt="info" />
           </div>
         )}{' '}
         {!tooltip && name}
       </div>
       <div className="propVal">{value}</div>
     </div>
-    <img src={iconPath} alt="" />
+    <img src={iconPath} alt={altText} width="42px" />
   </div>
 );

containers/ParcelProperties/index.tsx

@@ -1 +1 @@
-export * from "./ParcelProperties";
+export * from './ParcelProperties';

pages/index.tsx

@@ -72,7 +72,7 @@ const Home: NextPage = () => {
 
     const proof = merkleTree.getHexProof(hashToken(address!, allowance));
     if (allowance > walletAlreadyClaimed) {
-      const res = await parcelNFT.allowListMint(allowance, allowance, proof);
+      const res = await parcelNFT.allowListMint(allowance - walletAlreadyClaimed, allowance, proof);
       console.debug('response', res);
 
       await refetch();
@@ -127,10 +127,10 @@ const Home: NextPage = () => {
                 <div className="address">70 HAIL BASIN RD, POWELL, WYOMING</div>
               </div>
               <div className="message-box">
-                <ClaimPeriodCountdown claimPeriodStart={claimPeriodStart} claimPeriodEnd={claimPeriodEnd} />
-                <br />
                 {address && (
                   <>
+                    <ClaimPeriodCountdown claimPeriodStart={claimPeriodStart} claimPeriodEnd={claimPeriodEnd} />
+                    <br />
                     {`You are connected, ${shortenWalletAddress(address)}, `}
                     <a href="#" onClick={onWalletDisconnect}>
                       disconnect
@@ -168,7 +168,11 @@ const Home: NextPage = () => {
             <ParcelProperties parcelProperties={parcelProperties} />
           </div>
         </div>
-        <ClaimModal onClaim={claim} eligibleNftsCount={allowance} onCancel={handleCloseClaimModal} />
+        <ClaimModal
+          onClaim={claim}
+          eligibleNftsCount={allowance - walletAlreadyClaimed}
+          onCancel={handleCloseClaimModal}
+        />
         <ClaimSuccessModal eligibleNftsCount={allowance} />
         <NotEligibleModal />
         <ReactTooltip backgroundColor="black" />

parcel-properties.ts

@@ -6,35 +6,41 @@ export const getParcelProperties = (numberOfMinted: number, numberOfMaxNftToMint
     value: `${numberOfMinted}/${numberOfMaxNftToMint}`,
     tooltip: 'The number of NFTs will depend on how many Parcel 0 NFTs are minted.',
     iconPath: '/icons/icon_plot.png',
+    altText: 'Plot',
   },
   {
     name: 'PARCEL SIZE',
     value: '40 ACRES',
     iconPath: '/icons/icon_40.png',
+    altText: '40',
   },
   {
     name: 'PARCEL TYPE',
     value: 'VACANT LAND',
     iconPath: '/icons/icon_v.png',
+    altText: 'V',
   },
   {
     name: 'PARCEL PURPOSE',
     value: 'CONSERVATION',
     tooltip:
       'Parcel 0 is currently planned for conservation. CityDAO’ may <br/>open up more possibilities for Parcel 0, for example, building a <br/>structure or a monument.',
     iconPath: '/icons/icon_tree.png',
+    altText: 'Tree',
   },
   {
     name: 'NFT UTILITY',
     value: 'GOVERNANCE',
     tooltip: 'Parcel 0 NFT holders will get to vote and execute on <br/>Parcel 0 Improvement Projects.',
     iconPath: '/icons/icon_g.png',
+    altText: 'G',
   },
   {
     name: 'PARCEL ACCESS',
     value: 'PERMITTED',
     tooltip:
       'Parcel 0 NFT holders can visit Parcel 0. CityDAO or Parcel 0 <br/>holders may define reasonable policies to manage visitation.',
     iconPath: '/icons/icon_check.png',
+    altText: 'Checkmark',
   },
 ];

styles/globals.scss

@@ -71,7 +71,7 @@ main {
   padding-left: 56px;
   background-image: url("/../citydao-parcel-0-logo.png");
   background-repeat: no-repeat;
-  
+
   @media (max-width:1024px) {
     padding-left: 0;
     background-position-x: center;
@@ -402,7 +402,17 @@ button.border-button {
       top: 0;
     }
   }
+
+  .checkbox-label {
+    cursor: pointer;
+  }
+
+  .checkbox-icon {
+    width: 18px;
+    height: 18px;
+  }
 }
+
 .parcel-art-container {
   margin-top: 36px;
   margin-bottom: 24px;
@@ -496,4 +506,4 @@ button.border-button {
 }
 .walletconnect-qrcode__base {
   padding-top: 72px !important;
-}
+}