fix(my-joy-beta): create instance - general ui fixes

fixes #1016

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

@@ -481,6 +481,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   line-height: 1.625rem;
   font-size: 1.3125rem;
   margin: 0;
+  font-weight: 600;
 }
 
 .c1 + p,

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

@@ -589,9 +589,10 @@ Array [
 .c1 {
   color: rgba(73,73,73,1);
   font-weight: normal;
-  line-height: 1.875rem;
+  line-height: 1.625rem;
-  font-size: 1.5rem;
+  font-size: 1.3125rem;
   margin: 0;
+  font-weight: 600;
 }
 
 .c1 + p,
@@ -625,11 +626,11 @@ Array [
 <div
     className="c0"
 >
-    <h2
+    <h3
         className="c1"
     >
         test
-    </h2>
+    </h3>
     <div
         className="c2"
     >
@@ -823,9 +824,10 @@ Array [
 .c1 {
   color: rgba(73,73,73,1);
   font-weight: normal;
-  line-height: 1.875rem;
+  line-height: 1.625rem;
-  font-size: 1.5rem;
+  font-size: 1.3125rem;
   margin: 0;
+  font-weight: 600;
 }
 
 .c1 + p,
@@ -859,11 +861,11 @@ Array [
 <div
     className="c0"
 >
-    <h2
+    <h3
         className="c1"
     >
         test
-    </h2>
+    </h3>
     <div
         className="c2"
     >
@@ -1338,7 +1340,11 @@ exports[`renders <Package /> without throwing 1`] = `
 `;
 
 exports[`renders <Packages expanded /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: 2rem;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1351,30 +1357,30 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
+.c10::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
+.c10:-moz-focusring,
-.c9[type='button']:-moz-focusring,
+.c10[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1414,28 +1420,28 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
+.c8:active,
-.c7:active:hover,
+.c8:active:hover,
-.c7:active:focus {
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -1650,19 +1656,27 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
       selected={undefined}
     />
   </table>
-  <button
+  <div
-    className="c7 c8 c9"
+    className="c7"
-    disabled={undefined}
-    href=""
-    type="submit"
   >
-    Next
+    <button
-  </button>
+      className="c8 c9 c10"
+      disabled={undefined}
+      href=""
+      type="submit"
+    >
+      Next
+    </button>
+  </div>
 </form>
 `;
 
 exports[`renders <Packages isVmSelected /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: 2rem;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1675,30 +1689,30 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
+.c10::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
+.c10:-moz-focusring,
-.c9[type='button']:-moz-focusring,
+.c10[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1738,28 +1752,28 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
+.c8:active,
-.c7:active:hover,
+.c8:active:hover,
-.c7:active:focus {
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -1974,19 +1988,27 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
       selected={undefined}
     />
   </table>
-  <button
+  <div
-    className="c7 c8 c9"
+    className="c7"
-    disabled={undefined}
-    href=""
-    type="submit"
   >
-    Next
+    <button
-  </button>
+      className="c8 c9 c10"
+      disabled={undefined}
+      href=""
+      type="submit"
+    >
+      Next
+    </button>
+  </div>
 </form>
 `;
 
 exports[`renders <Packages loading /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: 2rem;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1999,30 +2021,30 @@ exports[`renders <Packages loading /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
+.c10::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
+.c10:-moz-focusring,
-.c9[type='button']:-moz-focusring,
+.c10[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2062,28 +2084,28 @@ exports[`renders <Packages loading /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
+.c8:active,
-.c7:active:hover,
+.c8:active:hover,
-.c7:active:focus {
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -2298,19 +2320,27 @@ exports[`renders <Packages loading /> without throwing 1`] = `
       selected={undefined}
     />
   </table>
-  <button
+  <div
-    className="c7 c8 c9"
+    className="c7"
-    disabled={undefined}
-    href=""
-    type="submit"
   >
-    Next
+    <button
-  </button>
+      className="c8 c9 c10"
+      disabled={undefined}
+      href=""
+      type="submit"
+    >
+      Next
+    </button>
+  </div>
 </form>
 `;
 
 exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: 2rem;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2323,30 +2353,30 @@ exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
+.c10::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
+.c10:-moz-focusring,
-.c9[type='button']:-moz-focusring,
+.c10[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2386,28 +2416,28 @@ exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
+.c8:active,
-.c7:active:hover,
+.c8:active:hover,
-.c7:active:focus {
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -2622,19 +2652,27 @@ exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without
       selected={undefined}
     />
   </table>
-  <button
+  <div
-    className="c7 c8 c9"
+    className="c7"
-    disabled={undefined}
-    href=""
-    type="submit"
   >
-    Next
+    <button
-  </button>
+      className="c8 c9 c10"
+      disabled={undefined}
+      href=""
+      type="submit"
+    >
+      Next
+    </button>
+  </div>
 </form>
 `;
 
 exports[`renders <Packages pristine={false} /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: 2rem;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2647,30 +2685,30 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
+.c10::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
+.c10:-moz-focusring,
-.c9[type='button']:-moz-focusring,
+.c10[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2710,28 +2748,28 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
+.c8:active,
-.c7:active:hover,
+.c8:active:hover,
-.c7:active:focus {
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -2946,13 +2984,17 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
       selected={undefined}
     />
   </table>
-  <button
+  <div
-    className="c7 c8 c9"
+    className="c7"
-    disabled={false}
-    href=""
-    type="submit"
   >
-    Next
+    <button
-  </button>
+      className="c8 c9 c10"
+      disabled={false}
+      href=""
+      type="submit"
+    >
+      Next
+    </button>
+  </div>
 </form>
 `;

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

@@ -3,23 +3,10 @@
 exports[`renders <Title /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c0 {
@@ -85,11 +72,11 @@ Array [
             className="c2"
         />
     </div>
-    <p
+    <small
         className="c3"
     />
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -108,22 +95,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -133,23 +125,10 @@ Array [
 exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c0 {
@@ -235,11 +214,11 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     />
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -258,22 +237,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -283,23 +267,10 @@ Array [
 exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c0 {
@@ -385,11 +356,11 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     />
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -408,22 +379,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -433,23 +409,10 @@ Array [
 exports[`renders <Title label="Test"/> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c0 {
@@ -515,11 +478,11 @@ Array [
             className="c2"
         />
     </div>
-    <p
+    <small
         className="c3"
     />
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -538,22 +501,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,

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

@@ -173,7 +173,7 @@ export default ({
       imageID && (
         <Fragment>
           <Margin bottom={2} top={3}>
-            <H3>
+            <H3 bold>
               {titleCase(getImageByID(imageID, images).name)} -{' '}
               {getImageByID(imageID, images).version}
             </H3>

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

@@ -35,7 +35,7 @@ export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
         {name ? (
           <Fragment>
             <Margin bottom={2} top={3}>
-              <H3>{name}</H3>
+              <H3 bold>{name}</H3>
             </Margin>
             <Button type="button" secondary onClick={onCancel}>
               Edit

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

@@ -7,7 +7,7 @@ import Flex from 'styled-flex-component';
 import pretty from 'prettysize';
 
 import {
-  H2,
+  H3,
   H4,
   FormGroup,
   Button,
@@ -229,9 +229,11 @@ export const Packages = ({
       </TableThead>
       <TableTbody>{children}</TableTbody>
     </Table>
-    <Button type="submit" disabled={pristine}>
+    <Margin top={4}>
-      Next
+      <Button type="submit" disabled={pristine}>
-    </Button>
+        Next
+      </Button>
+    </Margin>
   </form>
 );
 
@@ -247,7 +249,7 @@ export const Overview = ({
 }) => (
   <Fragment>
     <Margin bottom={2} top={3}>
-      <H2>{name}</H2>
+      <H3 bold>{name}</H3>
       <Flex alignCenter>
         <span>{price} $</span>
         <VerticalDivider />

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

@@ -2,8 +2,16 @@ import React, { Fragment } from 'react';
 import Flex from 'styled-flex-component';
 import { Margin } from 'styled-components-spacing';
 import remcalc from 'remcalc';
+import styled from 'styled-components';
 
-import { Divider, P } from 'joyent-ui-toolkit';
+import { Divider, Small } from 'joyent-ui-toolkit';
+
+const IsEmpty = styled(Margin)`
+  + div:empty,
+  + form:empty {
+    margin-bottom: ${remcalc(40)};
+  }
+`;
 
 export default ({ icon, children }) => (
   <Fragment>
@@ -13,10 +21,10 @@ export default ({ icon, children }) => (
           {icon}
         </Flex>
       </Margin>
-      <P>{children}</P>
+      <Small noMargin>{children}</Small>
     </Flex>
-    <Margin top={1} bottom={3}>
+    <IsEmpty top={1} bottom={3}>
       <Divider height={remcalc(1)} />
-    </Margin>
+    </IsEmpty>
   </Fragment>
 );

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap

@@ -3,23 +3,10 @@
 exports[`renders <Metadata /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -146,13 +133,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Metadata
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -171,22 +158,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -197,23 +189,10 @@ Array [
 exports[`renders <Metadata addOpen expanded /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -340,13 +319,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Metadata
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -365,22 +344,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -1495,7 +1479,7 @@ Array [
         height="0.8125rem"
     />
 </form>,
-  .c2 {
+  .c3 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1508,30 +1492,30 @@ Array [
   min-width: 7.5rem;
 }
 
-.c2::-moz-focus-inner,
+.c3::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
+.c3[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
+.c3[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
+.c3[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c2:-moz-focusring,
+.c3:-moz-focusring,
-.c2[type='button']:-moz-focusring,
+.c3[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
+.c3[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
+.c3[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c2 + button {
+.c3 + button {
   margin-left: 0.375rem;
 }
 
-.c1 {
+.c2 {
   display: inline-block;
 }
 
-.c0 {
+.c1 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1575,50 +1559,50 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c0:focus {
+.c1:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c0[disabled] {
+.c1[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c0:focus {
+.c1:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c3 {
+.c4 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1658,49 +1642,57 @@ Array [
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c3:hover {
+.c4:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c3:active,
+.c4:active,
-.c3:active:hover,
+.c4:active:hover,
-.c3:active:focus {
+.c4:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c3[disabled] {
+.c4[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
+.c0 {
+  margin-bottom: 2rem;
+}
+
 <div>
-    <button
+    <div
-        className="c0 c1 c2"
+        className="c0"
-        href=""
-        onClick={[Function]}
-        type="button"
     >
-        Add Metadata
+        <button
-    </button>
+            className="c1 c2 c3"
-    <button
+            href=""
-        className="c3 c1 c2"
+            onClick={[Function]}
-        href=""
+            type="button"
-        onClick={undefined}
+        >
-        type="button"
+            Add Metadata
-    >
+        </button>
-        Next
+        <button
-    </button>
+            className="c4 c2 c3"
+            href=""
+            onClick={undefined}
+            type="button"
+        >
+            Next
+        </button>
+    </div>
 </div>,
 ]
 `;
@@ -1708,23 +1700,10 @@ Array [
 exports[`renders <Metadata expanded /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -1851,13 +1830,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Metadata
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1876,22 +1855,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -1991,7 +1975,7 @@ Array [
         </div>
     </div>
 </div>,
-  .c2 {
+  .c3 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2004,30 +1988,30 @@ Array [
   min-width: 7.5rem;
 }
 
-.c2::-moz-focus-inner,
+.c3::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
+.c3[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
+.c3[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
+.c3[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c2:-moz-focusring,
+.c3:-moz-focusring,
-.c2[type='button']:-moz-focusring,
+.c3[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
+.c3[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
+.c3[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c2 + button {
+.c3 + button {
   margin-left: 0.375rem;
 }
 
-.c1 {
+.c2 {
   display: inline-block;
 }
 
-.c0 {
+.c1 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2071,50 +2055,50 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c0:focus {
+.c1:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c0[disabled] {
+.c1[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c0:focus {
+.c1:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c3 {
+.c4 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2154,49 +2138,57 @@ Array [
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c3:hover {
+.c4:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c3:active,
+.c4:active,
-.c3:active:hover,
+.c4:active:hover,
-.c3:active:focus {
+.c4:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c3[disabled] {
+.c4[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
+.c0 {
+  margin-bottom: 2rem;
+}
+
 <div>
-    <button
+    <div
-        className="c0 c1 c2"
+        className="c0"
-        href=""
-        onClick={[Function]}
-        type="button"
     >
-        Add Metadata
+        <button
-    </button>
+            className="c1 c2 c3"
-    <button
+            href=""
-        className="c3 c1 c2"
+            onClick={[Function]}
-        href=""
+            type="button"
-        onClick={undefined}
+        >
-        type="button"
+            Add Metadata
-    >
+        </button>
-        Next
+        <button
-    </button>
+            className="c4 c2 c3"
+            href=""
+            onClick={undefined}
+            type="button"
+        >
+            Next
+        </button>
+    </div>
 </div>,
 ]
 `;
@@ -2204,23 +2196,10 @@ Array [
 exports[`renders <Metadata metadata=[] /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -2347,13 +2326,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Metadata
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2372,22 +2351,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -4464,23 +4448,10 @@ Array [
 exports[`renders <Metadata metadata=[] expanded /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -4607,13 +4578,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Metadata
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4632,22 +4603,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -6813,7 +6789,7 @@ Array [
         height="0.8125rem"
     />
 </form>,
-  .c2 {
+  .c3 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -6826,30 +6802,30 @@ Array [
   min-width: 7.5rem;
 }
 
-.c2::-moz-focus-inner,
+.c3::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
+.c3[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
+.c3[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
+.c3[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c2:-moz-focusring,
+.c3:-moz-focusring,
-.c2[type='button']:-moz-focusring,
+.c3[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
+.c3[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
+.c3[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c2 + button {
+.c3 + button {
   margin-left: 0.375rem;
 }
 
-.c1 {
+.c2 {
   display: inline-block;
 }
 
-.c0 {
+.c1 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6893,50 +6869,50 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c0:focus {
+.c1:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c0[disabled] {
+.c1[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c0:focus {
+.c1:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c3 {
+.c4 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6976,49 +6952,57 @@ Array [
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c3:hover {
+.c4:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c3:active,
+.c4:active,
-.c3:active:hover,
+.c4:active:hover,
-.c3:active:focus {
+.c4:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c3[disabled] {
+.c4[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
+.c0 {
+  margin-bottom: 2rem;
+}
+
 <div>
-    <button
+    <div
-        className="c0 c1 c2"
+        className="c0"
-        href=""
-        onClick={[Function]}
-        type="button"
     >
-        Add Metadata
+        <button
-    </button>
+            className="c1 c2 c3"
-    <button
+            href=""
-        className="c3 c1 c2"
+            onClick={[Function]}
-        href=""
+            type="button"
-        onClick={undefined}
+        >
-        type="button"
+            Add Metadata
-    >
+        </button>
-        Next
+        <button
-    </button>
+            className="c4 c2 c3"
+            href=""
+            onClick={undefined}
+            type="button"
+        >
+            Next
+        </button>
+    </div>
 </div>,
 ]
 `;

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap

@@ -3,23 +3,10 @@
 exports[`renders <Networks /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -118,13 +105,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Networks
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -143,49 +130,48 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
   <form />,
+  .c0 {
+  margin-bottom: 2rem;
+}
+
+<div
+    className="c0"
+/>,
 ]
 `;
 
 exports[`renders <Networks loading /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -284,13 +270,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Networks
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -309,48 +295,47 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
+  .c0 {
+  margin-bottom: 2rem;
+}
+
+<div
+    className="c0"
+/>,
 ]
 `;
 
 exports[`renders <Networks loading expanded /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -449,13 +434,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Networks
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -474,22 +459,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -706,7 +696,7 @@ Array [
         Loading...
     </p>
 </div>,
-  .c2 {
+  .c3 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -719,30 +709,30 @@ Array [
   min-width: 7.5rem;
 }
 
-.c2::-moz-focus-inner,
+.c3::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
+.c3[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
+.c3[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
+.c3[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c2:-moz-focusring,
+.c3:-moz-focusring,
-.c2[type='button']:-moz-focusring,
+.c3[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
+.c3[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
+.c3[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c2 + button {
+.c3 + button {
   margin-left: 0.375rem;
 }
 
-.c1 {
+.c2 {
   display: inline-block;
 }
 
-.c0 {
+.c1 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -782,63 +772,58 @@ Array [
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c0:focus {
+.c1:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c0[disabled] {
+.c1[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-<button
+.c0 {
-    className="c0 c1 c2"
+  margin-bottom: 2rem;
-    href=""
+}
-    onClick={undefined}
+
-    type="button"
+<div
+    className="c0"
 >
-    Next
+    <button
-</button>,
+        className="c1 c2 c3"
+        href=""
+        onClick={undefined}
+        type="button"
+    >
+        Next
+    </button>
+</div>,
 ]
 `;
 
 exports[`renders <Networks networks=[] /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -937,13 +922,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Networks
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -962,22 +947,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -1315,29 +1305,23 @@ Array [
         </div>
     </div>
 </form>,
+  .c0 {
+  margin-bottom: 2rem;
+}
+
+<div
+    className="c0"
+/>,
 ]
 `;
 
 exports[`renders <Networks networks=[] expanded /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -1436,13 +1420,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Networks
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1461,22 +1445,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -2316,6 +2305,10 @@ Array [
   margin-right: 0.25rem;
 }
 
+.c2 {
+  margin-bottom: 2rem;
+}
+
 .c15 {
   margin-bottom: 1rem;
 }
@@ -2324,10 +2317,6 @@ Array [
   margin-right: 2rem;
 }
 
-.c2 {
-  margin-bottom: 2rem;
-}
-
 .c22 {
   margin-top: 1rem;
 }
@@ -2852,7 +2841,7 @@ Array [
         </div>
     </div>
 </form>,
-  .c2 {
+  .c3 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2865,30 +2854,30 @@ Array [
   min-width: 7.5rem;
 }
 
-.c2::-moz-focus-inner,
+.c3::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
+.c3[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
+.c3[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
+.c3[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c2:-moz-focusring,
+.c3:-moz-focusring,
-.c2[type='button']:-moz-focusring,
+.c3[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
+.c3[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
+.c3[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c2 + button {
+.c3 + button {
   margin-left: 0.375rem;
 }
 
-.c1 {
+.c2 {
   display: inline-block;
 }
 
-.c0 {
+.c1 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2928,63 +2917,58 @@ Array [
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c0:focus {
+.c1:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c0[disabled] {
+.c1[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-<button
+.c0 {
-    className="c0 c1 c2"
+  margin-bottom: 2rem;
-    href=""
+}
-    onClick={undefined}
+
-    type="button"
+<div
+    className="c0"
 >
-    Next
+    <button
-</button>,
+        className="c1 c2 c3"
+        href=""
+        onClick={undefined}
+        type="button"
+    >
+        Next
+    </button>
+</div>,
 ]
 `;
 
 exports[`renders <Networks networks=[] proceeded /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -3083,13 +3067,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Networks
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3108,22 +3092,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -3490,7 +3479,7 @@ Array [
         </div>
     </div>
 </form>,
-  .c2 {
+  .c3 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -3503,30 +3492,30 @@ Array [
   min-width: 7.5rem;
 }
 
-.c2::-moz-focus-inner,
+.c3::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
+.c3[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
+.c3[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
+.c3[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c2:-moz-focusring,
+.c3:-moz-focusring,
-.c2[type='button']:-moz-focusring,
+.c3[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
+.c3[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
+.c3[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c2 + button {
+.c3 + button {
   margin-left: 0.375rem;
 }
 
-.c1 {
+.c2 {
   display: inline-block;
 }
 
-.c0 {
+.c1 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3570,56 +3559,64 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c0:focus {
+.c1:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c0[disabled] {
+.c1[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c0:focus {
+.c1:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-<button
+.c0 {
-    className="c0 c1 c2"
+  margin-bottom: 2rem;
-    href=""
+}
-    onClick={undefined}
+
-    type="button"
+<div
+    className="c0"
 >
-    Edit
+    <button
-</button>,
+        className="c1 c2 c3"
+        href=""
+        onClick={undefined}
+        type="button"
+    >
+        Edit
+    </button>
+</div>,
 ]
 `;

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap

@@ -3,23 +3,10 @@
 exports[`renders <Tags /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -133,13 +120,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Tags
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -158,22 +145,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -184,23 +176,10 @@ Array [
 exports[`renders <Tags addOpen expanded /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -314,13 +293,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Tags
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -339,22 +318,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -1459,7 +1443,7 @@ Array [
         height="0.8125rem"
     />
 </form>,
-  .c2 {
+  .c3 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1472,30 +1456,30 @@ Array [
   min-width: 7.5rem;
 }
 
-.c2::-moz-focus-inner,
+.c3::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
+.c3[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
+.c3[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
+.c3[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c2:-moz-focusring,
+.c3:-moz-focusring,
-.c2[type='button']:-moz-focusring,
+.c3[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
+.c3[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
+.c3[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c2 + button {
+.c3 + button {
   margin-left: 0.375rem;
 }
 
-.c1 {
+.c2 {
   display: inline-block;
 }
 
-.c0 {
+.c1 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1539,50 +1523,50 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c0:focus {
+.c1:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c0[disabled] {
+.c1[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c0:focus {
+.c1:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c3 {
+.c4 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1622,49 +1606,57 @@ Array [
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c3:hover {
+.c4:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c3:active,
+.c4:active,
-.c3:active:hover,
+.c4:active:hover,
-.c3:active:focus {
+.c4:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c3[disabled] {
+.c4[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
+.c0 {
+  margin-bottom: 2rem;
+}
+
 <div>
-    <button
+    <div
-        className="c0 c1 c2"
+        className="c0"
-        href=""
-        onClick={[Function]}
-        type="button"
     >
-        Add Tag
+        <button
-    </button>
+            className="c1 c2 c3"
-    <button
+            href=""
-        className="c3 c1 c2"
+            onClick={[Function]}
-        href=""
+            type="button"
-        onClick={undefined}
+        >
-        type="button"
+            Add Tag
-    >
+        </button>
-        Next
+        <button
-    </button>
+            className="c4 c2 c3"
+            href=""
+            onClick={undefined}
+            type="button"
+        >
+            Next
+        </button>
+    </div>
 </div>,
 ]
 `;
@@ -1672,23 +1664,10 @@ Array [
 exports[`renders <Tags expanded /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -1802,13 +1781,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Tags
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1827,22 +1806,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -1958,7 +1942,7 @@ Array [
 <ul
     className="c0"
 />,
-  .c2 {
+  .c3 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1971,30 +1955,30 @@ Array [
   min-width: 7.5rem;
 }
 
-.c2::-moz-focus-inner,
+.c3::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
+.c3[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
+.c3[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
+.c3[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c2:-moz-focusring,
+.c3:-moz-focusring,
-.c2[type='button']:-moz-focusring,
+.c3[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
+.c3[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
+.c3[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c2 + button {
+.c3 + button {
   margin-left: 0.375rem;
 }
 
-.c1 {
+.c2 {
   display: inline-block;
 }
 
-.c0 {
+.c1 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2038,50 +2022,50 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c0:focus {
+.c1:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c0[disabled] {
+.c1[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c0:focus {
+.c1:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c3 {
+.c4 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2121,49 +2105,57 @@ Array [
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c3:hover {
+.c4:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c3:active,
+.c4:active,
-.c3:active:hover,
+.c4:active:hover,
-.c3:active:focus {
+.c4:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c3[disabled] {
+.c4[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
+.c0 {
+  margin-bottom: 2rem;
+}
+
 <div>
-    <button
+    <div
-        className="c0 c1 c2"
+        className="c0"
-        href=""
-        onClick={[Function]}
-        type="button"
     >
-        Add Tag
+        <button
-    </button>
+            className="c1 c2 c3"
-    <button
+            href=""
-        className="c3 c1 c2"
+            onClick={[Function]}
-        href=""
+            type="button"
-        onClick={undefined}
+        >
-        type="button"
+            Add Tag
-    >
+        </button>
-        Next
+        <button
-    </button>
+            className="c4 c2 c3"
+            href=""
+            onClick={undefined}
+            type="button"
+        >
+            Next
+        </button>
+    </div>
 </div>,
 ]
 `;
@@ -2171,23 +2163,10 @@ Array [
 exports[`renders <Tags metadata=[] /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -2301,13 +2280,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Tags
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2326,22 +2305,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -2352,23 +2336,10 @@ Array [
 exports[`renders <Tags metadata=[] expanded /> without throwing 1`] = `
 Array [
   .c3 {
+  font-size: 80%;
   color: rgba(73,73,73,1);
-  line-height: 1.5rem;
+  line-height: 1.125rem;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
 }
 
 .c1 {
@@ -2482,13 +2453,13 @@ Array [
             </svg>
         </div>
     </div>
-    <p
+    <small
         className="c3"
     >
         Tags
-    </p>
+    </small>
 </div>,
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2507,22 +2478,27 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c1 {
+.c2 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c0 {
+.c1 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
+.c0 + div:empty,
+.c0 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
 <div
-    className="c0"
+    className="c0 c1"
 >
     <div
-        className="c1 c2"
+        className="c2 c3"
         height="0.0625rem"
     />
 </div>,
@@ -2638,7 +2614,7 @@ Array [
 <ul
     className="c0"
 />,
-  .c2 {
+  .c3 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2651,30 +2627,30 @@ Array [
   min-width: 7.5rem;
 }
 
-.c2::-moz-focus-inner,
+.c3::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
+.c3[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
+.c3[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
+.c3[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c2:-moz-focusring,
+.c3:-moz-focusring,
-.c2[type='button']:-moz-focusring,
+.c3[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
+.c3[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
+.c3[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c2 + button {
+.c3 + button {
   margin-left: 0.375rem;
 }
 
-.c1 {
+.c2 {
   display: inline-block;
 }
 
-.c0 {
+.c1 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2718,50 +2694,50 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c0:focus {
+.c1:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c0[disabled] {
+.c1[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c0:focus {
+.c1:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c0:active,
+.c1:active,
-.c0:active:hover,
+.c1:active:hover,
-.c0:active:focus {
+.c1:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c3 {
+.c4 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2801,49 +2777,57 @@ Array [
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c3:focus {
+.c4:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c3:hover {
+.c4:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c3:active,
+.c4:active,
-.c3:active:hover,
+.c4:active:hover,
-.c3:active:focus {
+.c4:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c3[disabled] {
+.c4[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
+.c0 {
+  margin-bottom: 2rem;
+}
+
 <div>
-    <button
+    <div
-        className="c0 c1 c2"
+        className="c0"
-        href=""
-        onClick={[Function]}
-        type="button"
     >
-        Add Tag
+        <button
-    </button>
+            className="c1 c2 c3"
-    <button
+            href=""
-        className="c3 c1 c2"
+            onClick={[Function]}
-        href=""
+            type="button"
-        onClick={undefined}
+        >
-        type="button"
+            Add Tag
-    >
+        </button>
-        Next
+        <button
-    </button>
+            className="c4 c2 c3"
+            href=""
+            onClick={undefined}
+            type="button"
+        >
+            Next
+        </button>
+    </div>
 </div>,
 ]
 `;

packages/my-joy-beta/src/containers/create-instance/affinity.js

@@ -118,7 +118,7 @@ export const Affinity = ({
               onClick={() => handleChangeAddOpen(true)}
               secondary
             >
-              Create affinity rule
+              Create Affinity Rule
             </Button>
           ) : null}
           <Margin top={2} bottom={4}>
@@ -133,7 +133,7 @@ export const Affinity = ({
           <Button type="button" onClick={handleEdit} secondary>
             Edit
           </Button>
-          <Margin top={3}>
+          <Margin top={4}>
             <Divider height={remcalc(1)} />
           </Margin>
         </Fragment>

packages/my-joy-beta/src/containers/create-instance/cns.js

@@ -64,103 +64,109 @@ const CNSContainer = ({
         </a>
       </Description>
     ) : null}
-    {expanded && cnsEnabled ? (
+    <div>
-      <Card>
+      {expanded && cnsEnabled ? (
-        <Padding all={4} bottom={0}>
+        <Card>
-          <Header />
+          <Padding all={4} bottom={0}>
-          <Flex column>
+            <Header />
-            {hostnames
+            <Flex column>
-              .filter(({ service }) => !service)
+              {hostnames
-              .map(({ value, ...hostname }) => (
+                .filter(({ service }) => !service)
-                <Hostname key={value} value={value} {...hostname} />
+                .map(({ value, ...hostname }) => (
-              ))}
+                  <Hostname key={value} value={value} {...hostname} />
-          </Flex>
-          <Divider height={remcalc(1)} />
-          <Margin top={4}>
-            {serviceNames.length ? (
-              <Margin>
-                <FormLabel>Existing CNS service name(s)</FormLabel>
-                <Margin top={0.5}>
-                  <TagList>
-                    {serviceNames.map((value, index) => (
-                      <Tag
-                        active
-                        key={index}
-                        value={value}
-                        onRemoveClick={() => handleRemoveService(index)}
-                      />
-                    ))}
-                  </TagList>
-                </Margin>
-              </Margin>
-            ) : null}
-            <HostnamesHeader />
-            <ReduxForm
-              form={`${CNS_FORM}-new-service`}
-              destroyOnUnmount={false}
-              forceUnregisterOnUnmount={true}
-              onSubmit={handleAddService}
-            >
-              {props => <AddServiceForm {...props} />}
-            </ReduxForm>
-            <Margin top={4}>
-              <Flex column>
-                {hostnames
-                  .filter(({ service }) => service)
-                  .map(({ value, ...hostname }) => (
-                    <Hostname key={value} value={value} {...hostname} />
-                  ))}
-              </Flex>
-            </Margin>
-          </Margin>
-        </Padding>
-      </Card>
-    ) : null}
-    {expanded ? (
-      <Fragment>
-        <Margin bottom={4} top={4}>
-          <FormGroup name="cns-enabled">
-            <Flex alignCenter>
-              <FormLabel>Disabled CNS</FormLabel>
-              <Toggle checked={cnsEnabled} onChange={handleToggleCnsEnabled}>
-                Enabled CNS
-              </Toggle>
-            </Flex>
-          </FormGroup>
-        </Margin>
-        <Margin bottom={4}>
-          <P>
-            *All hostnames are indicative and will be confirmed after
-            deployment.
-          </P>
-        </Margin>
-        <Button type="button" onClick={handleNext}>
-          Next
-        </Button>
-      </Fragment>
-    ) : null}
-    {proceeded && !expanded ? (
-      <Fragment>
-        <Margin bottom={4}>
-          <H3>{cnsEnabled ? 'CNS Enabled' : 'CNS Not Enabled'}</H3>
-        </Margin>
-        {cnsEnabled ? (
-          <Fragment>
-            <FormLabel>Existing CNS service name(s)</FormLabel>
-            <Margin top={0.5}>
-              <TagList>
-                {serviceNames.map((value, index) => (
-                  <Tag key={index} value={value} />
                 ))}
-              </TagList>
+            </Flex>
+            <Divider height={remcalc(1)} />
+            <Margin top={4}>
+              {serviceNames.length ? (
+                <Margin>
+                  <FormLabel>Existing CNS service name(s)</FormLabel>
+                  <Margin top={0.5}>
+                    <TagList>
+                      {serviceNames.map((value, index) => (
+                        <Tag
+                          active
+                          key={index}
+                          value={value}
+                          onRemoveClick={() => handleRemoveService(index)}
+                        />
+                      ))}
+                    </TagList>
+                  </Margin>
+                </Margin>
+              ) : null}
+              <HostnamesHeader />
+              <ReduxForm
+                form={`${CNS_FORM}-new-service`}
+                destroyOnUnmount={false}
+                forceUnregisterOnUnmount={true}
+                onSubmit={handleAddService}
+              >
+                {props => <AddServiceForm {...props} />}
+              </ReduxForm>
+              <Margin top={4}>
+                <Flex column>
+                  {hostnames
+                    .filter(({ service }) => service)
+                    .map(({ value, ...hostname }) => (
+                      <Hostname key={value} value={value} {...hostname} />
+                    ))}
+                </Flex>
+              </Margin>
             </Margin>
-          </Fragment>
+          </Padding>
-        ) : null}
+        </Card>
-        <Button type="button" onClick={handleEdit} secondary>
+      ) : null}
-          Edit
+      {expanded ? (
-        </Button>
+        <Fragment>
-      </Fragment>
+          <Margin bottom={4} top={4}>
-    ) : null}
+            <FormGroup name="cns-enabled">
+              <Flex alignCenter>
+                <FormLabel>Disabled CNS</FormLabel>
+                <Toggle checked={cnsEnabled} onChange={handleToggleCnsEnabled}>
+                  Enabled CNS
+                </Toggle>
+              </Flex>
+            </FormGroup>
+          </Margin>
+          <Margin bottom={4}>
+            <P>
+              *All hostnames are indicative and will be confirmed after
+              deployment.
+            </P>
+          </Margin>
+          <Margin bottom={4}>
+            <Button type="button" onClick={handleNext}>
+              Next
+            </Button>
+          </Margin>
+        </Fragment>
+      ) : null}
+      {proceeded && !expanded ? (
+        <Fragment>
+          <Margin bottom={4}>
+            <H3>{cnsEnabled ? 'CNS Enabled' : 'CNS Not Enabled'}</H3>
+          </Margin>
+          {cnsEnabled ? (
+            <Fragment>
+              <FormLabel>Existing CNS service name(s)</FormLabel>
+              <Margin top={0.5}>
+                <TagList>
+                  {serviceNames.map((value, index) => (
+                    <Tag key={index} value={value} />
+                  ))}
+                </TagList>
+              </Margin>
+            </Fragment>
+          ) : null}
+          <Margin bottom={4}>
+            <Button type="button" onClick={handleEdit} secondary>
+              Edit
+            </Button>
+          </Margin>
+        </Fragment>
+      ) : null}
+    </div>
   </Fragment>
 );
 

packages/my-joy-beta/src/containers/create-instance/firewall.js

@@ -43,40 +43,46 @@ const Firewall = ({
         </a>
       </Description>
     ) : null}
-    {loading && expanded ? <StatusLoader /> : null}
+    <div>
-    {!loading ? (
+      {loading && expanded ? <StatusLoader /> : null}
-      <ReduxForm
+      {!loading ? (
-        form={FORM_NAME}
+        <ReduxForm
-        destroyOnUnmount={false}
+          form={FORM_NAME}
-        forceUnregisterOnUnmount={true}
+          destroyOnUnmount={false}
-      >
+          forceUnregisterOnUnmount={true}
-        {props =>
+        >
-          expanded ? (
+          {props =>
-            <FirewallForm
+            expanded ? (
-              {...props}
+              <FirewallForm
-              defaultRules={defaultRules}
+                {...props}
-              tagRules={tagRules}
+                defaultRules={defaultRules}
-              enabled={enabled}
+                tagRules={tagRules}
-            />
+                enabled={enabled}
-          ) : null}
+              />
-      </ReduxForm>
+            ) : null}
-    ) : null}
+        </ReduxForm>
-    {proceeded && !expanded ? (
-      <Margin bottom={4}>
-        <H3>{enabled ? 'Firewall Enabled' : 'Firewall Not Enabled'}</H3>
-      </Margin>
-    ) : null}
-    <Fragment>
-      {expanded ? (
-        <Button type="button" onClick={handleNext}>
-          Next
-        </Button>
-      ) : proceeded ? (
-        <Button type="button" onClick={handleEdit} secondary>
-          Edit
-        </Button>
       ) : null}
-    </Fragment>
+      {proceeded && !expanded ? (
+        <Margin bottom={4}>
+          <H3>{enabled ? 'Firewall Enabled' : 'Firewall Not Enabled'}</H3>
+        </Margin>
+      ) : null}
+      <Fragment>
+        {expanded ? (
+          <Margin bottom={4}>
+            <Button type="button" onClick={handleNext}>
+              Next
+            </Button>
+          </Margin>
+        ) : proceeded ? (
+          <Margin bottom={4}>
+            <Button type="button" onClick={handleEdit} secondary>
+              Edit
+            </Button>
+          </Margin>
+        ) : null}
+      </Fragment>
+    </div>
   </Fragment>
 );
 

packages/my-joy-beta/src/containers/create-instance/metadata.js

@@ -97,7 +97,7 @@ export const Metadata = ({
     ) : null}
     <div>
       {expanded ? (
-        <Fragment>
+        <Margin bottom={4}>
           <Button
             type="button"
             onClick={() => handleChangeAddOpen(true)}
@@ -108,11 +108,13 @@ export const Metadata = ({
           <Button type="button" onClick={handleNext}>
             Next
           </Button>
-        </Fragment>
+        </Margin>
       ) : proceeded ? (
-        <Button type="button" onClick={handleEdit} secondary>
+        <Margin bottom={4}>
-          Edit
+          <Button type="button" onClick={handleEdit} secondary>
-        </Button>
+            Edit
+          </Button>
+        </Margin>
       ) : null}
     </div>
   </Fragment>

packages/my-joy-beta/src/containers/create-instance/networks.js

@@ -4,6 +4,7 @@ import { compose, graphql } from 'react-apollo';
 import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
 import get from 'lodash.get';
+import { Margin } from 'styled-components-spacing';
 import forceArray from 'force-array';
 
 import { NetworkIcon, Button, H3, StatusLoader } from 'joyent-ui-toolkit';
@@ -76,7 +77,7 @@ export const Networks = ({
           )}
         </ReduxForm>
       ) : null}
-      <Fragment>
+      <Margin bottom={4}>
         {expanded ? (
           <Button type="button" onClick={handleNext}>
             Next
@@ -86,7 +87,7 @@ export const Networks = ({
             Edit
           </Button>
         ) : null}
-      </Fragment>
+      </Margin>
     </Fragment>
   );
 };

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

@@ -38,65 +38,71 @@ const PackageContainer = ({
 }) => (
   <Fragment>
     <Title icon={<PackageIcon />}>Package</Title>
-    {expanded ? (
+    <div>
-      <Description>
+      {expanded ? (
-        A package defines the specs of your instance. On Triton, packages can
+        <Description>
-        only increase in size.{' '}
+          A package defines the specs of your instance. On Triton, packages can
-        <a
+          only increase in size.{' '}
-          href="https://docs.joyent.com/private-cloud/packages"
+          <a
-          target="_blank"
+            href="https://docs.joyent.com/private-cloud/packages"
-          rel="noopener noreferrer"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read the docs
+          </a>
+        </Description>
+      ) : null}
+      {!loading && expanded ? (
+        <ReduxForm
+          form={`${FORM_NAME}-filters`}
+          destroyOnUnmount={false}
+          forceUnregisterOnUnmount={true}
         >
-          Read the docs
+          {props => <Filters {...props} />}
-        </a>
+        </ReduxForm>
-      </Description>
+      ) : null}
-    ) : null}
+      {loading && expanded ? (
-    {!loading && expanded ? (
+        <StatusLoader />
-      <ReduxForm
+      ) : (
-        form={`${FORM_NAME}-filters`}
+        <ReduxForm
-        destroyOnUnmount={false}
+          form={FORM_NAME}
-        forceUnregisterOnUnmount={true}
+          destroyOnUnmount={false}
-      >
+          forceUnregisterOnUnmount={true}
-        {props => <Filters {...props} />}
+          onSubmit={handleSubmit}
-      </ReduxForm>
+        >
-    ) : null}
+          {props => (
-    {loading && expanded ? (
+            <Fragment>
-      <StatusLoader />
+              {expanded ? (
-    ) : (
+                <Packages
-      <ReduxForm
+                  {...props}
-        form={FORM_NAME}
+                  hasVms={hasVms}
-        destroyOnUnmount={false}
+                  sortBy={sortBy}
-        forceUnregisterOnUnmount={true}
+                  sortOrder={sortOrder}
-        onSubmit={handleSubmit}
+                  onSortBy={handleSortBy}
-      >
+                >
-        {props => (
+                  {packages.map(({ id, ...pkg }) => (
-          <Fragment>
+                    <Package
-            {expanded ? (
+                      key={id}
-              <Packages
+                      id={id}
-                {...props}
+                      selected={selected.id === id}
-                hasVms={hasVms}
+                      hasVms={hasVms}
-                sortBy={sortBy}
+                      {...pkg}
-                sortOrder={sortOrder}
+                    />
-                onSortBy={handleSortBy}
+                  ))}
-              >
+                </Packages>
-                {packages.map(({ id, ...pkg }) => (
+              ) : null}
-                  <Package
+              {!expanded && selected.id ? (
-                    key={id}
+                <Overview
-                    id={id}
+                  {...selected}
-                    selected={selected.id === id}
+                  hasVms={hasVms}
-                    hasVms={hasVms}
+                  onCancel={handleCancel}
-                    {...pkg}
+                />
-                  />
+              ) : null}
-                ))}
+            </Fragment>
-              </Packages>
+          )}
-            ) : null}
+        </ReduxForm>
-            {!expanded && selected.id ? (
+      )}
-              <Overview {...selected} hasVms={hasVms} onCancel={handleCancel} />
+    </div>
-            ) : null}
-          </Fragment>
-        )}
-      </ReduxForm>
-    )}
   </Fragment>
 );
 

packages/my-joy-beta/src/containers/create-instance/tags.js

@@ -85,7 +85,7 @@ export const Tags = ({
     ) : null}
     <div>
       {expanded ? (
-        <Fragment>
+        <Margin bottom={4}>
           <Button
             type="button"
             onClick={() => handleChangeAddOpen(true)}
@@ -96,11 +96,13 @@ export const Tags = ({
           <Button type="button" onClick={handleNext}>
             Next
           </Button>
-        </Fragment>
+        </Margin>
       ) : proceeded ? (
-        <Button type="button" onClick={handleEdit} secondary>
+        <Margin bottom={4}>
-          Edit
+          <Button type="button" onClick={handleEdit} secondary>
-        </Button>
+            Edit
+          </Button>
+        </Margin>
       ) : null}
     </div>
   </Fragment>

packages/ui-toolkit/src/text/headings.js

@@ -16,6 +16,10 @@ export const H1 = NH1.extend`
     display: inline-block;
   `};
 
+  ${is('bold')`
+    font-weight: ${props => props.theme.font.weight.semibold};
+  `};
+
   ${is('white')`
     -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
@@ -48,6 +52,10 @@ export const H2 = styled.h2`
     display: inline-block;
   `};
 
+  ${is('bold')`
+    font-weight: ${props => props.theme.font.weight.semibold};
+  `};
+
   ${is('white')`
     -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
@@ -80,6 +88,10 @@ export const H3 = styled.h3`
     display: inline-block;
   `};
 
+  ${is('bold')`
+    font-weight: ${props => props.theme.font.weight.semibold};
+  `};
+
   ${is('white')`
     -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
@@ -145,6 +157,10 @@ export const H5 = styled.h4`
     display: inline-block;
   `};
 
+  ${is('bold')`
+    font-weight: ${props => props.theme.font.weight.semibold};
+  `};
+
   ${is('white')`
     -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
@@ -177,6 +193,10 @@ export const H6 = styled.h6`
     display: inline-block;
   `};
 
+  ${is('bold')`
+    font-weight: ${props => props.theme.font.weight.semibold};
+  `};
+
   ${is('white')`
     -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}