UI Tweaks to buttons and labels

BrunoBernardino · Dec 3, 2020 · 9e942bb · 9e942bb
1 parent fc711df
commit 9e942bb
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;