Michal
/
UptimeFlare
mirror of https://github.com/lyc8503/UptimeFlare.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: improve styles for alert, support mobile devices

pull/113/head
lyc8503 2025-09-21 01:17:00 +08:00
parent 712630a555
commit fcdc203017
2 changed files with 37 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
components/MaintenanceAlert.tsx
View File

@ -1,4 +1,5 @@
import { Alert, List, Text } from '@mantine/core' import { Alert, List, Text, useMantineTheme } from '@mantine/core'
import { useMediaQuery } from '@mantine/hooks'
import { IconAlertTriangle } from '@tabler/icons-react' import { IconAlertTriangle } from '@tabler/icons-react'
import { MaintenanceConfig, MonitorTarget } from '@/types/config' import { MaintenanceConfig, MonitorTarget } from '@/types/config'
@ -9,32 +10,42 @@ export default function MaintenanceAlert({
maintenance: Omit<MaintenanceConfig, 'monitors'> & { monitors?: MonitorTarget[] } maintenance: Omit<MaintenanceConfig, 'monitors'> & { monitors?: MonitorTarget[] }
style?: React.CSSProperties style?: React.CSSProperties
}) { }) {
const titleStyle: React.CSSProperties = {} const theme = useMantineTheme()
const isDesktop = useMediaQuery(`(min-width: ${theme.breakpoints.sm})`)
return ( return (
<Alert <Alert
icon={<IconAlertTriangle />} icon={<IconAlertTriangle />}
title={ title={
( <span
<span style={titleStyle}> style={{
{maintenance.title || 'Scheduled Maintenance'} fontSize: '1rem',
</span> fontWeight: 700,
) }}
>
{maintenance.title || 'Scheduled Maintenance'}
</span>
} }
color={maintenance.color || 'yellow'} color={maintenance.color || 'yellow'}
withCloseButton={false} withCloseButton={false}
style={{ position: 'relative', margin: '16px auto 0 auto', ...style }} style={{ position: 'relative', margin: '16px auto 0 auto', ...style }}
> >
{/* Date range in top right */} {/* Date range in top right (desktop) or inline (mobile) */}
<div <div
style={{ style={{
position: 'absolute', ...{
top: 10, top: 10,
right: 10, fontSize: '0.85rem',
fontSize: '0.85rem', borderRadius: 6,
textAlign: 'right', },
padding: '2px 8px', ...(isDesktop
borderRadius: 6, ? {
position: 'absolute',
right: 10,
padding: '2px 8px',
textAlign: 'right',
}
: {}),
}} }}
> >
<b>From:</b> {new Date(maintenance.start).toLocaleString()} <b>From:</b> {new Date(maintenance.start).toLocaleString()}
@ -43,7 +54,7 @@ export default function MaintenanceAlert({
{maintenance.end ? new Date(maintenance.end).toLocaleString() : 'Until further notice'} {maintenance.end ? new Date(maintenance.end).toLocaleString() : 'Until further notice'}
</div> </div>
<Text>{maintenance.body}</Text> <Text style={{ paddingTop: '3px' }}>{maintenance.body}</Text>
{maintenance.monitors && maintenance.monitors.length > 0 && ( {maintenance.monitors && maintenance.monitors.length > 0 && (
<> <>
<Text mt="xs"> <Text mt="xs">

23
components/NoIncidents.tsx
View File

@ -5,7 +5,16 @@ export default function NoIncidentsAlert({ style }: { style?: React.CSSPropertie
return ( return (
<Alert <Alert
icon={<IconInfoCircle />} icon={<IconInfoCircle />}
title="No Incidents in this month" title={
<span
style={{
fontSize: '1rem',
fontWeight: 700,
}}
>
{'No incidents in this month'}
</span>
}
color="gray" color="gray"
withCloseButton={false} withCloseButton={false}
style={{ style={{
@ -14,18 +23,6 @@ export default function NoIncidentsAlert({ style }: { style?: React.CSSPropertie
...style, ...style,
}} }}
> >
<div
style={{
position: 'absolute',
top: 10,
right: 10,
fontSize: '0.85rem',
textAlign: 'right',
padding: '2px 8px',
borderRadius: 6,
color: '#888',
}}
></div>
<Text>There are no incidents for this month.</Text> <Text>There are no incidents for this month.</Text>
</Alert> </Alert>
) )