From 6460c879bc99c24e2c33db78ad23b0fbc57478e4 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Sat, 20 Oct 2018 11:44:23 +0200
Subject: [PATCH] style: minor style fixes

---
 app/components/UI/Button.js                            |  3 ---
 app/components/UI/GlobalStyle.js                       |  3 +--
 app/components/UI/Page.js                              | 10 +++++++---
 app/themes/dark.js                                     |  6 ++++++
 app/themes/light.js                                    |  6 ++++++
 .../components/UI/__snapshots__/Button.spec.js.snap    |  4 ----
 .../unit/components/UI/__snapshots__/Page.spec.js.snap |  7 +++----
 7 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/app/components/UI/Button.js b/app/components/UI/Button.js
index 510b4b7c..97214bdd 100644
--- a/app/components/UI/Button.js
+++ b/app/components/UI/Button.js
@@ -10,9 +10,6 @@ const Wrapper = styled(BaseButton)`
   border-radius: 5;
   font-weight: normal;
   line-height: '18px';
-  &:focus {
-    box-shadow: 0 0 3px ${props => props.theme.lightningOrange};
-  }
   &:disabled {
     opacity: 0.5;
   }
diff --git a/app/components/UI/GlobalStyle.js b/app/components/UI/GlobalStyle.js
index 9f14982f..1e67fdd4 100644
--- a/app/components/UI/GlobalStyle.js
+++ b/app/components/UI/GlobalStyle.js
@@ -11,11 +11,10 @@ const GlobalStyle = createGlobalStyle`
     position: relative;
     box-sizing: border-box;
     overflow-y: hidden;
-    margin: 0;
-    padding: 0;
     -webkit-font-smoothing: antialiased;
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
     font-family: 'Roboto', Arial, Helvetica, sans-serif;
+    font-size: 13px;
   }
 `
 
diff --git a/app/components/UI/Page.js b/app/components/UI/Page.js
index e68d77cf..0d4f1f7e 100644
--- a/app/components/UI/Page.js
+++ b/app/components/UI/Page.js
@@ -12,9 +12,13 @@ const Page = props => (
     {...props}
     as="article"
     alignItems="stretch"
-    width="950"
-    bg="white"
-    css={{ height: '600px', 'min-height': '700px', 'min-width': '950px' }}
+    bg="darkestBackground"
+    css={{
+      'min-height': '700px',
+      'min-width': '950px',
+      'overflow-y': 'hidden',
+      'box-shadow': '0 3px 4px 0 rgba(30, 30, 30, 0.5)'
+    }}
   />
 )
 
diff --git a/app/themes/dark.js b/app/themes/dark.js
index 6b2f1bca..af09a51d 100644
--- a/app/themes/dark.js
+++ b/app/themes/dark.js
@@ -17,6 +17,9 @@ const buttons = {
     color: colors.lightningOrange,
     '&:hover:enabled': {
       backgroundColor: colors.highlight
+    },
+    '&:focus': {
+      backgroundColor: colors.highlight
     }
   },
   primary: {
@@ -28,6 +31,9 @@ const buttons = {
     color: colors.white,
     '&:hover:enabled': {
       color: colors.lightningOrange
+    },
+    '&:focus': {
+      color: colors.lightningOrange
     }
   }
 }
diff --git a/app/themes/light.js b/app/themes/light.js
index 6a786221..e972abeb 100644
--- a/app/themes/light.js
+++ b/app/themes/light.js
@@ -17,6 +17,9 @@ const buttons = {
     color: colors.lightningOrange,
     '&:hover:enabled': {
       backgroundColor: colors.highlight
+    },
+    '&:focus': {
+      backgroundColor: colors.highlight
     }
   },
   primary: {
@@ -28,6 +31,9 @@ const buttons = {
     color: colors.lightningOrange,
     '&:hover:enabled': {
       color: colors.black
+    },
+    '&:focus': {
+      color: colors.black
     }
   }
 }
diff --git a/test/unit/components/UI/__snapshots__/Button.spec.js.snap b/test/unit/components/UI/__snapshots__/Button.spec.js.snap
index 8d5b99b3..cd177f96 100644
--- a/test/unit/components/UI/__snapshots__/Button.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Button.spec.js.snap
@@ -33,10 +33,6 @@ exports[`component.UI.Button should render correctly 1`] = `
   line-height: '18px';
 }
 
-.c0:focus {
-  box-shadow: 0 0 3px;
-}
-
 .c0:disabled {
   opacity: 0.5;
 }
diff --git a/test/unit/components/UI/__snapshots__/Page.spec.js.snap b/test/unit/components/UI/__snapshots__/Page.spec.js.snap
index e3a0d285..90e4a9c7 100644
--- a/test/unit/components/UI/__snapshots__/Page.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Page.spec.js.snap
@@ -2,11 +2,11 @@
 
 exports[`component.UI.Page should render correctly 1`] = `
 .c0 {
-  width: 950;
-  background-color: white;
-  height: 600px;
+  background-color: darkestBackground;
   min-height: 700px;
   min-width: 950px;
+  overflow-y: hidden;
+  box-shadow: 0 3px 4px 0 rgba(30,30,30,0.5);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -19,6 +19,5 @@ exports[`component.UI.Page should render correctly 1`] = `
 
 <article
   className="c0"
-  width="950"
 />
 `;