Fix button and center

2 files changed, 12 insertions, 10 deletions

diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx
index 7b2e33141..9ffd87e91 100644
--- a/packages/dev-tools-pages/ts/components/ui/button.tsx
+++ b/packages/dev-tools-pages/ts/components/ui/button.tsx
@@ -31,28 +31,25 @@ export const Button = styled(PlainButton)`
     border-radius: 3px;
     outline: none;
     width: ${props => props.width};
-    background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
-    border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')};
+    background-color: ${props => (props.backgroundColor ? props.backgroundColor : 'none')};
+    border: ${props => (props.borderColor ? `1px solid ${props.backgroundColor}` : 'none')};
     &:hover {
         background-color: ${props =>
-            !props.isDisabled
-                ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
-                : ''} !important;
+            !props.isDisabled ? darken(darkenOnHoverAmount, props.backgroundColor) : ''} !important;
     }
     &:active {
-        background-color: ${props =>
-            !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
+        background-color: ${props => (!props.isDisabled ? darken(darkenOnActiveAmount, props.backgroundColor) : '')};
     }
     &:disabled {
         opacity: 0.5;
     }
     &:focus {
-        background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
+        background-color: ${props => saturate(saturateOnFocusAmount, props.backgroundColor)};
     }
 `;
 
 Button.defaultProps = {
-    backgroundColor: 'black',
+    backgroundColor: 'red',
     width: 'auto',
     isDisabled: false,
     padding: '1em 2.2em',
diff --git a/packages/dev-tools-pages/ts/pages/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx
index e89cfa665..a70a9de46 100644
--- a/packages/dev-tools-pages/ts/pages/landing.tsx
+++ b/packages/dev-tools-pages/ts/pages/landing.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import { Button } from '../components/ui/button';
 import { Container } from '../components/ui/container';
+import { Text } from '../components/ui/text';
 
 interface LandingProps {}
 
@@ -15,7 +16,11 @@ export class Landing extends React.Component<LandingProps, LandingState> {
     public render(): React.ReactNode {
         return (
             <Container id="landing" className="clearfix">
-                <Button>Click me!</Button>
+                <Container className="mx-auto p4" width="200px">
+                    <Button>
+                        <Text fontColor="white">Click me!</Text>
+                    </Button>
+                </Container>
             </Container>
         );
     }