chore(web): remove chakra packages

overextended · Jan 2, 2023 · 9f1ae61 · 9f1ae61
1 parent d48b5e1
commit 9f1ae61
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 1,427 deletions.
diff --git a/web/package.json b/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",

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/src/features/dialog/components/InfoTooltip.tsx b/web/src/features/dialog/components/InfoTooltip.tsx
diff --git a/web/src/features/dialog/components/Label.tsx b/web/src/features/dialog/components/Label.tsx
diff --git a/web/src/features/progress/CircleProgressbar.tsx b/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],
   },
 }));
 

diff --git a/web/src/features/progress/Progressbar.tsx b/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,
   },
 }));

diff --git a/web/src/index.css b/web/src/index.css
@@ -22,6 +22,10 @@ body {
   overflow: hidden !important;
 }
 
+p {
+  margin: 0;
+}
+
 #root {
   height: 100%;
 }

diff --git a/web/src/main.tsx b/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
-        withNormalizeCSS
-        withGlobalStyles
-        theme={{
-          colorScheme: 'dark',
-          fontFamily: 'Roboto',
-          shadows: { sm: '1px 1px 3px rgba(0, 0, 0, 0.5)' },
-        }}
-      >
-        <ChakraProvider theme={theme}>
-          <App />
-        </ChakraProvider>
+      <MantineProvider withNormalizeCSS withGlobalStyles theme={theme}>
+        <App />
       </MantineProvider>
     </LocaleProvider>
   </React.StrictMode>

diff --git a/web/src/theme/index.ts b/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 = {
-  initialColorMode: 'dark',
+export const theme: MantineThemeOverride = {
+  colorScheme: 'dark',
+  fontFamily: 'Roboto',
+  shadows: { sm: '1px 1px 3px rgba(0, 0, 0, 0.5)' },
 };
-
-export const theme = extendTheme({
-  config,
-});
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,6 +22,10 @@ body { @@
       overflow: hidden !important;
     }
+    p {
+      margin: 0;
+    }
     #root {
       height: 100%;
     }
@@ Expand Down @@