From bdf9d6d3ec4960cbaedd15f08508e20d1751d58d Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 26 Oct 2020 01:31:49 -0700
Subject: [PATCH] Update colors

---
 assets/scss/globals.scss          |  9 +++++++--
 src/components/App/index.scss     | 11 +++++++----
 src/components/Segment/index.scss |  9 ++++-----
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/assets/scss/globals.scss b/assets/scss/globals.scss
index 559abdc1..27955cd8 100644
--- a/assets/scss/globals.scss
+++ b/assets/scss/globals.scss
@@ -1,5 +1,10 @@
 $unit: 8px;
 
 // Colors
-$bg-color: #efefef;
-$text-color: #333;
\ No newline at end of file
+$grey-00: #444;
+$grey-10: #777;
+$grey-80: #E9E9E9;
+$grey-90: #F6F6F6;
+
+$blue: #61B3FF;
+$red: #FF6161;
\ No newline at end of file
diff --git a/src/components/App/index.scss b/src/components/App/index.scss
index 5481e6f8..3b98aec9 100644
--- a/src/components/App/index.scss
+++ b/src/components/App/index.scss
@@ -1,15 +1,15 @@
 @import '~meyer-reset-scss';
 
 html {
-    background: $bg-color;
+    background: $grey-80;
     font-size: 62.5%;
     padding: $unit * 2;
 }
 
 body {
     font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
-
     font-size: 1.4rem;
+    
     &.no-scroll {
         overflow: hidden;
     }
@@ -19,12 +19,15 @@ a {
     text-decoration: none;
 }
 
+button, input {
+    font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+
 h1, h2, h3, p {
-    color: $text-color;
+    color: $grey-00;
 }
 
 h1 {
-    font-size: 18px;
     font-size: 2.1rem;
     font-weight: 500;
     text-align: center;
diff --git a/src/components/Segment/index.scss b/src/components/Segment/index.scss
index a2ce12a0..3160ca70 100644
--- a/src/components/Segment/index.scss
+++ b/src/components/Segment/index.scss
@@ -1,22 +1,21 @@
 .Segment {
     border-radius: 4px;
-    color: #888;
+    color: $grey-10;
     cursor: pointer;
-    font-size: 16px;
     font-size: 1.4rem;
     font-weight: 500;
     min-width: 100px;
 
     &:hover label {
-      background: #f9f9f9;
-      color: #555;
+      background: $grey-90;
+      color: $grey-00;
     }
 
     & input {
       display: none;
 
       &:checked + label {
-        background: #2360C5;
+        background: $blue;
         color: white;
       }
     }