Added Button component, set the theme colors and fonts

src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from 'material-ui/Button';
+import Button from './components/Button';
 import Dialog, {
   DialogTitle,
   DialogContent,
@@ -47,7 +47,7 @@ class App extends React.Component {
             <DialogContentText>Hello World</DialogContentText>
           </DialogContent>
           <DialogActions>
-            <Button color="primary" onClick={this.handleClose}>
+            <Button type="flat" onClick={this.handleClose}>
               OK
             </Button>
           </DialogActions>
@@ -58,8 +58,11 @@ class App extends React.Component {
         <Typography variant="subheading" gutterBottom>
           Showcase App
         </Typography>
-        <Button variant="raised" color="secondary" onClick={this.handleClick}>
-          Test Popup
+        <Button type="primary" onClick={this.handleClick}>
+          Primary
+        </Button>
+        <Button type="secondary" onClick={this.handleClick}>
+          Secondary
         </Button>
       </div>
     );

src/App.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Nunito');
+@import url('https://fonts.googleapis.com/css?family=Nunito:600,700');
 @import './assets/sass/mixins.scss';
 
 body {

src/assets/sass/variables.scss

@@ -7,5 +7,5 @@ $copy: #A3A1AA;
 $main: black;
 
 // Font weights
-$normal: 500;
-$bold: 600;
+$normal: 600;
+$bold: 700;

src/components/Button/Button.scss

@@ -0,0 +1,35 @@
+@import '../../assets/sass/variables.scss';
+
+.button {
+  font-weight: 700 !important;
+  border-radius: 3px !important;
+  text-transform: capitalize !important;
+  box-shadow: none !important;
+
+  /** Primary Button **/
+  &.primary {
+    background: $success !important;
+    color: #FFFFFF !important;
+    font-size: 20px !important;
+    padding: 8px 42px !important;
+    box-shadow: 0 10px 15px rgba($success, 0.25) !important;
+
+    &:hover {
+      background: darken($success, 15%) !important;
+    }
+
+    &:active {
+      box-shadow: 0 5px 10px rgba($success, 0.2) !important;
+    }
+  }
+
+  /** Secondary Button **/
+  &.secondary {
+    background: transparent !important;
+    border: 2px solid $success !important;
+    font-size: 20px !important;
+    color: $success !important;
+    padding: 6px 40px !important;
+  }
+
+}

src/components/Button/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Button from 'material-ui/Button';
+import './Button.css';
+
+function CustomButton(props) {
+  const {
+    type = 'primary',
+    onClick,
+    className = '',
+    variant = 'flat',
+    children,
+  } = props;
+
+  return (
+    <Button
+      color={type}
+      variant={variant}
+      onClick={onClick}
+      className={`button ${type} ${className}`}  
+    >
+        { children ? children : 'Button' }
+    </Button>
+  )
+}
+
+export default CustomButton;

src/withRoot.js

@@ -1,23 +1,26 @@
 import React from 'react';
 import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
-import purple from 'material-ui/colors/purple';
-import green from 'material-ui/colors/green';
 import CssBaseline from 'material-ui/CssBaseline';
 
 // A theme with custom primary and secondary color.
 // It's optional.
 const theme = createMuiTheme({
+    typography: {
+        fontFamily: 'Nunito',
+        fontWeightRegular: 600,
+        fontWeightMedium: 700
+    },
     palette: {
         primary: {
-            light: purple[300],
-            main: purple[500],
-            dark: purple[700],
+            main: '#4E4674',
         },
         secondary: {
-            light: green[300],
-            main: green[500],
-            dark: green[700],
+            main: '#42F062',
+            contrastText: '#FFFFFF'
         },
+        error: {
+            main: '#FF5757'
+        }
     },
 });