From e00ef6cbf5f6dbedea7a49640f800fe52d6684f2 Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Sat, 16 Apr 2022 13:04:22 +0200
Subject: [PATCH] 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 | 65 ++++++++++++-----------
 web/src/theme/index.ts                    | 12 -----
 2 files changed, 33 insertions(+), 44 deletions(-)

diff --git a/web/src/features/progress/Progressbar.tsx b/web/src/features/progress/Progressbar.tsx
index f9a12af..c97c116 100644
--- a/web/src/features/progress/Progressbar.tsx
+++ b/web/src/features/progress/Progressbar.tsx
@@ -1,11 +1,5 @@
 import React from "react";
-import {
-  Progress,
-  ProgressLabel,
-  Flex,
-  Box,
-  ScaleFade,
-} from "@chakra-ui/react";
+import { Text, 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
-            value={100}
-            height="2.8rem"
+          <Box
+            height={45}
+            bg="rgba(0, 0, 0, 0.6)"
+            textAlign="center"
             borderRadius="sm"
-            fontFamily="Inter"
-            flex="1 1 auto"
             boxShadow="lg"
-            onAnimationEnd={progressComplete}
-            sx={
-              !cancelled
-                ? {
-                    // really scuffed solution but works, wonder if there's a better way to do this?
-                    "> div:first-of-type": {
+            overflow="hidden"
+          >
+            <Box
+              height={45}
+              onAnimationEnd={progressComplete}
+              sx={
+                !cancelled
+                  ? {
+                      backgroundColor: "green.400",
                       animation: `progress-bar linear ${duration}ms`,
-                      borderRadius: "none",
-                    },
-                  }
-                : {
-                    "> div:first-of-type": {
+                    }
+                  : {
                       width: "100%",
                       backgroundColor: "rgb(198, 40, 40)",
-                    },
-                  }
-            }
-          >
-            <ProgressLabel fontSize={22} fontWeight="light">
+                    }
+              }
+            />
+            <Text
+              fontFamily="Inter"
+              isTruncated
+              fontSize={22}
+              fontWeight="light"
+              position="absolute"
+              top="50%"
+              left="50%"
+              transform="translate(-50%, -50%)"
+            >
               {label}
-            </ProgressLabel>
-          </Progress>
+            </Text>
+          </Box>
         </ScaleFade>
       </Box>
     </Flex>
diff --git a/web/src/theme/index.ts b/web/src/theme/index.ts
index f62fd44..26f6b29 100644
--- a/web/src/theme/index.ts
+++ b/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)'
-            }
-          }
-        },
-    }
 })
\ No newline at end of file