refactor(nui): Styling and sizing changes

web/src/components/CircleProgressbar.tsx

@@ -12,6 +12,7 @@ import { fetchNui } from "../utils/fetchNui";
 interface Props {
   duration: number;
   position?: "middle" | "bottom";
+  percent?: boolean;
 }
 
 debugData([
@@ -74,9 +75,11 @@ const CircleProgressbar: React.FC = () => {
       <ScaleFade in={visible} unmountOnExit>
         <CircularProgress
           value={value}
-          size="7rem"
+          size="5rem"
+          trackColor="rgba(0, 0, 0, 0.6)"
           onAnimationEnd={progressComplete}
-          color={cancelled ? "rgb(198, 40, 40)" : "blue.400"}
+          thickness={6}
+          color={cancelled ? "rgb(198, 40, 40)" : "white"}
           sx={
             !cancelled
               ? {
@@ -95,7 +98,9 @@ const CircleProgressbar: React.FC = () => {
                 }
           }
         >
-          <CircularProgressLabel color="black">{value}%</CircularProgressLabel>
+          <CircularProgressLabel fontFamily="Fira Mono">
+            {value}%
+          </CircularProgressLabel>
         </CircularProgress>
       </ScaleFade>
     </Flex>

web/src/components/Progressbar.tsx

@@ -67,8 +67,10 @@ const Progressbar: React.FC = () => {
           <Progress
             value={100}
             height="2.8rem"
+            borderRadius="sm"
             fontFamily="Inter"
             flex="1 1 auto"
+            boxShadow="lg"
             onAnimationEnd={progressComplete}
             sx={
               !cancelled
@@ -76,6 +78,7 @@ const Progressbar: React.FC = () => {
                     // really scuffed solution but works, wonder if there's a better way to do this?
                     "> div:first-of-type": {
                       animation: `progress-bar linear ${duration}ms`,
+                      borderRadius: "none",
                     },
                   }
                 : {
@@ -86,7 +89,9 @@ const Progressbar: React.FC = () => {
                   }
             }
           >
-            <ProgressLabel fontSize={20}>{label}</ProgressLabel>
+            <ProgressLabel fontSize={22} fontWeight="light">
+              {label}
+            </ProgressLabel>
           </Progress>
         </ScaleFade>
       </Box>

web/src/components/TextUI.tsx

@@ -48,7 +48,14 @@ const TextUI: React.FC = () => {
       }
     >
       <ScaleFade in={visible} unmountOnExit>
-        <Box bg="blue.400" p={3} fontFamily="Poppins" style={data.style}>
+        <Box
+          bg="gray.700"
+          boxShadow="lg"
+          p={3}
+          fontFamily="Poppins"
+          style={data.style}
+          borderRadius="md"
+        >
           <Text>{data.text}</Text>
         </Box>
       </ScaleFade>

web/src/index.css

@@ -1,5 +1,6 @@
 @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");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap");
 
 body {
   background: none !important;

web/src/index.tsx

@@ -17,6 +17,7 @@ library.add(fas, far, fab);
 if (isEnvBrowser()) {
   const root = document.getElementById("root");
 
+  // https://i.imgur.com/iPTAdYV.png - Night time img
   root!.style.backgroundImage = 'url("https://i.imgur.com/3pzRj9n.png")';
   root!.style.backgroundSize = "cover";
   root!.style.backgroundRepeat = "no-repeat";

web/src/theme/index.ts

@@ -11,10 +11,10 @@ export const theme = extendTheme({
         Progress: {
           baseStyle: {
             filledTrack: {
-              bg: 'blue.400'
+              bg: 'green.400'
             },
             track: {
-                bg: 'rgba(0, 0, 0, 0.6)'
+              bg: 'rgba(0, 0, 0, 0.6)'
             }
           }
         },