Updated Uptime Monitoring liner card gradient.

This commit is contained in:
Tola Leng
2025-07-01 18:59:55 +07:00
parent 48ddc2b4c6
commit d183ca9791
@@ -27,15 +27,15 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
} relative z-10`} } relative z-10`}
style={{ style={{
background: theme === 'dark' background: theme === 'dark'
? "linear-gradient(135deg, rgba(67, 160, 71, 0.8) 0%, rgba(102, 187, 106, 0.6) 100%)" ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(102, 187, 106, 0.6) 100%)"
: "linear-gradient(135deg, #43a047 0%, #66bb6a 100%)" : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #66bb6a 100%)"
}} }}
> >
{/* Grid Pattern Overlay */} {/* Grid Pattern Overlay */}
<div className="absolute inset-0 z-0 opacity-10"> <div className="absolute inset-0 z-0 opacity-10">
<div className="w-full h-full" <div className="w-full h-full"
style={{ style={{
backgroundImage: `linear-gradient(#fff 1px, transparent 1px), backgroundImage: `linear-gradient(#000 1px, transparent 1px),
linear-gradient(90deg, #fff 1px, transparent 1px)`, linear-gradient(90deg, #fff 1px, transparent 1px)`,
backgroundSize: '20px 20px' backgroundSize: '20px 20px'
}} }}
@@ -59,15 +59,15 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
} relative z-10`} } relative z-10`}
style={{ style={{
background: theme === 'dark' background: theme === 'dark'
? "linear-gradient(135deg, rgba(229, 57, 53, 0.8) 0%, rgba(239, 83, 80, 0.6) 100%)" ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(239, 83, 80, 0.6) 100%)"
: "linear-gradient(135deg, #e53935 0%, #ef5350 100%)" : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #ef5350 100%)"
}} }}
> >
{/* Grid Pattern Overlay */} {/* Grid Pattern Overlay */}
<div className="absolute inset-0 z-0 opacity-10"> <div className="absolute inset-0 z-0 opacity-10">
<div className="w-full h-full" <div className="w-full h-full"
style={{ style={{
backgroundImage: `linear-gradient(#fff 1px, transparent 1px), backgroundImage: `linear-gradient(#000 1px, transparent 1px),
linear-gradient(90deg, #fff 1px, transparent 1px)`, linear-gradient(90deg, #fff 1px, transparent 1px)`,
backgroundSize: '20px 20px' backgroundSize: '20px 20px'
}} }}
@@ -91,15 +91,15 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
} relative z-10`} } relative z-10`}
style={{ style={{
background: theme === 'dark' background: theme === 'dark'
? "linear-gradient(135deg, rgba(25, 118, 210, 0.8) 0%, rgba(66, 165, 245, 0.6) 100%)" ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(66, 165, 245, 0.6) 100%)"
: "linear-gradient(135deg, #1976d2 0%, #42a5f5 100%)" : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #42a5f5 100%)"
}} }}
> >
{/* Grid Pattern Overlay */} {/* Grid Pattern Overlay */}
<div className="absolute inset-0 z-0 opacity-10"> <div className="absolute inset-0 z-0 opacity-10">
<div className="w-full h-full" <div className="w-full h-full"
style={{ style={{
backgroundImage: `linear-gradient(#fff 1px, transparent 1px), backgroundImage: `linear-gradient(#000 1px, transparent 1px),
linear-gradient(90deg, #fff 1px, transparent 1px)`, linear-gradient(90deg, #fff 1px, transparent 1px)`,
backgroundSize: '20px 20px' backgroundSize: '20px 20px'
}} }}
@@ -123,15 +123,15 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
} relative z-10`} } relative z-10`}
style={{ style={{
background: theme === 'dark' background: theme === 'dark'
? "linear-gradient(135deg, rgba(255, 152, 0, 0.8) 0%, rgba(255, 183, 77, 0.6) 100%)" ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(255, 183, 77, 0.6) 100%)"
: "linear-gradient(135deg, #ff9800 0%, #ffb74d 100%)" : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #ffb74d 100%)"
}} }}
> >
{/* Grid Pattern Overlay */} {/* Grid Pattern Overlay */}
<div className="absolute inset-0 z-0 opacity-10"> <div className="absolute inset-0 z-0 opacity-10">
<div className="w-full h-full" <div className="w-full h-full"
style={{ style={{
backgroundImage: `linear-gradient(#fff 1px, transparent 1px), backgroundImage: `linear-gradient(#000 1px, transparent 1px),
linear-gradient(90deg, #fff 1px, transparent 1px)`, linear-gradient(90deg, #fff 1px, transparent 1px)`,
backgroundSize: '20px 20px' backgroundSize: '20px 20px'
}} }}