feat: add fluent UI

Author: aboccag

app/components/Home.tsx

@@ -1,11 +1,29 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import {
+  DefaultButton,
+  PrimaryButton,
+  Stack,
+  IStackTokens,
+} from 'office-ui-fabric-react';
 import routes from '../constants/routes.json';
-import styles from './Home.css';
+
+export interface IButtonExampleProps {
+  // These are set based on the toggles shown above the examples (not needed in real code)
+  disabled?: boolean;
+  checked?: boolean;
+}
+
+// Example formatting
+const stackTokens: IStackTokens = { childrenGap: 40 };
 
 export default function Home(): JSX.Element {
   const [state] = useState<string>('Hi');
 
+  const alertClicked = (): void => {
+    alert('Clicked');
+  };
+
   useEffect(() => {
     // axios
     //   .get('http://localhost:5000')
@@ -14,8 +32,20 @@ export default function Home(): JSX.Element {
   }, []);
 
   return (
-    <div className={styles.container} data-tid="container">
+    <div>
       <h2>{state}</h2>
+      <Stack horizontal tokens={stackTokens}>
+        <DefaultButton
+          text="Standard"
+          onClick={alertClicked}
+          allowDisabledFocus
+        />
+        <PrimaryButton
+          text="Primary"
+          onClick={alertClicked}
+          allowDisabledFocus
+        />
+      </Stack>
       <Link to={routes.COUNTER}>counter</Link>
     </div>
   );

app/index.tsx

@@ -2,7 +2,6 @@ import React, { Fragment } from 'react';
 import { render } from 'react-dom';
 import { AppContainer as ReactHotAppContainer } from 'react-hot-loader';
 import { history, configuredStore } from './store';
-import './app.global.css';
 
 const store = configuredStore();
 

package.json

@@ -275,6 +275,7 @@
     "webpack-merge": "^5.0.9"
   },
   "dependencies": {
+    "@fluentui/react": "^7.150.0",
     "@fortawesome/fontawesome-free": "^5.15.0",
     "@hot-loader/react-dom": "^16.13.0",
     "@reduxjs/toolkit": "^1.4.0",