refactor(web/progress): Rewrite progressbar component

Using chakra's built in progress component was causing weird container stretching when the progress bar would become active

web/src/features/progress/Progressbar.tsx

@@ -1,11 +1,5 @@
 import React from "react";
-import {
+import { Text, Flex, Box, ScaleFade } from "@chakra-ui/react";
-  Progress,
-  ProgressLabel,
-  Flex,
-  Box,
-  ScaleFade,
-} from "@chakra-ui/react";
 import { useNuiEvent } from "../../hooks/useNuiEvent";
 import { debugData } from "../../utils/debugData";
 import { fetchNui } from "../../utils/fetchNui";
@@ -55,44 +49,51 @@ const Progressbar: React.FC = () => {
 
   return (
     <Flex
-      h="20%"
+      h="30%"
       w="100%"
       position="absolute"
       bottom="0"
       justifyContent="center"
       alignItems="center"
     >
-      <Box width="22rem">
+      <Box width={350}>
         <ScaleFade in={visible} unmountOnExit>
-          <Progress
+          <Box
-            value={100}
+            height={45}
-            height="2.8rem"
+            bg="rgba(0, 0, 0, 0.6)"
+            textAlign="center"
             borderRadius="sm"
-            fontFamily="Inter"
-            flex="1 1 auto"
             boxShadow="lg"
-            onAnimationEnd={progressComplete}
+            overflow="hidden"
-            sx={
+          >
-              !cancelled
+            <Box
-                ? {
+              height={45}
-                    // really scuffed solution but works, wonder if there's a better way to do this?
+              onAnimationEnd={progressComplete}
-                    "> div:first-of-type": {
+              sx={
+                !cancelled
+                  ? {
+                      backgroundColor: "green.400",
                       animation: `progress-bar linear ${duration}ms`,
-                      borderRadius: "none",
+                    }
-                    },
+                  : {
-                  }
-                : {
-                    "> div:first-of-type": {
                       width: "100%",
                       backgroundColor: "rgb(198, 40, 40)",
-                    },
+                    }
-                  }
+              }
-            }
+            />
-          >
+            <Text
-            <ProgressLabel fontSize={22} fontWeight="light">
+              fontFamily="Inter"
+              isTruncated
+              fontSize={22}
+              fontWeight="light"
+              position="absolute"
+              top="50%"
+              left="50%"
+              transform="translate(-50%, -50%)"
+            >
               {label}
-            </ProgressLabel>
+            </Text>
-          </Progress>
+          </Box>
         </ScaleFade>
       </Box>
     </Flex>

web/src/theme/index.ts

@@ -7,16 +7,4 @@ const config: ThemeConfig = {
 
 export const theme = extendTheme({
     config,
-    components: {
-        Progress: {
-          baseStyle: {
-            filledTrack: {
-              bg: 'green.400'
-            },
-            track: {
-              bg: 'rgba(0, 0, 0, 0.6)'
-            }
-          }
-        },
-    }
 })