From ee5ae140c3f7d1cd564853e7a933a14333fc499e Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 11 Apr 2020 09:47:52 -0700
Subject: [PATCH] fix: Improve neutral button styling in dark mode

---
 app/components/Button.js | 6 ++----
 shared/styles/theme.js   | 2 ++
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/Button.js b/app/components/Button.js
index 569cc218..07a28cd2 100644
--- a/app/components/Button.js
+++ b/app/components/Button.js
@@ -57,9 +57,7 @@ const RealButton = styled.button`
       props.borderOnHover ? 'none' : 'rgba(0, 0, 0, 0.07) 0px 1px 2px'
     };
     border: 1px solid ${
-      props.borderOnHover
-        ? 'transparent'
-        : darken(0.1, props.theme.buttonNeutralBackground)
+      props.borderOnHover ? 'transparent' : props.theme.buttonNeutralBorder
     };
 
     svg {
@@ -68,7 +66,7 @@ const RealButton = styled.button`
 
     &:hover {
       background: ${darken(0.05, props.theme.buttonNeutralBackground)};
-      border: 1px solid ${darken(0.15, props.theme.buttonNeutralBackground)};
+      border: 1px solid ${props.theme.buttonNeutralBorder};
     }
 
     &:focus {
diff --git a/shared/styles/theme.js b/shared/styles/theme.js
index e4df7b96..9d743bbf 100644
--- a/shared/styles/theme.js
+++ b/shared/styles/theme.js
@@ -97,6 +97,7 @@ export const light = {
 
   buttonNeutralBackground: colors.white,
   buttonNeutralText: colors.almostBlack,
+  buttonNeutralBorder: darken(0.15, colors.white),
 
   tooltipBackground: colors.almostBlack,
   tooltipText: colors.white,
@@ -148,6 +149,7 @@ export const dark = {
 
   buttonNeutralBackground: colors.almostBlack,
   buttonNeutralText: colors.white,
+  buttonNeutralBorder: colors.slateDark,
 
   tooltipBackground: colors.white,
   tooltipText: colors.lightBlack,