refactor(web): replace mui components

web/src/App.tsx

@@ -1,4 +1,3 @@
-import { Box } from '@mui/material';
 import InventoryComponent from './components/inventory';
 import useNuiEvent from './hooks/useNuiEvent';
 import { Items } from './store/items';
@@ -112,11 +111,11 @@ const App: React.FC = () => {
   });
 
   return (
-    <Box sx={{ height: '100%', width: '100%', color: 'white' }}>
+    <div className="app-wrapper">
       <InventoryComponent />
       <DragPreview />
       <KeyPress />
-    </Box>
+    </div>
   );
 };
 

web/src/components/inventory/InventoryControl.tsx

@@ -9,7 +9,6 @@ import { fetchNui } from '../../utils/fetchNui';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Locale } from '../../store/locale';
-import { IconButton } from '@mui/material';
 import UsefulControls from './UsefulControls';
 
 const InventoryControl: React.FC = () => {
@@ -56,9 +55,9 @@ const InventoryControl: React.FC = () => {
         </div>
       </div>
 
-      <IconButton className="useful-controls-button" size="large" onClick={() => setInfoVisible(true)}>
-        <FontAwesomeIcon icon={faInfoCircle} />
-      </IconButton>
+      <button className="useful-controls-button" onClick={() => setInfoVisible(true)}>
+        <FontAwesomeIcon icon={faInfoCircle} size="2xl" />
+      </button>
     </>
   );
 };

web/src/components/inventory/SlotTooltip.tsx

@@ -1,12 +1,12 @@
 import { Inventory, SlotWithItem } from '../../typings';
 import React, { Fragment, useMemo } from 'react';
-import { Divider } from '@mui/material';
 import { Items } from '../../store/items';
 import { Locale } from '../../store/locale';
 import ReactMarkdown from 'react-markdown';
 import { useAppSelector } from '../../store';
 import ClockIcon from '../utils/icons/ClockIcon';
 import { getItemUrl } from '../../helpers';
+import Divider from '../utils/Divider';
 
 const SlotTooltip: React.ForwardRefRenderFunction<
   HTMLDivElement,

web/src/components/inventory/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import useNuiEvent from '../../hooks/useNuiEvent';
 import InventoryControl from './InventoryControl';
 import InventoryHotbar from './InventoryHotbar';
-import { Fade } from '@mui/material';
 import { useAppDispatch } from '../../store';
 import { refreshSlots, setAdditionalMetadata, setupInventory } from '../../store/inventory';
 import { useExitListener } from '../../hooks/useExitListener';
@@ -13,6 +12,7 @@ import Tooltip from '../utils/Tooltip';
 import { closeTooltip } from '../../store/tooltip';
 import InventoryContext from './InventoryContext';
 import { closeContextMenu } from '../../store/contextMenu';
+import Fade from '../utils/transitions/Fade';
 
 const Inventory: React.FC = () => {
   const [inventoryVisible, setInventoryVisible] = React.useState(false);

web/src/components/utils/Divider.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Divider: React.FC = () => {
+  return <div className="divider" />;
+};
+
+export default Divider;

web/src/components/utils/ItemNotifications.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { createPortal } from 'react-dom';
 import { TransitionGroup } from 'react-transition-group';
 import useNuiEvent from '../../hooks/useNuiEvent';
-import { Fade } from '@mui/material';
 import useQueue from '../../hooks/useQueue';
 import { Locale } from '../../store/locale';
 import { getItemUrl } from '../../helpers';
 import { SlotWithItem } from '../../typings';
 import { Items } from '../../store/items';
+import Fade from './transitions/Fade';
 
 interface ItemNotificationProps {
   item: SlotWithItem;

web/src/components/utils/transitions/Fade.tsx

@@ -0,0 +1,19 @@
+import React, { JSXElementConstructor, useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+interface Props {
+  in?: boolean;
+  children: React.ReactElement<any, string | JSXElementConstructor<any>>;
+}
+
+const Fade: React.FC<Props> = (props) => {
+  const nodeRef = useRef(null);
+
+  return (
+    <CSSTransition in={props.in} nodeRef={nodeRef} classNames="transition-fade" timeout={200} unmountOnExit>
+      {React.cloneElement(props.children, { ref: nodeRef })}
+    </CSSTransition>
+  );
+};
+
+export default Fade;

web/src/index.scss

@@ -50,6 +50,12 @@ input[type='number']::-webkit-outer-spin-button {
   appearance: none;
 }
 
+.app-wrapper {
+  height: 100%;
+  width: 100%;
+  color: white;
+}
+
 .context-menu-list {
   min-width: 200px;
   background-color: $mainColor;
@@ -211,15 +217,26 @@ button:active {
   gap: 20px;
 }
 
+.divider {
+  width: 100%;
+  height: 1px;
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
 .useful-controls-button {
   position: absolute !important;
   bottom: 25px;
   right: 25px;
   transition: 200ms !important;
+  border: none;
+  color: white;
+  width: 52px;
+  height: 52px;
   border-radius: 5% !important;
   background-color: $secondaryColor !important;
   &:hover {
     background-color: $secondaryColorDark !important;
+    cursor: pointer;
   }
 }
 
@@ -494,3 +511,21 @@ button:active {
   border-radius: 5%;
   overflow: hidden;
 }
+
+.transition-fade-enter {
+  opacity: 0;
+}
+
+.transition-fade-enter-active {
+  opacity: 1;
+  transition: opacity 200ms;
+}
+
+.transition-fade-exit {
+  opacity: 1;
+}
+
+.transition-fade-exit-active {
+  opacity: 0;
+  transition: opacity 200ms;
+}

web/src/main.tsx

@@ -8,7 +8,6 @@ import App from './App';
 import './index.scss';
 import { ItemNotificationsProvider } from './components/utils/ItemNotifications';
 import { isEnvBrowser } from './utils/misc';
-import { createTheme, ThemeProvider } from '@mui/material';
 
 const root = document.getElementById('root');
 
@@ -23,13 +22,11 @@ if (isEnvBrowser()) {
 createRoot(root!).render(
   <React.StrictMode>
     <Provider store={store}>
-      <ThemeProvider theme={createTheme({ palette: { mode: 'dark' } })}>
-        <DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>
-          <ItemNotificationsProvider>
-            <App />
-          </ItemNotificationsProvider>
-        </DndProvider>
-      </ThemeProvider>
+      <DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>
+        <ItemNotificationsProvider>
+          <App />
+        </ItemNotificationsProvider>
+      </DndProvider>
     </Provider>
   </React.StrictMode>
 );