diff --git a/src/components/Faq.css b/src/components/Faq.css index 5694b45..df2aba5 100644 --- a/src/components/Faq.css +++ b/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; } diff --git a/src/index.css b/src/index.css index cdd05fa..a745175 100644 --- a/src/index.css +++ b/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; } diff --git a/src/pages/GiftPage.css b/src/pages/GiftPage.css index 7a27b52..850958e 100644 --- a/src/pages/GiftPage.css +++ b/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; +} diff --git a/src/pages/GiftPage.tsx b/src/pages/GiftPage.tsx index 5530f37..2764ba5 100644 --- a/src/pages/GiftPage.tsx +++ b/src/pages/GiftPage.tsx @@ -111,9 +111,9 @@ function GiftForm({ errorCallback }: ErrMsgCallbackAsProps) { return ( <> +

{GiftPageContent.header}

+

{GiftPageContent.headerParagraph}

-

{GiftPageContent.header}

-

{GiftPageContent.headerParagraph}

diff --git a/src/pages/Page.css b/src/pages/Page.css index dfefd7d..8964af1 100644 --- a/src/pages/Page.css +++ b/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,11 +35,9 @@ .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 { @@ -62,7 +45,6 @@ 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; } diff --git a/src/pages/RedeemPage.css b/src/pages/RedeemPage.css index 24df845..d320e1f 100644 --- a/src/pages/RedeemPage.css +++ b/src/pages/RedeemPage.css @@ -4,6 +4,5 @@ .redeem-info h2 { font-family: Wavehaus-Extra; - font-size: 1.5rem; margin: 1rem 0 0; } diff --git a/src/pages/RedeemPage.tsx b/src/pages/RedeemPage.tsx index e8a2435..be165ff 100644 --- a/src/pages/RedeemPage.tsx +++ b/src/pages/RedeemPage.tsx @@ -62,48 +62,10 @@ function RedeemForm({ errorCallback }: ErrMsgCallbackAsProps) {

Redeem Your Gift of Storage Credits

-
-

- If you're new to ArDrive, here are a few resources to get you - started: -

- -
-
-

Get Started:

-
    -
  • - - Step 1:{" "} - - Get a Wallet - - -
  • -
  • - Step 2: Enter the wallet address here -
  • -
  • - Step 3: Enter your gift code and email address -
  • -
- -

- Need help? Head to{" "} - Help Center -

-
+

+ If you do not have an Arweave wallet, you can create one in{" "} + ArDrive App. +

-
-

- - If you do not have an Arweave wallet, you can create one in{" "} - ArDrive App. - +
+

+ If you're new to ArDrive, here are a few resources to get you started: +

+ + +

+ Need help? Head to the{" "} + Help Center +

);