refactor(web): initial mantine setup

web/src/index.css

@@ -3,6 +3,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');
+@import url("https://use.typekit.net/wxh5ury.css");
 
 html {
   color-scheme: normal !important;

web/src/main.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import { VisibilityProvider } from './providers/VisibilityProvider';
 import { ChakraProvider } from '@chakra-ui/react';
 import { theme } from './theme';
 import { debugData } from './utils/debugData';
@@ -12,6 +11,7 @@ import { fab } from '@fortawesome/free-brands-svg-icons';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { isEnvBrowser } from './utils/misc';
 import LocaleProvider from './providers/LocaleProvider';
+import { MantineProvider } from '@mantine/core';
 
 library.add(fas, far, fab);
 
@@ -25,22 +25,15 @@ if (isEnvBrowser()) {
   root!.style.backgroundPosition = 'center';
 }
 
-debugData([
-  {
-    action: 'setVisible',
-    data: true,
-  },
-]);
-
 const root = document.getElementById('root');
 ReactDOM.createRoot(root!).render(
   <React.StrictMode>
     <LocaleProvider>
-      <VisibilityProvider>
+      <MantineProvider withNormalizeCSS withGlobalStyles theme={{ colorScheme: 'dark', fontFamily: 'Roboto' }}>
         <ChakraProvider theme={theme}>
           <App />
         </ChakraProvider>
-      </VisibilityProvider>
+      </MantineProvider>
     </LocaleProvider>
   </React.StrictMode>
 );

web/src/providers/VisibilityProvider.tsx

@@ -1,31 +0,0 @@
-import React, { Context, createContext, useContext, useState } from 'react';
-import { useNuiEvent } from '../hooks/useNuiEvent';
-
-const VisibilityCtx = createContext<VisibilityProviderValue | null>(null);
-
-interface VisibilityProviderValue {
-  setVisible: (visible: boolean) => void;
-  visible: boolean;
-}
-
-// This should be mounted at the top level of your application, it is currently set to
-// apply a CSS visibility value. If this is non-performant, this should be customized.
-export const VisibilityProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [visible, setVisible] = useState(true);
-
-  useNuiEvent<boolean>('setVisible', setVisible);
-
-  return (
-    <VisibilityCtx.Provider
-      value={{
-        visible,
-        setVisible,
-      }}
-    >
-      <div style={{ visibility: visible ? 'visible' : 'hidden', height: '100%' }}>{children}</div>
-    </VisibilityCtx.Provider>
-  );
-};
-
-export const useVisibility = () =>
-  useContext<VisibilityProviderValue>(VisibilityCtx as Context<VisibilityProviderValue>);