fix: Use distinct icons for "status dot" (#38)

frontend/src/components/StatusDot.tsx

@@ -1,25 +1,34 @@
 import { FunctionComponent } from 'react'
-import clsx from 'clsx'
+import Icon from './Icon.js'
+import { faCircleCheck, faXmark } from '@fortawesome/free-solid-svg-icons'
 
 export const StatusDot: FunctionComponent<{
   status: 'success' | 'failure' | 'active' | undefined
-}> = (props) => {
-  if (props.status === 'active') {
+}> = ({ status }) => {
+  if (status === 'active') {
     return (
-      <span className='relative inline-block h-3 w-3'>
+      <span className='relative inline-block h-4 w-4'>
         <span className='absolute h-full w-full rounded-full bg-sky-400 opacity-75 animate-ping' />
         <span className='absolute h-full w-full rounded-full bg-blue-500' />
       </span>
     )
   }
 
+  // Distinguish by shape and not just color to be accessible to colorblind users
+
+  if (status === 'success') {
+    return (
+      <Icon icon={faCircleCheck} className='text-green-500 text-base' />
+    )
+  }
+
+  if (status === 'failure') {
+    return (
+      <Icon icon={faXmark} className='text-red-500 text-base' />
+    )
+  }
+
   return (
-    <span className={clsx(
-      'inline-block rounded-full h-3 w-3',
-      props.status === 'success' && 'bg-green-500',
-      props.status === 'failure' && 'bg-red-500',
-      props.status == null && 'bg-gray-500 animate-pulse'
-    )}
-    />
+    <span className='inline-block rounded-full h-4 w-4 bg-gray-500 animate-pulse' />
   )
 }

frontend/src/pages/Job.tsx

@@ -175,7 +175,7 @@ const Pod: FunctionComponent<{
     <Card>
       {/* name and actions */}
       <div className='flex flex-row items-center justify-between'>
-        <div>
+        <div className='flex items-center'>
           <StatusDot status={pod.status} />
           <span className='ml-2'>{pod.namespace}/{pod.name}</span>
         </div>