Skip to content

Commit

Permalink
Merge pull request #9 from ardriveapp/PE-5234_design_updates
Browse files Browse the repository at this point in the history
style: spacing and content updates PE-5234
  • Loading branch information
fedellen authored Dec 15, 2023
2 parents a3f9a20 + e42516c commit 62a8210
Show file tree
Hide file tree
Showing 7 changed files with 71 additions and 89 deletions.
3 changes: 0 additions & 3 deletions src/components/Faq.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
.faq {
letter-spacing: 1.09px;
width: 100%;
padding-top: 4rem;
max-width: 40rem;
}

@media (min-width: 640px) {
Expand All @@ -25,5 +23,4 @@

.faq h2 {
font-family: Wavehaus-Extra;
padding-bottom: 1rem;
}
26 changes: 17 additions & 9 deletions src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand All @@ -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;
}
27 changes: 21 additions & 6 deletions src/pages/GiftPage.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}

Expand All @@ -101,7 +113,6 @@
display: flex;

margin: 1rem 0;
font-size: 1rem;
font-family: Wavehaus-Semi;
}

Expand Down Expand Up @@ -158,3 +169,7 @@ input[type="checkbox"]:hover {
border-color: var(--black);
}
}

#recipient-email {
margin-bottom: 0.5rem;
}
4 changes: 2 additions & 2 deletions src/pages/GiftPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
21 changes: 1 addition & 20 deletions src/pages/Page.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@

#version-footer {
font-family: "Wavehaus-Bold";
font-size: 14px;
letter-spacing: 0.82px;
padding-top: 4rem;

Expand All @@ -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 {
Expand All @@ -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);
Expand All @@ -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;
}
Expand Down
1 change: 0 additions & 1 deletion src/pages/RedeemPage.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,5 @@

.redeem-info h2 {
font-family: Wavehaus-Extra;
font-size: 1.5rem;
margin: 1rem 0 0;
}
78 changes: 30 additions & 48 deletions src/pages/RedeemPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
</>
);
Expand Down

0 comments on commit 62a8210

Please sign in to comment.