From 9e942bb5604cefd55956af4e09c1579415430a6f Mon Sep 17 00:00:00 2001
From: Bruno Bernardino <me@brunobernardino.com>
Date: Thu, 3 Dec 2020 16:57:21 +0000
Subject: [PATCH] UI Tweaks to buttons and labels

---
 components/Button/style.scss    | 12 ++++++------
 components/Layout/Footer.scss   |  1 +
 components/Panels/Budgets.tsx   |  2 ++
 components/Panels/Expenses.tsx  |  2 ++
 components/TextInput/style.scss |  6 +++++-
 styles/__variables.scss         |  1 +
 6 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/components/Button/style.scss b/components/Button/style.scss
index ddae855..2aa224f 100644
--- a/components/Button/style.scss
+++ b/components/Button/style.scss
@@ -35,11 +35,11 @@ button.Button {
 
 .Button {
   color: $color-white;
-  font-size: 1.5rem;
-  line-height: 1.8rem;
+  font-size: 1.3rem;
+  line-height: 1.5rem;
   margin: 0 auto;
   text-align: center;
-  padding: 1.3rem 1.8rem;
+  padding: 1rem 1.3rem;
   border-radius: 5px;
   cursor: pointer;
   text-decoration: none;
@@ -48,7 +48,7 @@ button.Button {
   position: relative;
   background-size: 100%;
   transition: all $transition-speed ease-in;
-  border: 1px solid $color-background;
+  border: none;
 
   &:focus,
   &:hover {
@@ -65,10 +65,10 @@ button.Button {
   }
 
   &--secondary {
-    background-color: $color-background;
+    background-color: $color-light-gray;
 
     @media (prefers-color-scheme: dark) {
-      background-color: $color-text;
+      background-color: $color-text-gray;
     }
 
     &:focus,
diff --git a/components/Layout/Footer.scss b/components/Layout/Footer.scss
index af67764..52cb96a 100644
--- a/components/Layout/Footer.scss
+++ b/components/Layout/Footer.scss
@@ -42,6 +42,7 @@
     text-align: left;
     line-height: 1.4em;
     font-size: 0.9em;
+    text-align: center;
 
     @media #{$bigger-screen} {
       margin: 1em;
diff --git a/components/Panels/Budgets.tsx b/components/Panels/Budgets.tsx
index cdc5703..3d73a77 100644
--- a/components/Panels/Budgets.tsx
+++ b/components/Panels/Budgets.tsx
@@ -20,6 +20,8 @@ const Container = styled.section`
   flex-direction: column;
   flex: 1;
   margin: 0 10px;
+  max-height: 80vh;
+  overflow: auto;
 `;
 
 const AddButton = styled(Button)`
diff --git a/components/Panels/Expenses.tsx b/components/Panels/Expenses.tsx
index 3a4db07..c32e4c2 100644
--- a/components/Panels/Expenses.tsx
+++ b/components/Panels/Expenses.tsx
@@ -15,6 +15,8 @@ const Container = styled.section`
   display: flex;
   flex-direction: column;
   flex: 1;
+  max-height: 80vh;
+  overflow: auto;
 `;
 
 const FiltersContainer = styled.section`
diff --git a/components/TextInput/style.scss b/components/TextInput/style.scss
index df1ca6b..01261bb 100644
--- a/components/TextInput/style.scss
+++ b/components/TextInput/style.scss
@@ -10,7 +10,11 @@ $transition-speed: 140ms;
     text-transform: uppercase;
     font-weight: 500;
     display: block;
-    font-size: 0.9rem;
+    font-size: 1.3rem;
+
+    @media (prefers-color-scheme: dark) {
+      color: $color-link-hover;
+    }
   }
 
   &__input {
diff --git a/styles/__variables.scss b/styles/__variables.scss
index 63c89cd..2a7fe33 100644
--- a/styles/__variables.scss
+++ b/styles/__variables.scss
@@ -3,6 +3,7 @@ $color-text: #222;
 $color-text-button: #222;
 $color-text-gray: #333;
 $color-white: #fff;
+$color-light-gray: #999;
 
 $color-link: #222;
 $color-link-hover: #555;