feat(instances): status icon cross, cns tags color

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap

@@ -4898,6 +4898,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  background: rgba(66,134,244,0.1);
   border: 0.0625rem solid rgb(45,56,132);
 }
 
@@ -5358,6 +5359,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                     >
                       <li
                         className="c39"
+                        fill="rgba(66, 134, 244, 0.1)"
                       >
                         serbice
                       </li>
@@ -5367,6 +5369,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                     >
                       <li
                         className="c39"
+                        fill="rgba(66, 134, 244, 0.1)"
                       >
                         dssasda
                       </li>
@@ -5376,6 +5379,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                     >
                       <li
                         className="c39"
+                        fill="rgba(66, 134, 244, 0.1)"
                       >
                         dsasd
                       </li>
@@ -7477,6 +7481,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  background: rgba(66,134,244,0.1);
   border: 0.0625rem solid rgb(45,56,132);
 }
 
@@ -7701,6 +7706,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
                     >
                       <li
                         className="c26"
+                        fill="rgba(66, 134, 244, 0.1)"
                       >
                         serbice
                         <svg
@@ -7729,6 +7735,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
                     >
                       <li
                         className="c26"
+                        fill="rgba(66, 134, 244, 0.1)"
                       >
                         dssasda
                         <svg
@@ -7757,6 +7764,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
                     >
                       <li
                         className="c26"
+                        fill="rgba(66, 134, 244, 0.1)"
                       >
                         dsasd
                         <svg

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap

@@ -6299,6 +6299,7 @@ Array [
                                                 >
                                                     <li
                                                         className="c34"
+                                                        fill={null}
                                                         name="wat"
                                                         style={
                                                             Object {
@@ -7893,6 +7894,7 @@ Array [
                                                 >
                                                     <li
                                                         className="c34"
+                                                        fill={null}
                                                         name="wat"
                                                         style={
                                                             Object {

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap

@@ -6288,6 +6288,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
       >
         <li
           className="c22"
+          fill={null}
           onClick={undefined}
         >
           name1: value1
@@ -6302,6 +6303,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
       >
         <li
           className="c22"
+          fill={null}
           onClick={undefined}
         >
           name2: value2
@@ -6316,6 +6318,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
       >
         <li
           className="c22"
+          fill={null}
           onClick={undefined}
         >
           name3: value3

packages/instance-steps/src/firewall/components.js

@@ -3,21 +3,27 @@ import Flex, { FlexItem } from 'styled-flex-component';
 import { Margin } from 'styled-components-spacing';
 
 import { H3, TickIcon } from 'joyent-ui-toolkit';
-import { StatusIcon } from 'joyent-ui-resource-step';
+import { StatusIcon, ErrorIcon } from 'joyent-ui-resource-step';
 
 export const Preview = ({ enabled }) => (
   <Flex>
     <FlexItem>
       <Margin right={2}>
-        <StatusIcon
+        {enabled ? (
-          fill="green"
+          <StatusIcon
-          border="greenDark"
+            fill="green"
-          Icon={() => <TickIcon fill="white" />}
+            border="greenDark"
-        />
+            Icon={() => <TickIcon fill="white" />}
+          />
+        ) : (
+          <ErrorIcon noLabel inverted />
+        )}
       </Margin>
     </FlexItem>
     <FlexItem>
-      <H3>{enabled ? 'Firewall enabled' : 'Firewall not enabled'}</H3>
+      <H3>
+        {enabled ? 'Firewall rules are enabled' : 'Firewall rules are disabled'}
+      </H3>
     </FlexItem>
   </Flex>
 );

packages/instance-steps/src/tags/index.js

@@ -39,7 +39,7 @@ const TagList = styled(BaseTagList)`
 
 const Tag = ({ name, value, onRemoveClick }) => (
   <Margin right={1} bottom={1} key={`${name}-${value}`}>
-    <TagItem fill="grey" onRemoveClick={onRemoveClick}>
+    <TagItem iconFill="grey" onRemoveClick={onRemoveClick}>
       {name ? `${name}: ${value}` : value}
     </TagItem>
   </Margin>

packages/resource-step/src/status-icon.js

@@ -57,10 +57,22 @@ export const Saved = ({ inverted, children }) => {
   );
 };
 
-export const Error = ({ children }) => (
+export const Error = ({ inverted = false, noLabel = false, children }) => {
-  <StatusIcon border="redDark" Icon={() => <CloseIcon fill="redDark" />}>
+  const fill = inverted ? 'red' : 'white';
-    <Margin right="1">
+  const iconFill = inverted ? 'white' : 'redDark';
-      <Label color="redDark">Error</Label>
+  console.log(inverted, fill, iconFill);
-    </Margin>
+
-  </StatusIcon>
+  return (
-);
+    <StatusIcon
+      border="redDark"
+      fill={fill}
+      Icon={() => <CloseIcon fill={iconFill} />}
+    >
+      {noLabel ? null : (
+        <Margin right="1">
+          <Label color="redDark">Error</Label>
+        </Margin>
+      )}
+    </StatusIcon>
+  );
+};

packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap

@@ -1279,6 +1279,7 @@ Array [
                                         >
                                             <li
                                                 className="c18"
+                                                fill={null}
                                                 name="wat"
                                                 style={
                                                     Object {
@@ -3377,6 +3378,7 @@ Array [
                                     >
                                         <li
                                             className="c14"
+                                            fill={null}
                                             name="wat"
                                             style={
                                                 Object {
@@ -4799,6 +4801,7 @@ Array [
                                         >
                                             <li
                                                 className="c18"
+                                                fill={null}
                                                 name="wat"
                                                 style={
                                                     Object {

packages/resource-widgets/src/cns/index.js

@@ -203,6 +203,7 @@ const CnsHostnames = ({
             {services.map(value => (
               <TagItem
                 active
+                fill={'rgba(66, 134, 244, 0.1)'}
                 key={value}
                 onRemoveClick={
                   onRemoveService && (() => onRemoveService(value))

packages/ui-toolkit/src/tags/item.js

@@ -32,6 +32,10 @@ const Tag = styled.li`
       background: ${props => props.theme.disabled};
   `};
 
+  ${is('fill')`
+    background: ${props => props.fill};
+  `};
+
   ${is('error')`
       border: ${remcalc(1)} solid ${props => props.theme.red};
   `};
@@ -46,13 +50,23 @@ const Tag = styled.li`
 `;
 
 export default withTheme(
-  ({ theme, children, active, onRemoveClick, fill = null, ...rest }) => (
+  ({
+    theme,
+    children,
+    active,
+    onRemoveClick,
+    fill = null,
+    iconFill = null,
+    ...rest
+  }) => (
     <Container>
-      <Tag active={active} {...rest}>
+      <Tag fill={fill} active={active} {...rest}>
         {children}
         {onRemoveClick ? (
           <CloseIcon
-            fill={fill ? fill : active ? theme.primaryActive : theme.text}
+            fill={
+              iconFill ? iconFill : active ? theme.primaryActive : theme.text
+            }
             disabled
             onClick={onRemoveClick}
           />