refactor(web): initial mantine setup

web/package.json

@@ -5,13 +5,16 @@
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "2.3.6",
-    "@emotion/react": "^11.8.2",
+    "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.8.1",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
+    "@mantine/core": "^5.9.4",
+    "@mantine/dates": "^5.9.4",
+    "@mantine/hooks": "^5.9.4",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
@@ -20,6 +23,7 @@
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "@vitejs/plugin-react": "^1.3.2",
+    "dayjs": "^1.11.7",
     "focus-trap-react": "^9.0.2",
     "framer-motion": "^6.2.8",
     "prettier": "^2.7.1",

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>);