From d7a8a55d225a3feeca0a81eb0b11ccca13bb61f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Tue, 27 Jun 2017 18:46:29 +0100
Subject: [PATCH] feat(cp-frontend): update instance status colors based on new
 InstanceStatus'es

---
 .../src/components/instances/list-item.js     | 51 ++++++-------------
 1 file changed, 16 insertions(+), 35 deletions(-)

diff --git a/packages/cp-frontend/src/components/instances/list-item.js b/packages/cp-frontend/src/components/instances/list-item.js
index b0343abd..3a711528 100644
--- a/packages/cp-frontend/src/components/instances/list-item.js
+++ b/packages/cp-frontend/src/components/instances/list-item.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import remcalc from 'remcalc';
 import styled from 'styled-components';
-import is from 'styled-is';
+import is, { isOr } from 'styled-is';
 import titleCase from 'title-case';
 
 import {
@@ -16,17 +16,18 @@ import {
 } from 'joyent-ui-toolkit';
 
 const STATUSES = [
-  'CREATED',
-  'RESTARTING',
   'PROVISIONING',
   'READY',
+  'ACTIVE',
   'RUNNING',
-  'PAUSED',
-  'EXITED',
-  'DELETED',
-  'STOPPED',
   'STOPPING',
-  'FAILED'
+  'STOPPED',
+  'OFFLINE',
+  'DELETED',
+  'DESTROYED',
+  'FAILED',
+  'INCOMPLETE',
+  'UNKNOWN'
 ];
 
 const Span = styled.span`
@@ -41,48 +42,28 @@ const Dot = styled.div`
   border-radius: ${remcalc(3)};
   display: inline-block;
 
-  ${is('created')`
+  ${isOr('provisioning', 'ready', 'active')`
     background-color: ${props => props.theme.primary};
   `};
 
-  ${is('restarting')`
-    background-color: yellow;
-  `};
-
-  ${is('provisioning')`
-    background-color: yellow;
-  `};
-
-  ${is('ready')`
-    background-color: yellow;
-  `};
-
   ${is('running')`
     background-color: ${props => props.theme.green};
   `};
 
-  ${is('paused')`
-    background-color: ${props => props.theme.text};
-  `};
-
-  ${is('exited')`
-    background-color: ${props => props.theme.red};
-  `};
-
-  ${is('deleted')`
-    background-color: ${props => props.theme.secondaryActive};
-  `};
-
   ${is('stopping')`
     background-color: orange;
   `};
 
   ${is('stopped')`
+    background-color: ${props => props.theme.grey};
+  `};
+
+  ${isOr('offline', 'destroyed', 'failed')`
     background-color: ${props => props.theme.red};
   `};
 
-  ${is('failed')`
-    background-color: ${props => props.theme.red};
+  ${isOr('deleted', 'incomplete', 'unknown')`
+    background-color: ${props => props.theme.secondaryActive};
   `};
 `;