chore(web): remove chakra packages

web/package.json

@@ -4,9 +4,7 @@
   "homepage": "web/build",
   "private": true,
   "dependencies": {
-    "@chakra-ui/react": "2.3.6",
     "@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",

web/src/features/dialog/components/InfoTooltip.tsx

@@ -1,23 +0,0 @@
-import { Box, Tooltip } from '@chakra-ui/react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-const InfoTooltip: React.FC<{ description: string }> = ({ description }) => {
-  return (
-    <Tooltip label={description} placement="top" hasArrow arrowSize={4} maxW={220}>
-      <Box
-        borderRadius="full"
-        bg="whiteAlpha.200"
-        p={0.5}
-        w={18}
-        h={18}
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-      >
-        <FontAwesomeIcon icon="question" fixedWidth fontSize={10} />
-      </Box>
-    </Tooltip>
-  );
-};
-
-export default InfoTooltip;

web/src/features/dialog/components/Label.tsx

@@ -1,13 +0,0 @@
-import { HStack, Text } from '@chakra-ui/react';
-import InfoTooltip from './InfoTooltip';
-
-const Label: React.FC<{ label: string; description?: string }> = ({ label, description }) => {
-  return (
-    <HStack spacing={1}>
-      <Text>{label}</Text>
-      {description && <InfoTooltip description={description} />}
-    </HStack>
-  );
-};
-
-export default Label;

web/src/features/progress/CircleProgressbar.tsx

@@ -42,10 +42,12 @@ const useStyles = createStyles((theme, params: { position: 'middle' | 'bottom';
     textAlign: 'center',
     fontFamily: 'roboto-mono',
     textShadow: theme.shadows.sm,
+    color: theme.colors.gray[3],
   },
   label: {
     textAlign: 'center',
     textShadow: theme.shadows.sm,
+    color: theme.colors.gray[3],
   },
 }));
 

web/src/features/progress/Progressbar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Progress, Box, Text, createStyles } from '@mantine/core';
+import { Box, Text, createStyles } from '@mantine/core';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { fetchNui } from '../../utils/fetchNui';
 import ScaleFade from '../../transitions/ScaleFade';
@@ -45,6 +45,7 @@ const useStyles = createStyles((theme) => ({
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     fontSize: 20,
+    color: theme.colors.gray[3],
     textShadow: theme.shadows.sm,
   },
 }));

web/src/index.css

@@ -22,6 +22,10 @@ body {
   overflow: hidden !important;
 }
 
+p {
+  margin: 0;
+}
+
 #root {
   height: 100%;
 }

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 { ChakraProvider } from '@chakra-ui/react';
 import { theme } from './theme';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
@@ -28,18 +27,8 @@ const root = document.getElementById('root');
 ReactDOM.createRoot(root!).render(
   <React.StrictMode>
     <LocaleProvider>
-      <MantineProvider
+      <MantineProvider withNormalizeCSS withGlobalStyles theme={theme}>
-        withNormalizeCSS
-        withGlobalStyles
-        theme={{
-          colorScheme: 'dark',
-          fontFamily: 'Roboto',
-          shadows: { sm: '1px 1px 3px rgba(0, 0, 0, 0.5)' },
-        }}
-      >
-        <ChakraProvider theme={theme}>
         <App />
-        </ChakraProvider>
       </MantineProvider>
     </LocaleProvider>
   </React.StrictMode>

web/src/theme/index.ts

@@ -1,9 +1,7 @@
-import { extendTheme, type ThemeConfig } from '@chakra-ui/react';
+import { MantineThemeOverride } from '@mantine/core';
 
-const config: ThemeConfig = {
+export const theme: MantineThemeOverride = {
-  initialColorMode: 'dark',
+  colorScheme: 'dark',
+  fontFamily: 'Roboto',
+  shadows: { sm: '1px 1px 3px rgba(0, 0, 0, 0.5)' },
 };
-
-export const theme = extendTheme({
-  config,
-});