create-react-app-uifabric.diff

diff --git a/package.json b/package.json
index af283fb..abbbd11 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,8 @@
     "@types/node": "11.13.8",
     "@types/react": "16.8.15",
     "@types/react-dom": "16.8.4",
+    "office-ui-fabric-react": "^6.174.0",
+    "@uifabric/fluent-theme": "^0.16.7",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.0",
diff --git a/src/App.tsx b/src/App.tsx
index 226ee63..6eaa5e5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,26 +1,49 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Stack, Text, Link, FontWeights } from 'office-ui-fabric-react';
 
-const App: React.FC = () => {
+const boldStyle = { root: { fontWeight: FontWeights.semibold } };
+
+export const App: React.FunctionComponent = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Stack
+      horizontalAlign="center"
+      verticalAlign="center"
+      verticalFill
+      styles={{
+        root: {
+          width: '960px',
+          margin: '0 auto',
+          textAlign: 'center',
+          color: '#605e5c'
+        }
+      }}
+      gap={15}
+    >
+      <img
+        src="https://raw.githubusercontent.com/Microsoft/just/master/packages/just-stack-uifabric/template/src/components/fabric.png"
+        alt="logo"
+      />
+      <Text variant="xxLarge" styles={boldStyle}>
+        Welcome to Your UI Fabric App
+      </Text>
+      <Text variant="large">For a guide on how to customize this project, check out the UI Fabric documentation.</Text>
+      <Text variant="large" styles={boldStyle}>
+        Essential Links
+      </Text>
+      <Stack horizontal gap={15} horizontalAlign="center">
+        <Link href="https://developer.microsoft.com/en-us/fabric">Docs</Link>
+        <Link href="https://stackoverflow.com/questions/tagged/office-ui-fabric">Stack Overflow</Link>
+        <Link href="https://github.com/officeDev/office-ui-fabric-react/">Github</Link>
+        <Link href="https://twitter.com/officeuifabric">Twitter</Link>
+      </Stack>
+      <Text variant="large" styles={boldStyle}>
+        Design System
+      </Text>
+      <Stack horizontal gap={15} horizontalAlign="center">
+        <Link href="https://developer.microsoft.com/en-us/fabric#/styles/icons">Icons</Link>
+        <Link href="https://developer.microsoft.com/en-us/fabric#/styles/typography">Typography</Link>
+        <Link href="https://developer.microsoft.com/en-us/fabric#/styles/themegenerator">Theme</Link>
+      </Stack>
+    </Stack>
   );
-}
-
-export default App;
+};
diff --git a/src/index.tsx b/src/index.tsx
index 87d1be5..1beb7ea 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,10 +1,27 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import { App } from './App';
+import { FluentCustomizations } from '@uifabric/fluent-theme';
+import { Customizer, mergeStyles } from 'office-ui-fabric-react';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+// Inject some global styles
+mergeStyles({
+  selectors: {
+    ':global(body), :global(html), :global(#root)': {
+      margin: 0,
+      padding: 0,
+      height: '100vh'
+    }
+  }
+});
+
+ReactDOM.render(
+  <Customizer {...FluentCustomizations}>
+    <App />
+  </Customizer>,
+  document.getElementById('root')
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.