feat(my-joy-beta): revise card documentation

fixes #965

bundle/package.json

@@ -12,9 +12,9 @@
     "prepublish": "echo 0"
   },
   "dependencies": {
-    "apr-main": "^4.0.2",
+    "apr-main": "^4.0.3",
     "brule": "^3.1.0",
-    "cloudapi-gql": "^4.5.0",
+    "cloudapi-gql": "^4.5.1",
     "hapi": "^17.2.0",
     "inert": "^5.1.0",
     "joyent-navigation": "^1.0.0",

package.json

@@ -65,11 +65,26 @@
     "yargs": "^10.0.3"
   },
   "resolutions": {
-    "styled-components": "2.4.0",
+    "styled-components": "3.1.3",
+    "axios": "0.16.2",
+    "follow-redirects": "1.4.1",
+    "debug": "3.1.0",
+    "node-fetch": "1.7.3",
+    "ansi-styles": "3.2.0",
+    "strip-ansi": "4.0.0",
+    "supports-color": "4.5.0",
+    "ansi-regex": "3.0.0",
+    "core-js": "2.5.3",
+    "regenerator-runtime": "0.11.1",
+    "pify": "3.0.0",
+    "has-flag": "2.0.0",
+    "parse-json": "3.0.0",
     "hoist-non-react-statics": "2.3.1",
+    "stylis-rule-sheet": "0.0.7",
     "react": "16.2.0",
     "breeze-nexttick": "0.2.1",
-    "zen-observable": "0.7.1"
+    "zen-observable": "0.7.1",
+    "styled-is": "1.1.2"
   },
   "workspaces": [
     "packages/*",

packages/icons/package.json

@@ -18,16 +18,16 @@
     "prepublish": "NODE_ENV=production npm run compile"
   },
   "dependencies": {
-    "remcalc": "^1.0.9",
+    "remcalc": "^1.0.10",
-    "rnd-id": "^2.0.0",
+    "rnd-id": "^2.0.2",
-    "styled-components": "^2.3.0"
+    "styled-components": "^3.1.2"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-preset-joyent-portal": "^6.0.1",
+    "babel-preset-joyent-portal": "^6.0.3",
-    "eslint": "^4.13.1",
+    "eslint": "^4.16.0",
-    "eslint-config-joyent-portal": "^3.2.0",
+    "eslint-config-joyent-portal": "^3.3.1",
-    "joyent-react-scripts": "^7.2.0",
+    "joyent-react-scripts": "^7.2.2",
     "react": "^16.2.0",
     "redrun": "^5.10.0"
   },

packages/my-joy-beta/package.json

@@ -18,13 +18,13 @@
   "dependencies": {
     "@manaflair/redux-batch": "^0.1.0",
     "apollo": "^0.2.2",
-    "apr-intercept": "^3.0.2",
+    "apr-intercept": "^3.0.3",
     "bytes": "^3.0.0",
-    "clipboard-copy": "^1.2.0",
+    "clipboard-copy": "^1.2.1",
     "constant-case": "^2.0.0",
     "date-fns": "^1.29.0",
     "declarative-redux-form": "^2.0.8",
-    "joyent-manifest-editor": "1.4.0",
+    "joyent-manifest-editor": "3.0.1",
     "joyent-ui-toolkit": "^4.5.0",
     "lodash.find": "^4.6.0",
     "lodash.get": "^4.4.2",
@@ -38,7 +38,7 @@
     "lodash.uniqby": "^4.7.0",
     "lunr": "^2.1.5",
     "mz": "^2.7.0",
-    "normalized-styled-components": "^1.0.17",
+    "normalized-styled-components": "^1.0.18",
     "param-case": "^2.1.1",
     "prop-types": "^15.6.0",
     "punycode": "^2.1.0",
@@ -51,21 +51,21 @@
     "react-router-dom": "^4.2.2",
     "redux": "^3.7.2",
     "redux-actions": "^2.2.1",
-    "redux-form": "^7.2.0",
+    "redux-form": "^7.2.1",
-    "remcalc": "^1.0.9",
+    "remcalc": "^1.0.10",
-    "styled-components": "^2.4.0",
+    "styled-components": "^3.1.2",
     "styled-components-spacing": "^2.1.3",
     "styled-flex-component": "^2.1.0",
     "title-case": "^2.1.1"
   },
   "devDependencies": {
-    "babel-preset-joyent-portal": "^6.0.1",
+    "babel-preset-joyent-portal": "^6.0.3",
-    "eslint": "^4.13.1",
+    "eslint": "^4.16.0",
-    "eslint-config-joyent-portal": "^3.2.0",
+    "eslint-config-joyent-portal": "^3.3.1",
     "jest-image-snapshot": "^2.3.0",
-    "jest-styled-components": "^4.9.0",
+    "jest-styled-components": "^4.11.0-0",
-    "joyent-react-scripts": "^7.2.0",
+    "joyent-react-scripts": "^7.2.2",
-    "react-screenshot-renderer": "^1.1.0",
+    "react-screenshot-renderer": "^1.1.2",
     "react-test-renderer": "^16.2.0",
     "redrun": "^5.10.0"
   }

packages/my-joy-beta/src/app.js

@@ -7,7 +7,6 @@ import { theme, RootContainer } from 'joyent-ui-toolkit';
 
 import { client, store } from '@state/store';
 import Router from '@root/router';
-import remcalc from 'remcalc';
 
 const { NODE_ENV } = process.env;
 const IS_PRODUCTION = NODE_ENV === 'production';
@@ -19,40 +18,7 @@ const fullTheme = {
     href: !IS_PRODUCTION
       ? theme.font.href
       : () =>
-          'https://fonts.googleapis.com/css?family=Libre+Franklin:400,500,600'
+          'https://fonts.googleapis.com/css?family=Libre+Franklin:400,500,600,700'
-  },
-  flexboxgrid: {
-    gridSize: 12, // rem
-    gutterWidth: 1.25, // rem
-    outerMargin: 1.875, // rem
-    mediaQuery: 'only screen',
-    container: {
-      sm: 46, // rem
-      md: 56, // rem
-      lg: 59 // rem
-    },
-    breakpoints: {
-      xs: 0, // em
-      sm: 48, // em
-      md: 64, // em
-      lg: 75 // em
-    }
-  },
-  spacing: {
-    0: remcalc(0),
-    0.5: remcalc(3),
-    1: remcalc(6),
-    1.5: remcalc(9),
-    2: remcalc(12),
-    3: remcalc(18),
-    4: remcalc(24),
-    5: remcalc(30),
-    6: remcalc(36),
-    7: remcalc(42),
-    8: remcalc(48),
-    9: remcalc(54),
-    10: remcalc(60),
-    '14px': remcalc(14)
   }
 };
 

packages/my-joy-beta/src/components/__tests__/__snapshots__/cns.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`renders <AddServiceForm /> without throwing 1`] = `
 .c4 {
-  margin-left: 0.5rem;
+  margin-left: 0.75rem;
 }
 
 .c0 {
@@ -267,7 +267,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
 
 exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
 .c4 {
-  margin-left: 0.5rem;
+  margin-left: 0.75rem;
 }
 
 .c0 {
@@ -581,7 +581,7 @@ Array [
     Hostnames
 </h3>,
   .c0 {
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.75rem;
 }
 
 .c1 {
@@ -620,11 +620,11 @@ exports[`renders <Hostname /> without throwing 1`] = `null`;
 
 exports[`renders <Hostname values /> without throwing 1`] = `
 .c0 {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c5 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c1 {
@@ -849,11 +849,11 @@ exports[`renders <Hostname values /> without throwing 1`] = `
 
 exports[`renders <HostnamesHeader /> without throwing 1`] = `
 .c0 {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
 }
 
 .c2 {
-  padding-bottom: 1rem;
+  padding-bottom: 1.125rem;
 }
 
 .c3 {

packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap

@@ -2,12 +2,12 @@
 
 exports[`renders <KeyValue /> without throwing 1`] = `
 .c3 {
-  padding-right: 1rem;
+  padding-right: 1.125rem;
-  padding-left: 1rem;
+  padding-left: 1.125rem;
 }
 
 .c8 {
-  padding: 1rem;
+  padding: 1.125rem;
 }
 
 .c16 {
@@ -25,8 +25,8 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c17 {
@@ -34,8 +34,8 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c22 {
@@ -43,8 +43,8 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c4 {
@@ -989,8 +989,8 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 
 exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
 .c3 {
-  padding-right: 1rem;
+  padding-right: 1.125rem;
-  padding-left: 1rem;
+  padding-left: 1.125rem;
 }
 
 .c4 {
@@ -1219,12 +1219,12 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
 
 exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 .c3 {
-  padding-right: 1rem;
+  padding-right: 1.125rem;
-  padding-left: 1rem;
+  padding-left: 1.125rem;
 }
 
 .c8 {
-  padding: 1rem;
+  padding: 1.125rem;
 }
 
 .c16 {
@@ -1242,8 +1242,8 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c17 {
@@ -1251,8 +1251,8 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c22 {
@@ -1260,8 +1260,8 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c4 {
@@ -2206,12 +2206,12 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 
 exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 .c3 {
-  padding-right: 1rem;
+  padding-right: 1.125rem;
-  padding-left: 1rem;
+  padding-left: 1.125rem;
 }
 
 .c8 {
-  padding: 1rem;
+  padding: 1.125rem;
 }
 
 .c18 {
@@ -2229,8 +2229,8 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c9 {
@@ -2248,8 +2248,8 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c10 {
@@ -2257,8 +2257,8 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c23 {
@@ -2266,8 +2266,8 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c4 {
@@ -3256,12 +3256,12 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 
 exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 .c3 {
-  padding-right: 1rem;
+  padding-right: 1.125rem;
-  padding-left: 1rem;
+  padding-left: 1.125rem;
 }
 
 .c8 {
-  padding: 1rem;
+  padding: 1.125rem;
 }
 
 .c16 {
@@ -3279,8 +3279,8 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c17 {
@@ -3288,8 +3288,8 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c22 {
@@ -3297,8 +3297,8 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c4 {
@@ -4243,12 +4243,12 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 
 exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 .c3 {
-  padding-right: 1rem;
+  padding-right: 1.125rem;
-  padding-left: 1rem;
+  padding-left: 1.125rem;
 }
 
 .c8 {
-  padding: 1rem;
+  padding: 1.125rem;
 }
 
 .c16 {
@@ -4266,8 +4266,8 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c17 {
@@ -4275,8 +4275,8 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c22 {
@@ -4284,8 +4284,8 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c4 {
@@ -5241,12 +5241,12 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 
 exports[`renders <KeyValue removing /> without throwing 1`] = `
 .c3 {
-  padding-right: 1rem;
+  padding-right: 1.125rem;
-  padding-left: 1rem;
+  padding-left: 1.125rem;
 }
 
 .c8 {
-  padding: 1rem;
+  padding: 1.125rem;
 }
 
 .c16 {
@@ -5264,8 +5264,8 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c17 {
@@ -5273,8 +5273,8 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c22 {
@@ -5282,8 +5282,8 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c4 {
@@ -6312,12 +6312,12 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 
 exports[`renders <KeyValue submitting /> without throwing 1`] = `
 .c3 {
-  padding-right: 1rem;
+  padding-right: 1.125rem;
-  padding-left: 1rem;
+  padding-left: 1.125rem;
 }
 
 .c8 {
-  padding: 1rem;
+  padding: 1.125rem;
 }
 
 .c16 {
@@ -6335,8 +6335,8 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c17 {
@@ -6344,8 +6344,8 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c26 {
@@ -6353,8 +6353,8 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c4 {
@@ -7438,12 +7438,12 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 
 exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 .c3 {
-  padding-right: 1rem;
+  padding-right: 1.125rem;
-  padding-left: 1rem;
+  padding-left: 1.125rem;
 }
 
 .c8 {
-  padding: 1rem;
+  padding: 1.125rem;
 }
 
 .c16 {
@@ -7461,8 +7461,8 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c17 {
@@ -7470,8 +7470,8 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c22 {
@@ -7479,8 +7479,8 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c4 {

packages/my-joy-beta/src/components/__tests__/__snapshots__/network.spec.js.snap

@@ -2,24 +2,24 @@
 
 exports[`renders <Network /> without throwing 1`] = `
 .c2 {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c17 {
-  margin-right: 2rem;
+  margin-right: 1.5rem;
 }
 
 .c20 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c12 {
-  padding-right: 0;
+  padding-right: 0rem;
-  padding-left: 0;
+  padding-left: 0rem;
 }
 
 .c15 {
-  padding: 2rem;
+  padding: 1.5rem;
 }
 
 .c16 {
@@ -97,8 +97,8 @@ exports[`renders <Network /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c1 {
@@ -106,8 +106,8 @@ exports[`renders <Network /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c9 {
@@ -706,24 +706,24 @@ exports[`renders <Network /> without throwing 1`] = `
 
 exports[`renders <Network /> without throwing 2`] = `
 .c10 {
-  margin-right: 2rem;
+  margin-right: 1.5rem;
 }
 
 .c12 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c2 {
   display: inline-block;
-  margin-top: 1rem;
+  margin-top: 1.125rem;
-  margin-right: 1rem;
+  margin-right: 1.125rem;
 }
 
 .c6 {
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
-  margin-right: 1rem;
+  margin-right: 1.125rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
-  margin-left: 1rem;
+  margin-left: 1.125rem;
 }
 
 .c9 {
@@ -824,8 +824,8 @@ exports[`renders <Network /> without throwing 2`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c1 {
@@ -833,8 +833,8 @@ exports[`renders <Network /> without throwing 2`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c7 {
@@ -1033,28 +1033,28 @@ exports[`renders <Network /> without throwing 2`] = `
 
 exports[`renders <Network {...network} /> without throwing 1`] = `
 .c2 {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c19 {
-  margin-right: 2rem;
+  margin-right: 1.5rem;
 }
 
 .c22 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c16 {
-  margin-bottom: 1rem;
+  margin-bottom: 1.125rem;
 }
 
 .c12 {
-  padding-right: 0;
+  padding-right: 0rem;
-  padding-left: 0;
+  padding-left: 0rem;
 }
 
 .c15 {
-  padding: 2rem;
+  padding: 1.5rem;
 }
 
 .c18 {
@@ -1132,8 +1132,8 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c1 {
@@ -1141,8 +1141,8 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c9 {
@@ -1752,24 +1752,24 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
 
 exports[`renders <Network {...network} /> without throwing 2`] = `
 .c10 {
-  margin-right: 2rem;
+  margin-right: 1.5rem;
 }
 
 .c12 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c2 {
   display: inline-block;
-  margin-top: 1rem;
+  margin-top: 1.125rem;
-  margin-right: 1rem;
+  margin-right: 1.125rem;
 }
 
 .c6 {
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
-  margin-right: 1rem;
+  margin-right: 1.125rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
-  margin-left: 1rem;
+  margin-left: 1.125rem;
 }
 
 .c9 {
@@ -1870,8 +1870,8 @@ exports[`renders <Network {...network} /> without throwing 2`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c1 {
@@ -1879,8 +1879,8 @@ exports[`renders <Network {...network} /> without throwing 2`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c7 {
@@ -2081,28 +2081,28 @@ exports[`renders <Network {...network} /> without throwing 2`] = `
 
 exports[`renders <Network {...network} /> without throwing 3`] = `
 .c2 {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c19 {
-  margin-right: 2rem;
+  margin-right: 1.5rem;
 }
 
 .c22 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c16 {
-  margin-bottom: 1rem;
+  margin-bottom: 1.125rem;
 }
 
 .c12 {
-  padding-right: 0;
+  padding-right: 0rem;
-  padding-left: 0;
+  padding-left: 0rem;
 }
 
 .c15 {
-  padding: 2rem;
+  padding: 1.5rem;
 }
 
 .c18 {
@@ -2180,8 +2180,8 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c1 {
@@ -2189,8 +2189,8 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c9 {
@@ -2800,24 +2800,24 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
 
 exports[`renders <Network {...network} /> without throwing 4`] = `
 .c10 {
-  margin-right: 2rem;
+  margin-right: 1.5rem;
 }
 
 .c12 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c2 {
   display: inline-block;
-  margin-top: 1rem;
+  margin-top: 1.125rem;
-  margin-right: 1rem;
+  margin-right: 1.125rem;
 }
 
 .c6 {
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
-  margin-right: 1rem;
+  margin-right: 1.125rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
-  margin-left: 1rem;
+  margin-left: 1.125rem;
 }
 
 .c9 {
@@ -2918,8 +2918,8 @@ exports[`renders <Network {...network} /> without throwing 4`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c1 {
@@ -2927,8 +2927,8 @@ exports[`renders <Network {...network} /> without throwing 4`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c7 {
@@ -3129,37 +3129,37 @@ exports[`renders <Network {...network} /> without throwing 4`] = `
 
 exports[`renders <Network {...network} fabric /> without throwing 1`] = `
 .c2 {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c19 {
-  margin-right: 2rem;
+  margin-right: 1.5rem;
 }
 
 .c22 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c16 {
-  margin-bottom: 1rem;
+  margin-bottom: 1.125rem;
 }
 
 .c23 {
-  margin-top: 1rem;
+  margin-top: 1.125rem;
 }
 
 .c12 {
-  padding-right: 0;
+  padding-right: 0rem;
-  padding-left: 0;
+  padding-left: 0rem;
 }
 
 .c15 {
-  padding: 2rem;
+  padding: 1.5rem;
 }
 
 .c27 {
-  padding-right: 1rem;
+  padding-right: 1.125rem;
-  padding-left: 1rem;
+  padding-left: 1.125rem;
 }
 
 .c18 {
@@ -3237,8 +3237,8 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c1 {
@@ -3246,8 +3246,8 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c9 {
@@ -4177,24 +4177,24 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
 
 exports[`renders <Network {...network} fabric /> without throwing 2`] = `
 .c10 {
-  margin-right: 2rem;
+  margin-right: 1.5rem;
 }
 
 .c12 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c2 {
   display: inline-block;
-  margin-top: 1rem;
+  margin-top: 1.125rem;
-  margin-right: 1rem;
+  margin-right: 1.125rem;
 }
 
 .c6 {
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
-  margin-right: 1rem;
+  margin-right: 1.125rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
-  margin-left: 1rem;
+  margin-left: 1.125rem;
 }
 
 .c9 {
@@ -4295,8 +4295,8 @@ exports[`renders <Network {...network} fabric /> without throwing 2`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c1 {
@@ -4304,8 +4304,8 @@ exports[`renders <Network {...network} fabric /> without throwing 2`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c7 {
@@ -4506,41 +4506,41 @@ exports[`renders <Network {...network} fabric /> without throwing 2`] = `
 
 exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
 .c2 {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c19 {
-  margin-right: 2rem;
+  margin-right: 1.5rem;
 }
 
 .c22 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c16 {
-  margin-bottom: 1rem;
+  margin-bottom: 1.125rem;
 }
 
 .c23 {
-  margin-top: 1rem;
+  margin-top: 1.125rem;
 }
 
 .c12 {
-  padding-right: 0;
+  padding-right: 0rem;
-  padding-left: 0;
+  padding-left: 0rem;
 }
 
 .c15 {
-  padding: 2rem;
+  padding: 1.5rem;
 }
 
 .c25 {
-  padding-right: 1rem;
+  padding-right: 1.125rem;
-  padding-left: 1rem;
+  padding-left: 1.125rem;
 }
 
 .c26 {
-  padding: 1rem;
+  padding: 1.125rem;
 }
 
 .c18 {
@@ -4641,8 +4641,8 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c1 {
@@ -4650,8 +4650,8 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c9 {
@@ -5651,24 +5651,24 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
 
 exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
 .c10 {
-  margin-right: 2rem;
+  margin-right: 1.5rem;
 }
 
 .c12 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c2 {
   display: inline-block;
-  margin-top: 1rem;
+  margin-top: 1.125rem;
-  margin-right: 1rem;
+  margin-right: 1.125rem;
 }
 
 .c6 {
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
-  margin-right: 1rem;
+  margin-right: 1.125rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
-  margin-left: 1rem;
+  margin-left: 1.125rem;
 }
 
 .c9 {
@@ -5769,8 +5769,8 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c1 {
@@ -5778,8 +5778,8 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c7 {
@@ -5980,28 +5980,28 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
 
 exports[`renders <Network {...network} public /> without throwing 1`] = `
 .c2 {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c19 {
-  margin-right: 2rem;
+  margin-right: 1.5rem;
 }
 
 .c22 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c16 {
-  margin-bottom: 1rem;
+  margin-bottom: 1.125rem;
 }
 
 .c12 {
-  padding-right: 0;
+  padding-right: 0rem;
-  padding-left: 0;
+  padding-left: 0rem;
 }
 
 .c15 {
-  padding: 2rem;
+  padding: 1.5rem;
 }
 
 .c18 {
@@ -6079,8 +6079,8 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c1 {
@@ -6088,8 +6088,8 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c9 {
@@ -6698,24 +6698,24 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
 
 exports[`renders <Network {...network} public /> without throwing 2`] = `
 .c10 {
-  margin-right: 2rem;
+  margin-right: 1.5rem;
 }
 
 .c12 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c2 {
   display: inline-block;
-  margin-top: 1rem;
+  margin-top: 1.125rem;
-  margin-right: 1rem;
+  margin-right: 1.125rem;
 }
 
 .c6 {
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
-  margin-right: 1rem;
+  margin-right: 1.125rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
-  margin-left: 1rem;
+  margin-left: 1.125rem;
 }
 
 .c9 {
@@ -6816,8 +6816,8 @@ exports[`renders <Network {...network} public /> without throwing 2`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c1 {
@@ -6825,8 +6825,8 @@ exports[`renders <Network {...network} public /> without throwing 2`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c7 {

packages/my-joy-beta/src/components/__tests__/__snapshots__/tags.spec.js.snap

@@ -2,12 +2,12 @@
 
 exports[`renders <AddForm /> without throwing 1`] = `
 .c3 {
-  padding-right: 1rem;
+  padding-right: 1.125rem;
-  padding-left: 1rem;
+  padding-left: 1.125rem;
 }
 
 .c8 {
-  padding: 1rem;
+  padding: 1.125rem;
 }
 
 .c20 {
@@ -394,8 +394,8 @@ exports[`renders <AddForm /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c25 {
@@ -413,8 +413,8 @@ exports[`renders <AddForm /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c17 {
@@ -422,8 +422,8 @@ exports[`renders <AddForm /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c22 {
@@ -431,8 +431,8 @@ exports[`renders <AddForm /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c6 {
@@ -1023,12 +1023,12 @@ exports[`renders <AddForm /> without throwing 1`] = `
 
 exports[`renders <EditForm /> without throwing 1`] = `
 .c3 {
-  padding-right: 1rem;
+  padding-right: 1.125rem;
-  padding-left: 1rem;
+  padding-left: 1.125rem;
 }
 
 .c8 {
-  padding: 1rem;
+  padding: 1.125rem;
 }
 
 .c20 {
@@ -1415,8 +1415,8 @@ exports[`renders <EditForm /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c25 {
@@ -1434,8 +1434,8 @@ exports[`renders <EditForm /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c17 {
@@ -1443,8 +1443,8 @@ exports[`renders <EditForm /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c22 {
@@ -1452,8 +1452,8 @@ exports[`renders <EditForm /> without throwing 1`] = `
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c24 {
@@ -2055,8 +2055,8 @@ exports[`renders <EditForm /> without throwing 1`] = `
 
 exports[`renders <Tag /> without throwing 1`] = `
 .c0 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.375rem;
 }
 
 .c1 {
@@ -2111,8 +2111,8 @@ exports[`renders <Tag /> without throwing 1`] = `
 
 exports[`renders <Tag name value/> without throwing 1`] = `
 .c0 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.375rem;
 }
 
 .c1 {

packages/my-joy-beta/src/components/__tests__/cns.ui.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import renderer from 'react-test-renderer';
 import screenshot from 'react-screenshot-renderer';
 
 import { Header, HostnamesHeader, AddServiceForm, Hostname } from '../cns';

packages/my-joy-beta/src/components/__tests__/firewall.ui.js

@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import renderer from 'react-test-renderer';
 import screenshot from 'react-screenshot-renderer';
 
 import Firewall, {

packages/my-joy-beta/src/components/__tests__/key-value.ui.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import renderer from 'react-test-renderer';
 import screenshot from 'react-screenshot-renderer';
 
 import { KeyValue } from '../key-value';
@@ -82,7 +81,7 @@ it('<KeyValue method="edit" />', async () => {
 
 it('<KeyValue removing />', async () => {
   expect(
-    renderer.create(
+    await screenshot(
       <Theme ss>
         <KeyValue removing />
       </Theme>
@@ -92,7 +91,7 @@ it('<KeyValue removing />', async () => {
 
 it('<KeyValue submitting />', async () => {
   expect(
-    renderer.create(
+    await screenshot(
       <Theme ss>
         <KeyValue submitting />
       </Theme>

packages/my-joy-beta/src/components/__tests__/network.ui.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import renderer from 'react-test-renderer';
 import screenshot from 'react-screenshot-renderer';
 
 import { Collapsed, Expanded } from '../network';

packages/my-joy-beta/src/components/__tests__/tags.ui.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import renderer from 'react-test-renderer';
 import screenshot from 'react-screenshot-renderer';
 
 import Tag, { AddForm, EditForm } from '../tags';

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap

@@ -40,12 +40,12 @@ Array [
 
 exports[`renders <Rule/> without throwing 1`] = `
 .c0 {
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c12 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c1 {
@@ -722,12 +722,12 @@ exports[`renders <Rule/> without throwing 1`] = `
 
 exports[`renders <Rule/> without throwing 2`] = `
 .c0 {
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c12 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c1 {

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap

@@ -2,11 +2,11 @@
 
 exports[`renders <Images /> without throwing 1`] = `
 .c0 {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c8 {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
 }
 
 .c2 {
@@ -48,8 +48,8 @@ exports[`renders <Images /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c11 {
@@ -373,11 +373,11 @@ exports[`renders <Images /> without throwing 1`] = `
 
 exports[`renders <Images Images="test" /> without throwing 1`] = `
 .c0 {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c8 {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
 }
 
 .c2 {
@@ -419,8 +419,8 @@ exports[`renders <Images Images="test" /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c11 {
@@ -744,11 +744,11 @@ exports[`renders <Images Images="test" /> without throwing 1`] = `
 
 exports[`renders <Images expanded /> without throwing 1`] = `
 .c0 {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c8 {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
 }
 
 .c2 {
@@ -790,8 +790,8 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c11 {
@@ -1115,11 +1115,11 @@ exports[`renders <Images expanded /> without throwing 1`] = `
 
 exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without throwing 1`] = `
 .c0 {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c15 {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
 }
 
 .c2 {
@@ -1161,8 +1161,8 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c8 {
@@ -1170,8 +1170,8 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
-  padding-right: 0.5rem;
+  padding-right: 0.625rem;
-  padding-left: 0.5rem;
+  padding-left: 0.625rem;
 }
 
 .c18 {
@@ -1339,6 +1339,28 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   margin-top: 0.75rem;
 }
 
+.c9 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
 .c1 {
   display: inline-block;
   margin: 0;
@@ -1540,34 +1562,6 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   display: none;
 }
 
-.c9 {
-  width: 9rem;
-  height: 9rem;
-  background: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  border-radius: 0.25rem;
-  box-sizing: border-box;
-  padding-top: 0.75rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-bottom: 1.25rem;
-  -webkit-animation: eMLfYp 0.2s ease-in-out;
-  animation: eMLfYp 0.2s ease-in-out;
-}
-
 .c11 {
   min-width: 100%;
   width: 9rem;
@@ -1658,7 +1652,8 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
     >
       <div
         className="c9"
-        selected={false}
+        disabled={false}
+        name="card"
       >
         <img
           alt="stuff"
@@ -1721,11 +1716,11 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
 
 exports[`renders <Images isVmSelected /> without throwing 1`] = `
 .c0 {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c8 {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
 }
 
 .c2 {
@@ -1767,8 +1762,8 @@ exports[`renders <Images isVmSelected /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c11 {
@@ -2092,11 +2087,11 @@ exports[`renders <Images isVmSelected /> without throwing 1`] = `
 
 exports[`renders <Images loading /> without throwing 1`] = `
 .c0 {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c8 {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
 }
 
 .c2 {
@@ -2138,8 +2133,8 @@ exports[`renders <Images loading /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c11 {
@@ -2463,11 +2458,11 @@ exports[`renders <Images loading /> without throwing 1`] = `
 
 exports[`renders <Images pristine={false} /> without throwing 1`] = `
 .c0 {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c8 {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
 }
 
 .c2 {
@@ -2509,8 +2504,8 @@ exports[`renders <Images pristine={false} /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c11 {

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap

@@ -2,13 +2,13 @@
 
 exports[`renders <Name /> without throwing 1`] = `
 .c6 {
-  margin-top: undefined;
+  margin-top: 0.875rem;
-  margin-left: 0.25rem;
+  margin-left: 0.375rem;
 }
 
 .c10 {
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c0 {
@@ -450,13 +450,13 @@ exports[`renders <Name /> without throwing 1`] = `
 
 exports[`renders <Name expanded /> without throwing 1`] = `
 .c6 {
-  margin-top: undefined;
+  margin-top: 0.875rem;
-  margin-left: 0.25rem;
+  margin-left: 0.375rem;
 }
 
 .c10 {
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c0 {
@@ -898,13 +898,13 @@ exports[`renders <Name expanded /> without throwing 1`] = `
 
 exports[`renders <Name name="test" /> without throwing 1`] = `
 .c6 {
-  margin-top: undefined;
+  margin-top: 0.875rem;
-  margin-left: 0.25rem;
+  margin-left: 0.375rem;
 }
 
 .c10 {
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c0 {
@@ -1346,13 +1346,13 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
 
 exports[`renders <Name pristine={false} /> without throwing 1`] = `
 .c6 {
-  margin-top: undefined;
+  margin-top: 0.875rem;
-  margin-left: 0.25rem;
+  margin-left: 0.375rem;
 }
 
 .c10 {
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .c0 {

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap

@@ -2,23 +2,23 @@
 
 exports[`renders <Filters /> without throwing 1`] = `
 .c12 {
-  margin-right: 0.5rem;
+  margin-right: 0.75rem;
-  margin-left: 0.25rem;
+  margin-left: 0.375rem;
 }
 
 .c0 {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
-  margin-bottom: 1rem;
+  margin-bottom: 1.125rem;
 }
 
 .c11 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
-  margin-left: 0.25rem;
+  margin-left: 0.375rem;
 }
 
 .c13 {
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.375rem;
 }
 
 .c10 {
@@ -713,8 +713,8 @@ exports[`renders <Filters /> without throwing 1`] = `
 exports[`renders <Overview /> without throwing 1`] = `
 Array [
   .c0 {
-  margin-top: 1rem;
+  margin-top: 1.125rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
 .c2 {
@@ -949,8 +949,8 @@ Array [
 exports[`renders <Overview hasVms/> without throwing 1`] = `
 Array [
   .c0 {
-  margin-top: 1rem;
+  margin-top: 1.125rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
 .c2 {
@@ -1194,8 +1194,8 @@ Array [
 
 exports[`renders <Package /> without throwing 1`] = `
 .c9 {
-  margin-right: 0.5rem;
+  margin-right: 0.75rem;
-  margin-left: 0.25rem;
+  margin-left: 0.375rem;
 }
 
 .c8 {
@@ -1506,15 +1506,15 @@ exports[`renders <Package /> without throwing 1`] = `
 
 exports[`renders <Packages expanded /> without throwing 1`] = `
 .c10 {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
 .c13 {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
 }
 
 .c8 {
-  padding: 8rem;
+  padding: 2.25rem;
 }
 
 .c9 {
@@ -1951,15 +1951,15 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
 
 exports[`renders <Packages isVmSelected /> without throwing 1`] = `
 .c10 {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
 .c13 {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
 }
 
 .c8 {
-  padding: 8rem;
+  padding: 2.25rem;
 }
 
 .c9 {
@@ -2396,15 +2396,15 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
 
 exports[`renders <Packages loading /> without throwing 1`] = `
 .c10 {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
 .c13 {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
 }
 
 .c8 {
-  padding: 8rem;
+  padding: 2.25rem;
 }
 
 .c9 {
@@ -2841,7 +2841,7 @@ exports[`renders <Packages loading /> without throwing 1`] = `
 
 exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without throwing 1`] = `
 .c7 {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
 }
 
 .c10 {
@@ -3174,15 +3174,15 @@ exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without
 
 exports[`renders <Packages pristine={false} /> without throwing 1`] = `
 .c10 {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
 .c13 {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
 }
 
 .c8 {
-  padding: 8rem;
+  padding: 2.25rem;
 }
 
 .c9 {

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap

@@ -24,8 +24,8 @@ exports[`renders <Title /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c6 {
@@ -84,12 +84,12 @@ exports[`renders <Title /> without throwing 1`] = `
 }
 
 .c1 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c5 {
-  margin-top: 0.25rem;
+  margin-top: 0.375rem;
-  margin-bottom: 1rem;
+  margin-bottom: 1.125rem;
 }
 
 .c4 + div:empty,
@@ -149,8 +149,8 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c6 {
@@ -209,12 +209,12 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
 }
 
 .c1 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c5 {
-  margin-top: 0.25rem;
+  margin-top: 0.375rem;
-  margin-bottom: 1rem;
+  margin-bottom: 1.125rem;
 }
 
 .c4 + div:empty,
@@ -293,8 +293,8 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c6 {
@@ -353,12 +353,12 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
 }
 
 .c1 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c5 {
-  margin-top: 0.25rem;
+  margin-top: 0.375rem;
-  margin-bottom: 1rem;
+  margin-bottom: 1.125rem;
 }
 
 .c4 + div:empty,
@@ -438,8 +438,8 @@ exports[`renders <Title label="Test"/> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -0.625rem;
-  margin-left: -0.5rem;
+  margin-left: -0.625rem;
 }
 
 .c6 {
@@ -498,12 +498,12 @@ exports[`renders <Title label="Test"/> without throwing 1`] = `
 }
 
 .c1 {
-  margin-right: 0.25rem;
+  margin-right: 0.375rem;
 }
 
 .c5 {
-  margin-top: 0.25rem;
+  margin-top: 0.375rem;
-  margin-bottom: 1rem;
+  margin-bottom: 1.125rem;
 }
 
 .c4 + div:empty,

packages/my-joy-beta/src/components/create-instance/__tests__/affinity.ui.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import renderer from 'react-test-renderer';
 import screenshot from 'react-screenshot-renderer';
 
 import { Rule, Header } from '../affinity';

packages/my-joy-beta/src/components/create-instance/__tests__/images.ui.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import renderer from 'react-test-renderer';
 import screenshot from 'react-screenshot-renderer';
 
 import Images from '../image';

packages/my-joy-beta/src/components/create-instance/__tests__/name.ui.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import renderer from 'react-test-renderer';
 import screenshot from 'react-screenshot-renderer';
 
 import Name from '../name';

packages/my-joy-beta/src/components/create-instance/__tests__/package.ui.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import renderer from 'react-test-renderer';
 import screenshot from 'react-screenshot-renderer';
 
 import { Filters, Packages, Package, Overview } from '../package';

packages/my-joy-beta/src/components/create-instance/__tests__/title.ui.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import renderer from 'react-test-renderer';
 import screenshot from 'react-screenshot-renderer';
 
 import { NameIcon } from 'joyent-ui-toolkit';

packages/my-joy-beta/src/components/create-instance/image.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import styled, { keyframes } from 'styled-components';
+import styled from 'styled-components';
 import { Field } from 'redux-form';
 import { Margin } from 'styled-components-spacing';
 import Flex from 'styled-flex-component';
@@ -16,44 +16,10 @@ import {
   Button,
   Toggle,
   H4,
-  Select
+  Select,
+  Card
 } from 'joyent-ui-toolkit';
 
-const fadeIn = keyframes`
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-`;
-
-const Card = styled.div`
-  width: ${remcalc(144)};
-  height: ${remcalc(144)};
-  background: ${props => props.theme.white};
-  border: ${remcalc(1)} solid ${props => props.theme.grey};
-  border-radius: ${remcalc(4)};
-  box-sizing: border-box;
-  padding-top: ${remcalc(12)};
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: column;
-  display: flex;
-  margin-bottom: ${remcalc(20)};
-  animation: ${fadeIn} 0.2s ease-in-out;
-
-  ${is('selected')`
-    border: 1px solid ${props => props.theme.primaryActive};
-
-
-    select {
-      border-color: ${props => props.theme.primaryActive};
-    }
-  `};
-`;
-
 const Version = styled(Select)`
   min-width: 100%;
   width: ${remcalc(144)};
@@ -136,9 +102,10 @@ export default ({
         images.filter(i => i.isVm === isVmSelected).map(image => (
           <Col md={2} sm={3}>
             <Card
-              selected={
+              active={
                 image.imageName === getImageByID(imageID, images).imageName
               }
+              preview
             >
               <img
                 src={getImage(image.imageName).url}

packages/my-joy-beta/src/components/firewall.js

@@ -2,9 +2,7 @@ import React, { Fragment } from 'react';
 import { Field } from 'redux-form';
 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,
@@ -15,7 +13,9 @@ import {
   Row,
   Col,
   TagList,
-  P
+  P,
+  Strong,
+  Card
 } from 'joyent-ui-toolkit';
 
 import Tag from '@components/tags';
@@ -24,17 +24,6 @@ import Empty from '@components/empty';
 const capitalizeFirstLetter = string =>
   string.charAt(0).toUpperCase() + string.slice(1);
 
-const Box = styled.div`
-  display: inline-block;
-  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 = {
   vmall: 'All VMs in DC',
   any: 'Any'
@@ -43,8 +32,8 @@ const Wildcards = {
 const parsePartial = (p, index) => {
   if (p[0] === 'wildcard') {
     return (
-      <Margin top={1} bottom={1}>
+      <Margin key={index} top={0.5} bottom={0.5}>
-        <span key={index}>{Wildcards[p[1]]}</span>
+        <P>{Wildcards[p[1]]}</P>
       </Margin>
     );
   }
@@ -55,7 +44,9 @@ const parsePartial = (p, index) => {
 
     return (
       <Margin left={0.5}>
+        <TagList>
           <Tag norMargin key={index} name={name} value={value} />
+        </TagList>
       </Margin>
     );
   }
@@ -68,30 +59,40 @@ const Rule = ({ enabled, rule_obj }) => {
   const tos = rule_obj.to.map(parsePartial);
 
   return (
-    <Box disabled={!enabled}>
+    <Card disabled={!enabled}>
       <Padding left={3} right={3} top={1.5} bottom={1.5}>
         <Row>
           <Col xs={3}>
             <Flex justifyStart alignCenter contentStretch full>
               <Margin right={0.5}>
                 <FlexItem>
-                  <b>From: </b>
+                  <Strong>From: </Strong>
                 </FlexItem>
               </Margin>
-              <Flex alignCenter>
+              <Flex alignCenter>{froms}</Flex>
-                <TagList>{froms}</TagList>
-              </Flex>
             </Flex>
           </Col>
           <Col xs={3}>
             <Flex justifyStart alignCenter contentStretch full>
               <Margin right={0.5}>
                 <FlexItem>
-                  <b>To: </b>
+                  <Strong>To: </Strong>
+                </FlexItem>
+              </Margin>
+              <Flex alignCenter>{tos}</Flex>
+            </Flex>
+          </Col>
+          <Col xs={2}>
+            <Flex justifyStart alignCenter contentStretch full>
+              <Margin right={0.5}>
+                <FlexItem>
+                  <Strong>Protocol: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>
-                <TagList>{tos}</TagList>
+                <Margin top={0.5} bottom={0.5}>
+                  <P>{protocol.name}</P>
+                </Margin>
               </Flex>
             </Flex>
           </Col>
@@ -99,35 +100,33 @@ const Rule = ({ enabled, rule_obj }) => {
             <Flex justifyStart alignCenter contentStretch full>
               <Margin right={0.5}>
                 <FlexItem>
-                  <b>Protocol: </b>
+                  <Strong>Ports: </Strong>
                 </FlexItem>
               </Margin>
-              <Flex alignCenter>{protocol.name}</Flex>
+              <Flex alignCenter>
+                <Margin top={0.5} bottom={0.5}>
+                  <P>{protocol.targets.join(';')}</P>
+                </Margin>
+              </Flex>
             </Flex>
           </Col>
           <Col xs={2}>
             <Flex justifyStart alignCenter contentStretch full>
               <Margin right={0.5}>
                 <FlexItem>
-                  <b>Ports: </b>
+                  <Strong>Action: </Strong>
                 </FlexItem>
               </Margin>
-              <Flex alignCenter>{protocol.targets.join(';')}</Flex>
+              <Flex alignCenter>
+                <Margin top={0.5} bottom={0.5}>
+                  <P>{capitalizeFirstLetter(action)}</P>
+                </Margin>
               </Flex>
-          </Col>
-          <Col xs={2}>
-            <Flex justifyStart alignCenter contentStretch full>
-              <Margin right={0.5}>
-                <FlexItem>
-                  <b>Action: </b>
-                </FlexItem>
-              </Margin>
-              <Flex alignCenter>{capitalizeFirstLetter(action)}</Flex>
             </Flex>
           </Col>
         </Row>
       </Padding>
-    </Box>
+    </Card>
   );
 };