Update UptimeStatusIsland component styles and gradient for improved visual representation

- Changed the progress bar gradient to a blue color scheme for better alignment with the overall design.
- Adjusted the height and border radius of the progress bar for a more modern appearance.
- Enhanced the transition effect and added a box shadow for improved visual depth.
This commit is contained in:
2025-06-11 22:05:38 +02:00
parent da7a54244e
commit 8c0a44a500

View File

@@ -246,7 +246,7 @@ export default function UptimeStatusIsland() {
const totalBarSeconds = 5 * 60;
const barValue = secondsToNextUpdate !== null ? (totalBarSeconds - secondsToNextUpdate) : 0;
const barPercent = (barValue / totalBarSeconds) * 100;
const barGradient = 'linear-gradient(90deg, #ef4444 0%, #eab308 40%, #22c55e 100%)';
const barGradient = 'linear-gradient(90deg, #0161ef 0%, #0154cf 100%)';
// Format countdown as 'X min XX sec' or 'XXs'
let countdownText = '--';
@@ -263,30 +263,29 @@ export default function UptimeStatusIsland() {
return (
<div>
<div style={{ width: '100%', margin: '0 auto', maxWidth: 1600, padding: '24px 0 8px 0' }}>
<div style={{ height: 12, borderRadius: 8, background: '#e5e7eb', position: 'relative', overflow: 'hidden' }}>
<div
style={{
height: 16,
borderRadius: 9999,
background: '#e5e7eb',
position: 'relative',
overflow: 'hidden',
boxShadow: '0 2px 8px rgba(30,41,59,0.08)',
}}
>
<div
style={{
width: '100%',
width: `calc(${barPercent}% + 2px)`,
height: '100%',
background: barGradient,
borderRadius: 8,
borderRadius: 9999,
position: 'absolute',
left: 0,
top: 0,
zIndex: 1,
}}
></div>
<div
style={{
width: `${100 - barPercent}%`,
height: '100%',
background: '#d1d5db',
borderRadius: 8,
position: 'absolute',
right: 0,
top: 0,
zIndex: 2,
transition: 'width 0.5s cubic-bezier(0.4,0,0.2,1)',
boxShadow: '0 1px 4px rgba(59,130,246,0.10)',
pointerEvents: 'none',
}}
></div>
</div>