kevinhughes27 · kevinhughes27 · May 25, 2018 · May 16, 2018 · kevinhughes27 · May 23, 2018
diff --git a/clients/admin_next/package.json b/clients/admin_next/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^1.0.0-rc.1",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-scripts-ts": "2.15.1"

diff --git a/clients/admin_next/public/index.html b/clients/admin_next/public/index.html
@@ -19,6 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
     <title>React App</title>
   </head>
   <body>

diff --git a/clients/admin_next/src/App.css b/clients/admin_next/src/App.css
diff --git a/clients/admin_next/src/App.tsx b/clients/admin_next/src/App.tsx
@@ -1,22 +1,68 @@
 import * as React from 'react';
-import './App.css';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Typography from '@material-ui/core/Typography';
+import withStyles, { WithStyles, StyleRulesCallback } from '@material-ui/core/styles/withStyles';
+import withRoot from './withRoot';
 
-import logo from './logo.svg';
+const styles: StyleRulesCallback<'root'> = theme => ({
+  root: {
+    paddingTop: theme.spacing.unit * 20,
+    textAlign: 'center',
+  },
+});
+
+interface IState {
+  open: boolean;
+};
+
+class Index extends React.Component<WithStyles<'root'>, IState> {
+  public state = {
+    open: false,
+  };
+
+  public handleClose = () => {
+    this.setState({
+      open: false,
+    });
+  };
+
+  public handleClick = () => {
+    this.setState({
+      open: true,
+    });
+  };
 
-class App extends React.Component {
   public render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.tsx</code> and save to reload.
-        </p>
+      <div className={this.props.classes.root}>
+        <Dialog open={this.state.open} onClose={this.handleClose}>
+          <DialogTitle>Super Secret Password</DialogTitle>
+          <DialogContent>
+            <DialogContentText>1-2-3-4-5</DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button color="primary" onClick={this.handleClose}>
+              OK
+            </Button>
+          </DialogActions>
+        </Dialog>
+        <Typography variant="display1" gutterBottom={true}>
+          Material-UI
+        </Typography>
+        <Typography variant="subheading" gutterBottom={true}>
+          example project
+        </Typography>
+        <Button variant="raised" color="secondary" onClick={this.handleClick}>
+          Super Secret Password
+        </Button>
       </div>
     );
   }
 }
 
-export default App;
+export default withRoot(withStyles(styles)<{}>(Index));
diff --git a/clients/admin_next/src/index.css b/clients/admin_next/src/index.css
diff --git a/clients/admin_next/src/index.tsx b/clients/admin_next/src/index.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import App from './App';
-import './index.css';
 
 ReactDOM.render(
   <App />,

diff --git a/clients/admin_next/src/logo.svg b/clients/admin_next/src/logo.svg
diff --git a/clients/admin_next/src/withRoot.tsx b/clients/admin_next/src/withRoot.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import purple from '@material-ui/core/colors/purple';
+import green from '@material-ui/core/colors/green';
+import CssBaseline from '@material-ui/core/CssBaseline';
+
+// A theme with custom primary and secondary color.
+// It's optional.
+const theme = createMuiTheme({
+  palette: {
+    primary: purple,
+    secondary: green,
+  },
+});
+
+function withRoot(Component: React.ComponentType) {
+  function WithRoot(props: object) {
+    // MuiThemeProvider makes the theme available down the React tree
+    // thanks to React context.
+    return (
+      <MuiThemeProvider theme={theme}>
+        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <CssBaseline />
+        <Component {...props} />
+      </MuiThemeProvider>
+    );
+  }
+
+  return WithRoot;
+}
+
+export default withRoot;
diff --git a/clients/admin_next/tslint.json b/clients/admin_next/tslint.json
@@ -5,5 +5,8 @@
       "config/**/*.js",
       "node_modules/**/*.ts"
     ]
+  },
+  "rules": {
+    "ordered-imports": false
   }
 }
diff --git a/clients/admin_next/typings/misc.d.ts b/clients/admin_next/typings/misc.d.ts
@@ -0,0 +1,2 @@
+declare module 'jss-preset-default';
+declare module 'react-jss/*';