diff --git a/src/components/Account/HealthBar.tsx b/src/components/Account/HealthBar.tsx index b764f54a..e1f594c6 100644 --- a/src/components/Account/HealthBar.tsx +++ b/src/components/Account/HealthBar.tsx @@ -55,12 +55,53 @@ export default function HealthBar(props: Props) { + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {isUpdated && ( { sub={ diff --git a/src/components/Earn/Lend/LendingMarketsTable.tsx b/src/components/Earn/Lend/LendingMarketsTable.tsx index 3684eb13..57f27a15 100644 --- a/src/components/Earn/Lend/LendingMarketsTable.tsx +++ b/src/components/Earn/Lend/LendingMarketsTable.tsx @@ -116,7 +116,7 @@ export default function LendingMarketsTable(props: Props) { sub={ } diff --git a/src/components/HealthGauge.tsx b/src/components/HealthGauge.tsx index d682fb5b..52521bd7 100644 --- a/src/components/HealthGauge.tsx +++ b/src/components/HealthGauge.tsx @@ -77,6 +77,140 @@ export const HealthGauge = ({ diameter = 40, health = 0, updatedHealth = 0 }: Pr /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/src/utils/healthIndicator.ts b/src/utils/healthIndicator.ts index 73cc4df7..d103697f 100644 --- a/src/utils/healthIndicator.ts +++ b/src/utils/healthIndicator.ts @@ -7,9 +7,9 @@ export function getHealthIndicatorColors( ): [backgroundColor: string, foregroundColor: string] { let backgroundColor = color if (isUpdated && isIncrease) backgroundColor = updatedColor - if (isUpdated && !isIncrease) backgroundColor = `${colorPrefix}-grey` + if (isUpdated && !isIncrease) backgroundColor = `${colorPrefix}-grey-light` - const foreGroundColor = isIncrease ? `${colorPrefix}-grey` : updatedColor + const foreGroundColor = updatedColor return [backgroundColor, foreGroundColor] } diff --git a/tailwind.config.js b/tailwind.config.js index a01972b3..040baba6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -29,11 +29,11 @@ module.exports = { 'text-5xl', 'text-yellow-300', 'text-violet-500', - 'text-grey', + 'text-grey-light', 'fill-yellow-300', 'fill-violet-500', 'fill-martian-red', - 'fill-grey', + 'fill-grey-light', 'w-2', ], theme: {