change(ui): change alert fonts

This commit is contained in:
sylenien 2022-08-19 12:49:53 +02:00
parent 3e83a7acec
commit 53339af46b
3 changed files with 9 additions and 9 deletions

View file

@ -92,29 +92,29 @@ function AlertListItem(props: Props) {
)}
</div>
</div>
<div className="text-disabled-text px-2 pb-2">
<div className="color-gray-medium px-2 pb-2">
{'When the '}
<span className="font-medium">{alert.detectionMethod}</span>
<span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>{alert.detectionMethod}</span>
{' of '}
<span className="font-medium">{alert.query.left}</span>
<span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>{alert.query.left}</span>
{' is '}
<span className="font-medium">
<span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>
{alert.query.operator}
{alert.query.right} {alert.metric.unit}
</span>
{' over the past '}
<span className="font-medium">{getThreshold(alert.currentPeriod)}</span>
<span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas' }}>{getThreshold(alert.currentPeriod)}</span>
{alert.detectionMethod === 'change' ? (
<>
{' compared to the previous '}
<span className="font-medium">{getThreshold(alert.previousPeriod)}</span>
<span className="font-semibold" style={{ fontFamily: 'Menlo, Monaco, Consolas ' }}>{getThreshold(alert.previousPeriod)}</span>
</>
) : null}
{', notify me on '}
<span>{getNotifyChannel(alert, webhooks)}</span>.
</div>
{alert.description ? (
<div className="text-disabled-text px-2 pb-2">{alert.description}</div>
<div className="color-gray-medium px-2 pb-2">{alert.description}</div>
) : null}
</div>
);

View file

@ -267,7 +267,7 @@ const NewAlert = (props: IProps) => {
</Form>
<div className="bg-white mt-4 border rounded">
<div className="bg-white mt-4 border rounded mb-10">
{instance && (
<AlertListItem alert={instance} demo siteId="" init={() => null} webhooks={webhooks} />
)}

View file

@ -41,7 +41,7 @@ function DashboardListItem(props: Props) {
</div>
<div className="col-span-2 text-right">{checkForRecent(dashboard.createdAt, 'LLL dd, yyyy, hh:mm a')}</div>
</div>
{dashboard.description ? <div className="text-disabled-text px-2 pb-2">{dashboard.description}</div> : null}
{dashboard.description ? <div className="color-gray-medium px-2 pb-2">{dashboard.description}</div> : null}
</div>
);
}