style: spacing and content updates PE-5234

src/components/Faq.css

@@ -1,8 +1,6 @@
 .faq {
   letter-spacing: 1.09px;
   width: 100%;
-  padding-top: 4rem;
-  max-width: 40rem;
 }
 
 @media (min-width: 640px) {
@@ -25,5 +23,4 @@
 
 .faq h2 {
   font-family: Wavehaus-Extra;
-  padding-bottom: 1rem;
 }

src/index.css

@@ -24,24 +24,27 @@
   --tablet: 800px;
   --desktop: 1200px;
 
-  font-size: 0.75rem;
+  font-size: 0.8rem;
+}
+
+body {
+  max-width: 42rem;
+  margin: 2rem auto;
 }
 
 @media (min-width: 640px) {
   :root {
-    font-size: 0.85rem;
+    font-size: 0.9rem;
   }
 }
-
 @media (min-width: 800px) {
   :root {
-    font-size: 1.1rem;
+    font-size: 1rem;
   }
 }
-
 @media (min-width: 1200px) {
   :root {
-    font-size: 1.25rem;
+    font-size: 1.1rem;
   }
 }
 
@@ -67,17 +70,22 @@ input[type="number"] {
   margin: 1rem 0;
   padding: 1rem 2rem;
   border-radius: 0.5rem;
-  font-size: 1rem;
   font-family: Wavehaus-Extra;
   color: var(--ardrive-red);
 }
 
 h1 {
   font-family: Wavehaus-Extra;
-  font-size: 2.15rem;
-  margin: 3rem 2rem 0rem 2rem;
 }
 
 p {
   text-align: left;
+  margin: 0.3rem 0rem;
+}
+
+button,
+input,
+select,
+textarea {
+  font-size: inherit;
 }

src/pages/GiftPage.css

@@ -19,7 +19,6 @@
   padding: 0.5rem 1rem;
   border: 1px solid var(--off-gray);
   border-radius: 0.5rem;
-  font-size: 1.2rem;
   font-family: Wavehaus-Semi;
   background-color: var(--dark-gray);
   color: var(--white);
@@ -58,14 +57,12 @@
 
 #dollar-sign {
   font-family: Wavehaus-Semi;
-  font-size: 1.2rem;
   padding: 0.5rem 1rem;
   border: none;
 }
 
 #usd-input {
   font-family: Wavehaus-Semi;
-  font-size: 1.2rem;
   width: 100%;
   margin: 0.5rem 0.5rem;
   border: none;
@@ -83,12 +80,27 @@
 #conversions {
   margin: 2rem 0 2rem 0;
   font-family: Wavehaus-Semi;
-  font-size: 1.5rem;
+  font-size: 1.25rem;
+}
+
+@media (min-width: 640px) {
+  #conversions {
+    font-size: 1.4rem;
+  }
+}
+@media (min-width: 800px) {
+  #conversions {
+    font-size: 1.6rem;
+  }
+}
+@media (min-width: 1200px) {
+  #conversions {
+    font-size: 1.75rem;
+  }
 }
 
 .conversion-amount {
   font-family: Wavehaus-Semi;
-  font-size: 1.75rem;
   margin: 0.25rem;
 }
 
@@ -101,7 +113,6 @@
   display: flex;
 
   margin: 1rem 0;
-  font-size: 1rem;
   font-family: Wavehaus-Semi;
 }
 
@@ -158,3 +169,7 @@ input[type="checkbox"]:hover {
     border-color: var(--black);
   }
 }
+
+#recipient-email {
+  margin-bottom: 0.5rem;
+}

src/pages/GiftPage.tsx

@@ -111,9 +111,9 @@ function GiftForm({ errorCallback }: ErrMsgCallbackAsProps) {
 
   return (
     <>
+      <h1>{GiftPageContent.header}</h1>
+      <p>{GiftPageContent.headerParagraph}</p>
       <form className="form">
-        <h1>{GiftPageContent.header}</h1>
-        <p>{GiftPageContent.headerParagraph}</p>
         <div className="form-section">
           <label className="form-label">Suggested USD amounts</label>
           <div className="suggested-amount-buttons">

src/pages/Page.css

@@ -10,7 +10,6 @@
 
 #version-footer {
   font-family: "Wavehaus-Bold";
-  font-size: 14px;
   letter-spacing: 0.82px;
   padding-top: 4rem;
 
@@ -19,26 +18,12 @@
   text-align: right;
 }
 
-@media (min-width: 800px) {
-  #version-footer {
-    font-size: 16px;
-  }
-}
-
-@media (min-width: 1200px) {
-  #version-footer {
-    font-size: 18px;
-  }
-}
-
 .form {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin: 0rem 2rem;
   width: 100%;
-  max-width: 32rem;
 }
 
 .form-section {
@@ -50,19 +35,16 @@
 
 .form-label {
   margin: 0.5rem 0.5rem 0.25rem 0.1rem;
-  font-size: 1.25rem;
   font-weight: bold;
   font-family: Wavehaus-Bold;
   text-align: left;
-  font-size: 1rem;
 }
 
 .form-input {
   width: 100%;
   padding: 0.5rem 1rem;
   border: 1px solid var(--off-gray);
   border-radius: 0.5rem;
-  font-size: 1.2rem;
   font-family: Wavehaus-Semi;
   box-sizing: border-box;
   background-color: var(--dark-gray);
@@ -75,13 +57,12 @@
 }
 
 .proceed-button {
-  margin: 2rem;
+  margin: 1.25rem;
   padding: 1rem 1.25rem;
   border: none;
   border-radius: 0.5rem;
   background-color: var(--ardrive-red);
   color: var(--white);
-  font-size: 1.25rem;
   font-family: Wavehaus-Bold;
   cursor: pointer;
 }

src/pages/RedeemPage.css

@@ -4,6 +4,5 @@
 
 .redeem-info h2 {
   font-family: Wavehaus-Extra;
-  font-size: 1.5rem;
   margin: 1rem 0 0;
 }

src/pages/RedeemPage.tsx

@@ -62,48 +62,10 @@ function RedeemForm({ errorCallback }: ErrMsgCallbackAsProps) {
       <h1>Redeem Your Gift of Storage Credits</h1>
 
       <form className="form">
-        <div className="form-section redeem-info">
-          <p>
-            If you're new to ArDrive, here are a few resources to get you
-            started:
-          </p>
-          <ul>
-            <li>
-              <a href="https://www.youtube.com/watch?v=d-a94nO92Ow">
-                What is ArDrive?
-              </a>
-            </li>
-            <li>
-              <a href="https://www.youtube.com/watch?v=51Gpg3-GFZw">
-                HOW TO: Upload with ArDrive Turbo
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div className="form-section redeem-info">
-          <h2>Get Started:</h2>
-          <ul>
-            <li>
-              <span>
-                Step 1:{" "}
-                <a href="https://www.youtube.com/watch?v=51Gpg3-GFZw">
-                  Get a Wallet
-                </a>
-              </span>
-            </li>
-            <li>
-              <span>Step 2: Enter the wallet address here</span>
-            </li>
-            <li>
-              <span>Step 3: Enter your gift code and email address</span>
-            </li>
-          </ul>
-
-          <p>
-            Need help? Head to{" "}
-            <a href="https://help.ardrive.io/hc/en-us">Help Center</a>
-          </p>
-        </div>
+        <p>
+          If you do not have an Arweave wallet, you can create one in{" "}
+          <a href={ardriveAppUrl}>ArDrive App</a>.
+        </p>
         <div className="form-section">
           <label className="form-label">Wallet Address</label>
           <input
@@ -155,12 +117,32 @@ function RedeemForm({ errorCallback }: ErrMsgCallbackAsProps) {
         </button>
       </form>
 
-      <div>
-        <br></br>
-        <span>
-          If you do not have an Arweave wallet, you can create one in{" "}
-          <a href={ardriveAppUrl}>ArDrive App</a>.
-        </span>
+      <div className="redeem-info">
+        <p>
+          If you're new to ArDrive, here are a few resources to get you started:
+        </p>
+        <ul>
+          <li>
+            <a href="https://www.youtube.com/watch?v=d-a94nO92Ow">
+              What is ArDrive?
+            </a>
+          </li>
+          <li>
+            <a href="https://www.youtube.com/watch?v=51Gpg3-GFZw">
+              Get a Wallet
+            </a>
+          </li>
+          <li>
+            <a href="https://www.youtube.com/watch?v=51Gpg3-GFZw">
+              HOW TO: Upload with ArDrive Turbo
+            </a>
+          </li>
+        </ul>
+
+        <p>
+          Need help? Head to the{" "}
+          <a href="https://help.ardrive.io/hc/en-us">Help Center</a>
+        </p>
       </div>
     </>
   );