Better icon styling to indicate various states

client/src/components/button.js

@@ -20,9 +20,7 @@ export default class Button extends Base {
 
     render() {
         const {working} = this.state || {};
-        const {
-            children, disabled, className, title,
-        } = this.props;
+        const {children, disabled, className, title} = this.props;
 
         return (
             <button

client/src/components/eventsPanel.js

@@ -95,17 +95,14 @@ function sortByName({involvedObject}) {
 
 function getTypeClass(type) {
     switch (type) {
-        case 'Normal':
-            return '';
-
-        case 'Warning':
-        case 'Error':
-            return 'svg_error';
+        case 'Normal': return undefined;
+        case 'Warning': return 'svg_warn';
+        case 'Error': return 'svg_error';
 
         default: {
             const error = new Error('Unexpected event type');
             log.error('Unexpected event type', {error, type});
-            return '';
+            return 'svg_neutral';
         }
     }
 }

client/src/components/listViewHelpers.js

@@ -49,13 +49,13 @@ export function MetadataHeaders({includeNamespace, sort}) {
     );
 }
 
-export function MetadataColumns({item, href, includeNamespace, isError}) {
+export function MetadataColumns({item, href, includeNamespace, resourceClass}) {
     return (
         <>
             <td className='td_icon optional_small'>
                 <ResourceSvg
                     resource={item.kind}
-                    className={isError ? 'svg_error' : undefined}
+                    className={resourceClass}
                 />
                 <div className='td_iconLabel'>{item.kind}</div>
             </td>

client/src/components/podsPanel.js

@@ -74,7 +74,7 @@ export default class PodsPanel extends Base {
                         <tr key={x.metadata.uid}>
                             <MetadataColumns
                                 item={x}
-                                isError={x.status.phase !== 'Running'}
+                                resourceClass={getPhaseStyle(x.status.phase)}
                                 includeNamespace={!skipNamespace}
                                 href={`#!pod/${x.metadata.namespace}/${x.metadata.name}`}
                             />
@@ -89,6 +89,25 @@ export default class PodsPanel extends Base {
     }
 }
 
+function getPhaseStyle(phase) {
+    switch (phase) {
+        case 'Pending':
+            return 'svg_warn';
+
+        case 'Running':
+            return undefined;
+
+        case 'Failed':
+        case 'Unknown':
+            return 'svg_error';
+
+        case 'Succeeded':
+        case 'Completed':
+        default:
+            return 'svg_neutral';
+    }
+}
+
 function sortBy(item, metrics, resource, type) {
     const result = getPodResourcePercent(item, metrics, resource, type);
     return Number.isFinite(result) ? result : -1;

client/src/scss/elements/svg.scss

@@ -5,6 +5,14 @@ svg {
     height: 25px;
 }
 
+.svg_neutral {
+    fill: $color-neutral;
+}
+
+.svg_warn {
+    fill: $color-warn;
+}
+
 .svg_error {
     fill: $color-error;
 }

client/src/scss/settings.scss

@@ -5,8 +5,10 @@ $color-light: #AAA;
 $color-dark: #888098;
 $color-darkest: #344055;
 
-$color-accent: #326ce5;
+$color-accent: #326CE5;
+$color-warn: #aaa810;
 $color-error: #B9314F;
+$color-neutral: $color-dark;
 
 $color-font: $color-darkest;