From f7cf4db643cb3c9648ebeb06f70fe9dd2fb263b7 Mon Sep 17 00:00:00 2001
From: Soumya Ghosh Dastidar <gdsoumya@gmail.com>
Date: Mon, 9 Sep 2024 10:45:58 +0530
Subject: [PATCH 1/3] fix: more consistent borrow progress colors

Signed-off-by: Soumya Ghosh Dastidar <gdsoumya@gmail.com>
---
 src/ui/src/components/ProgressBar/index.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/ui/src/components/ProgressBar/index.js b/src/ui/src/components/ProgressBar/index.js
index 051912bc..20e18ed1 100644
--- a/src/ui/src/components/ProgressBar/index.js
+++ b/src/ui/src/components/ProgressBar/index.js
@@ -19,10 +19,12 @@ const BorderLinearProgress = styled(LinearProgress)(({ height, value, width }) =
 
     [`& .${linearProgressClasses.bar}`]: {
         background: `${(value < 100)
-            ? (`${(value < 80)
-                ? `linear-gradient(90deg, #39E4B8 ${100 - value}%, rgba(233, 238, 8, 0.99) 100%)`
-                : 'linear-gradient(89.97deg, #39E4B8 28.66%, #E9EE08 45.73%, #E9EE08 73.81%, #EE2408 90.33%)'
-            }`)
+            ? (`${(value <= 35)
+                ? '#39E4B8'
+                : (`${(value <= 75)
+                    ? `linear-gradient(90deg, #39E4B8 ${(34 * 100) / value}%, rgba(233, 238, 8, 0.99) 100%)`
+                    : `linear-gradient(89.97deg, #39E4B8 ${(34 * 100) / value}%, #E9EE08 ${(74 * 100) / value}%, #EE2408 100%)`
+                }`)}`)
             : 'red'
         }`
     }

From d5beae6eff132b36f191c6813985601051bd9f86 Mon Sep 17 00:00:00 2001
From: Soumya Ghosh Dastidar <gdsoumya@gmail.com>
Date: Wed, 18 Sep 2024 11:53:14 +0530
Subject: [PATCH 2/3] feat: modify component for more accuracy

Signed-off-by: Soumya Ghosh Dastidar <gdsoumya@gmail.com>
---
 src/ui/src/components/ProgressBar/index.js | 68 ++++++++++------------
 src/ui/src/components/ProgressBar/style.js | 24 ++++++++
 2 files changed, 55 insertions(+), 37 deletions(-)

diff --git a/src/ui/src/components/ProgressBar/index.js b/src/ui/src/components/ProgressBar/index.js
index 20e18ed1..865c1181 100644
--- a/src/ui/src/components/ProgressBar/index.js
+++ b/src/ui/src/components/ProgressBar/index.js
@@ -1,53 +1,52 @@
 /* eslint-disable no-nested-ternary */
 // eslint-disable-next-line no-use-before-define
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
 import Tooltip from '@mui/material/Tooltip';
 
-import { tooltipStyles } from './style';
+import { progressBarStyles, tooltipStyles } from './style';
 import { truncateNum } from '../../util';
 
-const BorderLinearProgress = styled(LinearProgress)(({ height, value, width }) => ({
-    height,
-    width,
-    value,
-    [`&.${linearProgressClasses.colorPrimary}`]: {
-        backgroundColor: '#EAEAEA'
-    },
+const ProgressBar = (props) => {
+    const { valuePercentage: value, height } = props;
+    const fillerRelativePercentage = (100 / value) * 100;
+    const progressBarClass = progressBarStyles();
+    return (
+        <div
+            className={progressBarClass.wrapper}
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={value}
+        >
+            <div style={{ height }} className={progressBarClass.barContainer}>
+                <div
+                    className={progressBarClass.filler}
+                    style={{ width: `${value}%` }}
+                >
+                    <div
+                        className={progressBarClass.fillerBackground}
+                        style={{ width: `${fillerRelativePercentage}%` }}
+                    />
+                </div>
+            </div>
 
-    [`& .${linearProgressClasses.bar}`]: {
-        background: `${(value < 100)
-            ? (`${(value <= 35)
-                ? '#39E4B8'
-                : (`${(value <= 75)
-                    ? `linear-gradient(90deg, #39E4B8 ${(34 * 100) / value}%, rgba(233, 238, 8, 0.99) 100%)`
-                    : `linear-gradient(89.97deg, #39E4B8 ${(34 * 100) / value}%, #E9EE08 ${(74 * 100) / value}%, #EE2408 100%)`
-                }`)}`)
-            : 'red'
-        }`
-    }
-}));
+        </div>
+    );
+};
 
 const CustomizedProgressBars = (props) => {
-    const { value, backgroundColor, height } = props;
+    const { value, height } = props;
     return (
         <Box sx={{ flexGrow: 1 }}>
-            <BorderLinearProgress
-                variant="determinate"
-                value={value ? ((value > 100) ? 100 : value) : 0}
-                className={backgroundColor}
-                height={height}
-            />
+            <ProgressBar height={height} valuePercentage={value} />
         </Box>
     );
 };
 
 export const ToolTipProgressBars = (props) => {
     const tooltipClass = tooltipStyles();
-    const { value, backgroundColor, height } = props;
-
+    const { value, height } = props;
     return (
         <Tooltip
             title={ value ? `${(value > 100) ? 100 : truncateNum(value)}% Used` : ''}
@@ -55,12 +54,7 @@ export const ToolTipProgressBars = (props) => {
             classes={tooltipClass}
         >
             <Box sx={{ flexGrow: 1 }}>
-                <BorderLinearProgress
-                    variant="determinate"
-                    value={value ? ((value > 100) ? 100 : value) : 0}
-                    className={backgroundColor}
-                    height={height}
-                />
+                <ProgressBar height={height} valuePercentage={value} />
             </Box>
         </Tooltip>
     );
diff --git a/src/ui/src/components/ProgressBar/style.js b/src/ui/src/components/ProgressBar/style.js
index b858b64f..f7b8f2d1 100644
--- a/src/ui/src/components/ProgressBar/style.js
+++ b/src/ui/src/components/ProgressBar/style.js
@@ -8,3 +8,27 @@ export const tooltipStyles = makeStyles({
         marginBottom: '0 !important'
     }
 });
+
+// eslint-disable-next-line import/prefer-default-export
+export const progressBarStyles = makeStyles({
+    wrapper: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    barContainer: {
+        flex: '1',
+        background: '#EAEAEA',
+        overflow: 'hidden'
+    },
+    fillerBackground: {
+        height: 'inherit',
+        transition: '"width 2s ease-i-out"',
+        background: 'linear-gradient(90deg, #39E4B8 35%, #E9EE08 75%, #EE2408 100%)'
+    },
+    filler: {
+        transition: '"width 2s ease-i-out"',
+        height: 'inherit',
+        borderRadius: 'inherit',
+        overflow: 'hidden'
+    }
+});

From c5063652f6a191035b06fb7287f3998091e6bd1d Mon Sep 17 00:00:00 2001
From: "ilya.razievskij" <ilya.razievskij@gmail.com>
Date: Thu, 13 Feb 2025 11:11:22 +0200
Subject: [PATCH 3/3] fix: gradient color

---
 src/ui/src/components/ProgressBar/style.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/ui/src/components/ProgressBar/style.js b/src/ui/src/components/ProgressBar/style.js
index f7b8f2d1..7a956c56 100644
--- a/src/ui/src/components/ProgressBar/style.js
+++ b/src/ui/src/components/ProgressBar/style.js
@@ -23,7 +23,17 @@ export const progressBarStyles = makeStyles({
     fillerBackground: {
         height: 'inherit',
         transition: '"width 2s ease-i-out"',
-        background: 'linear-gradient(90deg, #39E4B8 35%, #E9EE08 75%, #EE2408 100%)'
+        background: 'linear-gradient(90deg, '
+        + '#00C000 0%, '
+        + '#60D000 10%, '
+        + '#A0E000 20%, '
+        + '#D8E800 35%, '
+        + '#FFF000 50%, '
+        + '#FFD000 65%, '
+        + '#FFA000 80%, '
+        + '#FF6000 90%, '
+        + '#FF2000 100%'
+        + ')'
     },
     filler: {
         transition: '"width 2s ease-i-out"',