Wizard: Fix repo status formatting

This fixes the formatting of repositories status.
osbuild · Jan 17, 2025 · 6e6e3b1 · 6e6e3b1
1 parent 52efa80
commit 6e6e3b1
Showing 1 changed file with 30 additions and 6 deletions.
diff --git a/src/Components/CreateImageWizard/steps/Repositories/RepositoriesStatus.tsx b/src/Components/CreateImageWizard/steps/Repositories/RepositoriesStatus.tsx
@@ -7,6 +7,7 @@ import {
   DescriptionListDescription,
   DescriptionListGroup,
   DescriptionListTerm,
+  Icon,
   Popover,
   Spinner,
 } from '@patternfly/react-core';
@@ -24,6 +25,8 @@ import {
   timestampToDisplayString,
 } from '../../../../Utilities/time';
 
+import '../../../ImagesTable/ImageBuildStatus.scss';
+
 const getLastIntrospection = (
   repoIntrospections: RepositoryStatusProps['repoIntrospections']
 ) => {
@@ -60,7 +63,12 @@ const RepositoriesStatus = ({
   if (repoStatus === 'Valid') {
     return (
       <>
-        <CheckCircleIcon className="success" /> {repoStatus}
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>{' '}
+        <span className="pf-v5-u-font-weight-bold pf-v5-u-success-color-200">
+          {repoStatus}
+        </span>
       </>
     );
   } else if (repoStatus === 'Invalid' || repoStatus === 'Unavailable') {
@@ -126,20 +134,36 @@ const RepositoriesStatus = ({
         >
           <Button variant="link" className="pf-v5-u-p-0 pf-v5-u-font-size-sm">
             {repoStatus === 'Invalid' && (
-              <ExclamationCircleIcon className="error" />
+              <>
+                <Icon status="danger">
+                  <ExclamationCircleIcon />
+                </Icon>{' '}
+                <span className="pf-v5-u-font-weight-bold pf-v5-u-danger-color-200 failure-button">
+                  {repoStatus}
+                </span>
+              </>
             )}
             {repoStatus === 'Unavailable' && (
-              <ExclamationTriangleIcon className="expiring" />
-            )}{' '}
-            <span className="failure-button">{repoStatus}</span>
+              <>
+                <Icon status="warning">
+                  <ExclamationTriangleIcon />
+                </Icon>{' '}
+                <span className="pf-v5-u-font-weight-bold pf-v5-u-warning-color-200 failure-button">
+                  {repoStatus}
+                </span>
+              </>
+            )}
           </Button>
         </Popover>
       </>
     );
   } else if (repoStatus === 'Pending') {
     return (
       <>
-        <Spinner isInline /> {repoStatus}
+        <Spinner isInline />{' '}
+        <span className="pf-v5-u-font-weight-bold pf-v5-u-info-color-200">
+          {repoStatus}
+        </span>
       </>
     );
   }