Merge pull request #1 from oslabs-beta/mma/moduleupdate

build! : updated dependencies chore!: update import statement for font chore!: update to createRoot from render BREAKING CHANGE

frontend/components/modal/Spinner.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { LinearProgress } from '@mui/material';
 import { ipcRenderer } from 'electron';
-import styled, { ExecutionContext } from 'styled-components';
+import styled from 'styled-components';
 
 interface Props {
   $show: boolean;
@@ -11,7 +11,7 @@ const StyledLinearProg = styled(LinearProgress)<Props>`
   /* Material Ui Drawer component used by sidebar has z-index: 1200 */
   z-index: 1300;
   height: 5px;
-  visibility: ${(props?) => (props.$show ? 'visible' : 'hidden')};
+  visibility: ${(props?) => (props?.$show ? 'visible' : 'hidden')};
 `;
 
 let delayTimer: NodeJS.Timeout;

frontend/index.tsx

@@ -1,22 +1,17 @@
 import React from 'react';
-import { render } from 'react-dom';
-// import { createRoot } from 'react-dom/client';
+// import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import App from './components/App';
 // import 'codemirror/lib/codemirror.css';
 
-import 'fontsource-roboto';
+import '@fontsource/roboto';
 
-const root = document.createElement('div');
+const root = createRoot(document.createElement('div'));
 root.id = 'root';
 document.body.appendChild(root);
 
-render(
-  <div>
-    <App />
-  </div>,
-  document.getElementById('root'),
-);
+root.render(<App />);
 
 // const container = document.getElementById('root') as HTMLElement;
 // const root = createRoot(container);