From aeee4b5eb273f80e468a06b769c75ae28cfd3c94 Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Sat, 18 Mar 2023 18:28:01 -0500
Subject: [PATCH] use alert style for error card

---
 gui/src/components/card/{RetryCard.tsx => ErrorCard.tsx} | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)
 rename gui/src/components/card/{RetryCard.tsx => ErrorCard.tsx} (93%)

diff --git a/gui/src/components/card/RetryCard.tsx b/gui/src/components/card/ErrorCard.tsx
similarity index 93%
rename from gui/src/components/card/RetryCard.tsx
rename to gui/src/components/card/ErrorCard.tsx
index d47f4111..12fa1378 100644
--- a/gui/src/components/card/RetryCard.tsx
+++ b/gui/src/components/card/ErrorCard.tsx
@@ -1,6 +1,6 @@
 import { mustExist } from '@apextoaster/js-utils';
 import { Delete, Replay } from '@mui/icons-material';
-import { Box, Card, CardContent, IconButton, Tooltip, Typography } from '@mui/material';
+import { Alert, Box, Card, CardContent, IconButton, Tooltip } from '@mui/material';
 import { Stack } from '@mui/system';
 import * as React from 'react';
 import { useContext } from 'react';
@@ -51,10 +51,10 @@ export function ErrorCard(props: ErrorCardProps) {
           spacing={2}
           sx={{ alignItems: 'center' }}
         >
-          <Typography>{t('loading.progress', {
+          <Alert severity='error'>{t('loading.progress', {
             current: ready.progress,
             total: image.params.steps,
-          })}</Typography>
+          })}</Alert>
           <Stack direction='row' spacing={2}>
             <Tooltip title={t('tooltip.retry')}>
               <IconButton onClick={() => retry.mutate()}>