adjust progress circle positioning

jakepeg · Jul 2, 2024 · c99b83d · c99b83d
1 parent e51f867
commit c99b83d
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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",