feat(ui-toolkit): remove all margins

fixes #1156

packages/my-joy-images/lib/index.js

@@ -2,7 +2,6 @@ const Boom = require('boom');
 const Inert = require('inert');
 const Path = require('path');
 const RenderReact = require('hapi-render-react');
-const Url = require('url');
 const Intercept = require('apr-intercept');
 const Fs = require('mz/fs');
 

packages/my-joy-instances/lib/index.js

@@ -2,8 +2,6 @@ const Boom = require('boom');
 const Inert = require('inert');
 const Path = require('path');
 const RenderReact = require('hapi-render-react');
-const Wreck = require('wreck');
-const Url = require('url');
 const Intercept = require('apr-intercept');
 const Fs = require('mz/fs');
 

packages/my-joy-instances/package.json

@@ -13,7 +13,7 @@
     "prepublish": "NODE_ENV=production redrun build:bundle",
     "lint": "redrun lint:ci -- --fix",
     "lint:ci": "NODE_ENV=test eslint . --ext .js --ext .md",
-    "test": "DEFAULT_TIMEOUT_INTERVAL=100000 NODE_ENV=test joyent-react-scripts test --env=jsdom",
+    "test": "DEFAULT_TIMEOUT_INTERVAL=100000 NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'",
     "test:ci": "NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'",
     "build:frontend": "joyent-react-scripts build",
     "build:ssr": "SSR=1 UMD=1 babel src --out-dir lib/app --copy-files"

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

@@ -1,12 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <AddServiceForm /> without throwing 1`] = `
-.c4 {
+.c6 {
   margin-top: 0.1875rem;
 }
 
-.c6 {
+.c8 {
-  margin-top: 1.3125rem;
   margin-left: 0.75rem;
 }
 
@@ -31,6 +30,30 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
 }
 
 .c1 {
@@ -50,7 +73,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   display: block;
 }
 
-.c9 {
+.c12 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -60,39 +83,32 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
-  min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
+.c12::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
+.c12[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
+.c12[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c12[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
+.c12:-moz-focusring,
-.c9[type='button']:-moz-focusring,
+.c12[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
+.c12[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c12[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button,
+.c11 {
-.c9 + a {
+  min-width: 7.5rem;
-  margin-left: 0.375rem;
 }
 
-.c8 {
+.c10 {
   display: inline-block;
 }
 
-.c8 + button,
+.c9 {
-.c8 + a {
-  margin-left: 0.375rem;
-}
-
-.c7 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -132,7 +148,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:focus {
+.c9:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -140,26 +156,26 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
+.c9:active,
-.c7:active:hover,
+.c9:active:hover,
-.c7:active:focus {
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c3 {
+.c5 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -167,14 +183,9 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
-  margin-bottom: 0.1875rem;
-  margin-right: 0.75rem;
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
 }
 
-.c11 {
+.c14 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -193,29 +204,24 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c10 {
+.c13 {
   background-color: rgb(216,216,216);
-  margin: 0;
   background-color: transparent;
-  height: 0.25rem;
 }
 
-.c2 {
+.c3 {
   display: inline-block;
-  margin: 0;
   padding: 0;
   border: none;
   overflow: hidden;
   height: auto;
-  -webkit-margin-start: 0;
-  -webkit-margin-end: 0;
   -webkit-padding-before: 0;
   -webkit-padding-start: 0;
   -webkit-padding-end: 0;
   -webkit-padding-after: 0;
 }
 
-.c5 {
+.c7 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -237,45 +243,51 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c5:focus {
+.c7:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c5::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c5::-moz-placeholder {
+.c7::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c5:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c5:invalid {
+.c7:invalid {
   box-shadow: none;
 }
 
-.c5:disabled {
+.c7:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c5:disabled::-webkit-input-placeholder {
+.c7:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c5:disabled::-moz-placeholder {
+.c7:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c5:disabled:-ms-input-placeholder {
+.c7:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
+.c4 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
 <form
   onSubmit={undefined}
 >
@@ -287,27 +299,31 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
       className="c1"
     >
       <div
-        className="baseline-jVaZNU kXgQxt c2"
+        className="c2"
-        name="name"
-        role="group"
-        style={undefined}
       >
-        <label
-          className="c3"
-          htmlFor="k"
-        >
-          Attach to new CNS service name
-        </label>
         <div
-          className="c4"
+          className="c3"
+          name="name"
+          role="group"
+          style={undefined}
         >
-          <input
+          <label
-            className="c5"
+            className="c4 c5"
-            disabled={false}
+            htmlFor="k"
-            id="k"
+          >
-            onBlur={null}
+            Attach to new CNS service name
-            placeholder="Example: mySQLdb"
+          </label>
-          />
+          <div
+            className="c6"
+          >
+            <input
+              className="c7"
+              disabled={false}
+              id="k"
+              onBlur={null}
+              placeholder="Example: mySQLdb"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -315,10 +331,10 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
       className="c1"
     >
       <div
-        className="c6"
+        className="c8"
       >
         <button
-          className="c7 c8 c9"
+          className="c9 c10 c11 c12"
           data-ui-button="true"
           disabled={undefined}
           href=""
@@ -327,7 +343,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
           Add
         </button>
         <div
-          className="c10 c11"
+          className="c13 c14"
           height="0.25rem"
         />
       </div>
@@ -337,12 +353,11 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
 `;
 
 exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
-.c4 {
+.c6 {
   margin-top: 0.1875rem;
 }
 
-.c6 {
+.c8 {
-  margin-top: 1.3125rem;
   margin-left: 0.75rem;
 }
 
@@ -367,6 +382,30 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
 }
 
 .c1 {
@@ -386,7 +425,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   display: block;
 }
 
-.c9 {
+.c12 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -396,39 +435,32 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
-  min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
+.c12::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
+.c12[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
+.c12[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c12[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
+.c12:-moz-focusring,
-.c9[type='button']:-moz-focusring,
+.c12[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
+.c12[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c12[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button,
+.c11 {
-.c9 + a {
+  min-width: 7.5rem;
-  margin-left: 0.375rem;
 }
 
-.c8 {
+.c10 {
   display: inline-block;
 }
 
-.c8 + button,
+.c9 {
-.c8 + a {
-  margin-left: 0.375rem;
-}
-
-.c7 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -468,7 +500,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:focus {
+.c9:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -476,26 +508,26 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
+.c9:active,
-.c7:active:hover,
+.c9:active:hover,
-.c7:active:focus {
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c3 {
+.c5 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -503,14 +535,9 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
-  margin-bottom: 0.1875rem;
-  margin-right: 0.75rem;
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
 }
 
-.c11 {
+.c14 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -529,29 +556,24 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c10 {
+.c13 {
   background-color: rgb(216,216,216);
-  margin: 0;
   background-color: transparent;
-  height: 0.25rem;
 }
 
-.c2 {
+.c3 {
   display: inline-block;
-  margin: 0;
   padding: 0;
   border: none;
   overflow: hidden;
   height: auto;
-  -webkit-margin-start: 0;
-  -webkit-margin-end: 0;
   -webkit-padding-before: 0;
   -webkit-padding-start: 0;
   -webkit-padding-end: 0;
   -webkit-padding-after: 0;
 }
 
-.c5 {
+.c7 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -573,45 +595,51 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c5:focus {
+.c7:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c5::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c5::-moz-placeholder {
+.c7::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c5:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c5:invalid {
+.c7:invalid {
   box-shadow: none;
 }
 
-.c5:disabled {
+.c7:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c5:disabled::-webkit-input-placeholder {
+.c7:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c5:disabled::-moz-placeholder {
+.c7:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c5:disabled:-ms-input-placeholder {
+.c7:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
+.c4 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
 <form
   onSubmit={undefined}
 >
@@ -623,27 +651,31 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
       className="c1"
     >
       <div
-        className="baseline-jVaZNU kXgQxt c2"
+        className="c2"
-        name="name"
-        role="group"
-        style={undefined}
       >
-        <label
-          className="c3"
-          htmlFor="l"
-        >
-          Attach to new CNS service name
-        </label>
         <div
-          className="c4"
+          className="c3"
+          name="name"
+          role="group"
+          style={undefined}
         >
-          <input
+          <label
-            className="c5"
+            className="c4 c5"
-            disabled={false}
+            htmlFor="l"
-            id="l"
+          >
-            onBlur={null}
+            Attach to new CNS service name
-            placeholder="Example: mySQLdb"
+          </label>
-          />
+          <div
+            className="c6"
+          >
+            <input
+              className="c7"
+              disabled={false}
+              id="l"
+              onBlur={null}
+              placeholder="Example: mySQLdb"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -651,10 +683,10 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
       className="c1"
     >
       <div
-        className="c6"
+        className="c8"
       >
         <button
-          className="c7 c8 c9"
+          className="c9 c10 c11 c12"
           data-ui-button="true"
           disabled={undefined}
           href=""
@@ -663,7 +695,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
           Add
         </button>
         <div
-          className="c10 c11"
+          className="c13 c14"
           height="0.25rem"
         />
       </div>
@@ -674,40 +706,34 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
 
 exports[`renders <Header/> without throwing 1`] = `
 Array [
-  .c0 {
+  .c1 {
   color: rgb(73,73,73);
   font-weight: normal;
   line-height: 1.625rem;
   font-size: 1.3125rem;
+}
+
+.c0 {
   margin: 0;
 }
 
-.c0 + p,
-.c0 + small,
-.c0 + h1,
-.c0 + h2,
-.c0 + label,
-.c0 + h3,
-.c0 + h4,
-.c0 + h5,
-.c0 + div,
-.c0 + span {
-  margin-top: 0.75rem;
-}
-
 <h3
-    className="c0"
+    className="c0 c1"
 >
     Hostnames
 </h3>,
   .c0 {
-  padding-bottom: 0.75rem;
+  margin-top: 0.75rem;
+  margin-bottom: 1.125rem;
 }
 
-.c1 {
+.c2 {
   color: rgb(73,73,73);
   line-height: 1.5rem;
   font-size: 0.9375rem;
+}
+
+.c1 {
   margin: 0;
 }
 
@@ -715,7 +741,7 @@ Array [
     className="c0"
 >
     <p
-        className="c1"
+        className="c1 c2"
     >
         Default hostnames are automatically generated from both the instance name and any attached networks.
     </p>
@@ -726,19 +752,20 @@ Array [
 exports[`renders <Hostname /> without throwing 1`] = `null`;
 
 exports[`renders <Hostname values /> without throwing 1`] = `
-.c9 {
+.c10 {
   margin-top: 0.1875rem;
 }
 
 .c0 {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.125rem;
 }
 
-.c5 {
+.c6 {
   margin-right: 0.375rem;
+  margin-bottom: 0.1875rem;
 }
 
-.c7 {
+.c8 {
   margin-top: 0.1875rem;
   margin-bottom: 0.375rem;
 }
@@ -763,7 +790,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c4 {
+.c5 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -780,8 +807,11 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   display: block;
 }
 
-.c3 {
+.c4 {
   font-size: 80%;
+}
+
+.c3 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   color: rgb(73,73,73);
   line-height: 1.125rem;
@@ -789,15 +819,14 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   font-weight: 600;
 }
 
-.c6 {
+.c7 {
-  font-size: 80%;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   color: rgb(73,73,73);
   line-height: 1.125rem;
   font-size: 0.8125rem;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -823,70 +852,70 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   min-width: 100%;
 }
 
-.c8:focus {
+.c9:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c8::-webkit-input-placeholder {
+.c9::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c8::-moz-placeholder {
+.c9::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c8:-ms-input-placeholder {
+.c9:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c8:invalid {
+.c9:invalid {
   box-shadow: none;
 }
 
-.c8::-webkit-input-placeholder {
+.c9::-webkit-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c8::-moz-placeholder {
+.c9::-moz-placeholder {
   color: rgb(216,216,216);
 }
 
-.c8:-ms-input-placeholder {
+.c9:-ms-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c8:disabled {
+.c9:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c8:disabled::-webkit-input-placeholder {
+.c9:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c8:disabled::-moz-placeholder {
+.c9:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c8:disabled:-ms-input-placeholder {
+.c9:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c8:disabled {
+.c9:disabled {
   color: rgb(73,73,73);
 }
 
-.c8:disabled::-webkit-input-placeholder {
+.c9:disabled::-webkit-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c8:disabled::-moz-placeholder {
+.c9:disabled::-moz-placeholder {
   color: rgb(73,73,73);
 }
 
-.c8:disabled:-ms-input-placeholder {
+.c9:disabled:-ms-input-placeholder {
   color: rgb(73,73,73);
 }
 
@@ -903,7 +932,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
     className="c1"
   >
     <small
-      className="c2 c3"
+      className="c2 c3 c4"
     >
       Instance name
        
@@ -911,15 +940,13 @@ exports[`renders <Hostname values /> without throwing 1`] = `
       s
     </small>
     <div
-      className="c4"
+      className="c5"
     >
       <div
-        className="c5"
+        className="c6"
       >
         <svg
-          className=""
           height="16"
-          innerRef={undefined}
           style={
             Object {
               "transform": "rotate(0deg)",
@@ -937,20 +964,20 @@ exports[`renders <Hostname values /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c4"
+      className="c5"
     >
       <small
-        className="c6"
+        className="c7 c4"
       >
         Private
       </small>
     </div>
   </div>
   <div
-    className="c7"
+    className="c8"
   >
     <input
-      className="c8"
+      className="c9"
       disabled={true}
       id=""
       onBlur={null}
@@ -958,10 +985,10 @@ exports[`renders <Hostname values /> without throwing 1`] = `
     />
   </div>
   <div
-    className="c9"
+    className="c10"
   >
     <input
-      className="c8"
+      className="c9"
       disabled={true}
       id=""
       onBlur={null}
@@ -972,55 +999,49 @@ exports[`renders <Hostname values /> without throwing 1`] = `
 `;
 
 exports[`renders <HostnamesHeader /> without throwing 1`] = `
-.c0 {
-  margin-top: 1.5rem;
-}
-
-.c2 {
-  padding-bottom: 1.125rem;
-}
-
 .c3 {
+  margin-top: 0.75rem;
+  margin-bottom: 1.125rem;
+}
+
+.c0 {
+  margin-top: 1.875rem;
+}
+
+.c5 {
   color: rgb(73,73,73);
   line-height: 1.5rem;
   font-size: 0.9375rem;
-  margin: 0;
 }
 
-.c1 {
+.c2 {
   color: rgb(73,73,73);
   font-weight: normal;
   line-height: 1.625rem;
   font-size: 1.3125rem;
+}
+
+.c1 {
   margin: 0;
 }
 
-.c1 + p,
+.c4 {
-.c1 + small,
+  margin: 0;
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
-  margin-top: 0.75rem;
 }
 
 <div
   className="c0"
 >
   <h3
-    className="c1"
+    className="c1 c2"
   >
     CNS service hostnames
   </h3>
   <div
-    className="c2"
+    className="c3"
   >
     <p
-      className="c3"
+      className="c4 c5"
     >
       CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name.
     </p>

packages/my-joy-instances/src/components/cns.js

@@ -6,13 +6,13 @@ import Flex, { FlexItem } from 'styled-flex-component';
 import { Field } from 'redux-form';
 
 import {
-  P,
+  P as BaseP,
-  H3,
+  H3 as BaseH3,
   Card,
   Divider,
   TagList,
   Input,
-  Toggle,
+  Toggle as BaseToggle,
   Small,
   Button,
   FormGroup,
@@ -31,15 +31,27 @@ const SmallBordered = styled(Small)`
   border-right: ${remcalc(1)} solid ${props => props.theme.grey};
 `;
 
+const H3 = styled(BaseH3)`
+  margin: 0;
+`;
+
+const P = styled(BaseP)`
+  margin: 0;
+`;
+
+const Toggle = styled(BaseToggle)`
+  margin: 0 6px;
+`;
+
 export const Header = () => (
   <Fragment>
     <H3>Hostnames</H3>
-    <Padding bottom={2}>
+    <Margin top={2} bottom={3}>
       <P>
         Default hostnames are automatically generated from both the instance
         name and any attached networks.
       </P>
-    </Padding>
+    </Margin>
   </Fragment>
 );
 
@@ -49,9 +61,11 @@ export const Footer = ({ enabled, submitting, onToggle }) => (
       <FormGroup name="cns-enabled">
         <Flex alignCenter>
           <FormLabel disabled={submitting}>Disabled CNS</FormLabel>
-          <Toggle checked={enabled} onChange={onToggle} disabled={submitting}>
+          <Margin left={1}>
-            Enabled CNS
+            <Toggle checked={enabled} onChange={onToggle} disabled={submitting}>
-          </Toggle>
+              Enabled CNS
+            </Toggle>
+          </Margin>
         </Flex>
       </FormGroup>
     </Margin>
@@ -69,13 +83,13 @@ export const Footer = ({ enabled, submitting, onToggle }) => (
 export const HostnamesHeader = () => (
   <Margin top={4}>
     <H3>CNS service hostnames</H3>
-    <Padding bottom={3}>
+    <Margin top={2} bottom={3}>
       <P>
         CNS service hostnames are created by attaching a CNS service name to one
         or more instances. You can serve multiple instances under the same
         hostname by assigning them to a matching CNS service name.
       </P>
-    </Padding>
+    </Margin>
   </Margin>
 );
 
@@ -87,23 +101,25 @@ export const AddServiceForm = ({
   invalid
 }) => (
   <form onSubmit={handleSubmit}>
-    <Flex wrap>
+    <Flex wrap alignEnd>
       <FlexItem>
-        <FormGroup name="name" field={Field}>
+        <Flex collumn>
-          <FormLabel>Attach to new CNS service name</FormLabel>
+          <FormGroup name="name" field={Field}>
-          <Margin top={0.5}>
+            <FormLabel>Attach to new CNS service name</FormLabel>
-            <Input
+            <Margin top={0.5}>
-              onBlur={null}
+              <Input
-              type="text"
+                onBlur={null}
-              placeholder="Example: mySQLdb"
+                type="text"
-              disabled={disabled || submitting}
+                placeholder="Example: mySQLdb"
-            />
+                disabled={disabled || submitting}
-            <FormMeta />
+              />
-          </Margin>
+              <FormMeta />
-        </FormGroup>
+            </Margin>
+          </FormGroup>
+        </Flex>
       </FlexItem>
       <FlexItem>
-        <Margin top={3.5} left={2}>
+        <Margin left={2}>
           <Button
             type="submit"
             disabled={submitting}
@@ -128,7 +144,7 @@ export const Hostname = ({
 }) => (
   <Fragment>
     {values.length ? (
-      <Margin bottom={4}>
+      <Margin bottom={3}>
         <Flex>
           <SmallBordered bold noMargin>
             {network && service
@@ -139,7 +155,7 @@ export const Hostname = ({
             hostname{values.length === 1 ? '' : 's'}
           </SmallBordered>
           <FlexItem>
-            <Margin right={1}>
+            <Margin bottom={0.5} right={1}>
               {hostname.public ? <PublicIcon /> : <PrivateIcon />}
             </Margin>
           </FlexItem>

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

@@ -115,35 +115,11 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   margin-bottom: 1.125rem;
 }
 
-.c8 {
-  position: relative;
-  padding: 0.75rem;
-  padding-right: 1.5625rem;
-}
-
-.c8::-ms-expand {
-  display: none;
-}
-
 .c4 {
   color: rgb(73,73,73);
   font-weight: 600;
   line-height: 1.5rem;
   font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + span {
-  margin-top: 0.75rem;
 }
 
 .c3 {
@@ -176,13 +152,10 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
 
 .c5 {
   display: inline-block;
-  margin: 0;
   padding: 0;
   border: none;
   overflow: hidden;
   height: auto;
-  -webkit-margin-start: 0;
-  -webkit-margin-end: 0;
   -webkit-padding-before: 0;
   -webkit-padding-start: 0;
   -webkit-padding-end: 0;
@@ -276,6 +249,16 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   color: rgba(73,73,73,0.5);
 }
 
+.c8 {
+  position: relative;
+  padding: 0.75rem;
+  padding-right: 1.5625rem;
+}
+
+.c8::-ms-expand {
+  display: none;
+}
+
 .c6 {
   min-width: 100%;
   width: 9rem;
@@ -345,7 +328,7 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
             Stuff
           </h4>
           <div
-            className="baseline-jVaZNU kXgQxt c5"
+            className="c5"
             name="image"
             role="group"
             style={undefined}

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

@@ -1,15 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Title /> without throwing 1`] = `
-.c3 {
+.c4 {
   font-size: 80%;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  color: rgb(73,73,73);
-  line-height: 1.125rem;
-  font-size: 0.8125rem;
 }
 
-.c6 {
+.c7 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -28,19 +24,24 @@ exports[`renders <Title /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c5 {
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  color: rgb(73,73,73);
+  line-height: 1.125rem;
+  font-size: 0.8125rem;
+}
+
+.c6 {
   background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
 }
 
 .c1 {
   margin-right: 0.375rem;
 }
 
-.c4 {
+.c5 {
   margin-top: 0.375rem;
-  margin-bottom: 2.625rem;
+  margin-bottom: undefined;
 }
 
 .c0 {
@@ -106,14 +107,14 @@ exports[`renders <Title /> without throwing 1`] = `
       />
     </div>
     <small
-      className="c3"
+      className="c3 c4"
     />
   </div>
   <div
-    className="c4"
+    className="c5"
   >
     <div
-      className="c5 c6"
+      className="c6 c7"
       height="0.0625rem"
     />
   </div>
@@ -121,15 +122,11 @@ exports[`renders <Title /> without throwing 1`] = `
 `;
 
 exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
-.c3 {
+.c4 {
   font-size: 80%;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  color: rgb(73,73,73);
-  line-height: 1.125rem;
-  font-size: 0.8125rem;
 }
 
-.c6 {
+.c7 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -148,19 +145,24 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c5 {
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  color: rgb(73,73,73);
+  line-height: 1.125rem;
+  font-size: 0.8125rem;
+}
+
+.c6 {
   background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
 }
 
 .c1 {
   margin-right: 0.375rem;
 }
 
-.c4 {
+.c5 {
   margin-top: 0.375rem;
-  margin-bottom: 2.625rem;
+  margin-bottom: undefined;
 }
 
 .c0 {
@@ -225,9 +227,7 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
         className="c2"
       >
         <svg
-          className=""
           height="21.91"
-          innerRef={undefined}
           style={
             Object {
               "transform": "rotate(0deg)",
@@ -245,14 +245,14 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
       </div>
     </div>
     <small
-      className="c3"
+      className="c3 c4"
     />
   </div>
   <div
-    className="c4"
+    className="c5"
   >
     <div
-      className="c5 c6"
+      className="c6 c7"
       height="0.0625rem"
     />
   </div>
@@ -260,15 +260,11 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
 `;
 
 exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = `
-.c3 {
+.c4 {
   font-size: 80%;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  color: rgb(73,73,73);
-  line-height: 1.125rem;
-  font-size: 0.8125rem;
 }
 
-.c6 {
+.c7 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -287,19 +283,24 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
   margin-left: -0.625rem;
 }
 
-.c5 {
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  color: rgb(73,73,73);
+  line-height: 1.125rem;
+  font-size: 0.8125rem;
+}
+
+.c6 {
   background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
 }
 
 .c1 {
   margin-right: 0.375rem;
 }
 
-.c4 {
+.c5 {
   margin-top: 0.375rem;
-  margin-bottom: 2.625rem;
+  margin-bottom: undefined;
 }
 
 .c0 {
@@ -365,9 +366,7 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
         className="c2"
       >
         <svg
-          className=""
           height="21.91"
-          innerRef={undefined}
           style={
             Object {
               "transform": "rotate(0deg)",
@@ -385,14 +384,14 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
       </div>
     </div>
     <small
-      className="c3"
+      className="c3 c4"
     />
   </div>
   <div
-    className="c4"
+    className="c5"
   >
     <div
-      className="c5 c6"
+      className="c6 c7"
       height="0.0625rem"
     />
   </div>
@@ -400,15 +399,11 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
 `;
 
 exports[`renders <Title label="Test"/> without throwing 1`] = `
-.c3 {
+.c4 {
   font-size: 80%;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  color: rgb(73,73,73);
-  line-height: 1.125rem;
-  font-size: 0.8125rem;
 }
 
-.c6 {
+.c7 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -427,19 +422,24 @@ exports[`renders <Title label="Test"/> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c5 {
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  color: rgb(73,73,73);
+  line-height: 1.125rem;
+  font-size: 0.8125rem;
+}
+
+.c6 {
   background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
 }
 
 .c1 {
   margin-right: 0.375rem;
 }
 
-.c4 {
+.c5 {
   margin-top: 0.375rem;
-  margin-bottom: 2.625rem;
+  margin-bottom: undefined;
 }
 
 .c0 {
@@ -506,14 +506,14 @@ exports[`renders <Title label="Test"/> without throwing 1`] = `
       />
     </div>
     <small
-      className="c3"
+      className="c3 c4"
     />
   </div>
   <div
-    className="c4"
+    className="c5"
   >
     <div
-      className="c5 c6"
+      className="c6 c7"
       height="0.0625rem"
     />
   </div>

packages/my-joy-instances/src/components/description.js

@@ -1,7 +1,12 @@
 import React from 'react';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import { Margin } from 'styled-components-spacing';
-import { P } from 'joyent-ui-toolkit';
+import styled from 'styled-components';
+import { P as BaseP } from 'joyent-ui-toolkit';
+
+const P = styled(BaseP)`
+  margin: 0;
+`;
 
 export default ({ children }) => (
   <Row>

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

@@ -180,13 +180,17 @@ export const ToggleFirewallForm = ({
         <Flex alignCenter>
           {left ? (
             <Fragment>
-              <Toggle disabled={submitting} />
+              <Margin right={2}>
+                <Toggle disabled={submitting} />
+              </Margin>
               <FormLabel marginless>Enable Firewall</FormLabel>
             </Fragment>
           ) : (
             <Fragment>
               <FormLabel marginless>Enable Firewall</FormLabel>
-              <Toggle disabled={submitting} />
+              <Margin left={2}>
+                <Toggle disabled={submitting} />
+              </Margin>
             </Fragment>
           )}
         </Flex>
@@ -199,7 +203,12 @@ export const ToggleInactiveForm = () => (
   <form>
     <FormGroup name="inactive" type="checkbox" field={Field}>
       <Flex alignCenter>
-        <Toggle>Show inactive rules</Toggle>
+        <Fragment>
+          <Margin right={2}>
+            <Toggle />
+          </Margin>
+          <FormLabel marginless>Show inactive rules</FormLabel>
+        </Fragment>
       </Flex>
     </FormGroup>
   </form>

packages/my-joy-instances/src/components/instances/list.js

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import remcalc from 'remcalc';
 import styled from 'styled-components';
+import { Margin } from 'styled-components-spacing';
 import titleCase from 'title-case';
 import { Link } from 'react-router-dom';
 import { Field } from 'redux-form';
@@ -58,6 +59,10 @@ const ItemAnchor = styled(Anchor)`
   text-decoration: none;
 `;
 
+const MarginalPaginationItem = styled(PaginationItem)`
+  margin: 0 ${remcalc(3)};
+`;
+
 const Actions = styled(Flex)`
   height: ${remcalc(48)};
 `;
@@ -279,7 +284,7 @@ export default ({
                 {currPage - 1}
               </PaginationItem>
             ) : null}
-            <PaginationItem active>{currPage}</PaginationItem>
+            <MarginalPaginationItem active>{currPage}</MarginalPaginationItem>
             {numPages > currPage ? (
               <PaginationItem
                 to={`${Global().pathname}?${queryString.stringify({

packages/my-joy-instances/src/components/instances/snapshots.js

@@ -3,6 +3,7 @@ import { Field } from 'redux-form';
 import titleCase from 'title-case';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import remcalc from 'remcalc';
+import { Margin } from 'styled-components-spacing';
 
 import {
   FormGroup,
@@ -60,8 +61,12 @@ export const Item = ({ name, state, created, onStart, onRemove, mutating }) => (
               <ActionsIcon />
             </PopoverTarget>
             <Popover placement="top">
-              <PopoverItem onClick={onStart}>Start</PopoverItem>
+              <Margin vertical={2} horizontal={3}>
-              <PopoverItem onClick={onRemove}>Remove</PopoverItem>
+                <PopoverItem onClick={onStart}>Start</PopoverItem>
+              </Margin>
+              <Margin vertical={2} horizontal={3}>
+                <PopoverItem onClick={onRemove}>Remove</PopoverItem>
+              </Margin>
             </Popover>
           </TableTd>
         </PopoverContainer>

packages/my-joy-instances/src/components/instances/summary.js

@@ -13,8 +13,8 @@ import {
   CardOutlet,
   Divider,
   ResetIcon,
-  Button,
+  Button as BaseButton,
-  H2,
+  H2 as BaseH2,
   Label,
   CopiableField,
   QueryBreakpoints,
@@ -80,6 +80,14 @@ const VerticalDivider = styled.div`
   }
 `;
 
+const H2 = styled(BaseH2)`
+  margin: 0;
+`;
+
+const Button = styled(BaseButton)`
+  margin-right: ${remcalc(6)};
+`;
+
 export const Meta = ({
   created,
   updated,
@@ -95,43 +103,45 @@ export const Meta = ({
 }) => [
   <Row middle="xs">
     <Col xs={12}>
-      <H2>
+      <Margin bottom={1}>
-        {editingName ? (
+        <H2>
-          <form onSubmit={handleSubmit}>
+          {editingName ? (
-            <Flex style={{ alignItems: 'start' }}>
+            <form onSubmit={handleSubmit}>
-              <FormGroup name="name" field={Field}>
+              <Flex style={{ alignItems: 'start' }}>
-                <Input
+                <FormGroup name="name" field={Field}>
-                  onBlur={null}
+                  <Input
-                  type="text"
+                    onBlur={null}
-                  placeholder={instance.name}
+                    type="text"
-                  disabled={disabled || submitting}
+                    placeholder={instance.name}
-                />
+                    disabled={disabled || submitting}
-                <FormMeta />
+                  />
-              </FormGroup>
+                  <FormMeta />
-              <Margin left={1}>
+                </FormGroup>
-                <Button
+                <Margin left={1}>
-                  type="submit"
+                  <Button
-                  disabled={submitting}
+                    type="submit"
-                  loading={submitting}
+                    disabled={submitting}
-                  inline
+                    loading={submitting}
-                >
+                    inline
-                  Add
+                  >
-                </Button>
+                    Add
-              </Margin>
+                  </Button>
+                </Margin>
+              </Flex>
+            </form>
+          ) : (
+            <Flex>
+              {instance.name}
+              <Actionable left={2} onClick={editName}>
+                <EditIcon />
+              </Actionable>
             </Flex>
-          </form>
+          )}
-        ) : (
+        </H2>
-          <Flex>
+      </Margin>
-            {instance.name}
-            <Actionable left={2} onClick={editName}>
-              <EditIcon />
-            </Actionable>
-          </Flex>
-        )}
-      </H2>
     </Col>
   </Row>,
-  <Margin top={2} bottom={3}>
+  <Margin vertical={1}>
     <Flex>
       <TrimedLabel>
         {image && image.name ? titleCase(image.name) : 'Custom Image'}
@@ -187,186 +197,237 @@ export default withTheme(
           <CardOutlet>
             <Padding all={4}>
               <Meta {...instance} {...props} />
-              <Row between="xs">
+              <Margin top={3}>
-                <Col xs={9}>
+                <Row between="xs">
-                  <Button
+                  <Col xs={9}>
-                    href={`${GLOBAL.origin}/images/~create/${instance.id}`}
-                    target="__blank"
-                    rel="noopener noreferrer"
-                    secondary
-                    bold
-                    small
-                    icon
-                  >
-                    <Padding top={0.5}>
-                      <InstanceTypeIcon />
-                    </Padding>
-                  </Button>
-                  <SmallOnly>
                     <Button
-                      type="button"
+                      href={`${GLOBAL.origin}/images/~create/${instance.id}`}
-                      loading={starting}
+                      target="__blank"
-                      disabled={instance.state !== 'STOPPED'}
+                      rel="noopener noreferrer"
-                      onClick={() => onAction('start')}
-                      secondary
-                      small
-                      icon
-                    >
-                      <StartIcon disabled={instance.state !== 'STOPPED'} />
-                    </Button>
-                  </SmallOnly>
-                  <Medium>
-                    <Button
-                      type="button"
-                      loading={starting}
-                      disabled={instance.state !== 'STOPPED'}
-                      onClick={() => onAction('start')}
                       secondary
                       bold
-                      icon
-                    >
-                      <StartIcon disabled={instance.state !== 'STOPPED'} />
-                      <span>Start</span>
-                    </Button>
-                  </Medium>
-                  <SmallOnly>
-                    <Button
-                      type="button"
-                      loading={stopping}
-                      disabled={instance.state !== 'RUNNING'}
-                      onClick={() => onAction('stop')}
-                      secondary
                       small
                       icon
                     >
-                      <StopIcon disabled={instance.state !== 'RUNNING'} />
+                      <Padding top={0.5}>
+                        <InstanceTypeIcon />
+                      </Padding>
                     </Button>
-                  </SmallOnly>
+                    <SmallOnly>
-                  <Medium>
+                      <Button
-                    <Button
+                        href={`${GLOBAL.origin}/images/~create/${instance.id}`}
-                      type="button"
+                        target="__blank"
-                      loading={stopping}
+                        rel="noopener noreferrer"
-                      disabled={instance.state !== 'RUNNING'}
+                        secondary
-                      onClick={() => onAction('stop')}
+                        bold
-                      secondary
+                        small
-                      bold
+                        icon
-                      icon
+                      >
-                    >
+                        <Padding top={0}>
-                      <StopIcon disabled={instance.state !== 'RUNNING'} />
+                          <InstanceTypeIcon />
-                      <span>Stop</span>
+                        </Padding>
-                    </Button>
+                      </Button>
-                  </Medium>
+                    </SmallOnly>
-                  <SmallOnly>
+                    <SmallOnly>
-                    <Button
+                      <Button
-                      type="button"
+                        type="button"
-                      loading={rebooting}
+                        loading={starting}
-                      disabled={instance.state !== 'RUNNING'}
+                        disabled={instance.state !== 'STOPPED'}
-                      onClick={() => onAction('reboot')}
+                        onClick={() => onAction('start')}
-                      secondary
+                        secondary
-                      small
+                        small
-                      icon
+                        icon
-                    >
+                      >
-                      <ResetIcon disabled={instance.state !== 'RUNNING'} />
+                        <Margin right={2}>
-                    </Button>
+                          <StartIcon disabled={instance.state !== 'STOPPED'} />
-                  </SmallOnly>
+                        </Margin>
-                  <Medium>
+                      </Button>
-                    <Button
+                    </SmallOnly>
-                      type="button"
+                    <Medium>
-                      loading={rebooting}
+                      <Button
-                      disabled={instance.state !== 'RUNNING'}
+                        type="button"
-                      onClick={() => onAction('reboot')}
+                        loading={starting}
-                      secondary
+                        disabled={instance.state !== 'STOPPED'}
-                      bold
+                        onClick={() => onAction('start')}
-                      icon
+                        secondary
-                    >
+                        bold
-                      <ResetIcon disabled={instance.state !== 'RUNNING'} />
+                        icon
-                      <span>Reboot</span>
+                      >
-                    </Button>
+                        <Margin right={2}>
-                  </Medium>
+                          <StartIcon disabled={instance.state !== 'STOPPED'} />
-                </Col>
+                        </Margin>
-                <Col xs={3}>
+                        <span>Start</span>
-                  <SmallOnly>
+                      </Button>
-                    <Button
+                    </Medium>
-                      type="button"
+                    <SmallOnly>
-                      loading={removing}
+                      <Button
-                      disabled={
+                        type="button"
-                        ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                        loading={stopping}
-                      }
+                        disabled={instance.state !== 'RUNNING'}
-                      onClick={() => onAction('remove')}
+                        onClick={() => onAction('stop')}
-                      secondary
+                        secondary
-                      small
+                        small
-                      right
+                        icon
-                      icon
+                      >
-                      error
+                        <Margin right={2}>
-                    >
+                          <StopIcon disabled={instance.state !== 'RUNNING'} />
-                      <DeleteIcon
+                        </Margin>
-                        fill={theme.red}
+                      </Button>
+                    </SmallOnly>
+                    <Medium>
+                      <Button
+                        type="button"
+                        loading={stopping}
+                        disabled={instance.state !== 'RUNNING'}
+                        onClick={() => onAction('stop')}
+                        secondary
+                        bold
+                        icon
+                      >
+                        <Margin right={2}>
+                          <StopIcon disabled={instance.state !== 'RUNNING'} />
+                        </Margin>
+                        <span>Stop</span>
+                      </Button>
+                    </Medium>
+                    <SmallOnly>
+                      <Button
+                        type="button"
+                        loading={rebooting}
+                        disabled={instance.state !== 'RUNNING'}
+                        onClick={() => onAction('reboot')}
+                        secondary
+                        small
+                        icon
+                      >
+                        <Margin right={2}>
+                          <ResetIcon disabled={instance.state !== 'RUNNING'} />
+                        </Margin>
+                      </Button>
+                    </SmallOnly>
+                    <Medium>
+                      <Button
+                        type="button"
+                        loading={rebooting}
+                        disabled={instance.state !== 'RUNNING'}
+                        onClick={() => onAction('reboot')}
+                        secondary
+                        bold
+                        icon
+                      >
+                        <Margin right={2}>
+                          <ResetIcon disabled={instance.state !== 'RUNNING'} />
+                        </Margin>
+                        <span>Reboot</span>
+                      </Button>
+                    </Medium>
+                  </Col>
+                  <Col xs={3}>
+                    <SmallOnly>
+                      <Button
+                        type="button"
+                        loading={removing}
                         disabled={
                           ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
                         }
-                      />
+                        onClick={() => onAction('remove')}
-                    </Button>
+                        secondary
-                  </SmallOnly>
+                        small
-                  <Medium>
+                        right
-                    <Button
+                        icon
-                      type="button"
+                        error
-                      loading={removing}
+                      >
-                      disabled={
+                        <Margin right={2}>
-                        ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                          <DeleteIcon
-                      }
+                            fill={theme.red}
-                      onClick={() => onAction('remove')}
+                            disabled={
-                      secondary
+                              ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-                      bold
+                            }
-                      right
+                          />
-                      icon
+                        </Margin>
-                      error
+                      </Button>
-                    >
+                    </SmallOnly>
-                      <DeleteIcon
+                    <Medium>
-                        fill={
+                      <Button
-                          ['RUNNING', 'STOPPED'].indexOf(instance.state) >= 0
+                        type="button"
-                            ? theme.red
+                        loading={removing}
-                            : undefined
-                        }
                         disabled={
                           ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
                         }
-                      />
+                        onClick={() => onAction('remove')}
-                      <span>Remove</span>
+                        secondary
-                    </Button>
+                        bold
-                  </Medium>
+                        right
-                </Col>
+                        icon
-              </Row>
+                        error
-              <Margin bottom={5} top={4}>
+                      >
-                <Divider height={remcalc(1)} />
+                        <Margin right={2}>
+                          <DeleteIcon
+                            fill={
+                              ['RUNNING', 'STOPPED'].indexOf(instance.state) >=
+                              0
+                                ? theme.red
+                                : undefined
+                            }
+                            disabled={
+                              ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                            }
+                          />
+                        </Margin>
+                        <span>Remove</span>
+                      </Button>
+                    </Medium>
+                  </Col>
+                </Row>
+              </Margin>
+              <Margin bottom={4} top={1}>
+                <Divider height={1} />
+              </Margin>
+              <Margin bottom={3}>
+                <CopiableField
+                  text={(instance.id || '').split('-')[0]}
+                  label="Short ID"
+                />
+              </Margin>
+              <Margin bottom={3}>
+                <CopiableField text={instance.id} label="ID" />
+              </Margin>
+              <Margin bottom={3}>
+                <CopiableField text={instance.compute_node} label="CN UUID" />
               </Margin>
-              <CopiableField
-                text={(instance.id || '').split('-')[0]}
-                label="Short ID"
-              />
-              <CopiableField text={instance.id} label="ID" />
-              <CopiableField text={instance.compute_node} label="CN UUID" />
               {instance.image &&
                 instance.image.id && (
-                  <CopiableField text={instance.image.id} label="Image UUID" />
+                  <Margin bottom={3}>
+                    <CopiableField
+                      text={instance.image.id}
+                      label="Image UUID"
+                    />
+                  </Margin>
                 )}
-              <CopiableField
+              <Margin bottom={3}>
-                text={`ssh root@${instance.primary_ip}`}
-                label="Login"
-              />
-              {get(instance, 'ips.public', []).map((ip, i, ips) => (
                 <CopiableField
-                  key={`public-${i}`}
+                  text={`ssh root@${instance.primary_ip}`}
-                  label={`Public IP address ${ips.length > 1 ? i + 1 : ''}`}
+                  label="Login"
-                  text={ip}
                 />
+              </Margin>
+              {get(instance, 'ips.public', []).map((ip, i, ips) => (
+                <Margin bottom={3}>
+                  <CopiableField
+                    key={`public-${i}`}
+                    label={`Public IP address ${ips.length > 1 ? i + 1 : ''}`}
+                    text={ip}
+                  />
+                </Margin>
               ))}
               {get(instance, 'ips.private', []).map((ip, i, ips) => (
-                <CopiableField
+                <Margin bottom={3}>
-                  key={`private-${i}`}
+                  <CopiableField
-                  noMargin={i === ips.length - 1}
+                    key={`private-${i}`}
-                  label={`Private IP address ${ips.length > 1 ? i + 1 : ''}`}
+                    noMargin={i === ips.length - 1}
-                  text={ip}
+                    label={`Private IP address ${ips.length > 1 ? i + 1 : ''}`}
-                />
+                    text={ip}
+                  />
+                </Margin>
               ))}
             </Padding>
           </CardOutlet>

packages/my-joy-instances/src/components/instances/toolbar.js

@@ -22,7 +22,7 @@ export const Toolbar = ({
   onActionClick,
   actionTo
 }) => (
-  <Flex justifyBetween>
+  <Flex justifyBetween alignEnd>
     <FormGroup name="filter" field={Field}>
       <FormLabel>{searchLabel}</FormLabel>
       <Margin top={0.5}>

packages/my-joy-instances/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap

@@ -3,36 +3,42 @@
 exports[`renders <Menu /> without throwing 1`] = `null`;
 
 exports[`renders <Menu links /> without throwing 1`] = `
-.c1 {
+.c2 {
-  margin-bottom: 2.25rem;
+  margin-bottom: 1.875rem;
 }
 
-.c6 {
+.c8 {
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
   text-decoration-skip: objects;
+}
+
+.c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
 }
 
-.c5 {
+.c6 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c5:hover {
+.c6:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c0 {
+.c1 {
   margin-right: auto;
   margin-left: auto;
+}
+
+.c0 {
   box-sizing: border-box;
   width: 100%;
   max-width: 62.5rem;
 }
 
-.c3 {
+.c4 {
   font-size: 0.9375rem;
   line-height: 1.6;
   -webkit-flex-shrink: 0;
@@ -40,11 +46,7 @@ exports[`renders <Menu links /> without throwing 1`] = `
   flex-shrink: 0;
 }
 
-.c3:not(:last-child) {
+.c5 {
-  margin-right: 1.875rem;
-}
-
-.c4 {
   color: rgb(70,70,70);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -54,11 +56,11 @@ exports[`renders <Menu links /> without throwing 1`] = `
   position: relative;
 }
 
-.c4.active {
+.c5.active {
   font-weight: 600;
 }
 
-.c4.active:after {
+.c5.active:after {
   width: 100%;
   height: 0.0625rem;
   background: rgb(70,70,70);
@@ -69,11 +71,10 @@ exports[`renders <Menu links /> without throwing 1`] = `
   z-index: 2;
 }
 
-.c2 {
+.c3 {
   background: rgb(250,250,250);
   list-style-type: none;
-  padding: 0.8125rem 0rem;
+  padding: 0.75rem 0rem;
-  margin: 1.125rem 0 0 0;
   max-height: 3.125rem;
   overflow-x: auto;
   overflow-y: hidden;
@@ -83,9 +84,10 @@ exports[`renders <Menu links /> without throwing 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   position: relative;
+  margin: 0;
 }
 
-.c2:after {
+.c3:after {
   width: 100%;
   height: 0.0625rem;
   background: rgb(216,216,216);
@@ -97,19 +99,19 @@ exports[`renders <Menu links /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c0 {
+  .c1 {
     width: 46rem;
   }
 }
 
 @media only screen and (min-width:64em) {
-  .c0 {
+  .c1 {
     width: 56rem;
   }
 }
 
 @media only screen and (min-width:75em) {
-  .c0 {
+  .c1 {
     width: 59rem;
   }
 }
@@ -122,79 +124,79 @@ exports[`renders <Menu links /> without throwing 1`] = `
 }
 
 <div
-  className="c0"
+  className="c0 c1"
 >
   <div
-    className="c1"
+    className="c2"
   >
     <ul
-      className="c2"
+      className="c3"
     >
       <li
-        className="c3"
+        className="c4"
       >
         <a
-          className="c4 c5 c6"
+          className="c5 c6 c7 c8"
           to="/:name/summary"
         >
           summary
         </a>
       </li>
       <li
-        className="c3"
+        className="c4"
       >
         <a
-          className="c4 c5 c6"
+          className="c5 c6 c7 c8"
           to="/:name/tags"
         >
           tags
         </a>
       </li>
       <li
-        className="c3"
+        className="c4"
       >
         <a
-          className="c4 c5 c6"
+          className="c5 c6 c7 c8"
           to="/:name/metadata"
         >
           metadata
         </a>
       </li>
       <li
-        className="c3"
+        className="c4"
       >
         <a
-          className="c4 c5 c6"
+          className="c5 c6 c7 c8"
           to="/:name/networks"
         >
           networks
         </a>
       </li>
       <li
-        className="c3"
+        className="c4"
       >
         <a
-          className="c4 c5 c6"
+          className="c5 c6 c7 c8"
           to="/:name/firewall"
         >
           firewall
         </a>
       </li>
       <li
-        className="c3"
+        className="c4"
       >
         <a
-          className="c4 c5 c6"
+          className="c5 c6 c7 c8"
           to="/:name/dns"
         >
           dns
         </a>
       </li>
       <li
-        className="c3"
+        className="c4"
       >
         <a
-          className="c4 c5 c6"
+          className="c5 c6 c7 c8"
           to="/:name/snapshots"
         >
           snapshots

packages/my-joy-instances/src/components/navigation/menu.js

@@ -28,7 +28,7 @@ const Menu = ({ links = [] }) => {
 
   return (
     <ViewContainer plain>
-      <Margin bottom={6}>
+      <Margin bottom={4}>
         <SectionList>{getMenuItems(_links)}</SectionList>
       </Margin>
     </ViewContainer>