From 65af7e3997cd3285506dce73ed505e12f7f14d6a Mon Sep 17 00:00:00 2001
From: Alex Kern <alex@kern.io>
Date: Thu, 20 Feb 2020 17:02:11 -0800
Subject: [PATCH] Adjust formatting for mobile devices (#117)

---
 src/components/App.js |  2 +-
 src/index.styl        | 32 ++++++++++++++++----------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 65bc43a..ba4d6fe 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -62,7 +62,7 @@ export default class App extends React.Component {
           </div>
           <footer className="footer">
             <p>
-              <strong>Like FilePizza?</strong> Support it&apos;s development with a <a href="https://commerce.coinbase.com/checkout/247b6ffe-fb4e-47a8-9a76-e6b7ef83ea22">donation in crypto</a>.
+              <strong>Like FilePizza?</strong> Support it&apos;s development! <a href="https://commerce.coinbase.com/checkout/247b6ffe-fb4e-47a8-9a76-e6b7ef83ea22" className="donate-button">donate</a>
             </p>
 
             <p className="byline">
diff --git a/src/index.styl b/src/index.styl
index 86697be..127e65f 100644
--- a/src/index.styl
+++ b/src/index.styl
@@ -3,10 +3,10 @@
 beige = #F9F2E7
 dark-gray = #333
 gray = #777
-green = #8FBE00
+green = #3F6B29
 light-blue = #40C0CB
 light-gray = #EEE
-light-green = #AEE239
+light-green = #4BB74C
 light-red = #E23430
 light-yellow = #FFE476
 red = #B11C17
@@ -166,7 +166,7 @@ small {
 
     .spinner-image {
         display: block;
-        height: 150px;
+        width: 40%;
     }
 
     .spinner-name {
@@ -292,9 +292,9 @@ small {
 
 .download-button {
     display: block
-    box-shadow: inset 0 1px 1px light-green
+    box-shadow: inset 0 1px 1px green
     padding: 20px
-    background: green
+    background: light-green
     border: none
     color: white
     width: calc(100vw - 40px)
@@ -307,19 +307,19 @@ small {
     text-transform: uppercase
 
     &:hover, &:focus {
-        box-shadow: inset 0 1px 1px green
-        background: light-green
+        box-shadow: inset 0 1px 1px lighten(green, 10%)
+        background: lighten(light-green, 10%)
     }
 
     &:active {
-        background: green
+        background: light-green
     }
 }
 
 .progress-bar {
     height: 60px
     overflow: hidden
-    background: green
+    background: light-green
     transition: all 1s ease
     width: calc(100vw - 40px)
     max-width: 800px
@@ -329,8 +329,8 @@ small {
     .progress-bar-inner {
         float: left
         height: 100%
-        background: green
-        box-shadow: inset 0 1px 1px light-green
+        background: light-green
+        box-shadow: inset 0 1px 1px green
         overflow: hidden
         border-radius: 4px
     }
@@ -400,20 +400,20 @@ small {
 }
 
 .donate-button {
-    border: 2px solid red
+    border: 2px solid green
     border-radius: 4px
     padding: 2px 5px
     margin-right: 10px
-    background: yellow
+    background: light-green
     display: inline-block
     cursor: pointer
     transition: all 0.25s ease
     font: 12px/1 "Quicksand", sans-serif
     color: white
+    text-decoration: none
 
     &:hover, &:active {
-        border-color: yellow
-        background: white
-        color: red
+        border-color: light-green
+        color: white
     }
 }