From c99b83d07d462c48ed77b5588919b6c7c04cca91 Mon Sep 17 00:00:00 2001
From: jakepeg <jakepeg@gmail.com>
Date: Wed, 3 Jul 2024 00:05:16 +0100
Subject: [PATCH] adjust progress circle positioning

---
 src/frontend/components/Balance.jsx             | 5 +++--
 src/frontend_kids/assets/css/golabal.module.css | 3 ++-
 src/frontend_kids/components/Balance.jsx        | 9 ++++-----
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/frontend/components/Balance.jsx b/src/frontend/components/Balance.jsx
index 1a39349..01d8e6a 100644
--- a/src/frontend/components/Balance.jsx
+++ b/src/frontend/components/Balance.jsx
@@ -313,9 +313,10 @@ const Balance = () => {
                     strokeWidth={5}
                     styles={buildStyles({
                       strokeLinecap: "butt",
-                      backgroundColor: "#0B334D",
+                      // backgroundColor: "#0B334D",
+                      backgroundColor: "transparent",
                       textColor: "#fff",
-                      pathColor: "#fff",
+                      pathColor: "#00A4D7",
                       trailColor: "transparent",
                       textSize: "1.2em",
                     })}
diff --git a/src/frontend_kids/assets/css/golabal.module.css b/src/frontend_kids/assets/css/golabal.module.css
index 315a4e2..3dc38d9 100644
--- a/src/frontend_kids/assets/css/golabal.module.css
+++ b/src/frontend_kids/assets/css/golabal.module.css
@@ -54,9 +54,10 @@
   }
 }
 
-
 .circular_progress {
   margin-right: 0; 
+  width: 195px;
+  height: 250px;
 }
 
 @media only screen and (min-width: 420px) and (max-width: 800px) {
diff --git a/src/frontend_kids/components/Balance.jsx b/src/frontend_kids/components/Balance.jsx
index 71cc764..e4de01f 100644
--- a/src/frontend_kids/components/Balance.jsx
+++ b/src/frontend_kids/components/Balance.jsx
@@ -209,23 +209,22 @@ const Balance = () => {
                   display={"flex"}
                   className={styles.circular_progress}
                   flexDirection={"column"}
-                  alignItems={"center"}
+                  alignItems={"right"}
                   sx={{
-                    width: { base: 100, sm: 200, md: 280 },
+                    width: { base: 100, sm: 100, md: 195 },
                     height: { base: 160, sm: 200, md: 250 },
-                    maxHeight: "320px",
+                    maxHeight: "220px",
                   }}
                 >
                   <CircularProgressbar
                     value={percentage}
-                    // width= {"70%"}
                     text={`${percentage}%`}
                     background
                     backgroundPadding={6}
                     strokeWidth={4}
                     styles={buildStyles({
                       strokeLinecap: "butt",
-                      backgroundColor: "#0B334D",
+                      backgroundColor: "transparent",
                       textColor: "#fff",
                       pathColor: "#00A4D7",
                       trailColor: "transparent",