Merge pull request #8 from posm/feature/add-behavior-dashboard

Add PosmStates and PosmStatus

Author: frozenhelium

src/Root/App/Multiplexer/styles.scss

@@ -21,6 +21,7 @@
     .button-primary {
         background-color: var(--color-primary)!important;
         color: var(--color-text-on-primary)!important;
+        padding: var(--spacing-small) var(--spacing-medium)!important;
     }
 }
 

src/components/Info/styles.scss

@@ -7,6 +7,7 @@
     .icon {
         flex-shrink: 0;
         padding: 0 var(--spacing-small);
+        color: var(--color-accent);
         font-size: var(--font-size-extra-large);
     }
 

src/components/ProgressBar/styles.scss

@@ -5,6 +5,7 @@
     height: var(--height-progress-bar);
 
     .progress {
+        transition: var(--duration-transition-slow) width ease-in-out;
         border-radius: var(--radius-border-progress-bar);
         background-color: var(--color-accent);
     }

src/components/TaskItem/index.tsx

@@ -6,7 +6,8 @@ import Icon from '#rscg/Icon';
 
 import styles from './styles.scss';
 
-type Status = 'not-initiated' | 'pending' | 'completed' | 'failed';
+export type Status = 'not-initiated' | 'pending' | 'completed' | 'failed';
+
 interface Props {
     className?: string;
     status: Status;
@@ -22,6 +23,15 @@ const iconNames: {
     pending: 'checkmarkCircleEmpty',
 };
 
+const statusStyles: {
+    [key in Status]: string;
+} = {
+    'not-initiated': styles.notInitiated,
+    completed: styles.completed,
+    failed: styles.failed,
+    pending: styles.pending,
+};
+
 class TaskItem extends React.PureComponent<Props> {
     public render() {
         const {
@@ -31,7 +41,7 @@ class TaskItem extends React.PureComponent<Props> {
         } = this.props;
 
         return (
-            <div className={_cs(styles.taskItem, className)}>
+            <div className={_cs(styles.taskItem, className, statusStyles[status])}>
                 <div className={styles.left}>
                     { status === 'pending' ? (
                         <Spinner className={styles.spinner} />

src/components/TaskItem/styles.scss

@@ -12,4 +12,29 @@
     .right {
         padding: var(--spacing-small) var(--spacing-small);
     }
+
+    &.not-initiated {
+        .left {
+            color: var(--color-primary);
+        }
+    }
+
+    &.completed {
+        .left {
+            color: var(--color-success);
+        }
+    }
+
+    &.failed {
+        .left {
+            color: var(--color-danger);
+        }
+    }
+
+    &.pending {
+        .right {
+            color: var(--color-primary);
+            font-weight: var(--font-weight-bold);
+        }
+    }
 }

src/constants/styleProperties.ts

@@ -2,10 +2,14 @@ const styleProperties = {
     colorDarkBlue: '#394b59',
     colorBlue: '#137cbd',
     colorRed: '#d33f49',
+    colorGreen: '#14a775',
     colorYellow: '#eb9316',
     // fontFamilySansSerif: 'Roboto',
     colorPrimary: 'var(--color-dark-blue)',
-    colorAccent: 'var(--color-red)',
+    // colorPrimaryLight: 'var(--color-blue)',
+    colorAccent: 'var(--color-blue)',
+    colorSuccess: 'var(--color-green)',
+    colorDanger: 'var(--color-red)',
     widthSidebarMin: '200px',
     widthSidebarMax: '320px',
     widthSidebar: '25%',