style: update spacing PE-5161

src/index.css

@@ -1,5 +1,5 @@
 :root {
-  font-family: Wavehaus-Semi, sans-serif;
+  font-family: Wavehaus-Book, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
@@ -19,6 +19,30 @@
   --dark-gray: #171717;
   --gray: #7d7d7d;
   --off-gray: #787878;
+
+  --mobile: 640px;
+  --tablet: 800px;
+  --desktop: 1200px;
+
+  font-size: 0.75rem;
+}
+
+@media (min-width: 640px) {
+  :root {
+    font-size: 0.9rem;
+  }
+}
+
+@media (min-width: 800px) {
+  :root {
+    font-size: 1.2rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  :root {
+    font-size: 1.4rem;
+  }
 }
 
 /* Firefox */
@@ -35,18 +59,6 @@ input[type="number"] {
   }
 }
 
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-  font-family: Wavehaus-Book;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
 .ardrive-logo:hover {
   filter: drop-shadow(0 0 2em var(--ardrive-red));
 }

src/pages/GiftPage.content.ts

@@ -0,0 +1,9 @@
+export const GiftPageContent = {
+  header: "Gift Storage Credits",
+  headerParagraph:
+    "Credits can be redeemed for a secure and permanent place to store precious memories such as photos, videos, docs and more.",
+  recipientParagraph:
+    "Your recipient will receive an email with instructions on how to redeem and use their gift of permanent storage.",
+  recipientParagraph2:
+    "If you'd prefer them to receive the email at another time, please enter your own email address and plan to forward the email when you'd like the recipient to receive your gift.",
+};

src/pages/GiftPage.tsx

@@ -14,6 +14,8 @@ import { ErrMsgCallbackAsProps } from "../types";
 import Faq from "../components/Faq";
 import { useLocation } from "react-router";
 
+import { GiftPageContent } from "./GiftPage.content";
+
 const maxUSDAmount = 10000;
 const minUSDAmount = 5;
 
@@ -110,11 +112,8 @@ function GiftForm({ errorCallback }: ErrMsgCallbackAsProps) {
   return (
     <>
       <form className="form">
-        <h1>Gift Credits to a friend.</h1>
-        <p>
-          Credits can be used to upload photos, music, docs, or any other file
-          that needs permanent safe-keeping
-        </p>
+        <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">
@@ -212,10 +211,8 @@ function GiftForm({ errorCallback }: ErrMsgCallbackAsProps) {
             }}
           />
 
-          <p>
-            Your recipient will receive an email with instructions on how to
-            redeem and use their gift of permanent storage
-          </p>
+          <p>{GiftPageContent.recipientParagraph}</p>
+          <p>{GiftPageContent.recipientParagraph2}</p>
         </div>
 
         <div className="form-section">

src/pages/Page.css

@@ -1,3 +1,13 @@
+#root {
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 #version-footer {
   font-family: "Wavehaus-Bold";
   font-size: 14px;
@@ -28,14 +38,13 @@
   justify-content: center;
   margin: 0rem 2rem;
   width: 100%;
-  max-width: 28rem;
+  max-width: 32rem;
 }
 
 .form-section {
   display: flex;
   flex-direction: column;
   align-items: left;
-  margin: 0.5rem 1rem;
   width: 100%;
 }
 

src/pages/RedeemPage.tsx

@@ -79,7 +79,7 @@ function RedeemForm({ errorCallback }: ErrMsgCallbackAsProps) {
         </div>
 
         <div className="form-section">
-          <label className="form-label">Redemption Code*</label>
+          <label className="form-label">Redemption ID*</label>
           <input
             type="text"
             className="form-input"