From a6d7ea409a2f4cc83979cef0174c1c06805de445 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Fri, 24 May 2019 11:09:41 +0200
Subject: [PATCH] Unifies button styles for forms and app

---
 client/styles/abstracts/_placeholders.scss | 23 ----------------------
 client/styles/base/_base.scss              |  6 ++++++
 client/styles/components/_forms.scss       | 21 ++++++++++++++------
 3 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 3c6718eb..b7af3212 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -102,29 +102,6 @@
 	}
 }
 
-%forms-button {
-	@include themify() {
-		background-color: getThemifyVariable('form-button-background-color');
-		color: getThemifyVariable('form-button-color');
-		cursor: pointer;
-		border: 2px solid getThemifyVariable('form-button-color');
-		border-radius: 2px;
-		padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
-		line-height: 1;
-		margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
-		&:enabled:hover {
-			border-color: getThemifyVariable('form-button-background-hover-color');
-			background-color: getThemifyVariable('form-button-background-hover-color');
-			color: getThemifyVariable('form-button-hover-color');
-		}
-		&:enabled:active {
-			border-color: getThemifyVariable('form-button-background-active-color');
-			background-color: getThemifyVariable('form-button-background-active-color');
-			color: getThemifyVariable('form-button-active-color');
-		}
-	}
-}
-
 %preferences-button {
 	@extend %toolbar-button;
 	@include themify() {
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index 75ae3c76..2e839f24 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -42,12 +42,18 @@ input {
 	}
 }
 
+button[type="submit"],
 input[type="submit"] {
 	@include themify() {
 		@extend %button;
 	}
 }
 
+button[type="submit"]:disabled,
+input[type="submit"]:disabled {
+  cursor: not-allowed;
+}
+
 button {
 	@include themify() {
 		@extend %link;
diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
index 24853fb8..50a584fa 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -47,11 +47,18 @@
 }
 
 .form__input {
-  width: #{360 / $base-font-size}rem;
+  width: 100%;
+  min-width: #{360 / $base-font-size}rem;
   height: #{40 / $base-font-size}rem;
+  font-size: #{16 / $base-font-size}rem;
   @include themify() {
     color: getThemifyVariable('form-input-text-color');
-    border-color: getThemifyVariable('form-border-color');
+  }
+}
+
+.form__input::placeholder {
+  @include themify() {
+    color: getThemifyVariable('form-input-placeholder-text-color');
   }
 }
 
@@ -66,10 +73,12 @@
   }
 }
 
-.form input[type="submit"] {
-  @extend %forms-button;
+.form [type="submit"] {
+  @extend %button;
+  padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
+  margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
 }
 
-.form input[type="submit"]:disabled {
-  cursor: not-allowed;
+.form--inline [type="submit"] {
+  margin: 0 0 0 #{24 / $base-font-size}rem;
 }