From 90672ac88dc75e334c622ac9bf1aeff6bac45ee8 Mon Sep 17 00:00:00 2001
From: lyc8503 <me@lyc8503.net>
Date: Mon, 21 Apr 2025 17:07:02 +0800
Subject: [PATCH] fix: title width & warning icon

---
 components/MonitorDetail.tsx |  8 ++++----
 components/MonitorList.tsx   |  4 ++--
 components/OverallStatus.tsx | 11 +++++++----
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/MonitorDetail.tsx b/components/MonitorDetail.tsx
index bef1444..26957e0 100644
--- a/components/MonitorDetail.tsx
+++ b/components/MonitorDetail.tsx
@@ -1,6 +1,6 @@
 import { Text, Tooltip } from '@mantine/core'
 import { MonitorState, MonitorTarget } from '@/types/uptime.types'
-import { IconAlertCircle, IconCircleCheck } from '@tabler/icons-react'
+import { IconAlertCircle, IconAlertTriangle, IconCircleCheck } from '@tabler/icons-react'
 import DetailChart from './DetailChart'
 import DetailBar from './DetailBar'
 import { getColor } from '@/util/color'
@@ -37,18 +37,18 @@ export default function MonitorDetail({
       />
     )
 
-  // check in maintenances
+  // Hide real status icon if monitor is in maintenance
   const now = new Date()
   const hasMaintenance = (maintenances || [])
     .filter((m) => (!m.start && !m.end) || (m.start && m.end && now >= m.start && now <= m.end))
     .find((maintenance) => maintenance.monitors?.includes(monitor.id))
   if (hasMaintenance)
     statusIcon = (
-      <IconAlertCircle
+      <IconAlertTriangle
         style={{
           width: '1.25em',
           height: '1.25em',
-          color: hasMaintenance?.color,
+          color: '#fab005',
           marginRight: '3px',
         }}
       />
diff --git a/components/MonitorList.tsx b/components/MonitorList.tsx
index 4cbfb52..3710496 100644
--- a/components/MonitorList.tsx
+++ b/components/MonitorList.tsx
@@ -102,8 +102,8 @@ export default function MonitorList({
         shadow="sm"
         padding="lg"
         radius="md"
-        ml="xl"
-        mr="xl"
+        ml="md"
+        mr="md"
         mt="xl"
         withBorder={!groupedMonitor}
         style={{ width: groupedMonitor ? '897px' : '865px' }}
diff --git a/components/OverallStatus.tsx b/components/OverallStatus.tsx
index 3d91d2d..0a2a5cf 100644
--- a/components/OverallStatus.tsx
+++ b/components/OverallStatus.tsx
@@ -1,6 +1,6 @@
 import { Maintenances, Monitor } from '@/types/config'
-import { Alert, Card, Center, Container, List, ListItem, Text, Title } from '@mantine/core'
-import { IconCircleCheck, IconAlertCircle, IconInfoCircle } from '@tabler/icons-react'
+import { Alert, Center, Container, List, Text, Title } from '@mantine/core'
+import { IconCircleCheck, IconAlertCircle, IconAlertTriangle } from '@tabler/icons-react'
 import { useEffect, useState } from 'react'
 
 function useWindowVisibility() {
@@ -82,7 +82,7 @@ export default function OverallStatus({
 
   return (
     <>
-      <Container size="md" mt="xl" style={{ width: '897px' }}>
+      <Container size="md" mt="xl">
         <Center>{icon}</Center>
         <Title mt="sm" style={{ textAlign: 'center' }} order={1}>
           {statusString}
@@ -97,11 +97,14 @@ export default function OverallStatus({
           filteredMaintenances.map((maintenance, idx) => (
             <Alert
               key={idx}
-              icon={<IconInfoCircle />}
+              icon={<IconAlertTriangle />}
               title={maintenance.title}
               color={maintenance.color || 'primary'}
               mt="md"
+              ml="md"
+              mr="md"
               withCloseButton={false}
+              style={{ maxWidth: '865px', margin: '0 auto' }}
             >
               <Text>
                 {maintenance.start && (