Migrated to the latest @fluentui/react

client/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fluentui/react": "^7.153.2",
     "@reduxjs/toolkit": "^1.4.0",
     "@types/http-proxy-middleware": "^0.19.3",
     "@types/jest": "26.0.15",
@@ -14,7 +15,6 @@
     "@types/reconnectingwebsocket": "^1.0.5",
     "@uifabric/fluent-theme": "^7.3.46",
     "http-proxy-middleware": "^1.0.6",
-    "office-ui-fabric-react": "^7.153.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",

client/src/App.css

@@ -1,33 +1,3 @@
-.App {
+/* .App {
   text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+} */

client/src/FluentSample.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import { Text, Link, FontWeights, PrimaryButton, DefaultButton, TextField } from 'office-ui-fabric-react';
-import { Stack, IStackProps } from 'office-ui-fabric-react/lib/Stack';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import { ProgressIndicator } from 'office-ui-fabric-react/lib/ProgressIndicator';
+import { Text, Link, FontWeights, PrimaryButton, DefaultButton, TextField } from '@fluentui/react';
+import { Stack, IStackProps, ProgressIndicator, Icon } from '@fluentui/react';
 //import { SharedColors, FontSizes } from '@uifabric/fluent-theme';
 
 const boldStyle = { root: { fontWeight: FontWeights.semibold } };
@@ -30,7 +28,9 @@ export const FluentSample: React.FunctionComponent = () => {
           padding: '10px'
         }
       }}
-      gap={15}
+      tokens={
+        { childrenGap: 15 }
+      }
     >
       <PrimaryButton text="Button 1" />
       <Text variant="xxLarge">Hello, you!</Text>
@@ -55,7 +55,7 @@ export const FluentSample: React.FunctionComponent = () => {
         <Stack {...columnProps}>
           <TextField label="First name" />
           <TextField label="Last name" />
-          <Stack horizontal gap="10">
+          <Stack horizontal tokens={{ childrenGap: 10 }}>
             <ButtonType text="Button 2" />
             <PrimaryButton text="Button 3" />
           </Stack>

client/src/controls/Button.js

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { WebSocketContext } from '../WebSocket';
-import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react';
+import { PrimaryButton, DefaultButton } from '@fluentui/react';
 
 const button = React.memo(({control}) => {
 

client/src/controls/Page.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { shallowEqual, useSelector } from 'react-redux'
 import ControlsList from './ControlsList'
 import useTitle from '../hooks/useTitle'
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { Stack } from '@fluentui/react';
 
 const Page = React.memo(({ control }) => {
 

client/src/controls/PageLanding.js

@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 import { useSelector } from 'react-redux';
 import Page from './Page'
 import { WebSocketContext } from '../WebSocket';
-import { MessageBar, MessageBarType } from 'office-ui-fabric-react'
+import { MessageBar, MessageBarType } from '@fluentui/react'
 
 const PageLanding = () => {
 

client/src/controls/Stack.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { shallowEqual, useSelector } from 'react-redux'
 import ControlsList from './ControlsList'
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { Stack } from '@fluentui/react';
 
 const MyStack = React.memo(({ control }) => {
 

client/src/controls/Text.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text } from 'office-ui-fabric-react/lib/Text';
+import { Text } from '@fluentui/react';
 
 const MyText = React.memo(({ control }) => {
 

client/src/controls/Textbox.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { WebSocketContext } from '../WebSocket';
 import { useDispatch } from 'react-redux'
 import { changeProps } from '../slices/pageSlice'
-import { TextField } from 'office-ui-fabric-react';
+import { TextField } from '@fluentui/react';
 import { IControlProps } from './IControlProps'
 
 export const Textbox = React.memo<IControlProps>(({control}) => {

client/src/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { App } from './App';
-import { FluentCustomizations } from '@uifabric/fluent-theme';
-import { Customizer, mergeStyles } from 'office-ui-fabric-react';
+import { mergeStyles } from '@fluentui/react';
 import * as serviceWorker from './serviceWorker';
 import { Provider } from 'react-redux'
 import rootReducer from './rootReducer'
@@ -16,8 +15,6 @@ initializeIcons();
 mergeStyles({
   selectors: {
     ':global(body), :global(html), :global(#root)': {
-      margin: 0,
-      padding: 0,
       height: '100vh'
     }
   }
@@ -28,13 +25,11 @@ const store = configureStore({
 });
 
 ReactDOM.render(
-  <Customizer {...FluentCustomizations}>
     <Provider store={store}>
       <WebSocketProvider>
         <App />
       </WebSocketProvider>
-    </Provider>
-  </Customizer>,
+    </Provider>,
   document.getElementById('root')
 );