style: minor style fixes

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;
   }

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;
   }
 `
 

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)'
+    }}
   />
 )
 

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
     }
   }
 }

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
     }
   }
 }

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;
 }

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"
 />
 `;