Add font family to Button component and use in Join0x component

2 files changed, 16 insertions, 13 deletions

diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 4c7d59839..1f88297de 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -7,6 +7,7 @@ export interface ButtonProps {
     className?: string;
     fontSize?: string;
     fontColor?: string;
+    fontFamily?: string;
     backgroundColor?: string;
     borderColor?: string;
     width?: string;
@@ -28,7 +29,7 @@ export const Button = styled(PlainButton)`
     border-radius: 6px;
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
     font-weight: 500;
-    font-family: 'Roboto';
+    font-family: ${props => props.fontFamily};
     width: ${props => props.width};
     background-color: ${props => props.backgroundColor};
     border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
@@ -44,6 +45,7 @@ Button.defaultProps = {
     fontSize: '12px',
     backgroundColor: colors.white,
     width: 'auto',
+    fontFamily: 'Roboto',
 };
 
 Button.displayName = 'Button';
diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx
index e7fdf3ce1..72cce3b89 100644
--- a/packages/website/ts/pages/jobs/join_0x.tsx
+++ b/packages/website/ts/pages/jobs/join_0x.tsx
@@ -1,8 +1,11 @@
 import { colors } from '@0xproject/react-shared';
 
-import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
 
+import { Button } from 'ts/components/ui/button';
+
+const BUTTON_TEXT = 'view open positions';
+
 export interface Join0xProps {
     onCallToActionClick: () => void;
 }
@@ -21,19 +24,17 @@ export const Join0x = (props: Join0xProps) => (
                 work remotely anywhere in the world to help create the infrastructure of a new tokenized economy.
             </div>
             <div className="py3">
-                <FlatButton
-                    label={'view open positions'}
+                <Button
+                    type="button"
                     backgroundColor={colors.black}
-                    labelStyle={{
-                        fontSize: 18,
-                        fontFamily: 'Roboto Mono',
-                        fontWeight: 'lighter',
-                        color: colors.white,
-                        textTransform: 'lowercase',
-                    }}
-                    style={{ width: 280, height: 62, borderRadius: 5 }}
+                    width="290px"
+                    fontColor={colors.white}
+                    fontSize="18px"
+                    fontFamily="Roboto Mono"
                     onClick={props.onCallToActionClick}
-                />
+                >
+                    {BUTTON_TEXT}
+                </Button>
             </div>
         </div>
     </div>