Refactor theme color handling and improve infinity value representati…

…on in components
MatinDehghanian · Dec 14, 2024 · 5e0db54 · 5e0db54
1 parent 7578512
commit 5e0db54
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 10 deletions.
diff --git a/src/components/Apps.jsx b/src/components/Apps.jsx
@@ -69,7 +69,7 @@ const getAccordionStyles = (theme) => ({
   marginBottom: ".8rem",
   background:
     theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)",
-  color: theme.colors.BWColorRevert[theme.palette.mode],
+  color: theme.colors.BWColorRevert.light,
   "&.Mui-expanded": {
     background:
       theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)",
@@ -343,7 +343,7 @@ const Apps = ({ subLink }) => {
                   expandIcon={
                     <ArrowDropDownIcon
                       sx={{
-                        color: theme.colors.BWColorRevert[theme.palette.mode],
+                        color: theme.colors.BWColorRevert.light,
                       }}
                     />
                   }

diff --git a/src/components/CircularWithValueLabel.jsx b/src/components/CircularWithValueLabel.jsx
@@ -29,7 +29,7 @@ function CircularProgressWithLabel({ value }) {
         typographyGradient: theme.colors.gradients.high.typographyGradient,
       };
     }
-    if (value <= 30 || value > 100) {
+    if (value <= 30) {
       return {
         gradientColors: theme.colors.gradients.high.colors[theme.palette.mode],
         backgroundColor: theme.colors.gradients.high.background,
@@ -52,7 +52,7 @@ function CircularProgressWithLabel({ value }) {
   };
 
   const processedValue =
-    value === Infinity ? 0 : value > 100 ? 100 : value > 0 ? value : 0;
+    value === Infinity ? Infinity : value > 100 ? 100 : value > 0 ? value : 0;
 
   const { gradientColors, backgroundColor, typographyGradient } =
     getStyles(value);
@@ -106,7 +106,9 @@ function CircularProgressWithLabel({ value }) {
             textAlign: "center",
           }}
         >
-          {`${Math.round(processedValue)}%`}
+          {`${
+            processedValue === Infinity ? "∞" : Math.round(processedValue) + "%"
+          }`}
         </Typography>
       </Box>
 

diff --git a/src/components/UsageBox.jsx b/src/components/UsageBox.jsx
@@ -18,7 +18,7 @@ const UsageBox = ({ type, value, total, remaining }) => {
   const getTypographyGradient = (v) => {
     if (v === Infinity) {
       return `linear-gradient(0deg, ${theme.palette.success.main}, ${theme.palette.success.dark})`;
-    } else if (v <= 30 || v > 100) {
+    } else if (v <= 30) {
       return `linear-gradient(0deg, ${theme.palette.success.main}, ${theme.palette.success.dark})`;
     } else if (v <= 70) {
       return `linear-gradient(0deg, ${theme.palette.warning.main}, ${theme.palette.warning.dark})`;
@@ -82,7 +82,9 @@ const UsageBox = ({ type, value, total, remaining }) => {
             fontWeight: "700",
           }}
         >
-          {remainingParsed.number}
+          {remainingParsed.text === t("infinity")
+            ? remainingParsed.text
+            : remainingParsed.number}
         </Typography>
         <Typography
           variant="h6"
@@ -119,7 +121,9 @@ const UsageBox = ({ type, value, total, remaining }) => {
             {totaltitle}
           </Typography>
           <Typography variant="h6" component="div">
-            {totalParsed.number}
+            {totalParsed.text === t("infinity")
+              ? totalParsed.text
+              : totalParsed.number}
           </Typography>
           <Typography
             variant="h6"

diff --git a/src/utils/Helper.js b/src/utils/Helper.js
@@ -86,7 +86,7 @@ export const calculateUsedTimePercentage = (expireTimestamp) => {
   } else if (typeof expireTimestamp === "number") {
     expireTimeInSeconds = expireTimestamp;
   } else {
-    return 0;
+    return Infinity;
   }
 
   const remainingSeconds = expireTimeInSeconds - Math.floor(Date.now() / 1000);
@@ -111,7 +111,7 @@ export const calculateUsedTimePercentage = (expireTimestamp) => {
     return ((180 - daysRemaining) / 180) * 100;
   }
 
-  return 0;
+  return Infinity;
 };
 
 export const formatTraffic = (bytes, t) => {