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>