From e298b13607003e720579eb4f38c4d678f34ee270 Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Tue, 17 Jan 2023 22:12:47 +0100
Subject: [PATCH] refactor(web/progress): improve progress circle alignment

apparently the circle progress wasn't properly aligned this whole time
---
 .../features/progress/CircleProgressbar.tsx   | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/web/src/features/progress/CircleProgressbar.tsx b/web/src/features/progress/CircleProgressbar.tsx
index 71fda9c..b74b966 100644
--- a/web/src/features/progress/CircleProgressbar.tsx
+++ b/web/src/features/progress/CircleProgressbar.tsx
@@ -48,6 +48,10 @@ const useStyles = createStyles((theme, params: { position: 'middle' | 'bottom';
     textAlign: 'center',
     textShadow: theme.shadows.sm,
     color: theme.colors.gray[3],
+    height: 25,
+  },
+  wrapper: {
+    marginTop: params.position === 'middle' ? 25 : undefined,
   },
 }));
 
@@ -93,15 +97,17 @@ const CircleProgressbar: React.FC = () => {
     <>
       <Stack spacing={0} className={classes.container}>
         <ScaleFade visible={visible}>
-          <RingProgress
-            size={90}
-            thickness={7}
-            sections={[{ value: 0, color: theme.primaryColor }]}
-            onAnimationEnd={progressComplete}
-            className={classes.progress}
-            label={<Text className={classes.value}>{value}%</Text>}
-          />
-          {label && <Text className={classes.label}>{label}</Text>}
+          <Stack spacing={0} align="center" className={classes.wrapper}>
+            <RingProgress
+              size={90}
+              thickness={7}
+              sections={[{ value: 0, color: theme.primaryColor }]}
+              onAnimationEnd={progressComplete}
+              className={classes.progress}
+              label={<Text className={classes.value}>{value}%</Text>}
+            />
+            {label && <Text className={classes.label}>{label}</Text>}
+          </Stack>
         </ScaleFade>
       </Stack>
     </>