style: design tweaks PE-5161

ardriveapp · Dec 6, 2023 · 9ed2628 · 9ed2628
1 parent a1c4b8d
commit 9ed2628
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 41 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -3,7 +3,7 @@ name: Deploy to GitHub Pages
 on:
   push:
     branches:
-      - PE-5161_deploy
+      - PE-5161_gift_app_init
 
 jobs:
   deploy:

diff --git a/src/App.css b/src/App.css
@@ -1,32 +1,3 @@
-@font-face {
-  font-family: Wavehaus-Book;
-  src:
-    local(Wavehaus-Book),
-    url(fonts/Wavehaus/Wavehaus-66Book.woff) format(woff);
-}
-
-@font-face {
-  font-family: Wavehaus-Semi;
-  src:
-    local(Wavehaus-Semi),
-    url(fonts/Wavehaus/Wavehaus-95SemiBold.woff) format(woff);
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Wavehaus-Extra;
-  src:
-    local(Wavehaus-Extra),
-    url(fonts/Wavehaus/Wavehaus-158ExtraBold.woff) format(woff);
-}
-
-@font-face {
-  font-family: Wavehaus-Bold;
-  src:
-    local(Wavehaus-Bold),
-    url(fonts/Wavehaus/Wavehaus-128Bold.woff) format(woff);
-}
-
 #root {
   max-width: 1280px;
   margin: 0 auto;

diff --git a/src/GiftForm.css b/src/GiftForm.css
@@ -1,9 +1,3 @@
-h2 {
-  font-family: Wavehaus-Extra;
-  font-size: 1.75rem;
-  margin: 3.5rem;
-}
-
 .gift-form {
   display: flex;
   flex-direction: column;
@@ -13,6 +7,12 @@ h2 {
   max-width: 40rem;
 }
 
+.gift-form h1 {
+  font-family: Wavehaus-Extra;
+  font-size: 2.15rem;
+  margin: 3rem 2rem;
+}
+
 .form-section {
   display: flex;
   flex-direction: column;
@@ -118,7 +118,7 @@ textarea {
   margin: 2rem;
   padding: 1.5rem;
   border: none;
-  border-radius: 0.5rem;
+  border-radius: 1rem;
   background-color: var(--ardrive-red);
   color: var(--white);
   font-size: 1.25rem;
@@ -134,3 +134,17 @@ textarea {
   background-color: var(--off-gray);
   cursor: not-allowed;
 }
+
+@media (prefers-color-scheme: light) {
+  .form-input,
+  #usd-input,
+  #usd-form-input {
+    background-color: var(--white);
+  }
+
+  .form-input:focus,
+  #usd-input:focus,
+  #usd-form-input:focus-within {
+    border-color: var(--black);
+  }
+}
diff --git a/src/GiftForm.tsx b/src/GiftForm.tsx
@@ -97,7 +97,7 @@ export function GiftForm({ errorCallback }: GiftFormProps) {
 
   return (
     <form className="gift-form">
-      <h2>Gift credits to a friend.</h2>
+      <h1>Gift credits to a friend.</h1>
 
       <div className="form-section">
         <label className="form-label">USD amount*</label>
@@ -184,7 +184,8 @@ export function GiftForm({ errorCallback }: GiftFormProps) {
         onClick={(e) => handleSubmit(e)}
         disabled={!canSubmitForm}
       >
-        Proceed to Checkout
+        Proceed <br />
+        to Checkout
       </button>
     </form>
   );

diff --git a/src/index.css b/src/index.css
@@ -49,7 +49,6 @@ input[type="checkbox"] {
 input[type="checkbox"]:checked {
   background-color: var(--ardrive-red);
   border: none;
-  color: #fe0230;
 }
 
 input[type="checkbox"]:hover {
@@ -60,7 +59,7 @@ input[type="checkbox"]:hover {
 input[type="checkbox"]:checked::before {
   content: "\2713"; /* Unicode check mark character */
   font-size: 1.5rem;
-  color: #fff; /* Color of the check mark */
+  color: var(--white);
   position: absolute;
   transform: translate(10%, -10%);
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ name: Deploy to GitHub Pages @@
     on:
       push:
         branches:
-          - PE-5161_deploy
+          - PE-5161_gift_app_init
     jobs:
       deploy:
@@ Expand Down @@