From 8c0a44a50073f54945f97115c40f641f6f507f8b Mon Sep 17 00:00:00 2001
From: Richard Bergsma <richard@365devnet.eu>
Date: Wed, 11 Jun 2025 22:05:38 +0200
Subject: [PATCH] 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.
---
 src/components/UptimeStatusIsland.jsx | 31 +++++++++++++--------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/components/UptimeStatusIsland.jsx b/src/components/UptimeStatusIsland.jsx
index 38db80a..b8a1602 100644
--- a/src/components/UptimeStatusIsland.jsx
+++ b/src/components/UptimeStatusIsland.jsx
@@ -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>