chore(web): update react and chakra versions

hopefully nothing broke that I didn't notice prayge

web/src/features/dev/index.tsx

@@ -49,42 +49,42 @@ const Dev: React.FC = () => {
           <DrawerBody>
             <VStack>
               <Divider />
-              <Button isFullWidth onClick={() => debugInput()}>
+              <Button width="full" onClick={() => debugInput()}>
                 Open input dialog
               </Button>
-              <Button isFullWidth onClick={() => debugAlert()}>
+              <Button width="full" onClick={() => debugAlert()}>
                 Open alert dialog
               </Button>
               <Divider />
-              <Button isFullWidth onClick={() => debugContext()}>
+              <Button width="full" onClick={() => debugContext()}>
                 Open context menu
               </Button>
-              <Button isFullWidth onClick={() => debugMenu()}>
+              <Button width="full" onClick={() => debugMenu()}>
                 Open list menu
               </Button>
               <Divider />
-              <Button isFullWidth onClick={() => debugCustomNotification()}>
+              <Button width="full" onClick={() => debugCustomNotification()}>
                 Send custom notification
               </Button>
-              <Button isFullWidth onClick={() => debugNotification()}>
+              <Button width="full" onClick={() => debugNotification()}>
                 Send default notification
               </Button>
               <Divider />
-              <Button isFullWidth onClick={() => debugProgressbar()}>
+              <Button width="full" onClick={() => debugProgressbar()}>
                 Activate progress bar
               </Button>
-              <Button isFullWidth onClick={() => debugCircleProgressbar()}>
+              <Button width="full" onClick={() => debugCircleProgressbar()}>
                 Activate progress circle
               </Button>
               <Divider />
-              <Button isFullWidth onClick={() => debugSettings()}>
+              <Button width="full" onClick={() => debugSettings()}>
                 Open settings page
               </Button>
-              <Button isFullWidth onClick={() => debugTextUI()}>
+              <Button width="full" onClick={() => debugTextUI()}>
                 Show TextUI
               </Button>
               <Divider />
-              <Button isFullWidth onClick={() => debugSkillCheck()}>
+              <Button width="full" onClick={() => debugSkillCheck()}>
                 Run skill check
               </Button>
             </VStack>

web/src/features/dialog/components/fields/number.tsx

@@ -6,6 +6,7 @@ import {
   NumberIncrementStepper,
   NumberDecrementStepper,
   InputLeftElement,
+  InputGroup,
 } from '@chakra-ui/react';
 import { useEffect } from 'react';
 import { INumber } from '../../../../interfaces/dialog';
@@ -26,22 +27,24 @@ const NumberField: React.FC<Props> = (props) => {
   return (
     <Box mb={3}>
       <Label label={props.row.label} description={props.row.description} />
-      <NumberInput
-        onChange={(val: string) => props.handleChange(+val, props.index)}
-        defaultValue={props.row.default}
-        min={props.row.min}
-        max={props.row.max}
-        isDisabled={props.row.disabled}
-      >
-        {props.row.icon && (
-          <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />
-        )}
-        <NumberInputField placeholder={props.row.placeholder} pl={props.row.icon ? '40px' : undefined} />
-        <NumberInputStepper>
-          <NumberIncrementStepper />
-          <NumberDecrementStepper />
-        </NumberInputStepper>
-      </NumberInput>
+      <InputGroup>
+        <NumberInput
+          onChange={(val: string) => props.handleChange(+val, props.index)}
+          defaultValue={props.row.default}
+          min={props.row.min}
+          max={props.row.max}
+          isDisabled={props.row.disabled}
+        >
+          {props.row.icon && (
+            <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />
+          )}
+          <NumberInputField placeholder={props.row.placeholder} pl={props.row.icon ? '40px' : undefined} />
+          <NumberInputStepper>
+            <NumberIncrementStepper />
+            <NumberDecrementStepper />
+          </NumberInputStepper>
+        </NumberInput>
+      </InputGroup>
     </Box>
   );
 };

web/src/features/notifications/NotificationWrapper.tsx

@@ -1,4 +1,4 @@
-import { useToast, type ToastPositionWithLogical, Box, HStack, Text } from '@chakra-ui/react';
+import { useToast, type ToastPosition, Box, HStack, Text } from '@chakra-ui/react';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -7,7 +7,7 @@ export interface NotificationProps {
   title?: string;
   description?: string;
   duration?: number;
-  position?: ToastPositionWithLogical;
+  position?: ToastPosition;
   status?: 'info' | 'warning' | 'success' | 'error';
   id?: number;
 }
@@ -19,7 +19,7 @@ export interface CustomNotificationProps {
   duration?: number;
   icon?: IconProp;
   iconColor?: string;
-  position?: ToastPositionWithLogical;
+  position?: ToastPosition;
   id?: number;
   type?: string;
 }

web/src/features/progress/CircleProgressbar.tsx

@@ -88,7 +88,7 @@ const CircleProgressbar: React.FC = () => {
           >
             <CircularProgressLabel fontFamily="Fira Mono">{value}%</CircularProgressLabel>
           </CircularProgress>
-          <Text fontFamily="Inter" isTruncated fontSize={18} fontWeight="light">
+          <Text fontFamily="Inter" fontSize={18} fontWeight="light">
             {label}
           </Text>
         </Flex>

web/src/features/progress/Progressbar.tsx

@@ -65,8 +65,11 @@ const Progressbar: React.FC = () => {
               }
             />
             <Text
+              maxWidth={350}
               fontFamily="Inter"
-              isTruncated
+              textOverflow="ellipsis"
+              overflow="hidden"
+              whiteSpace="nowrap"
               fontSize={22}
               fontWeight="light"
               position="absolute"

web/src/main.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import { VisibilityProvider } from './providers/VisibilityProvider';
@@ -32,7 +32,8 @@ debugData([
   },
 ]);
 
-ReactDOM.render(
+const root = document.getElementById('root');
+ReactDOM.createRoot(root!).render(
   <React.StrictMode>
     <LocaleProvider>
       <VisibilityProvider>
@@ -41,6 +42,5 @@ ReactDOM.render(
         </ChakraProvider>
       </VisibilityProvider>
     </LocaleProvider>
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );

web/src/providers/LocaleProvider.tsx

@@ -46,7 +46,7 @@ interface LocaleContextValue {
 
 const LocaleCtx = createContext<LocaleContextValue | null>(null);
 
-const LocaleProvider: React.FC = ({ children }) => {
+const LocaleProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [locale, setLocale] = useState<Locale>({
     language: '',
     ui: {

web/src/providers/VisibilityProvider.tsx

@@ -10,7 +10,7 @@ interface VisibilityProviderValue {
 
 // 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 }) => {
+export const VisibilityProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [visible, setVisible] = useState(true);
 
   useNuiEvent<boolean>('setVisible', setVisible);

web/src/theme/index.ts

@@ -2,7 +2,6 @@ import { extendTheme, type ThemeConfig } from '@chakra-ui/react';
 
 const config: ThemeConfig = {
   initialColorMode: 'dark',
-  useSystemColorMode: false,
 };
 
 export const theme = extendTheme({