fix(my-joy-beta): fix section spacings

fixes #1096

package.json

@@ -65,6 +65,7 @@
     "yargs": "^10.0.3"
   },
   "resolutions": {
+    "component-type": "1.2.1",
     "styled-components": "3.1.4",
     "axios": "0.16.2",
     "follow-redirects": "1.4.1",

packages/my-joy-beta/package.json

@@ -12,7 +12,7 @@
     "lint-ci": "eslint . --ext .js --ext .md",
     "lint": "eslint . --fix --ext .js --ext .md",
     "test-ci": "NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'",
-    "test": "DEFAULT_TIMEOUT_INTERVAL=80000 NODE_ENV=test joyent-react-scripts test --env=jsdom",
+    "test": "DEFAULT_TIMEOUT_INTERVAL=100000 NODE_ENV=test joyent-react-scripts test --env=jsdom",
     "prepublish": "echo 0"
   },
   "dependencies": {
@@ -24,7 +24,8 @@
     "constant-case": "^2.0.0",
     "date-fns": "^1.29.0",
     "declarative-redux-form": "^2.0.8",
-    "joyent-manifest-editor": "3.0.1",
+    "joyent-manifest-editor": "^1.4.0",
+    "joyent-react-styled-flexboxgrid": "^2.2.3",
     "joyent-ui-toolkit": "^4.5.0",
     "lodash.find": "^4.6.0",
     "lodash.findindex": "^4.6.0",
@@ -58,7 +59,7 @@
     "scroll-to-element": "^2.0.0",
     "styled-components": "^3.1.4",
     "styled-components-spacing": "^2.1.3",
-    "styled-flex-component": "^2.1.0",
+    "styled-flex-component": "^2.2.0",
     "title-case": "^2.1.1"
   },
   "devDependencies": {

packages/my-joy-beta/src/assets/node.svg

@@ -1 +1 @@
-<svg id="svg4300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><defs><style>.cls-1{fill:none}.cls-2{fill:url(#linear-gradient)}.cls-3{clip-path:url(#clip-path)}.cls-4{fill:#b4b4b4;opacity:.66;isolation:isolate}.cls-5{fill:url(#linear-gradient-2)}</style><linearGradient id="linear-gradient" x1="6" y1="127.4" x2="36" y2="127.4" gradientTransform="matrix(1 0 0 -1 0 147.4)" gradientUnits="userSpaceOnUse"><stop offset=".01"/><stop offset=".19" stop-color="#171717"/><stop offset=".54" stop-color="#3d3d3d"/><stop offset=".82" stop-color="#545454"/><stop offset="1" stop-color="#5c5c5c"/></linearGradient><clipPath id="clip-path"><path class="cls-1" d="M21.8 3.15a1.53 1.53 0 0 0-1.6 0l-13.4 7.7a1.6 1.6 0 0 0-.8 1.4v15.5a1.6 1.6 0 0 0 .8 1.4l13.4 7.7a1.53 1.53 0 0 0 1.6 0l13.4-7.7a1.6 1.6 0 0 0 .8-1.4v-15.5a1.6 1.6 0 0 0-.8-1.4z"/></clipPath><linearGradient id="linear-gradient-2" x1="5.81" y1="127.46" x2="36.75" y2="127.46" gradientTransform="matrix(1 0 0 -1 0 147.4)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5c5c5c"/><stop offset=".18" stop-color="#545454"/><stop offset=".46" stop-color="#3d3d3d"/><stop offset=".81" stop-color="#171717"/><stop offset=".99"/></linearGradient></defs><title>Artboard 1 copy 10</title><path id="_Path_" data-name="&lt;Path&gt;" class="cls-2" d="M20.2 3.15a1.53 1.53 0 0 1 1.6 0l13.4 7.7a1.6 1.6 0 0 1 .8 1.4v15.5a1.6 1.6 0 0 1-.8 1.4l-13.4 7.7a1.53 1.53 0 0 1-1.6 0l-13.4-7.7a1.6 1.6 0 0 1-.8-1.4v-15.5a1.6 1.6 0 0 1 .8-1.4z"/><g class="cls-3"><path class="cls-1" d="M20.2 3.15l-13.4 7.7a1.6 1.6 0 0 0-.8 1.4v15.5a1.28 1.28 0 0 0 .4 1L21.5 3a2.74 2.74 0 0 0-1.3.15zm1.3 33.9c.1 0 .2-.1.3-.1l13.4-7.7a1.51 1.51 0 0 0 .7-1.4v-15.5a1.49 1.49 0 0 0-.3-1z"/><path class="cls-4" d="M35.1 11L21.8 3.25c-.1-.1-.3-.1-.4-.2L6.3 28.85a1 1 0 0 0 .5.4L20.2 37a1.5 1.5 0 0 0 1.3.1l14.1-25.8c-.2-.15-.3-.25-.5-.3z"/></g><g class="cls-3"><path class="cls-1" d="M6.9 10.85l-.2.1a1.6 1.6 0 0 0-.8 1.4v15.5a1.6 1.6 0 0 0 .8 1.4L20.1 37a1.72 1.72 0 0 0 1.2.2zm29 1.5a1.51 1.51 0 0 0-.7-1.4l-13.3-7.7c-.1-.1-.2-.1-.4-.2l14.4 24.7z"/><path class="cls-5" d="M21.8 36.85l13.4-7.7a1.51 1.51 0 0 0 .7-1.4v-.1L21.5 3a1.53 1.53 0 0 0-1.3.2L7 10.75 21.4 37c.1.05.2 0 .4-.15z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 34.22"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#1b3240;opacity:0.66;isolation:isolate;}.cls-3{fill:url(#linear-gradient-2);}</style><linearGradient id="linear-gradient" y1="225.5" x2="30" y2="225.5" gradientTransform="matrix(1, 0, 0, -1, 0, 242.65)" gradientUnits="userSpaceOnUse"><stop offset="0.01" stop-color="#1b3240"/><stop offset="1" stop-color="#436275"/></linearGradient><linearGradient id="linear-gradient-2" x1="-0.1" y1="225.58" x2="30.85" y2="225.58" gradientTransform="matrix(1, 0, 0, -1, 0, 242.65)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#436275"/><stop offset="1" stop-color="#1b3240"/></linearGradient></defs><title>Nodejs</title><g id="Layer_2" data-name="Layer 2"><g id="svg4300"><path id="_Path_" data-name="&lt;Path&gt;" class="cls-1" d="M14.2.3a1.53,1.53,0,0,1,1.6,0L29.2,8A1.6,1.6,0,0,1,30,9.4V24.9a1.6,1.6,0,0,1-.8,1.4L15.8,34a1.53,1.53,0,0,1-1.6,0L.8,26.3A1.6,1.6,0,0,1,0,24.9V9.4A1.6,1.6,0,0,1,.8,8Z"/><path class="cls-2" d="M28.8,8,15.5.2c-.1-.1-.3-.1-.4-.2L0,25.8a1,1,0,0,0,.5.4l13.4,7.7a1.5,1.5,0,0,0,1.3.1L29.3,8.2C29.1,8.2,29,8.1,28.8,8Z"/><path class="cls-3" d="M15.9,34l13.4-7.7a1.51,1.51,0,0,0,.7-1.4v-.1L15.6.1a1.53,1.53,0,0,0-1.3.2L1.1,7.9,15.5,34.1C15.6,34.1,15.7,34,15.9,34Z"/></g></g></svg>

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

@@ -2,6 +2,10 @@
 
 exports[`renders <AddServiceForm /> without throwing 1`] = `
 .c4 {
+  margin-top: 0.1875rem;
+}
+
+.c6 {
   margin-left: 0.75rem;
 }
 
@@ -29,7 +33,24 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c7 {
+.c1 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  display: block;
+}
+
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -42,30 +63,30 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c7::-moz-focus-inner,
-.c7[type='button']::-moz-focus-inner,
-.c7[type='reset']::-moz-focus-inner,
-.c7[type='submit']::-moz-focus-inner {
+.c9::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
+.c9[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c7:-moz-focusring,
-.c7[type='button']:-moz-focusring,
-.c7[type='reset']:-moz-focusring,
-.c7[type='submit']:-moz-focusring {
+.c9:-moz-focusring,
+.c9[type='button']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
+.c9[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c7 + button {
+.c9 + button {
   margin-left: 0.375rem;
 }
 
-.c6 {
+.c8 {
   display: inline-block;
 }
 
-.c5 {
+.c7 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -79,8 +100,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   min-height: 3rem;
   height: 3rem;
   min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
   padding: 0.9375rem 1.125rem;
   position: relative;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@@ -106,34 +125,35 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c5:focus {
+.c7:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c5:hover {
+.c7:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c5:active,
-.c5:active:hover,
-.c5:active:focus {
+.c7:active,
+.c7:active:hover,
+.c7:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c5[disabled] {
+.c7[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c2 {
+.c3 {
   font-size: 0.9375rem;
+  line-height: 1.125rem;
   font-style: normal;
   font-stretch: normal;
   display: block;
@@ -145,7 +165,33 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c1 {
+.c11 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c10 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+  height: 0.25rem;
+}
+
+.c2 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -160,13 +206,11 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c3 {
+.c5 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
   padding: 0.8125rem 1.125rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -184,41 +228,41 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   outline: 0;
 }
 
-.c3::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c3::-moz-placeholder {
+.c5::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c3:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c3:invalid {
+.c5:invalid {
   box-shadow: none;
 }
 
-.c3:disabled {
+.c5:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c3:disabled::-webkit-input-placeholder {
+.c5:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c3:disabled::-moz-placeholder {
+.c5:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c3:disabled:-ms-input-placeholder {
+.c5:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c3:focus {
+.c5:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -230,36 +274,52 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
     className="c0"
   >
     <div
-      className="baseline-jVaZNU kXgQxt c1"
+      className="c1"
+    >
+      <div
+        className="baseline-jVaZNU kXgQxt c2"
         name="name"
         role="group"
         style={undefined}
       >
         <label
-        className="c2"
+          className="c3"
           htmlFor="k"
         >
           Attach to new CNS service name
         </label>
+        <div
+          className="c4"
+        >
           <input
-        className="c3"
+            className="c5"
             disabled={false}
             id="k"
             onBlur={null}
             placeholder="Example: mySQLdb"
           />
         </div>
+      </div>
+    </div>
     <div
-      className="c4"
+      className="c1"
+    >
+      <div
+        className="c6"
       >
         <button
-        className="c5 c6 c7"
+          className="c7 c8 c9"
           disabled={undefined}
           href=""
           type="submit"
         >
           Add
         </button>
+        <div
+          className="c10 c11"
+          height="0.25rem"
+        />
+      </div>
     </div>
   </div>
 </form>
@@ -267,6 +327,10 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
 
 exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
 .c4 {
+  margin-top: 0.1875rem;
+}
+
+.c6 {
   margin-left: 0.75rem;
 }
 
@@ -294,7 +358,24 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c7 {
+.c1 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  display: block;
+}
+
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -307,30 +388,30 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c7::-moz-focus-inner,
-.c7[type='button']::-moz-focus-inner,
-.c7[type='reset']::-moz-focus-inner,
-.c7[type='submit']::-moz-focus-inner {
+.c9::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
+.c9[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c7:-moz-focusring,
-.c7[type='button']:-moz-focusring,
-.c7[type='reset']:-moz-focusring,
-.c7[type='submit']:-moz-focusring {
+.c9:-moz-focusring,
+.c9[type='button']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
+.c9[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c7 + button {
+.c9 + button {
   margin-left: 0.375rem;
 }
 
-.c6 {
+.c8 {
   display: inline-block;
 }
 
-.c5 {
+.c7 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -344,8 +425,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   min-height: 3rem;
   height: 3rem;
   min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
   padding: 0.9375rem 1.125rem;
   position: relative;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@@ -376,51 +455,52 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c5:focus {
+.c7:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c5:hover {
+.c7:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c5:active,
-.c5:active:hover,
-.c5:active:focus {
+.c7:active,
+.c7:active:hover,
+.c7:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c5[disabled] {
+.c7[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c5:focus {
+.c7:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c5:hover {
+.c7:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c5:active,
-.c5:active:hover,
-.c5:active:focus {
+.c7:active,
+.c7:active:hover,
+.c7:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c2 {
+.c3 {
   font-size: 0.9375rem;
+  line-height: 1.125rem;
   font-style: normal;
   font-stretch: normal;
   display: block;
@@ -432,7 +512,33 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c1 {
+.c11 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c10 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+  height: 0.25rem;
+}
+
+.c2 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -447,13 +553,11 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c3 {
+.c5 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
   padding: 0.8125rem 1.125rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -471,41 +575,41 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   outline: 0;
 }
 
-.c3::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c3::-moz-placeholder {
+.c5::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c3:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c3:invalid {
+.c5:invalid {
   box-shadow: none;
 }
 
-.c3:disabled {
+.c5:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c3:disabled::-webkit-input-placeholder {
+.c5:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c3:disabled::-moz-placeholder {
+.c5:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c3:disabled:-ms-input-placeholder {
+.c5:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c3:focus {
+.c5:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -517,36 +621,52 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
     className="c0"
   >
     <div
-      className="baseline-jVaZNU kXgQxt c1"
+      className="c1"
+    >
+      <div
+        className="baseline-jVaZNU kXgQxt c2"
         name="name"
         role="group"
         style={undefined}
       >
         <label
-        className="c2"
+          className="c3"
           htmlFor="l"
         >
           Attach to new CNS service name
         </label>
+        <div
+          className="c4"
+        >
           <input
-        className="c3"
+            className="c5"
             disabled={false}
             id="l"
             onBlur={null}
             placeholder="Example: mySQLdb"
           />
         </div>
+      </div>
+    </div>
     <div
-      className="c4"
+      className="c1"
+    >
+      <div
+        className="c6"
       >
         <button
-        className="c5 c6 c7"
+          className="c7 c8 c9"
           disabled={true}
           href=""
           type="submit"
         >
           Add
         </button>
+        <div
+          className="c10 c11"
+          height="0.25rem"
+        />
+      </div>
     </div>
   </div>
 </form>
@@ -619,6 +739,10 @@ Array [
 exports[`renders <Hostname /> without throwing 1`] = `null`;
 
 exports[`renders <Hostname values /> without throwing 1`] = `
+.c9 {
+  margin-top: 0.1875rem;
+}
+
 .c0 {
   margin-bottom: 1.5rem;
 }
@@ -627,6 +751,11 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   margin-right: 0.375rem;
 }
 
+.c7 {
+  margin-top: 0.1875rem;
+  margin-bottom: 0.375rem;
+}
+
 .c1 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -681,13 +810,11 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
   padding: 0.8125rem 1.125rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -708,69 +835,69 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   outline: 0;
 }
 
-.c7::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7::-moz-placeholder {
+.c8::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7:invalid {
+.c8:invalid {
   box-shadow: none;
 }
 
-.c7::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c7::-moz-placeholder {
+.c8::-moz-placeholder {
   color: rgb(216,216,216);
 }
 
-.c7:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c7:disabled {
+.c8:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c7:disabled::-webkit-input-placeholder {
+.c8:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7:disabled::-moz-placeholder {
+.c8:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7:disabled:-ms-input-placeholder {
+.c8:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c7:disabled {
+.c8:disabled {
   color: rgba(73,73,73,1);
 }
 
-.c7:disabled::-webkit-input-placeholder {
+.c8:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,1);
 }
 
-.c7:disabled::-moz-placeholder {
+.c8:disabled::-moz-placeholder {
   color: rgba(73,73,73,1);
 }
 
-.c7:disabled:-ms-input-placeholder {
+.c8:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,1);
 }
 
-.c7:focus {
+.c8:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -831,21 +958,29 @@ exports[`renders <Hostname values /> without throwing 1`] = `
       </small>
     </div>
   </div>
-  <input
+  <div
     className="c7"
+  >
+    <input
+      className="c8"
       disabled={true}
       id=""
       onBlur={null}
       value="111"
     />
+  </div>
+  <div
+    className="c9"
+  >
     <input
-    className="c7"
+      className="c8"
       disabled={true}
       id=""
       onBlur={null}
       value="111"
     />
   </div>
+</div>
 `;
 
 exports[`renders <HostnamesHeader /> without throwing 1`] = `

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

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
-import Firewall, {
+import {
   Rules,
   TagRules,
   DefaultRules,
@@ -212,71 +212,3 @@ it('renders <ToggleInactiveForm /> without throwing', () => {
       .toJSON()
   ).toMatchSnapshot();
 });
-
-it('renders <Firewall /> without throwing', () => {
-  expect(
-    renderer
-      .create(
-        <Theme>
-          <Firewall />
-        </Theme>
-      )
-      .toJSON()
-  ).toMatchSnapshot();
-});
-
-it('renders <Firewall defaultRules /> without throwing', () => {
-  expect(
-    renderer
-      .create(
-        <Theme>
-          <Fragment>
-            <Firewall
-              defaultRules={rules.filter(
-                ({ rule_obj }) => !rule_obj.tags.length
-              )}
-              enabled
-            />
-            <Firewall
-              defaultRules={rules.filter(
-                ({ rule_obj }) => !rule_obj.tags.length
-              )}
-            />
-          </Fragment>
-        </Theme>
-      )
-      .toJSON()
-  ).toMatchSnapshot();
-});
-
-it('renders <Firewall tagRules /> without throwing', () => {
-  expect(
-    renderer
-      .create(
-        <Theme>
-          <Fragment>
-            <Firewall
-              tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
-              enabled
-            />
-            <Firewall
-              tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
-            />
-          </Fragment>
-        </Theme>
-      )
-      .toJSON()
-  ).toMatchSnapshot();
-});
-
-it('renders <Firewall enabled /> without throwing', () => {
-  expect(
-    renderer
-      .create(
-        <Theme>
-          <Firewall enabled />
-        </Theme>
-      )
-      .toJSON()
-  ).toMatchSnapshot();
-});

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

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 import screenshot from 'react-screenshot-renderer';
 
-import Firewall, {
+import {
   Rules,
   TagRules,
   DefaultRules,
@@ -198,59 +198,3 @@ it('<ToggleInactiveForm />', async () => {
     )
   ).toMatchImageSnapshot();
 });
-
-it('<Firewall />', async () => {
-  expect(
-    await screenshot(
-      <Theme ss>
-        <Firewall />
-      </Theme>
-    )
-  ).toMatchImageSnapshot();
-});
-
-it('<Firewall defaultRules />', async () => {
-  expect(
-    await screenshot(
-      <Theme ss>
-        <Fragment>
-          <Firewall
-            defaultRules={rules.filter(({ rule_obj }) => !rule_obj.tags.length)}
-            enabled
-          />
-          <Firewall
-            defaultRules={rules.filter(({ rule_obj }) => !rule_obj.tags.length)}
-          />
-        </Fragment>
-      </Theme>
-    )
-  ).toMatchImageSnapshot();
-});
-
-it('<Firewall tagRules />', async () => {
-  expect(
-    await screenshot(
-      <Theme ss>
-        <Fragment>
-          <Firewall
-            tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
-            enabled
-          />
-          <Firewall
-            tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
-          />
-        </Fragment>
-      </Theme>
-    )
-  ).toMatchImageSnapshot();
-});
-
-it('<Firewall enabled />', async () => {
-  expect(
-    await screenshot(
-      <Theme ss>
-        <Firewall enabled />
-      </Theme>
-    )
-  ).toMatchImageSnapshot();
-});

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

@@ -82,24 +82,32 @@ export const AddServiceForm = ({
 }) => (
   <form onSubmit={handleSubmit}>
     <Flex alignEnd>
+      <FlexItem>
         <FormGroup name="name" field={Field}>
           <FormLabel>Attach to new CNS service name</FormLabel>
+          <Margin top={0.5}>
             <Input
               onBlur={null}
               type="text"
               placeholder="Example: mySQLdb"
               disabled={disabled || submitting}
             />
+          </Margin>
         </FormGroup>
+      </FlexItem>
+      <FlexItem>
         <Margin left={2}>
           <Button
             type="submit"
             disabled={disabled || pristine}
             loading={submitting}
+            inline
           >
             Add
           </Button>
+          <Divider height={remcalc(4)} transparent />
         </Margin>
+      </FlexItem>
     </Flex>
   </form>
 );
@@ -126,8 +134,15 @@ export const Hostname = ({ values = [], network, service, ...hostname }) => (
             <Small noMargin>{hostname.public ? 'Public' : 'Private'}</Small>
           </FlexItem>
         </Flex>
-        {values.map(value => (
+        {values.map((value, i) => (
+          <Margin
+            top={0.5}
+            bottom={
+              values.length !== 1 && values.length !== i + 1 ? '1' : undefined
+            }
+          >
             <Input onBlur={null} disabled monospace fluid value={value} />
+          </Margin>
         ))}
       </Margin>
     ) : null}

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

@@ -170,8 +170,6 @@ exports[`renders <Rule/> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
   padding: 0.8125rem 1.125rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -310,8 +308,6 @@ exports[`renders <Rule/> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
   padding: 0.8125rem 1.125rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -387,8 +383,6 @@ exports[`renders <Rule/> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
   padding: 0.8125rem 1.125rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -464,8 +458,6 @@ exports[`renders <Rule/> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
   padding: 0.8125rem 1.125rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -852,8 +844,6 @@ exports[`renders <Rule/> without throwing 2`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
   padding: 0.8125rem 1.125rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -992,8 +982,6 @@ exports[`renders <Rule/> without throwing 2`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
   padding: 0.8125rem 1.125rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -1069,8 +1057,6 @@ exports[`renders <Rule/> without throwing 2`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
   padding: 0.8125rem 1.125rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -1146,8 +1132,6 @@ exports[`renders <Rule/> without throwing 2`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
   padding: 0.8125rem 1.125rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);

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

@@ -7,9 +7,9 @@ exports[`renders <Images /> without throwing 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -34,9 +34,9 @@ exports[`renders <Images Images="test" /> without throwing 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -61,9 +61,9 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -88,9 +88,9 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -108,15 +108,20 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   flex: 0 0 auto;
   padding-right: 0.625rem;
   padding-left: 0.625rem;
+  display: block;
 }
 
-.c7 {
+.c2 {
+  margin-bottom: 1.125rem;
+}
+
+.c8 {
   position: relative;
   padding: 0.75rem;
   padding-right: 1.5625rem;
 }
 
-.c3 {
+.c4 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -124,20 +129,20 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   margin: 0;
 }
 
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
+.c4 + p,
+.c4 + small,
+.c4 + h1,
+.c4 + h2,
+.c4 + label,
+.c4 + h3,
+.c4 + h4,
+.c4 + h5,
+.c4 + div,
+.c4 + span {
   margin-top: 0.75rem;
 }
 
-.c2 {
+.c3 {
   width: 9rem;
   height: 9rem;
   background: rgb(255,255,255);
@@ -160,13 +165,12 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   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;
   cursor: pointer;
 }
 
-.c4 {
+.c5 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -181,7 +185,7 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   -webkit-padding-after: 0;
 }
 
-.c6 {
+.c7 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -192,7 +196,7 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   min-width: 18.75rem;
 }
 
-.c6:after {
+.c7:after {
   content: '';
   width: 0.625rem;
   height: 0.625rem;
@@ -206,13 +210,11 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   right: 0.75rem;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
   padding: 0.8125rem 1.125rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -230,51 +232,51 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   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: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:focus {
+.c9:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c5 {
+.c6 {
   min-width: 100%;
   width: 9rem;
 }
 
-.c5 select {
+.c6 select {
   margin: 0;
   border-bottom-width: 0;
   border-top-left-radius: 0;
@@ -287,7 +289,6 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
     max-width: 25%;
-    display: block;
   }
 }
 
@@ -297,7 +298,6 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
     -ms-flex-preferred-size: 16.666666666666668%;
     flex-basis: 16.666666666666668%;
     max-width: 16.666666666666668%;
-    display: block;
   }
 }
 
@@ -310,6 +310,9 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
     >
       <div
         className="c2"
+      >
+        <div
+          className="c3"
           disabled={false}
           id="image-card-stuff"
           name="card"
@@ -328,23 +331,23 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
             width={36}
           />
           <h4
-          className="c3"
+            className="c4"
           >
             Stuff
           </h4>
           <div
-          className="baseline-jVaZNU kXgQxt c4"
+            className="baseline-jVaZNU kXgQxt c5"
             name="image"
             role="group"
             style={undefined}
           >
             <div
-            className="c5 c6"
+              className="c6 c7"
               disabled={false}
               onBlur={null}
             >
               <select
-              className="c5 c7 c8"
+                className="c6 c8 c9"
                 disabled={false}
                 id="k"
                 onBlur={null}
@@ -360,6 +363,7 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
         </div>
       </div>
     </div>
+  </div>
 </form>
 `;
 
@@ -370,9 +374,9 @@ exports[`renders <Images isVmSelected /> without throwing 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -397,9 +401,9 @@ exports[`renders <Images loading /> without throwing 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -424,9 +428,9 @@ exports[`renders <Images pristine={false} /> without throwing 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;

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

@@ -9,15 +9,15 @@ exports[`renders <Title /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c7 {
+.c6 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -28,7 +28,7 @@ exports[`renders <Title /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c6 {
+.c5 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
@@ -87,14 +87,9 @@ exports[`renders <Title /> without throwing 1`] = `
   margin-right: 0.375rem;
 }
 
-.c5 {
+.c4 {
   margin-top: 0.375rem;
-  margin-bottom: 1.125rem;
-}
-
-.c4 + div:empty,
-.c4 + form:empty {
-  margin-bottom: 2.5rem;
+  margin-bottom: 2.625rem;
 }
 
 <div
@@ -115,10 +110,10 @@ exports[`renders <Title /> without throwing 1`] = `
     />
   </div>
   <div
-    className="c4 c5"
+    className="c4"
   >
     <div
-      className="c6 c7"
+      className="c5 c6"
       height="0.0625rem"
     />
   </div>
@@ -134,15 +129,15 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c7 {
+.c6 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -153,7 +148,7 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c6 {
+.c5 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
@@ -212,14 +207,9 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
   margin-right: 0.375rem;
 }
 
-.c5 {
+.c4 {
   margin-top: 0.375rem;
-  margin-bottom: 1.125rem;
-}
-
-.c4 + div:empty,
-.c4 + form:empty {
-  margin-bottom: 2.5rem;
+  margin-bottom: 2.625rem;
 }
 
 <div
@@ -259,10 +249,10 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
     />
   </div>
   <div
-    className="c4 c5"
+    className="c4"
   >
     <div
-      className="c6 c7"
+      className="c5 c6"
       height="0.0625rem"
     />
   </div>
@@ -278,15 +268,15 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
   font-size: 0.8125rem;
 }
 
-.c7 {
+.c6 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -297,7 +287,7 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
   margin-left: -0.625rem;
 }
 
-.c6 {
+.c5 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
@@ -356,14 +346,9 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
   margin-right: 0.375rem;
 }
 
-.c5 {
+.c4 {
   margin-top: 0.375rem;
-  margin-bottom: 1.125rem;
-}
-
-.c4 + div:empty,
-.c4 + form:empty {
-  margin-bottom: 2.5rem;
+  margin-bottom: 2.625rem;
 }
 
 <div
@@ -404,10 +389,10 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
     />
   </div>
   <div
-    className="c4 c5"
+    className="c4"
   >
     <div
-      className="c6 c7"
+      className="c5 c6"
       height="0.0625rem"
     />
   </div>
@@ -423,15 +408,15 @@ exports[`renders <Title label="Test"/> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c7 {
+.c6 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -442,7 +427,7 @@ exports[`renders <Title label="Test"/> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c6 {
+.c5 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
@@ -501,14 +486,9 @@ exports[`renders <Title label="Test"/> without throwing 1`] = `
   margin-right: 0.375rem;
 }
 
-.c5 {
+.c4 {
   margin-top: 0.375rem;
-  margin-bottom: 1.125rem;
-}
-
-.c4 + div:empty,
-.c4 + form:empty {
-  margin-bottom: 2.5rem;
+  margin-bottom: 2.625rem;
 }
 
 <div
@@ -530,10 +510,10 @@ exports[`renders <Title label="Test"/> without throwing 1`] = `
     />
   </div>
   <div
-    className="c4 c5"
+    className="c4"
   >
     <div
-      className="c6 c7"
+      className="c5 c6"
       height="0.0625rem"
     />
   </div>

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

@@ -1,10 +1,10 @@
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
 import { Field } from 'redux-form';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import { Margin } from 'styled-components-spacing';
 import Flex from 'styled-flex-component';
 import remcalc from 'remcalc';
-import { Row, Col } from 'react-styled-flexboxgrid';
 import titleCase from 'title-case';
 import includes from 'lodash.includes';
 
@@ -67,6 +67,7 @@ const Image = ({ onClick, active, ...image }) => {
 
   return (
     <Col md={2} sm={3}>
+      <Margin bottom={3}>
         <Card id={ids[0]} onClick={handleClick} active={active} preview>
           <img
             id={ids[1]}
@@ -89,6 +90,7 @@ const Image = ({ onClick, active, ...image }) => {
             </Version>
           </FormGroup>
         </Card>
+      </Margin>
     </Col>
   );
 };

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

@@ -5,6 +5,7 @@ import Flex, { FlexItem } from 'styled-flex-component';
 import remcalc from 'remcalc';
 
 import {
+  Divider,
   FormGroup,
   FormLabel,
   Input,
@@ -13,25 +14,21 @@ import {
   RandomizeIcon
 } from 'joyent-ui-toolkit';
 
-export default ({
-  handleSubmit,
-  pristine,
-  asyncValidating,
-  placeholderName,
-  randomizing,
-  onRandomize
-}) => (
-  <form onSubmit={handleSubmit}>
+export default ({ placeholderName, randomizing, onRandomize }) => (
+  <form>
     <Flex>
-      <FlexItem>
+      <FlexItem flex>
         <FormGroup name="name" fluid field={Field}>
           <FormLabel>Instance Name</FormLabel>
+          <Margin top={0.5}>
             <Input placeholder={placeholderName} onBlur={null} />
+          </Margin>
           <FormMeta />
         </FormGroup>
       </FlexItem>
       <FlexItem>
-        <Margin left={1} top="14px">
+        <Divider height={remcalc(13)} transparent />
+        <Margin left={1}>
           <Button
             type="button"
             marginTop={remcalc(8)}
@@ -47,10 +44,5 @@ export default ({
         </Margin>
       </FlexItem>
     </Flex>
-    <Margin top={2} bottom={4}>
-      <Button type="submit" disabled={pristine} loading={asyncValidating}>
-        Next
-      </Button>
-    </Margin>
   </form>
 );

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

@@ -1,12 +1,10 @@
-/* eslint-disable camelcase */
-
 import React from 'react';
 import { Field } from 'redux-form';
 import { Margin, Padding } from 'styled-components-spacing';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import styled from 'styled-components';
 import Flex, { FlexItem } from 'styled-flex-component';
 import remcalc from 'remcalc';
-import { Row, Col } from 'react-styled-flexboxgrid';
 
 import {
   H4,
@@ -203,6 +201,7 @@ export const Expanded = ({
                             <FlexItem>
                               <FormGroup name="id">
                                 <FormLabel>ID</FormLabel>
+                                <Margin top={0.5}>
                                   <Input
                                     onBlur={null}
                                     big
@@ -210,11 +209,13 @@ export const Expanded = ({
                                     type="text"
                                     value={id}
                                   />
+                                </Margin>
                               </FormGroup>
                             </FlexItem>
                             <FlexItem>
                               <FormGroup name="subnet">
                                 <FormLabel>Subnet</FormLabel>
+                                <Margin top={0.5}>
                                   <Input
                                     onBlur={null}
                                     big
@@ -222,11 +223,13 @@ export const Expanded = ({
                                     type="text"
                                     value={subnet}
                                   />
+                                </Margin>
                               </FormGroup>
                             </FlexItem>
                             <FlexItem>
                               <FormGroup name="ip-range">
                                 <FormLabel>IP range</FormLabel>
+                                <Margin top={0.5}>
                                   <Input
                                     onBlur={null}
                                     big
@@ -234,6 +237,7 @@ export const Expanded = ({
                                     type="text"
                                     value={`${provision_start_ip} - ${provision_end_ip}`}
                                   />
+                                </Margin>
                               </FormGroup>
                             </FlexItem>
                           </Flex>

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

@@ -46,8 +46,8 @@ const VerticalDivider = styled.div`
   box-sizing: border-box;
 `;
 
-export const Filters = ({ resetFilters }) => (
-  <Margin top={4} bottom={3}>
+export const Filters = ({ onResetFilters }) => (
+  <Margin top={1} bottom={3}>
     <H4>Filters</H4>
     <Flex alignCenter justifyBetween>
       <FormGroup type="checkbox" name="compute-optimized" field={Field}>
@@ -105,7 +105,7 @@ export const Filters = ({ resetFilters }) => (
       </FormGroup>
     </Flex>
     <Margin top={2} bottom={1}>
-      <Button secondary onClick={resetFilters}>
+      <Button type="button" onClick={onResetFilters} secondary>
         Reset Filters
       </Button>
     </Margin>
@@ -160,7 +160,6 @@ export const Package = ({
 );
 
 export const Packages = ({
-  handleSubmit,
   pristine,
   sortBy = 'name',
   sortOrder = 'desc',
@@ -169,7 +168,7 @@ export const Packages = ({
   children,
   packages
 }) => (
-  <form onSubmit={handleSubmit}>
+  <form>
     <Table>
       <TableThead>
         <TableTr>
@@ -239,11 +238,6 @@ export const Packages = ({
         Sorry, but we weren’t able to find any packages with that filter
       </Empty>
     ) : null}
-    <Margin top={4}>
-      <Button type="submit" disabled={pristine}>
-        Next
-      </Button>
-    </Margin>
   </form>
 );
 
@@ -258,7 +252,6 @@ export const Overview = ({
   onCancel
 }) => (
   <Fragment>
-    <Margin bottom={2} top={3}>
     <H3 bold>{name}</H3>
     <Flex alignCenter>
       <span>{price} $</span>
@@ -275,9 +268,5 @@ export const Overview = ({
       <VerticalDivider />
       {ssd && <span>SSD</span>}
     </Flex>
-    </Margin>
-    <Button type="button" secondary onClick={onCancel}>
-      Edit
-    </Button>
   </Fragment>
 );

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

@@ -7,20 +7,13 @@ import is from 'styled-is';
 
 import { Divider, Small } from 'joyent-ui-toolkit';
 
-const IsEmpty = styled(Margin)`
-  + div:empty,
-  + form:empty {
-    margin-bottom: ${remcalc(40)};
-  }
-`;
-
 const Container = styled.div`
   ${is('onClick')`
     cursor: pointer;
   `};
 `;
 
-export default ({ icon, children, ...rest }) => (
+export default ({ icon, children, collapsed = true, ...rest }) => (
   <Container {...rest}>
     <Flex>
       <Margin right={1}>
@@ -30,8 +23,8 @@ export default ({ icon, children, ...rest }) => (
       </Margin>
       <Small noMargin>{children}</Small>
     </Flex>
-    <IsEmpty top={1} bottom={3}>
+    <Margin top={1} bottom={collapsed ? 7 : 3}>
       <Divider height={remcalc(1)} />
-    </IsEmpty>
+    </Margin>
   </Container>
 );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Row, Col } from 'react-styled-flexboxgrid';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import { Margin } from 'styled-components-spacing';
 import { P } from 'joyent-ui-toolkit';
 

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

@@ -2,16 +2,13 @@ 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 remcalc from 'remcalc';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 
 import {
   H3,
   FormGroup,
   FormLabel,
   Toggle,
-  Divider,
-  Row,
-  Col,
   TagList,
   P,
   Strong,
@@ -19,7 +16,6 @@ import {
 } from 'joyent-ui-toolkit';
 
 import Tag from '@components/tags';
-import Empty from '@components/empty';
 
 const capitalizeFirstLetter = string =>
   string.charAt(0).toUpperCase() + string.slice(1);
@@ -158,16 +154,36 @@ export const TagRules = ({ rules = [] }) => (
   </Fragment>
 );
 
-export const ToggleFirewallForm = ({ handleSubmit, submitting }) => (
-  <form onChange={(...args) => setTimeout(() => handleSubmit(...args), 16)}>
+export const ToggleFirewallForm = ({
+  handleSubmit = () => null,
+  submitOnChange = false,
+  submitting = false,
+  left = false
+}) => {
+  const onChange = submitOnChange
+    ? (...args) => setTimeout(() => handleSubmit(...args), 16)
+    : undefined;
+
+  return (
+    <form onChange={onChange}>
       <FormGroup name="enabled" type="checkbox" field={Field}>
         <Flex alignCenter>
-        <FormLabel>Enable Firewall</FormLabel>
+          {left ? (
+            <Fragment>
               <Toggle disabled={submitting} />
+              <FormLabel marginless>Enable Firewall</FormLabel>
+            </Fragment>
+          ) : (
+            <Fragment>
+              <FormLabel marginless>Enable Firewall</FormLabel>
+              <Toggle disabled={submitting} />
+            </Fragment>
+          )}
         </Flex>
       </FormGroup>
     </form>
   );
+};
 
 export const ToggleInactiveForm = () => (
   <form>
@@ -178,52 +194,3 @@ export const ToggleInactiveForm = () => (
     </FormGroup>
   </form>
 );
-
-export default ({
-  defaultRules = [],
-  tagRules = [],
-  enabled = false,
-  handleSubmit
-}) => (
-  <form onSubmit={handleSubmit}>
-    <Margin bottom={4}>
-      <FormGroup name="enabled" field={Field}>
-        <Toggle>Enable firewall rules</Toggle>
-      </FormGroup>
-      {enabled ? (
-        <FormGroup name="show-inactive" field={Field}>
-          <Toggle>Show inactive rules</Toggle>
-        </FormGroup>
-      ) : null}
-    </Margin>
-    {enabled ? <DefaultRules rules={defaultRules} /> : null}
-    {enabled && !tagRules.length && !defaultRules.length ? (
-      <Margin top={5}>
-        <Empty>Sorry, but we weren’t able to find any firewall rules.</Empty>
-      </Margin>
-    ) : null}
-    {enabled && tagRules.length && defaultRules.length ? (
-      <Divider height={remcalc(18)} transparent />
-    ) : null}
-    {enabled && tagRules.length ? <TagRules rules={tagRules} /> : null}
-    {enabled && (tagRules.length || defaultRules.length) ? (
-      <Divider height={remcalc(12)} transparent />
-    ) : null}
-    {enabled ? (
-      <Margin bottom={4}>
-        <P>
-          *Other firewall rules may apply as defined by wildcard(s), IP(s),
-          subnet(s), tag(s) or VM(s). Please see{' '}
-          <a
-            href="https://apidocs.joyent.com/cloudapi/#firewall-rule-syntax"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            firewall rule list
-          </a>{' '}
-          for more details.
-        </P>
-      </Margin>
-    ) : null}
-  </form>
-);

packages/my-joy-beta/src/components/instances/footer.js

@@ -1,9 +1,8 @@
 import React from 'react';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import { withTheme } from 'styled-components';
 
 import {
-  Row,
-  Col,
   Button,
   Footer,
   QueryBreakpoints,

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

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Row, Col } from 'react-styled-flexboxgrid';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import styled, { withTheme } from 'styled-components';
 import { Margin, Padding } from 'styled-components-spacing';
 import remcalc from 'remcalc';

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

@@ -1,11 +1,10 @@
 import React from 'react';
 import { Field } from 'redux-form';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import { Margin } from 'styled-components-spacing';
 import remcalc from 'remcalc';
 
 import {
-  Row,
-  Col,
   FormGroup,
   Input,
   FormLabel,
@@ -25,12 +24,14 @@ export const Toolbar = ({
     <Col xs={7} sm={5}>
       <FormGroup name="filter" fluid field={Field}>
         <FormLabel>{searchLabel}</FormLabel>
+        <Margin top={0.5}>
           <Input placeholder={searchPlaceholder} disabled={!searchable} fluid />
+        </Margin>
       </FormGroup>
     </Col>
     <Col xs={5} sm={7}>
       <FormGroup right>
-        <Margin top="14px">
+        <Divider height={remcalc(21)} transparent />
         <Button
           type={onActionClick ? 'button' : 'submit'}
           disabled={!actionable}
@@ -40,7 +41,6 @@ export const Toolbar = ({
         >
           {actionLabel}
         </Button>
-        </Margin>
       </FormGroup>
     </Col>
   </Row>

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

@@ -1,8 +1,8 @@
 import React, { PureComponent, Fragment } from 'react';
-import { Padding } from 'styled-components-spacing';
+import { Margin, Padding } from 'styled-components-spacing';
 import PropTypes from 'prop-types';
 import { withTheme } from 'styled-components';
-import { Row, Col } from 'react-styled-flexboxgrid';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import { Field } from 'redux-form';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
@@ -73,7 +73,9 @@ const TextareaKeyValue = ({ type, submitting, onlyName, onlyValue }) => (
         <Col xs={12}>
           <FormGroup name="name" field={Field} fluid>
             <FormLabel>{titleCase(type)} key</FormLabel>
+            <Margin top={0.5}>
               <Input onBlur={null} type="text" disabled={submitting} />
+            </Margin>
             <FormMeta />
           </FormGroup>
           <Divider height={remcalc(12)} transparent />
@@ -85,12 +87,14 @@ const TextareaKeyValue = ({ type, submitting, onlyName, onlyValue }) => (
         <Col xs={12}>
           <FormGroup name="value" field={Field} fluid>
             <FormLabel>{titleCase(type)} value</FormLabel>
+            <Margin top={0.5}>
               <Field
                 name="name"
                 fluid
                 component={ValueTextareaField}
                 props={{ submitting }}
               />
+            </Margin>
             <FormMeta />
           </FormGroup>
           <Divider height={remcalc(12)} transparent />
@@ -106,7 +110,9 @@ const InputKeyValue = ({ type, submitting, onlyName, onlyValue }) => (
       <FlexItem basis="auto">
         <FormGroup name="name" field={Field} fluid>
           <FormLabel>{titleCase(type)} key</FormLabel>
+          <Margin top={0.5}>
             <Input onBlur={null} type="text" disabled={submitting} />
+          </Margin>
           <FormMeta />
         </FormGroup>
       </FlexItem>
@@ -117,7 +123,9 @@ const InputKeyValue = ({ type, submitting, onlyName, onlyValue }) => (
         <FlexItem basis="auto">
           <FormGroup name="value" field={Field} fluid>
             <FormLabel>{titleCase(type)} value</FormLabel>
+            <Margin top={0.5}>
               <Input onBlur={null} disabled={submitting} />
+            </Margin>
             <FormMeta />
           </FormGroup>
         </FlexItem>
@@ -196,10 +204,12 @@ export const KeyValue = ({
             {error && !submitting ? (
               <Row>
                 <Col xs={12}>
+                  <Margin bottom={4}>
                     <Message error>
                       <MessageTitle>Ooops!</MessageTitle>
                       <MessageDescription>{error}</MessageDescription>
                     </Message>
+                  </Margin>
                 </Col>
               </Row>
             ) : null}
@@ -290,6 +300,5 @@ KeyValue.propTypes = {
 export default withTheme(({ handleSubmit, ...rest }) => (
   <form onSubmit={handleSubmit}>
     <KeyValue {...rest} />
-    <Divider height={remcalc(13)} transparent />
   </form>
 ));

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

@@ -1,10 +1,10 @@
 import React, { Fragment } from 'react';
 import { Field } from 'redux-form';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import { Margin, Padding } from 'styled-components-spacing';
 import styled from 'styled-components';
 import Flex, { FlexItem } from 'styled-flex-component';
 import remcalc from 'remcalc';
-import { Row, Col } from 'react-styled-flexboxgrid';
 
 import {
   H4,
@@ -231,6 +231,7 @@ export const Expanded = ({
                               <FlexItem>
                                 <FormGroup name="id">
                                   <FormLabel>ID</FormLabel>
+                                  <Margin top={0.5}>
                                     <Input
                                       onBlur={null}
                                       big
@@ -238,11 +239,13 @@ export const Expanded = ({
                                       type="text"
                                       value={id}
                                     />
+                                  </Margin>
                                 </FormGroup>
                               </FlexItem>
                               <FlexItem>
                                 <FormGroup name="subnet">
                                   <FormLabel>Subnet</FormLabel>
+                                  <Margin top={0.5}>
                                     <Input
                                       onBlur={null}
                                       big
@@ -250,11 +253,13 @@ export const Expanded = ({
                                       type="text"
                                       value={subnet}
                                     />
+                                  </Margin>
                                 </FormGroup>
                               </FlexItem>
                               <FlexItem>
                                 <FormGroup name="ip-range">
                                   <FormLabel>IP range</FormLabel>
+                                  <Margin top={0.5}>
                                     <Input
                                       onBlur={null}
                                       big
@@ -262,6 +267,7 @@ export const Expanded = ({
                                       type="text"
                                       value={`${provision_start_ip} - ${provision_end_ip}`}
                                     />
+                                  </Margin>
                                 </FormGroup>
                               </FlexItem>
                             </Flex>