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:
@@ -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>
|
||||
|
Reference in New Issue
Block a user