refactor(nui): Style adjustments

web/src/components/CircleProgressbar.tsx

@@ -14,14 +14,14 @@ interface Props {
   position?: "middle" | "bottom";
 }
 
-// debugData([
-//   {
-//     action: "circleProgress",
-//     data: {
-//       duration: 8000,
-//     },
-//   },
-// ]);
+debugData([
+  {
+    action: "circleProgress",
+    data: {
+      duration: 8000,
+    },
+  },
+]);
 
 const CircleProgressbar: React.FC = () => {
   const [visible, setVisible] = React.useState(false);
@@ -76,7 +76,7 @@ const CircleProgressbar: React.FC = () => {
           value={value}
           size="7rem"
           onAnimationEnd={progressComplete}
-          color={cancelled ? "rgb(198, 40, 40)" : "blue.300"}
+          color={cancelled ? "rgb(198, 40, 40)" : "blue.400"}
           sx={
             !cancelled
               ? {

web/src/components/Progressbar.tsx

@@ -19,7 +19,7 @@ debugData([
   {
     action: "progress",
     data: {
-      label: "Using lockpick",
+      label: "Using Lockpick",
       duration: 8000,
     },
   },
@@ -66,8 +66,8 @@ const Progressbar: React.FC = () => {
         <ScaleFade in={visible} unmountOnExit>
           <Progress
             value={100}
-            backgroundColor="rgba(0, 0, 0, 0.6)"
-            height="3rem"
+            height="2.8rem"
+            fontFamily="Inter"
             flex="1 1 auto"
             onAnimationEnd={progressComplete}
             sx={
@@ -86,7 +86,7 @@ const Progressbar: React.FC = () => {
                   }
             }
           >
-            <ProgressLabel fontSize={22}>{label}</ProgressLabel>
+            <ProgressLabel fontSize={20}>{label}</ProgressLabel>
           </Progress>
         </ScaleFade>
       </Box>

web/src/index.css

@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap");
 
 body {
   background: none !important;

web/src/theme/index.ts

@@ -1,8 +1,22 @@
-import { extendTheme, type ThemeConfig } from "@chakra-ui/react";
+import { CircularProgress, extendTheme, type ThemeConfig } from "@chakra-ui/react";
 
 const config: ThemeConfig = {
     initialColorMode: 'dark',
     useSystemColorMode: false
 }
 
-export const theme = extendTheme({config})
+export const theme = extendTheme({
+    config,
+    components: {
+        Progress: {
+          baseStyle: {
+            filledTrack: {
+              bg: 'blue.400'
+            },
+            track: {
+                bg: 'rgba(0, 0, 0, 0.6)'
+            }
+          }
+        },
+    }
+})