From 3148ef6b1f087e061ede67d0f4f2d842b3059cca Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Sun, 20 Mar 2022 19:58:52 +0100
Subject: [PATCH] refactor(nui): Styling and sizing changes

---
 web/src/components/CircleProgressbar.tsx | 11 ++++++++---
 web/src/components/Progressbar.tsx       |  7 ++++++-
 web/src/components/TextUI.tsx            |  9 ++++++++-
 web/src/index.css                        |  3 ++-
 web/src/index.tsx                        |  1 +
 web/src/theme/index.ts                   |  4 ++--
 6 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/web/src/components/CircleProgressbar.tsx b/web/src/components/CircleProgressbar.tsx
index 1809c6e..4a4b6a6 100644
--- a/web/src/components/CircleProgressbar.tsx
+++ b/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>
diff --git a/web/src/components/Progressbar.tsx b/web/src/components/Progressbar.tsx
index 47f741c..b41ee47 100644
--- a/web/src/components/Progressbar.tsx
+++ b/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>
diff --git a/web/src/components/TextUI.tsx b/web/src/components/TextUI.tsx
index a910652..11f711f 100644
--- a/web/src/components/TextUI.tsx
+++ b/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>
diff --git a/web/src/index.css b/web/src/index.css
index d5d4b7e..829e4e7 100644
--- a/web/src/index.css
+++ b/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;
diff --git a/web/src/index.tsx b/web/src/index.tsx
index 9b01721..da2a9e9 100644
--- a/web/src/index.tsx
+++ b/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";
diff --git a/web/src/theme/index.ts b/web/src/theme/index.ts
index f92de46..f66be86 100644
--- a/web/src/theme/index.ts
+++ b/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)'
             }
           }
         },