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 totalBarSeconds = 5 * 60;
|
||||||
const barValue = secondsToNextUpdate !== null ? (totalBarSeconds - secondsToNextUpdate) : 0;
|
const barValue = secondsToNextUpdate !== null ? (totalBarSeconds - secondsToNextUpdate) : 0;
|
||||||
const barPercent = (barValue / totalBarSeconds) * 100;
|
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'
|
// Format countdown as 'X min XX sec' or 'XXs'
|
||||||
let countdownText = '--';
|
let countdownText = '--';
|
||||||
@@ -263,30 +263,29 @@ export default function UptimeStatusIsland() {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div style={{ width: '100%', margin: '0 auto', maxWidth: 1600, padding: '24px 0 8px 0' }}>
|
<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
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: '100%',
|
width: `calc(${barPercent}% + 2px)`,
|
||||||
height: '100%',
|
height: '100%',
|
||||||
background: barGradient,
|
background: barGradient,
|
||||||
borderRadius: 8,
|
borderRadius: 9999,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
left: 0,
|
left: 0,
|
||||||
top: 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,
|
zIndex: 2,
|
||||||
transition: 'width 0.5s cubic-bezier(0.4,0,0.2,1)',
|
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>
|
||||||
</div>
|
</div>
|
||||||
|
Reference in New Issue
Block a user