fix: more consistent borrow progress colors

src/ui/src/components/ProgressBar/index.js

@@ -1,64 +1,60 @@
 /* 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 < 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%)'
-            }`)
-            : '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` : ''}
             placement="top"
             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>
     );

src/ui/src/components/ProgressBar/style.js

@@ -8,3 +8,37 @@ 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, '
+        + '#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"',
+        height: 'inherit',
+        borderRadius: 'inherit',
+        overflow: 'hidden'
+    }
+});