fix(my-joy-beta): grey out inactive firewalls

fixes #1053
2018-01-23 15:33:55 +01:00 · 2018-01-23 15:33:55 +01:00 · a1ddd37546
commit a1ddd37546
parent 2f87ec96ff
14 changed files with 465 additions and 329 deletions
--- a/packages/my-joy-beta/src/components/tests/snapshots/key-value.spec.js.snap
+++ b/packages/my-joy-beta/src/components/tests/snapshots/key-value.spec.js.snap
@ -463,20 +463,22 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }

 .c23:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c23 svg + span {
@ -1679,20 +1681,22 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }

 .c23:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c23 svg + span {
@ -2631,20 +2635,22 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }

 .c24:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c24:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c24:active,
 .c24:active:hover,
 .c24:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c24 svg + span {
@ -3714,20 +3720,22 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }

 .c23:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c23 svg + span {
@ -4700,20 +4708,22 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }

 .c23:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c23 svg + span {
@ -5755,20 +5765,22 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }

 .c23:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c23:focus {
@ -6736,20 +6748,22 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }

 .c27:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c27:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c27:active,
 .c27:active:hover,
 .c27:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c27:focus {
@ -7892,20 +7906,22 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }

 .c23:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c23 svg + span {
--- a/packages/my-joy-beta/src/components/tests/snapshots/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/components/tests/snapshots/tags.spec.js.snap
@ -328,20 +328,22 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }

 .c23:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c23 svg + span {
@ -1348,20 +1350,22 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }

 .c23:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c23 svg + span {
--- a/packages/my-joy-beta/src/components/create-instance/firewall.js
+++ b/packages/my-joy-beta/src/components/create-instance/firewall.js
@ -4,6 +4,7 @@ import { Margin, Padding } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
+import is from 'styled-is';

 import {
  H3,
@ -27,6 +28,10 @@ const Box = styled.div`
  background-color: ${props => props.theme.white};
  border: ${remcalc(1)} solid ${props => props.theme.grey};
  min-width: 100%;
+
+  ${is('disabled')`
+    color: ${props => props.theme.greyDark}
+  `};
 `;

 const Wildcards = {
@ -43,7 +48,11 @@ const parsePartial = (p, index) => {
    const value = Array.isArray(p[1]) ? p[1][1] : '';
    const name = Array.isArray(p[1]) ? p[1][0] : p[1];

-    return <Tag key={index} name={name} value={value} />;
+    return (
+      <Margin left={0.5}>
+        <Tag norMargin key={index} name={name} value={value} />
+      </Margin>
+    );
  }
 };

@ -58,57 +67,57 @@ const Rule = ({ enabled, rule_obj }) => {
      <Padding left={3} right={3} top={2} bottom={2}>
        <Row>
          <Col xs={3}>
-            <Flex justifyStart alignCenter contentStretch>
+            <Flex justifyStart alignCenter contentStretch full>
              <Margin right={0.5}>
                <FlexItem>
                  <b>From: </b>
                </FlexItem>
              </Margin>
-              <FlexItem grow={1}>
+              <Flex alignCenter>
                <TagList>{froms}</TagList>
-              </FlexItem>
+              </Flex>
            </Flex>
          </Col>
          <Col xs={3}>
-            <Flex justifyStart alignCenter contentStretch>
+            <Flex justifyStart alignCenter contentStretch full>
              <Margin right={0.5}>
                <FlexItem>
                  <b>To: </b>
                </FlexItem>
              </Margin>
-              <FlexItem grow={1}>
+              <Flex alignCenter>
                <TagList>{tos}</TagList>
-              </FlexItem>
+              </Flex>
            </Flex>
          </Col>
          <Col xs={2}>
-            <Flex justifyStart alignCenter contentStretch>
+            <Flex justifyStart alignCenter contentStretch full>
              <Margin right={0.5}>
                <FlexItem>
                  <b>Protocol: </b>
                </FlexItem>
              </Margin>
-              <FlexItem grow={1}>{protocol.name}</FlexItem>
+              <Flex alignCenter>{protocol.name}</Flex>
            </Flex>
          </Col>
          <Col xs={2}>
-            <Flex justifyStart alignCenter contentStretch>
+            <Flex justifyStart alignCenter contentStretch full>
              <Margin right={0.5}>
                <FlexItem>
                  <b>Ports: </b>
                </FlexItem>
              </Margin>
-              <FlexItem grow={1}>{protocol.targets.join(';')}</FlexItem>
+              <Flex alignCenter>{protocol.targets.join(';')}</Flex>
            </Flex>
          </Col>
          <Col xs={2}>
-            <Flex justifyStart alignCenter contentStretch>
+            <Flex justifyStart alignCenter contentStretch full>
              <Margin right={0.5}>
                <FlexItem>
                  <b>Action: </b>
                </FlexItem>
              </Margin>
-              <FlexItem grow={1}>{capitalizeFirstLetter(action)}</FlexItem>
+              <Flex alignCenter>{capitalizeFirstLetter(action)}</Flex>
            </Flex>
          </Col>
        </Row>
@ -148,7 +157,7 @@ export default ({
    ) : null}
    {enabled && !defaultRules.length ? (
      <Margin bottom={4}>
-        <Empty>Sorry, but we weren’t able to find any firewalls.</Empty>
+        <Empty>Sorry, but we weren’t able to find any firewall rules.</Empty>
      </Margin>
    ) : null}
    {enabled && tagRules.length && defaultRules.length ? (
--- a/packages/my-joy-beta/src/components/instances/tests/snapshots/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/tests/snapshots/metadata.spec.js.snap
@ -331,20 +331,22 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }

 .c24:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c24:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c24:active,
 .c24:active:hover,
 .c24:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c24 svg + span {
@ -1395,20 +1397,22 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }

 .c25:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c25 svg + span {
--- a/packages/my-joy-beta/src/components/instances/tests/snapshots/summary.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/tests/snapshots/summary.spec.js.snap
@ -531,20 +531,22 @@ exports[`renders <Summary /> without throwing 1`] = `
 }

 .c23:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c23:focus {
@ -680,20 +682,22 @@ exports[`renders <Summary /> without throwing 1`] = `
 }

 .c24:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c24:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c24:active,
 .c24:active:hover,
 .c24:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c24:focus {
@ -2513,20 +2517,22 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 }

 .c25:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c25 svg + span {
@ -2640,20 +2646,22 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 }

 .c26:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c26:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c26:active,
 .c26:active:hover,
 .c26:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c26 svg + span {
@ -4571,20 +4579,22 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 }

 .c25:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c25 svg + span {
@ -4698,20 +4708,22 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 }

 .c26:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c26:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c26:active,
 .c26:active:hover,
 .c26:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c26 svg + span {
@ -6475,20 +6487,22 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 }

 .c27:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c27:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c27:active,
 .c27:active:hover,
 .c27:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c27:focus {
@ -6624,20 +6638,22 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 }

 .c28:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c28:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c28:active,
 .c28:active:hover,
 .c28:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c28:focus {
@ -8509,20 +8525,22 @@ exports[`renders <Summary state /> without throwing 1`] = `
 }

 .c25:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c25 svg + span {
@ -8636,20 +8654,22 @@ exports[`renders <Summary state /> without throwing 1`] = `
 }

 .c26:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c26:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c26:active,
 .c26:active:hover,
 .c26:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c26 svg + span {
@ -10453,20 +10473,22 @@ exports[`renders <Summary state /> without throwing 2`] = `
 }

 .c25:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c25 svg + span {
@ -10580,20 +10602,22 @@ exports[`renders <Summary state /> without throwing 2`] = `
 }

 .c26:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c26:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c26:active,
 .c26:active:hover,
 .c26:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c26 svg + span {
@ -12190,20 +12214,22 @@ exports[`renders <Summary state /> without throwing 3`] = `
 }

 .c23:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c23:focus {
@ -12339,20 +12365,22 @@ exports[`renders <Summary state /> without throwing 3`] = `
 }

 .c24:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c24:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c24:active,
 .c24:active:hover,
 .c24:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c24:focus {
--- a/packages/my-joy-beta/src/components/tags.js
+++ b/packages/my-joy-beta/src/components/tags.js
@ -12,8 +12,12 @@ export const EditForm = props => (
  <KeyValue {...props} method="edit" input="input" type="tag" expanded />
 );

-export default ({ name, value, onClick, onRemoveClick, active }) => (
-  <Margin right={1} bottom={1} key={`${name}-${value}`}>
+export default ({ norMargin, name, value, onClick, onRemoveClick, active }) => (
+  <Margin
+    right={norMargin ? 0 : 1}
+    bottom={norMargin ? 0 : 1}
+    key={`${name}-${value}`}
+  >
    <TagItem onClick={onClick} active={active} onRemoveClick={onRemoveClick}>
      {name ? `${name}: ${value}` : value}
    </TagItem>
--- a/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/metadata.spec.js.snap
@ -736,20 +736,22 @@ Array [
 }

 .c24:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c24:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c24:active,
 .c24:active:hover,
 .c24:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c24 svg + span {
@ -2639,20 +2641,22 @@ Array [
 }

 .c25:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c25 svg + span {
@ -3737,20 +3741,22 @@ Array [
 }

 .c25:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c25 svg + span {
@ -5088,20 +5094,22 @@ Array [
 }

 .c25:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c25 svg + span {
@ -6186,20 +6194,22 @@ Array [
 }

 .c25:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c25 svg + span {
--- a/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/tag.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/tag.spec.js.snap
@ -734,20 +734,22 @@ Array [
 }

 .c23:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c23 svg + span {
--- a/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/user-script.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/user-script.spec.js.snap
@ -476,20 +476,22 @@ Array [
 }

 .c23:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c23 svg + span {
@ -1678,20 +1680,22 @@ Array [
 }

 .c23:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c23 svg + span {
@ -3553,20 +3557,22 @@ Array [
 }

 .c23:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c23 svg + span {
@ -4764,20 +4770,22 @@ Array [
 }

 .c24:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c24:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c24:active,
 .c24:active:hover,
 .c24:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c24 svg + span {
@ -6117,20 +6125,22 @@ Array [
 }

 .c24:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c24:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c24:active,
 .c24:active:hover,
 .c24:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c24 svg + span {
@ -7381,20 +7391,22 @@ Array [
 }

 .c23:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c23 svg + span {
--- a/packages/my-joy-beta/src/containers/instances/tests/snapshots/list.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/tests/snapshots/list.spec.js.snap
@ -4063,20 +4063,22 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 }

 .c50:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c50:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c50:active,
 .c50:active:hover,
 .c50:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c50:focus {
@ -4211,20 +4213,22 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 }

 .c51:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c51:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c51:active,
 .c51:active:hover,
 .c51:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c51:focus {
@ -6497,20 +6501,22 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 }

 .c50:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c50:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c50:active,
 .c50:active:hover,
 .c50:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c50:focus {
@ -6645,20 +6651,22 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 }

 .c51:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c51:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c51:active,
 .c51:active:hover,
 .c51:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c51:focus {
@ -8931,20 +8939,22 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }

 .c52:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c52:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c52:active,
 .c52:active:hover,
 .c52:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c52:focus {
@ -9079,20 +9089,22 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }

 .c53:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c53:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c53:active,
 .c53:active:hover,
 .c53:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c53:focus {
--- a/packages/my-joy-beta/src/containers/instances/tests/snapshots/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/tests/snapshots/metadata.spec.js.snap
@ -936,20 +936,22 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }

 .c35:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c35:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c35:active,
 .c35:active:hover,
 .c35:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c35 svg + span {
@ -3693,20 +3695,22 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }

 .c38:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c38:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c38:active,
 .c38:active:hover,
 .c38:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c38 svg + span {
@ -3825,20 +3829,22 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }

 .c40:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c40:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c40:active,
 .c40:active:hover,
 .c40:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c40:focus {
--- a/packages/my-joy-beta/src/containers/instances/tests/snapshots/summary.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/tests/snapshots/summary.spec.js.snap
@ -1183,20 +1183,22 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 }

 .c26:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c26:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c26:active,
 .c26:active:hover,
 .c26:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c26 svg + span {
@ -1310,20 +1312,22 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 }

 .c27:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c27:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c27:active,
 .c27:active:hover,
 .c27:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c27 svg + span {
@ -3279,20 +3283,22 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 }

 .c26:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c26:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c26:active,
 .c26:active:hover,
 .c26:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c26 svg + span {
@ -3406,20 +3412,22 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 }

 .c27:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c27:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c27:active,
 .c27:active:hover,
 .c27:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c27 svg + span {
--- a/packages/my-joy-beta/src/containers/instances/tests/snapshots/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/tests/snapshots/tags.spec.js.snap
@ -940,20 +940,22 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }

 .c35:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c35:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c35:active,
 .c35:active:hover,
 .c35:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c35 svg + span {
@ -2832,20 +2834,22 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }

 .c35:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c35:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c35:active,
 .c35:active:hover,
 .c35:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c35 svg + span {
@ -4492,20 +4496,22 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }

 .c35:focus {
+  color: rgb(205,37,27);
  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }

 .c35:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }

 .c35:active,
 .c35:active:hover,
 .c35:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }

 .c35:focus {
--- a/yarn.lock
+++ b/yarn.lock
@ -10,6 +10,12 @@
    esutils "^2.0.2"
    js-tokens "^3.0.0"

+"@babel/helper-annotate-as-pure@^7.0.0-beta.37":
+  version "7.0.0-beta.38"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.38.tgz#888cf28a1b9094d670dbdb1be1ec550b40c2dd9c"
+  dependencies:
+    "@babel/types" "7.0.0-beta.38"
+
 "@babel/helper-function-name@7.0.0-beta.36":
  version "7.0.0-beta.36"
  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.36.tgz#366e3bc35147721b69009f803907c4d53212e88d"
@ -69,6 +75,14 @@
    lodash "^4.2.0"
    to-fast-properties "^2.0.0"

+"@babel/types@7.0.0-beta.38":
+  version "7.0.0-beta.38"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.38.tgz#2ce2443f7dc6ad535a67db4940cbd34e64035a6f"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
 "@commitlint/cli@^4.2.1":
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-4.3.0.tgz#b0d45fb712a5b9c0daa48b07594b68c384fd4dc7"
@ -1146,9 +1160,10 @@ babel-plugin-minify-type-constructors@^0.2.0:
    babel-helper-is-void-0 "^0.2.0"

 babel-plugin-styled-components@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.4.0.tgz#3a2207a1852770a383f0106ca85aded4f3e3488f"
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.5.0.tgz#4549f28a19fb05170aa9ee429b4de0eac2d2401d"
  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0-beta.37"
    babel-types "^6.26.0"
    stylis "^3.0.0"

@ -2117,8 +2132,8 @@ caniuse-api@^1.5.2:
    lodash.uniq "^4.5.0"

 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000793"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000793.tgz#3c00c66e423a7a1907c7dd96769a78b2afa8a72e"
+  version "1.0.30000794"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000794.tgz#bbe71104fa277ce4b362387d54905e8b88e52f35"

 caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000792:
  version "1.0.30000792"
@ -2365,8 +2380,8 @@ clone@^1.0.2:
  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.3.tgz#298d7e2231660f40c003c2ed3140decf3f53085f"

 cloudapi-gql@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/cloudapi-gql/-/cloudapi-gql-4.3.1.tgz#2a61310810400719aab7e3411813e3630cad6e2e"
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/cloudapi-gql/-/cloudapi-gql-4.4.0.tgz#285233dd48c92d7d760e74c4b46b11f54c1a8f00"
  dependencies:
    apr-map "^1.0.5"
    boom "^7.1.1"
@ -2944,9 +2959,9 @@ css-color-names@0.0.4:
  version "0.0.4"
  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"

-css-initials@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/css-initials/-/css-initials-0.1.1.tgz#cc6dcdb70dc6038c6cf494dd4980f001b824a4ab"
+css-initials@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/css-initials/-/css-initials-0.2.0.tgz#14c225bd8656255a6baee07231ef82fa55aacaa3"

 css-loader@0.28.7:
  version "0.28.7"
@ -3382,7 +3397,7 @@ doctrine@1.5.0:
    esutils "^2.0.2"
    isarray "^1.0.0"

-doctrine@^2.0.0, doctrine@^2.0.2:
+doctrine@^2.0.0, doctrine@^2.0.2, doctrine@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
  dependencies:
@ -3548,8 +3563,8 @@ emotion@^8.0.12:
    stylis-rule-sheet "^0.0.5"

 encodeurl@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"

 encoding@^0.1.11:
  version "0.1.12"
@ -3904,8 +3919,8 @@ eslint@4.10.0:
    text-table "~0.2.0"

 eslint@^4.13.1, eslint@^4.15.0, eslint@^4.9.0:
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.15.0.tgz#89ab38c12713eec3d13afac14e4a89e75ef08145"
+  version "4.16.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.16.0.tgz#934ada9e98715e1d7bbfd6f6f0519ed2fab35cc1"
  dependencies:
    ajv "^5.3.0"
    babel-code-frame "^6.22.0"
@ -3913,7 +3928,7 @@ eslint@^4.13.1, eslint@^4.15.0, eslint@^4.9.0:
    concat-stream "^1.6.0"
    cross-spawn "^5.1.0"
    debug "^3.1.0"
-    doctrine "^2.0.2"
+    doctrine "^2.1.0"
    eslint-scope "^3.7.1"
    eslint-visitor-keys "^1.0.0"
    espree "^3.5.2"
@ -5702,8 +5717,8 @@ is-regexp@^1.0.0:
  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"

 is-resolvable@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.1.tgz#acca1cd36dbe44b974b924321555a70ba03b1cf4"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"

 is-retry-allowed@^1.0.0:
  version "1.1.0"
@ -6154,8 +6169,8 @@ joyent-react-scripts@^7.2.0:
    webpack-visualizer-plugin "^0.1.11"

 js-base64@^2.1.9:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.1.tgz#e02813181cd53002888e918935467acb2910e596"
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.2.tgz#1896da010ef8862f385d8887648e9b6dc4a7a2e9"

 js-tokens@^3.0.0, js-tokens@^3.0.2:
  version "3.0.2"
@ -6302,11 +6317,11 @@ jss-global@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-3.0.0.tgz#e19e5c91ab2b96353c227e30aa2cbd938cdaafa2"

-jss-isolate@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/jss-isolate/-/jss-isolate-5.0.0.tgz#89069d58af0b086b4f989d9aff718733f0f7a8f7"
+jss-isolate@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/jss-isolate/-/jss-isolate-5.1.0.tgz#8eff1294c3659f86535852f4aeb79370743d890e"
  dependencies:
-    css-initials "^0.1.0"
+    css-initials "^0.2.0"

 jss-nested@^6.0.1:
  version "6.0.1"
@ -6389,8 +6404,8 @@ lcid@^1.0.0:
    invert-kv "^1.0.0"

 lerna@^2.4.0:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/lerna/-/lerna-2.7.1.tgz#abd536376eca5e9f41a6d611da5b744534ef906f"
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/lerna/-/lerna-2.8.0.tgz#309a816fca5c73ea38f9f20e314a836e99b54cf0"
  dependencies:
    async "^1.5.0"
    chalk "^2.1.0"
@ -6795,7 +6810,7 @@ markdown-table@^1.1.0:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.1.tgz#4b3dd3a133d1518b8ef0dbc709bf2a1b4824bc8c"

-markdown-to-jsx@^6.2.2:
+markdown-to-jsx@^6.3.1:
  version "6.4.1"
  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.4.1.tgz#95fe617b5790fec6f4e0399a296e3a2f10fffaad"
  dependencies:
@ -8102,8 +8117,8 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13:
    supports-color "^5.1.0"

 preact-compat@^3.17.0:
-  version "3.17.0"
-  resolved "https://registry.yarnpkg.com/preact-compat/-/preact-compat-3.17.0.tgz#528cfdfc301190c1a0f47567336be1f4be0266b3"
+  version "3.18.0"
+  resolved "https://registry.yarnpkg.com/preact-compat/-/preact-compat-3.18.0.tgz#ca430cc1f67193fb9feaf7c510832957b2ebe701"
  dependencies:
    immutability-helper "^2.1.2"
    preact-render-to-string "^3.6.0"
@ -8255,8 +8270,8 @@ pump@^1.0.0:
    once "^1.3.1"

 pump@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.0.tgz#7946da1c8d622b098e2ceb2d3476582470829c9d"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
  dependencies:
    end-of-stream "^1.1.0"
    once "^1.3.1"
@ -8677,8 +8692,8 @@ react-styled-flexboxgrid@^2.1.1:
    lodash.isinteger "^4.0.4"

 react-styleguidist@^6.0.33:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.1.0.tgz#08e097f75eae5f59c5bb93ee5301b9a507d729fd"
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.2.0.tgz#26376b37b11a19953a34fa80ea6ecb45b903ea4d"
  dependencies:
    ast-types "^0.10.1"
    buble "^0.18.0"
@ -8708,14 +8723,14 @@ react-styleguidist@^6.0.33:
    jss-compose "^5.0.0"
    jss-default-unit "^8.0.0"
    jss-global "^3.0.0"
-    jss-isolate "5.0.0"
+    jss-isolate "^5.1.0"
    jss-nested "^6.0.1"
    leven "^2.1.0"
    listify "^1.0.0"
    loader-utils "^1.1.0"
    lodash "^4.17.4"
    lowercase-keys "^1.0.0"
-    markdown-to-jsx "^6.2.2"
+    markdown-to-jsx "^6.3.1"
    minimist "^1.2.0"
    ora "^1.3.0"
    prop-types "^15.6.0"
@ -9672,8 +9687,8 @@ setprototypeof@1.1.0:
  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"

 sha.js@^2.4.0, sha.js@^2.4.8:
-  version "2.4.9"
-  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
+  version "2.4.10"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.10.tgz#b1fde5cd7d11a5626638a07c604ab909cfa31f9b"
  dependencies:
    inherits "^2.0.1"
    safe-buffer "^5.0.1"
@ -10634,15 +10649,15 @@ ua-parser-js@^0.7.9:
  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"

 uglify-es@^3.2.1, uglify-es@^3.3.4:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.7.tgz#d1249af668666aba7cb1163e277455be9eb393cf"
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.8.tgz#f2c68e6cff0d0f9dc9577e4da207151c2e753b7e"
  dependencies:
    commander "~2.13.0"
    source-map "~0.6.1"

 uglify-js@3.3.x, uglify-js@^3.0.13:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.7.tgz#28463e7c7451f89061d2b235e30925bf5625e14d"
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.8.tgz#51e9a5db73afb53ac98603d08224edcd0be45fd8"
  dependencies:
    commander "~2.13.0"
    source-map "~0.6.1"
@ -11140,8 +11155,8 @@ webpack-dev-server@2.9.4:
    yargs "^6.6.0"

 webpack-dev-server@^2.9.7:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.11.0.tgz#e9d4830ab7eb16c6f92ed68b92f6089027960e1b"
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.11.1.tgz#6f9358a002db8403f016e336816f4485384e5ec0"
  dependencies:
    ansi-html "0.0.7"
    array-includes "^3.0.3"
@ -11166,7 +11181,7 @@ webpack-dev-server@^2.9.7:
    sockjs "0.3.19"
    sockjs-client "1.1.4"
    spdy "^3.4.1"
-    strip-ansi "^4.0.0"
+    strip-ansi "^3.0.0"
    supports-color "^5.1.0"
    webpack-dev-middleware "1.12.2"
    yargs "6.6.0"