From d7a8a55d225a3feeca0a81eb0b11ccca13bb61f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= 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}; `}; `;