Commit ca83fa2

authored

Make usage indicator more contrast (#10188)

* Make usage indicator more contrast Signed-off-by: Artem Savchenko <armisav@gmail.com> * Use old warning threshold Signed-off-by: Artem Savchenko <armisav@gmail.com> --------- Signed-off-by: Artem Savchenko <armisav@gmail.com>

1 parent c0346f0 commit ca83fa2Copy full SHA for ca83fa2

File tree

2 files changed

+16

-4

lines changed

plugins/billing-resources/src/components
- LimitsIndicator.svelte
- UsageProgressBar.svelte

2 files changed

+16

-4

lines changed

`‎plugins/billing-resources/src/components/LimitsIndicator.svelte‎`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -135,6 +135,6 @@`
`135`	`135`	`border-radius: var(--small-BorderRadius);`
`136`	`136`	`transition: background-color 0.2s ease;`
`137`	`137`	`position: relative;`
`138`		`- border: 1px solid var(--button-secondary-BorderColor);`
	`138`	`+ border: 1px solid var(--theme-trans-color);`
`139`	`139`	`}`
`140`	`140`	`</style>`

`‎plugins/billing-resources/src/components/UsageProgressBar.svelte‎`

Lines changed: 15 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -19,13 +19,13 @@`
`19`	`19`
`20`	`20`	`$: clampedPercent = Math.min(Math.max(percent, 0), 1)`
`21`	`21`
`22`		`- // Calculate color based on current percentage`
`23`		`- $: fillColor = clampedPercent >= 0.9 ? '#e53935' : clampedPercent >= 0.7 ? '#fbc02d' : '#43a047'`
	`22`	`+ // Calculate style class based on current percentage`
	`23`	`+ $: fillClass = clampedPercent >= 0.9 ? 'critical' : clampedPercent >= 0.7 ? 'warning' : 'normal'`
`24`	`24`	`</script>`
`25`	`25`
`26`	`26`	`<div class="progress-bar" style="width: {width}; height: {height};">`
`27`	`27`	`<div class="progress-track">`
`28`		`- <div class="progress-fill" style="width: {clampedPercent * 100}%; background-color: {fillColor};"></div>`
	`28`	`+ <div class="progress-fill{fillClass}" style="width: {clampedPercent * 100}%;"></div>`
`29`	`29`	`</div>`
`30`	`30`	`</div>`
`31`	`31`
`@@ -49,5 +49,17 @@`
`49`	`49`	`transition:`
`50`	`50`	`width 0.3s ease,`
`51`	`51`	`background-color 0.3s ease;`
	`52`	`+`
	`53`	`+ &.normal {`
	`54`	`+ background-color: var(--theme-won-color);`
	`55`	`+ }`
	`56`	`+`
	`57`	`+ &.warning {`
	`58`	`+ background-color: var(--theme-warning-color);`
	`59`	`+ }`
	`60`	`+`
	`61`	`+ &.critical {`
	`62`	`+ background-color: var(--theme-error-color);`
	`63`	`+ }`
`52`	`64`	`}`
`53`	`65`	`</style>`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commit ca83fa2

File tree

2 files changed

2 files changed

`‎plugins/billing-resources/src/components/LimitsIndicator.svelte‎`

`‎plugins/billing-resources/src/components/UsageProgressBar.svelte‎`

0 commit comments