From 96ddacae14e91837b2ccc7baece432c74709f9f5 Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Tue, 19 Jun 2018 18:09:52 +0200
Subject: [PATCH] Style content buttons

---
 app/styles/_buttons.scss | 78 +++++++++++++++++++++++-----------------
 app/styles/_colors.scss  |  1 +
 app/styles/app.scss      |  5 +++
 3 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/app/styles/_buttons.scss b/app/styles/_buttons.scss
index 170f256..6dad1ed 100644
--- a/app/styles/_buttons.scss
+++ b/app/styles/_buttons.scss
@@ -1,3 +1,44 @@
+button {
+  font-family: Open Sans, sans-serif;
+  font-size: 1rem;
+  color: #fff;
+  background-color: $dark-blue;
+  border: 1px solid $dark-blue;
+
+  &:hover, &:active {
+    background-color: lighten($dark-blue, 5%);
+  }
+
+  &.delete {
+    background-color: transparent;
+    border-color: $dark-red;
+    color: $dark-red;
+    svg { path { fill: $dark-red; }
+    }
+
+    &:hover {
+      background-color: $dark-red;
+      color: #fff;
+      svg { path { fill: #fff; } }
+    }
+  }
+
+  &.primary {
+    // main button
+  }
+
+  &.secondary {
+    background-color: transparent;
+    color: $dark-blue;
+
+    &:hover {
+      background-color: $dark-blue;
+      color: #fff;
+      svg { path { fill: #fff; } }
+    }
+  }
+}
+
 header {
 
   button, a.button {
@@ -9,14 +50,11 @@ header {
     background-color: #fff;
     color: $dark-grey-2;
     text-align: center;
-    font-size: 0.8rem;
     text-transform: uppercase;
 
     svg {
       height: 1rem;
-      path {
-        fill: $dark-grey-2;
-      }
+      path { fill: $dark-grey-2; }
     }
 
     &:hover {
@@ -30,28 +68,6 @@ header {
       }
     }
 
-    &.delete {
-      border-color: $dark-red;
-      color: $dark-red;
-
-      svg {
-        path {
-          fill: $dark-red;
-        }
-      }
-
-      &:hover {
-        background-color: $dark-red;
-        color: #fff;
-
-        svg {
-          path {
-            fill: #fff;
-          }
-        }
-      }
-    }
-
     &:disabled:not(.active),
     &:disabled:not(.active):hover {
       border-color: $dark-grey-3;
@@ -70,11 +86,7 @@ header {
       background-color: lighten($dark-grey-2, 10%);
       color: lighten($dark-grey-2, 10%);
 
-      svg {
-        path {
-          fill: #fff;
-        }
-      }
+      svg { path { fill: #fff; } }
     }
   }
 
@@ -115,7 +127,9 @@ header {
 
 main section.content {
   button {
-    padding: 0.3rem 0.5rem;
+    font-size: 0.86rem;
+    padding: 0.4rem 1rem;
+    border-radius: 3px;
   }
 
   button + button {
diff --git a/app/styles/_colors.scss b/app/styles/_colors.scss
index a0f68bf..5a99edf 100644
--- a/app/styles/_colors.scss
+++ b/app/styles/_colors.scss
@@ -4,6 +4,7 @@ $dark-grey-3: #aaa;
 $light-grey-1: #b5c3d1;
 $light-grey-2: #ececec;
 $dark-red: #8b0000;
+$dark-blue: #0067c7;
 
 body {
   background-color: #fff;
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 7745c37..83b27d6 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -3,6 +3,11 @@
 @import "colors";
 @import "layout";
 
+html {
+  font-family: Open Sans, sans-serif;
+  font-size: 15px;
+}
+
 body {
   background-color: white;
   font-size: 15px;