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>
+  <div
+    className="c7"
+  >
     <button
-    className="c7 c8 c9"
+      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>
+  <div
+    className="c7"
+  >
     <button
-    className="c7 c8 c9"
+      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>
+  <div
+    className="c7"
+  >
     <button
-    className="c7 c8 c9"
+      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>
+  <div
+    className="c7"
+  >
     <button
-    className="c7 c8 c9"
+      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>
+  <div
+    className="c7"
+  >
     <button
-    className="c7 c8 c9"
+      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>
+    <Margin top={4}>
       <Button type="submit" disabled={pristine}>
         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,35 +1642,42 @@ 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>
+    <div
+        className="c0"
+    >
         <button
-        className="c0 c1 c2"
+            className="c1 c2 c3"
             href=""
             onClick={[Function]}
             type="button"
@@ -1694,13 +1685,14 @@ Array [
             Add Metadata
         </button>
         <button
-        className="c3 c1 c2"
+            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,35 +2138,42 @@ 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>
+    <div
+        className="c0"
+    >
         <button
-        className="c0 c1 c2"
+            className="c1 c2 c3"
             href=""
             onClick={[Function]}
             type="button"
@@ -2190,13 +2181,14 @@ Array [
             Add Metadata
         </button>
         <button
-        className="c3 c1 c2"
+            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,35 +6952,42 @@ 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>
+    <div
+        className="c0"
+    >
         <button
-        className="c0 c1 c2"
+            className="c1 c2 c3"
             href=""
             onClick={[Function]}
             type="button"
@@ -7012,13 +6995,14 @@ Array [
             Add Metadata
         </button>
         <button
-        className="c3 c1 c2"
+            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;
+}
+
+<div
+    className="c0"
+>
+    <button
+        className="c1 c2 c3"
         href=""
         onClick={undefined}
         type="button"
->
+    >
         Next
-</button>,
+    </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;
+}
+
+<div
+    className="c0"
+>
+    <button
+        className="c1 c2 c3"
         href=""
         onClick={undefined}
         type="button"
->
+    >
         Next
-</button>,
+    </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;
+}
+
+<div
+    className="c0"
+>
+    <button
+        className="c1 c2 c3"
         href=""
         onClick={undefined}
         type="button"
->
+    >
         Edit
-</button>,
+    </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,35 +1606,42 @@ 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>
+    <div
+        className="c0"
+    >
         <button
-        className="c0 c1 c2"
+            className="c1 c2 c3"
             href=""
             onClick={[Function]}
             type="button"
@@ -1658,13 +1649,14 @@ Array [
             Add Tag
         </button>
         <button
-        className="c3 c1 c2"
+            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,35 +2105,42 @@ 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>
+    <div
+        className="c0"
+    >
         <button
-        className="c0 c1 c2"
+            className="c1 c2 c3"
             href=""
             onClick={[Function]}
             type="button"
@@ -2157,13 +2148,14 @@ Array [
             Add Tag
         </button>
         <button
-        className="c3 c1 c2"
+            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,35 +2777,42 @@ 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>
+    <div
+        className="c0"
+    >
         <button
-        className="c0 c1 c2"
+            className="c1 c2 c3"
             href=""
             onClick={[Function]}
             type="button"
@@ -2837,13 +2820,14 @@ Array [
             Add Tag
         </button>
         <button
-        className="c3 c1 c2"
+            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,6 +64,7 @@ const CNSContainer = ({
         </a>
       </Description>
     ) : null}
+    <div>
       {expanded && cnsEnabled ? (
         <Card>
           <Padding all={4} bottom={0}>
@@ -134,9 +135,11 @@ const CNSContainer = ({
               deployment.
             </P>
           </Margin>
+          <Margin bottom={4}>
             <Button type="button" onClick={handleNext}>
               Next
             </Button>
+          </Margin>
         </Fragment>
       ) : null}
       {proceeded && !expanded ? (
@@ -156,11 +159,14 @@ const CNSContainer = ({
               </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,6 +43,7 @@ const Firewall = ({
         </a>
       </Description>
     ) : null}
+    <div>
       {loading && expanded ? <StatusLoader /> : null}
       {!loading ? (
         <ReduxForm
@@ -68,15 +69,20 @@ const Firewall = ({
       ) : 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 ? (
+        <Margin bottom={4}>
           <Button type="button" onClick={handleEdit} secondary>
             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,6 +38,7 @@ const PackageContainer = ({
 }) => (
   <Fragment>
     <Title icon={<PackageIcon />}>Package</Title>
+    <div>
       {expanded ? (
         <Description>
           A package defines the specs of your instance. On Triton, packages can
@@ -91,12 +92,17 @@ const PackageContainer = ({
                 </Packages>
               ) : null}
               {!expanded && selected.id ? (
-              <Overview {...selected} hasVms={hasVms} onCancel={handleCancel} />
+                <Overview
+                  {...selected}
+                  hasVms={hasVms}
+                  onCancel={handleCancel}
+                />
               ) : null}
             </Fragment>
           )}
         </ReduxForm>
       )}
+    </div>
   </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 ? (
+        <Margin bottom={4}>
           <Button type="button" onClick={handleEdit} secondary>
             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}