fix(my-joy-beta): multiple small fixes

fixes #1136

packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap

@@ -1294,6 +1294,8 @@ Array [
   height: 0.375rem;
   border-radius: 50%;
   display: inline-block;
+  margin-right: 0rem;
+  margin-left: 0rem;
 }
 
 <span
@@ -1304,6 +1306,8 @@ Array [
   height: 0.375rem;
   border-radius: 50%;
   display: inline-block;
+  margin-right: 0rem;
+  margin-left: 0rem;
 }
 
 <span
@@ -1314,6 +1318,8 @@ Array [
   height: 0.375rem;
   border-radius: 50%;
   display: inline-block;
+  margin-right: 0rem;
+  margin-left: 0rem;
 }
 
 <span
@@ -1325,6 +1331,8 @@ Array [
   height: 0.375rem;
   border-radius: 50%;
   display: inline-block;
+  margin-right: 0rem;
+  margin-left: 0rem;
 }
 
 <span
@@ -1336,6 +1344,8 @@ Array [
   height: 0.375rem;
   border-radius: 50%;
   display: inline-block;
+  margin-right: 0rem;
+  margin-left: 0rem;
 }
 
 <span
@@ -1347,6 +1357,8 @@ Array [
   height: 0.375rem;
   border-radius: 50%;
   display: inline-block;
+  margin-right: 0rem;
+  margin-left: 0rem;
 }
 
 <span
@@ -1358,6 +1370,8 @@ Array [
   height: 0.375rem;
   border-radius: 50%;
   display: inline-block;
+  margin-right: 0rem;
+  margin-left: 0rem;
 }
 
 <span

packages/icons/src/dot.js

@@ -7,4 +7,6 @@ export default styled.span`
   border-radius: 50%;
   background-color: ${props => props.theme[props.color]};
   display: inline-block;
+  margin-right: ${props => props.right || remcalc(0)};
+  margin-left: ${props => props.left || remcalc(0)};
 `;

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

@@ -27,6 +27,9 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-align-items: flex-end;
   -webkit-box-align: flex-end;
   -ms-flex-align: flex-end;
@@ -50,6 +53,25 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   display: block;
 }
 
+.c11 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
 .c9 {
   font-family: sans-serif;
   font-size: 100%;
@@ -160,30 +182,11 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c11 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
 .c10 {
   background-color: rgb(216,216,216);
   margin: 0;
@@ -272,6 +275,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
 >
   <div
     className="c0"
+    wrap={true}
   >
     <div
       className="c1"
@@ -297,6 +301,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
             id="k"
             onBlur={null}
             placeholder="Example: mySQLdb"
+            required={true}
           />
         </div>
       </div>
@@ -309,7 +314,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
       >
         <button
           className="c7 c8 c9"
-          disabled={undefined}
           href=""
           type="submit"
         >
@@ -352,6 +356,9 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-align-items: flex-end;
   -webkit-box-align: flex-end;
   -ms-flex-align: flex-end;
@@ -375,6 +382,25 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   display: block;
 }
 
+.c11 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
 .c9 {
   font-family: sans-serif;
   font-size: 100%;
@@ -448,11 +474,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
 }
 
 .c7:focus {
@@ -481,23 +502,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c7:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c7:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
 .c3 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
@@ -507,30 +511,11 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c11 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
 .c10 {
   background-color: rgb(216,216,216);
   margin: 0;
@@ -619,6 +604,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
 >
   <div
     className="c0"
+    wrap={true}
   >
     <div
       className="c1"
@@ -644,6 +630,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
             id="l"
             onBlur={null}
             placeholder="Example: mySQLdb"
+            required={true}
           />
         </div>
       </div>
@@ -656,7 +643,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
       >
         <button
           className="c7 c8 c9"
-          disabled={true}
           href=""
           type="submit"
         >

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

@@ -5494,7 +5494,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -5698,7 +5698,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -5712,7 +5712,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   color: rgb(216,216,216);
@@ -5943,7 +5943,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }

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

@@ -6,7 +6,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }
 
 .c18 {
-  margin-top: 0.75rem;
+  margin-top: 0.375rem;
 }
 
 .c3 {
@@ -108,6 +108,9 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
@@ -504,7 +507,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -794,6 +797,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 
 .c5 {
   height: 2.9375rem;
+  max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
@@ -869,6 +873,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
     >
       <div
         className="c10"
+        wrap={true}
       >
         <div
           className="c11"
@@ -1206,6 +1211,7 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
 
 .c5 {
   height: 2.9375rem;
+  max-width: 98%;
 }
 
 <div
@@ -1248,7 +1254,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }
 
 .c18 {
-  margin-top: 0.75rem;
+  margin-top: 0.375rem;
 }
 
 .c3 {
@@ -1350,6 +1356,9 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
@@ -1746,7 +1755,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -2036,6 +2045,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 
 .c5 {
   height: 2.9375rem;
+  max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
@@ -2111,6 +2121,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
     >
       <div
         className="c10"
+        wrap={true}
       >
         <div
           className="c11"
@@ -2256,7 +2267,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 .c20 {
-  margin-top: 0.75rem;
+  margin-top: 0.375rem;
 }
 
 .c3 {
@@ -2718,7 +2729,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -3094,6 +3105,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 
 .c5 {
   height: 2.9375rem;
+  max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
@@ -3323,7 +3335,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 .c18 {
-  margin-top: 0.75rem;
+  margin-top: 0.375rem;
 }
 
 .c3 {
@@ -3425,6 +3437,9 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
@@ -3821,7 +3836,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -4111,6 +4126,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 
 .c5 {
   height: 2.9375rem;
+  max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
@@ -4186,6 +4202,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
     >
       <div
         className="c10"
+        wrap={true}
       >
         <div
           className="c11"
@@ -4331,7 +4348,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 .c18 {
-  margin-top: 0.75rem;
+  margin-top: 0.375rem;
 }
 
 .c3 {
@@ -4433,6 +4450,9 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
@@ -4829,7 +4849,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -5109,6 +5129,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 
 .c5 {
   height: 2.9375rem;
+  max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
@@ -5204,6 +5225,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
     >
       <div
         className="c10"
+        wrap={true}
       >
         <div
           className="c11"
@@ -5349,7 +5371,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 .c18 {
-  margin-top: 0.75rem;
+  margin-top: 0.375rem;
 }
 
 .c3 {
@@ -5451,6 +5473,9 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
@@ -5922,7 +5947,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -6212,6 +6237,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 
 .c5 {
   height: 2.9375rem;
+  max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
@@ -6287,6 +6313,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
     >
       <div
         className="c10"
+        wrap={true}
       >
         <div
           className="c11"
@@ -6441,7 +6468,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 .c18 {
-  margin-top: 0.75rem;
+  margin-top: 0.375rem;
 }
 
 .c3 {
@@ -6543,6 +6570,9 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
@@ -7036,7 +7066,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -7341,6 +7371,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 
 .c5 {
   height: 2.9375rem;
+  max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
@@ -7416,6 +7447,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
     >
       <div
         className="c10"
+        wrap={true}
       >
         <div
           className="c11"
@@ -7588,7 +7620,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 .c18 {
-  margin-top: 0.75rem;
+  margin-top: 0.375rem;
 }
 
 .c3 {
@@ -7690,6 +7722,9 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
@@ -8086,7 +8121,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -8376,6 +8411,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 
 .c5 {
   height: 2.9375rem;
+  max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
@@ -8451,6 +8487,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
     >
       <div
         className="c10"
+        wrap={true}
       >
         <div
           className="c11"

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

@@ -4756,7 +4756,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -5107,7 +5107,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  width: 22.1875rem;
   font-family: "Roboto Mono",monospace;
   max-width: 22.1875rem;
   font-size: 0.9375rem;
@@ -5118,6 +5117,8 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  width: 22.1875rem;
+  max-width: 100%;
 }
 
 .c31::-webkit-input-placeholder {

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

@@ -6,7 +6,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 .c18 {
-  margin-top: 0.75rem;
+  margin-top: 0.375rem;
 }
 
 .c3 {
@@ -365,7 +365,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -776,6 +776,9 @@ exports[`renders <AddForm /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
@@ -794,6 +797,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 
 .c5 {
   height: 2.9375rem;
+  max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
@@ -872,6 +876,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
       >
         <div
           className="c10"
+          wrap={true}
         >
           <div
             className="c11"
@@ -1018,7 +1023,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 .c18 {
-  margin-top: 0.75rem;
+  margin-top: 0.375rem;
 }
 
 .c3 {
@@ -1377,7 +1382,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -1769,6 +1774,9 @@ exports[`renders <EditForm /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
@@ -1796,6 +1804,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 
 .c5 {
   height: 2.9375rem;
+  max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
@@ -1894,6 +1903,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
       >
         <div
           className="c10"
+          wrap={true}
         >
           <div
             className="c11"

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

@@ -3,7 +3,13 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
-import { Rules, TagRules, DefaultRules, ToggleFirewallForm, ToggleInactiveForm } from '../firewall';
+import {
+  Rules,
+  TagRules,
+  DefaultRules,
+  ToggleFirewallForm,
+  ToggleInactiveForm
+} from '../firewall';
 
 import Theme from '@mocks/theme';
 

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

@@ -4,6 +4,7 @@ import remcalc from 'remcalc';
 import { Margin, Padding } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import { Field } from 'redux-form';
+import { CopiableField } from '@components/instances/summary';
 
 import {
   P,
@@ -34,8 +35,8 @@ export const Header = () => (
     <H3>Hostnames</H3>
     <Padding bottom={2}>
       <P>
-        Default hostnames are automatically generated from both the instance name and any attached
-        networks.
+        Default hostnames are automatically generated from both the instance
+        name and any attached networks.
       </P>
     </Padding>
   </Fragment>
@@ -43,7 +44,7 @@ export const Header = () => (
 
 export const Footer = ({ enabled, submitting, onToggle }) => (
   <Fragment>
-    <Margin bottom={4} top={4}>
+    <Margin bottom={4}>
       <FormGroup name="cns-enabled">
         <Flex alignCenter>
           <FormLabel disabled={submitting}>Disabled CNS</FormLabel>
@@ -66,17 +67,22 @@ export const HostnamesHeader = () => (
     <H3>CNS service hostnames</H3>
     <Padding bottom={3}>
       <P>
-        CNS service hostnames are created by attaching a CNS service name to one or more instances.
-        You can serve multiple instances under the same hostname by assigning them to a matching CNS
-        service name.
+        CNS service hostnames are created by attaching a CNS service name to one
+        or more instances. You can serve multiple instances under the same
+        hostname by assigning them to a matching CNS service name.
       </P>
     </Padding>
   </Margin>
 );
 
-export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine }) => (
+export const AddServiceForm = ({
+  handleSubmit,
+  submitting,
+  disabled,
+  pristine
+}) => (
   <form onSubmit={handleSubmit}>
-    <Flex alignEnd>
+    <Flex alignEnd wrap>
       <FlexItem>
         <FormGroup name="name" field={Field}>
           <FormLabel>Attach to new CNS service name</FormLabel>
@@ -85,6 +91,7 @@ export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine })
               onBlur={null}
               type="text"
               placeholder="Example: mySQLdb"
+              required
               disabled={disabled || submitting}
             />
           </Margin>
@@ -92,7 +99,7 @@ export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine })
       </FlexItem>
       <FlexItem>
         <Margin left={2}>
-          <Button type="submit" disabled={disabled || pristine} loading={submitting} inline>
+          <Button type="submit" loading={submitting} inline>
             Add
           </Button>
           <Divider height={remcalc(4)} transparent />
@@ -102,7 +109,13 @@ export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine })
   </form>
 );
 
-export const Hostname = ({ values = [], network, service, ...hostname }) => (
+export const Hostname = ({
+  copy,
+  values = [],
+  network,
+  service,
+  ...hostname
+}) => (
   <Fragment>
     {values.length ? (
       <Margin bottom={4}>
@@ -110,11 +123,15 @@ export const Hostname = ({ values = [], network, service, ...hostname }) => (
           <SmallBordered bold noMargin>
             {network && service
               ? 'Network CNS service'
-              : network ? 'Network' : service ? 'CNS service' : 'Instance name'}{' '}
+              : network
+                ? 'Network'
+                : service ? 'CNS service' : 'Instance name'}{' '}
             hostname{values.length === 1 ? '' : 's'}
           </SmallBordered>
           <FlexItem>
-            <Margin right={1}>{hostname.public ? <PublicIcon /> : <PrivateIcon />}</Margin>
+            <Margin right={1}>
+              {hostname.public ? <PublicIcon /> : <PrivateIcon />}
+            </Margin>
           </FlexItem>
           <FlexItem>
             <Small noMargin>{hostname.public ? 'Public' : 'Private'}</Small>
@@ -123,8 +140,15 @@ export const Hostname = ({ values = [], network, service, ...hostname }) => (
         {values.map((value, i) => (
           <Margin
             top={0.5}
-            bottom={values.length !== 1 && values.length !== i + 1 ? '1' : undefined}>
-            <Input onBlur={null} disabled monospace fluid value={value} />
+            bottom={
+              values.length !== 1 && values.length !== i + 1 ? '1' : undefined
+            }
+          >
+            {copy ? (
+              <CopiableField disabled md={12} text={value} />
+            ) : (
+              <Input onBlur={null} disabled monospace fluid value={value} />
+            )}
           </Margin>
         ))}
       </Margin>
@@ -132,12 +156,12 @@ export const Hostname = ({ values = [], network, service, ...hostname }) => (
   </Fragment>
 );
 
-const DefaultHostnames = ({ hostnames }) => (
+const DefaultHostnames = ({ hostnames, copy }) => (
   <Fragment>
     <Header />
     <Flex column>
       {hostnames.map(({ value, ...hostname }) => (
-        <Hostname key={value} value={value} {...hostname} />
+        <Hostname copy={copy} key={value} value={value} {...hostname} />
       ))}
     </Flex>
   </Fragment>
@@ -147,7 +171,8 @@ const CnsHostnames = ({
   hostnames = [],
   services = [],
   onRemoveService = () => null,
-  children = null
+  children = null,
+  copy = false
 }) => (
   <Fragment>
     <HostnamesHeader />
@@ -161,7 +186,9 @@ const CnsHostnames = ({
                 active
                 key={value}
                 value={value}
-                onRemoveClick={onRemoveService && (() => onRemoveService(value))}
+                onRemoveClick={
+                  onRemoveService && (() => onRemoveService(value))
+                }
               />
             ))}
           </TagList>
@@ -172,23 +199,34 @@ const CnsHostnames = ({
     <Margin top={4}>
       <Flex column>
         {hostnames.map(({ value, ...hostname }) => (
-          <Hostname key={value} value={value} {...hostname} />
+          <Hostname copy={copy} key={value} value={value} {...hostname} />
         ))}
       </Flex>
     </Margin>
   </Fragment>
 );
 
-export default ({ hostnames = [], services = [], onRemoveService, children = null }) => (
+export default ({
+  copy,
+  hostnames = [],
+  services = [],
+  onRemoveService,
+  children = null
+}) => (
   <Card>
     <Padding all={4} bottom={0}>
-      <DefaultHostnames hostnames={hostnames.filter(({ service }) => !service)} />
+      <DefaultHostnames
+        copy={copy}
+        hostnames={hostnames.filter(({ service }) => !service)}
+      />
       <Divider height={remcalc(1)} />
       <Margin top={4}>
         <CnsHostnames
+          copy={copy}
           services={services}
           hostnames={hostnames.filter(({ service }) => service)}
-          onRemoveService={onRemoveService}>
+          onRemoveService={onRemoveService}
+        >
           {children}
         </CnsHostnames>
       </Margin>

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

@@ -40,7 +40,6 @@ Array [
 
 exports[`renders <Rule/> without throwing 1`] = `
 .c0 {
-  margin-top: 0.75rem;
   margin-bottom: 1.5rem;
 }
 
@@ -153,6 +152,32 @@ exports[`renders <Rule/> without throwing 1`] = `
   display: none;
 }
 
+.c13 {
+  width: 8.125rem;
+  position: relative;
+  padding: 0.75rem;
+  padding-right: 1.5625rem;
+  width: auto;
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 1rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  color: rgb(216,216,216);
+  margin: 0 0.375rem;
+}
+
+.c13::-ms-expand {
+  display: none;
+}
+
 .c2 {
   color: rgba(73,73,73,1);
   font-weight: normal;
@@ -177,7 +202,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c13 {
+.c15 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -211,41 +236,41 @@ exports[`renders <Rule/> without throwing 1`] = `
   outline: 0;
 }
 
-.c13::-webkit-input-placeholder {
+.c15::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13::-moz-placeholder {
+.c15::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:-ms-input-placeholder {
+.c15:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:invalid {
+.c15:invalid {
   box-shadow: none;
 }
 
-.c13:disabled {
+.c15:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c13:disabled::-webkit-input-placeholder {
+.c15:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:disabled::-moz-placeholder {
+.c15:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:disabled:-ms-input-placeholder {
+.c15:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:focus {
+.c15:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -540,6 +565,81 @@ exports[`renders <Rule/> without throwing 1`] = `
   outline: 0;
 }
 
+.c14 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  max-width: 22.1875rem;
+  width: 8.125rem;
+  max-width: 8.125rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c14::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:invalid {
+  box-shadow: none;
+}
+
+.c14:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c14:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
 <div
   className="c0"
 >
@@ -549,6 +649,12 @@ exports[`renders <Rule/> without throwing 1`] = `
   >
     <h4
       className="c2"
+      style={
+        Object {
+          "fontSize": "18px",
+          "lineHeight": "48px",
+        }
+      }
     >
       The instance
     </h4>
@@ -561,6 +667,12 @@ exports[`renders <Rule/> without throwing 1`] = `
       <div
         className="c4"
         disabled={false}
+        style={
+          Object {
+            "fontSize": "18px",
+            "lineHeight": "48px",
+          }
+        }
         width="4.125rem"
       >
         <select
@@ -568,6 +680,12 @@ exports[`renders <Rule/> without throwing 1`] = `
           disabled={false}
           id="k"
           onBlur={undefined}
+          style={
+            Object {
+              "fontSize": "18px",
+              "lineHeight": "48px",
+            }
+          }
           width="4.125rem"
         >
           <option
@@ -585,6 +703,12 @@ exports[`renders <Rule/> without throwing 1`] = `
     </div>
     <h4
       className="c2"
+      style={
+        Object {
+          "fontSize": "18px",
+          "lineHeight": "48px",
+        }
+      }
     >
       be on
     </h4>
@@ -597,6 +721,12 @@ exports[`renders <Rule/> without throwing 1`] = `
       <div
         className="c4"
         disabled={false}
+        style={
+          Object {
+            "fontSize": "18px",
+            "lineHeight": "48px",
+          }
+        }
         width="5.625rem"
       >
         <select
@@ -604,6 +734,12 @@ exports[`renders <Rule/> without throwing 1`] = `
           disabled={false}
           id="l"
           onBlur={undefined}
+          style={
+            Object {
+              "fontSize": "18px",
+              "lineHeight": "48px",
+            }
+          }
           width="5.625rem"
         >
           <option
@@ -621,6 +757,12 @@ exports[`renders <Rule/> without throwing 1`] = `
     </div>
     <h4
       className="c2"
+      style={
+        Object {
+          "fontSize": "18px",
+          "lineHeight": "48px",
+        }
+      }
     >
       node as the instance(s) identified by the
     </h4>
@@ -633,6 +775,12 @@ exports[`renders <Rule/> without throwing 1`] = `
       <div
         className="c9"
         disabled={false}
+        style={
+          Object {
+            "fontSize": "18px",
+            "lineHeight": "48px",
+          }
+        }
         width="7.5rem"
       >
         <select
@@ -640,6 +788,12 @@ exports[`renders <Rule/> without throwing 1`] = `
           disabled={false}
           id="m"
           onBlur={undefined}
+          style={
+            Object {
+              "fontSize": "18px",
+              "lineHeight": "48px",
+            }
+          }
           width="7.5rem"
         >
           <option
@@ -667,14 +821,26 @@ exports[`renders <Rule/> without throwing 1`] = `
         <div
           className="c4"
           disabled={false}
-          width="7.5rem"
+          style={
+            Object {
+              "fontSize": "18px",
+              "lineHeight": "48px",
+            }
+          }
+          width="8.125rem"
         >
           <select
-            className="c10 c11"
+            className="c13 c14"
             disabled={false}
             id="n"
             onBlur={undefined}
-            width="7.5rem"
+            style={
+              Object {
+                "fontSize": "18px",
+                "lineHeight": "48px",
+              }
+            }
+            width="8.125rem"
           >
             <option
               value="equalling"
@@ -712,12 +878,18 @@ exports[`renders <Rule/> without throwing 1`] = `
       style={undefined}
     >
       <input
-        className="c13"
+        className="c15"
         disabled={false}
         id="o"
         onBlur={null}
         placeholder="Example instance name: nginx"
         required={true}
+        style={
+          Object {
+            "fontSize": "18px",
+            "lineHeight": "48px",
+          }
+        }
       />
     </div>
   </div>
@@ -726,7 +898,6 @@ exports[`renders <Rule/> without throwing 1`] = `
 
 exports[`renders <Rule/> without throwing 2`] = `
 .c0 {
-  margin-top: 0.75rem;
   margin-bottom: 1.5rem;
 }
 
@@ -839,6 +1010,32 @@ exports[`renders <Rule/> without throwing 2`] = `
   display: none;
 }
 
+.c13 {
+  width: 8.125rem;
+  position: relative;
+  padding: 0.75rem;
+  padding-right: 1.5625rem;
+  width: auto;
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 1rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  color: rgb(216,216,216);
+  margin: 0 0.375rem;
+}
+
+.c13::-ms-expand {
+  display: none;
+}
+
 .c2 {
   color: rgba(73,73,73,1);
   font-weight: normal;
@@ -863,7 +1060,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   -webkit-padding-after: 0;
 }
 
-.c13 {
+.c15 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -897,41 +1094,41 @@ exports[`renders <Rule/> without throwing 2`] = `
   outline: 0;
 }
 
-.c13::-webkit-input-placeholder {
+.c15::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13::-moz-placeholder {
+.c15::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:-ms-input-placeholder {
+.c15:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:invalid {
+.c15:invalid {
   box-shadow: none;
 }
 
-.c13:disabled {
+.c15:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c13:disabled::-webkit-input-placeholder {
+.c15:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:disabled::-moz-placeholder {
+.c15:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:disabled:-ms-input-placeholder {
+.c15:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:focus {
+.c15:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -1226,6 +1423,81 @@ exports[`renders <Rule/> without throwing 2`] = `
   outline: 0;
 }
 
+.c14 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  max-width: 22.1875rem;
+  width: 8.125rem;
+  max-width: 8.125rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c14::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:invalid {
+  box-shadow: none;
+}
+
+.c14:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c14:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
 <div
   className="c0"
 >
@@ -1235,6 +1507,12 @@ exports[`renders <Rule/> without throwing 2`] = `
   >
     <h4
       className="c2"
+      style={
+        Object {
+          "fontSize": "18px",
+          "lineHeight": "48px",
+        }
+      }
     >
       The instance
     </h4>
@@ -1247,6 +1525,12 @@ exports[`renders <Rule/> without throwing 2`] = `
       <div
         className="c4"
         disabled={false}
+        style={
+          Object {
+            "fontSize": "18px",
+            "lineHeight": "48px",
+          }
+        }
         width="4.125rem"
       >
         <select
@@ -1254,6 +1538,12 @@ exports[`renders <Rule/> without throwing 2`] = `
           disabled={false}
           id="p"
           onBlur={undefined}
+          style={
+            Object {
+              "fontSize": "18px",
+              "lineHeight": "48px",
+            }
+          }
           width="4.125rem"
         >
           <option
@@ -1271,6 +1561,12 @@ exports[`renders <Rule/> without throwing 2`] = `
     </div>
     <h4
       className="c2"
+      style={
+        Object {
+          "fontSize": "18px",
+          "lineHeight": "48px",
+        }
+      }
     >
       be on
     </h4>
@@ -1283,6 +1579,12 @@ exports[`renders <Rule/> without throwing 2`] = `
       <div
         className="c4"
         disabled={false}
+        style={
+          Object {
+            "fontSize": "18px",
+            "lineHeight": "48px",
+          }
+        }
         width="5.625rem"
       >
         <select
@@ -1290,6 +1592,12 @@ exports[`renders <Rule/> without throwing 2`] = `
           disabled={false}
           id="q"
           onBlur={undefined}
+          style={
+            Object {
+              "fontSize": "18px",
+              "lineHeight": "48px",
+            }
+          }
           width="5.625rem"
         >
           <option
@@ -1307,6 +1615,12 @@ exports[`renders <Rule/> without throwing 2`] = `
     </div>
     <h4
       className="c2"
+      style={
+        Object {
+          "fontSize": "18px",
+          "lineHeight": "48px",
+        }
+      }
     >
       node as the instance(s) identified by the
     </h4>
@@ -1319,6 +1633,12 @@ exports[`renders <Rule/> without throwing 2`] = `
       <div
         className="c9"
         disabled={false}
+        style={
+          Object {
+            "fontSize": "18px",
+            "lineHeight": "48px",
+          }
+        }
         width="7.5rem"
       >
         <select
@@ -1326,6 +1646,12 @@ exports[`renders <Rule/> without throwing 2`] = `
           disabled={false}
           id="r"
           onBlur={undefined}
+          style={
+            Object {
+              "fontSize": "18px",
+              "lineHeight": "48px",
+            }
+          }
           width="7.5rem"
         >
           <option
@@ -1353,14 +1679,26 @@ exports[`renders <Rule/> without throwing 2`] = `
         <div
           className="c4"
           disabled={false}
-          width="7.5rem"
+          style={
+            Object {
+              "fontSize": "18px",
+              "lineHeight": "48px",
+            }
+          }
+          width="8.125rem"
         >
           <select
-            className="c10 c11"
+            className="c13 c14"
             disabled={false}
             id="s"
             onBlur={undefined}
-            width="7.5rem"
+            style={
+              Object {
+                "fontSize": "18px",
+                "lineHeight": "48px",
+              }
+            }
+            width="8.125rem"
           >
             <option
               value="equalling"
@@ -1398,12 +1736,18 @@ exports[`renders <Rule/> without throwing 2`] = `
       style={undefined}
     >
       <input
-        className="c13"
+        className="c15"
         disabled={false}
         id="t"
         onBlur={null}
         placeholder="Example instance name: nginx"
         required={true}
+        style={
+          Object {
+            "fontSize": "18px",
+            "lineHeight": "48px",
+          }
+        }
       />
     </div>
   </div>

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

@@ -27,6 +27,9 @@ exports[`renders <Name /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .c1 {
@@ -216,7 +219,7 @@ exports[`renders <Name /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -340,6 +343,7 @@ exports[`renders <Name /> without throwing 1`] = `
 <form>
   <div
     className="c0"
+    wrap={true}
   >
     <div
       className="c1"
@@ -446,6 +450,9 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .c1 {
@@ -635,7 +642,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -759,6 +766,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
 <form>
   <div
     className="c0"
+    wrap={true}
   >
     <div
       className="c1"
@@ -865,6 +873,9 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .c1 {
@@ -1054,7 +1065,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -1178,6 +1189,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
 <form>
   <div
     className="c0"
+    wrap={true}
   >
     <div
       className="c1"
@@ -1284,6 +1296,9 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .c1 {
@@ -1473,7 +1488,7 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -1597,6 +1612,7 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
 <form>
   <div
     className="c0"
+    wrap={true}
   >
     <div
       className="c1"

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

@@ -63,6 +63,9 @@ exports[`renders <Filters /> without throwing 1`] = `
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
@@ -267,7 +270,7 @@ exports[`renders <Filters /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -384,6 +387,7 @@ exports[`renders <Filters /> without throwing 1`] = `
   </h4>
   <div
     className="c2"
+    wrap={true}
   >
     <div
       className="baseline-jVaZNU kXgQxt c3"
@@ -722,6 +726,10 @@ exports[`renders <Filters /> without throwing 1`] = `
 exports[`renders <Overview /> without throwing 1`] = `
 Array [
   .c0 {
+  margin-bottom: 0.75rem;
+}
+
+.c1 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -730,24 +738,15 @@ Array [
   font-weight: 600;
 }
 
-.c0 + p,
-.c0 + small,
-.c0 + h1,
-.c0 + h2,
-.c0 + label,
-.c0 + h3,
-.c0 + h4,
-.c0 + h5,
-.c0 + div,
-.c0 + span {
-  margin-top: 1.5rem;
-}
-
-<h3
+<div
     className="c0"
 >
-    test
-</h3>,
+    <h3
+        className="c1"
+    >
+        test
+    </h3>
+</div>,
   .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -817,6 +816,10 @@ Array [
 exports[`renders <Overview hasVms/> without throwing 1`] = `
 Array [
   .c0 {
+  margin-bottom: 0.75rem;
+}
+
+.c1 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -825,24 +828,15 @@ Array [
   font-weight: 600;
 }
 
-.c0 + p,
-.c0 + small,
-.c0 + h1,
-.c0 + h2,
-.c0 + label,
-.c0 + h3,
-.c0 + h4,
-.c0 + h5,
-.c0 + div,
-.c0 + span {
-  margin-top: 1.5rem;
-}
-
-<h3
+<div
     className="c0"
 >
-    test
-</h3>,
+    <h3
+        className="c1"
+    >
+        test
+    </h3>
+</div>,
   .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1021,7 +1015,7 @@ exports[`renders <Package /> without throwing 1`] = `
   color: rgb(70,70,70);
   text-align: left;
   margin-right: 0.75rem;
-  font-weight: bold;
+  font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
@@ -1201,6 +1195,11 @@ exports[`renders <Package /> without throwing 1`] = `
               <label
                 className="c10"
                 htmlFor="l"
+                style={
+                  Object {
+                    "fontWeight": "normal",
+                  }
+                }
               >
                 test
               </label>
@@ -1351,10 +1350,6 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
   width: 100%;
 }
 
-.c6 tr:first-child td {
-  border-top: none;
-}
-
 .c3 {
   border-width: 0.0625rem;
   border-style: solid;
@@ -1680,10 +1675,6 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
   width: 100%;
 }
 
-.c6 tr:first-child td {
-  border-top: none;
-}
-
 .c3 {
   border-width: 0.0625rem;
   border-style: solid;
@@ -2009,10 +2000,6 @@ exports[`renders <Packages loading /> without throwing 1`] = `
   width: 100%;
 }
 
-.c6 tr:first-child td {
-  border-top: none;
-}
-
 .c3 {
   border-width: 0.0625rem;
   border-style: solid;
@@ -2256,10 +2243,6 @@ exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without
   width: 100%;
 }
 
-.c6 tr:first-child td {
-  border-top: none;
-}
-
 .c3 {
   border-width: 0.0625rem;
   border-style: solid;
@@ -2550,10 +2533,6 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
   width: 100%;
 }
 
-.c6 tr:first-child td {
-  border-top: none;
-}
-
 .c3 {
   border-width: 0.0625rem;
   border-style: solid;

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

@@ -7,9 +7,14 @@ import remcalc from 'remcalc';
 
 import { H5, Select, Input, FormGroup } from 'joyent-ui-toolkit';
 
+const style = {
+  lineHeight: '48px',
+  fontSize: '18px'
+};
+
 const Values = touched => (
   <Margin right={1}>
-    <Select touched={touched} embedded width={remcalc(120)}>
+    <Select style={style} touched={touched} embedded width={remcalc(130)}>
       <option value="equalling">equalling</option>
       <option value="not-equalling">not equalling</option>
       <option value="containing">containing</option>
@@ -20,13 +25,14 @@ const Values = touched => (
 );
 
 export const Rule = rule => (
-  <Margin top={2} bottom={4}>
+  <Margin bottom={4}>
     <Flex alignCenter wrap>
-      <H5 inline noMargin>
+      <H5 style={style} inline noMargin>
         The instance
       </H5>
       <FormGroup name="rule-instance-conditional" field={Field}>
         <Select
+          style={style}
           touched={rule['rule-instance-conditional']}
           width={remcalc(66)}
           embedded
@@ -35,11 +41,12 @@ export const Rule = rule => (
           <option value="should">should</option>
         </Select>
       </FormGroup>
-      <H5 inline noMargin>
+      <H5 style={style} inline noMargin>
         be on
       </H5>
       <FormGroup name="rule-instance-placement" field={Field}>
         <Select
+          style={style}
           touched={rule['rule-instance-placement']}
           width={remcalc(90)}
           embedded
@@ -48,11 +55,17 @@ export const Rule = rule => (
           <option value="different">a different</option>
         </Select>
       </FormGroup>
-      <H5 inline noMargin>
+      <H5 style={style} inline noMargin>
         node as the instance(s) identified by the
       </H5>
       <FormGroup name="rule-type" field={Field}>
-        <Select touched={rule['rule-type']} width={remcalc(120)} embedded left>
+        <Select
+          style={style}
+          touched={rule['rule-type']}
+          width={remcalc(120)}
+          embedded
+          left
+        >
           <option value="name">instance name</option>
           <option value="tag">tag</option>
         </Select>
@@ -61,6 +74,7 @@ export const Rule = rule => (
         <Fragment>
           <FormGroup name="rule-instance-tag-key" field={Field}>
             <Input
+              style={style}
               onBlur={null}
               small
               embedded
@@ -69,7 +83,7 @@ export const Rule = rule => (
               placeholder="key"
             />
           </FormGroup>
-          <H5 inline noMargin>
+          <H5 style={style} inline noMargin>
             and value{' '}
           </H5>
           <FormGroup name="rule-instance-tag-value-pattern" field={Field}>
@@ -77,6 +91,7 @@ export const Rule = rule => (
           </FormGroup>
           <FormGroup name="rule-instance-tag-value" field={Field}>
             <Input
+              style={style}
               onBlur={null}
               small
               embedded
@@ -95,6 +110,7 @@ export const Rule = rule => (
             <Input
               onBlur={null}
               embedded
+              style={style}
               type="text"
               required
               placeholder="Example instance name: nginx"

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

@@ -16,7 +16,7 @@ import {
 
 export default ({ placeholderName, randomizing, onRandomize }) => (
   <form>
-    <Flex>
+    <Flex wrap>
       <FlexItem flex>
         <FormGroup name="name" fluid field={Field}>
           <FormLabel>Instance Name</FormLabel>

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

@@ -38,56 +38,54 @@ const Box = styled.div`
 `;
 
 export const Collapsed = ({ name, fabric, ...network }) => (
-  <Row>
-    <Col xs={12} sm={8}>
-      <Margin inline right={3} top={3}>
-        <Box>
-          <Flex column>
-            <FlexItem>
-              <Margin left={3} right={3} top={2} bottom={2}>
-                <P>{name}</P>
-              </Margin>
-            </FlexItem>
-            <FlexItem>
-              <Divider height={remcalc(1)} />
-            </FlexItem>
-            <FlexItem>
-              <Margin left={3} right={3} top={2} bottom={2}>
-                <Flex>
-                  <Margin right={4}>
+  <Margin inline right={3} top={3}>
+    <Box>
+      <Flex column>
+        <FlexItem>
+          <Margin left={3} right={3} top={2} bottom={2}>
+            <P>{name}</P>
+          </Margin>
+        </FlexItem>
+        <FlexItem>
+          <Divider height={remcalc(1)} />
+        </FlexItem>
+        <FlexItem>
+          <Margin left={3} right={3} top={2} bottom={2}>
+            <Flex>
+              <Margin right={4}>
+                <FlexItem>
+                  <Flex alignCenter>
                     <FlexItem>
-                      <Flex alignCenter>
-                        <FlexItem>
-                          <Margin right={1}>
-                            {network.public ? <PublicIcon /> : <PrivateIcon />}
-                          </Margin>
-                        </FlexItem>
-                        <FlexItem>
-                          <P>{network.public ? 'Public' : 'Private'}</P>
-                        </FlexItem>
-                      </Flex>
+                      <Margin right={1}>
+                        {network.public ? <PublicIcon /> : <PrivateIcon />}
+                      </Margin>
                     </FlexItem>
-                  </Margin>
-                  <Margin>
                     <FlexItem>
-                      <Flex alignCenter>
-                        <FlexItem>
-                          <Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
-                        </FlexItem>
-                        <FlexItem>
-                          <P>{fabric ? 'Fabric network' : 'Data center network'}</P>
-                        </FlexItem>
-                      </Flex>
+                      <P>{network.public ? 'Public' : 'Private'}</P>
                     </FlexItem>
-                  </Margin>
-                </Flex>
+                  </Flex>
+                </FlexItem>
               </Margin>
-            </FlexItem>
-          </Flex>
-        </Box>
-      </Margin>
-    </Col>
-  </Row>
+              <Margin>
+                <FlexItem>
+                  <Flex alignCenter>
+                    <FlexItem>
+                      <Margin right={1}>
+                        {fabric ? <FabricIcon /> : <DataCenterIcon />}
+                      </Margin>
+                    </FlexItem>
+                    <FlexItem>
+                      <P>{fabric ? 'Fabric network' : 'Data center network'}</P>
+                    </FlexItem>
+                  </Flex>
+                </FlexItem>
+              </Margin>
+            </Flex>
+          </Margin>
+        </FlexItem>
+      </Flex>
+    </Box>
+  </Margin>
 );
 
 export const Expanded = ({
@@ -143,10 +141,14 @@ export const Expanded = ({
                   <FlexItem>
                     <Flex alignCenter>
                       <FlexItem>
-                        <Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
+                        <Margin right={1}>
+                          {fabric ? <FabricIcon /> : <DataCenterIcon />}
+                        </Margin>
                       </FlexItem>
                       <FlexItem>
-                        <P>{fabric ? 'Fabric network' : 'Data center network'}</P>
+                        <P>
+                          {fabric ? 'Fabric network' : 'Data center network'}
+                        </P>
                       </FlexItem>
                     </Flex>
                   </FlexItem>
@@ -155,7 +157,11 @@ export const Expanded = ({
               {fabric ? (
                 <Margin top={3}>
                   <Card collapsed={!infoExpanded} actionable={!infoExpanded}>
-                    <CardHeader secondary={false} transparent={false} onClick={onInfoClick}>
+                    <CardHeader
+                      secondary={false}
+                      transparent={false}
+                      onClick={onInfoClick}
+                    >
                       <CardHeaderMeta>
                         <Padding left={3} right={3}>
                           <P>Network information</P>
@@ -173,9 +179,11 @@ export const Expanded = ({
                               <FlexItem>
                                 <Margin bottom={3}>
                                   <Flex alignCenter>
-                                    <Margin right={1}>
-                                      <DotIcon size={remcalc(12)} color="green" />
-                                    </Margin>
+                                    <DotIcon
+                                      right={remcalc(6)}
+                                      size={remcalc(12)}
+                                      color="green"
+                                    />
                                     <Small bold noMargin>
                                       Outbound internet access enabled
                                     </Small>
@@ -187,7 +195,13 @@ export const Expanded = ({
                               <FormGroup name="id">
                                 <FormLabel>ID</FormLabel>
                                 <Margin top={0.5} bottom={2}>
-                                  <Input onBlur={null} big monospace type="text" value={id} />
+                                  <Input
+                                    onBlur={null}
+                                    big
+                                    monospace
+                                    type="text"
+                                    value={id}
+                                  />
                                 </Margin>
                               </FormGroup>
                             </FlexItem>
@@ -195,7 +209,13 @@ export const Expanded = ({
                               <FormGroup name="subnet">
                                 <FormLabel>Subnet</FormLabel>
                                 <Margin top={0.5} bottom={2}>
-                                  <Input onBlur={null} big monospace type="text" value={subnet} />
+                                  <Input
+                                    onBlur={null}
+                                    big
+                                    monospace
+                                    type="text"
+                                    value={subnet}
+                                  />
                                 </Margin>
                               </FormGroup>
                             </FlexItem>

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

@@ -49,7 +49,7 @@ const VerticalDivider = styled.div`
 export const Filters = ({ onResetFilters }) => (
   <Margin top={1} bottom={3}>
     <H4>Filters</H4>
-    <Flex alignCenter justifyBetween>
+    <Flex wrap alignCenter justifyBetween>
       <FormGroup type="checkbox" name="compute-optimized" field={Field}>
         <Checkbox>
           <FormLabel>
@@ -122,7 +122,8 @@ export const Package = ({
   vcpus,
   disk,
   ssd,
-  hasVms
+  hasVms,
+  sortBy
 }) => (
   <TableTr>
     <TableTd right selected={selected}>
@@ -131,17 +132,21 @@ export const Package = ({
           <Flex alignCenter>
             {GroupIcons[group]}
             <Margin left={1} right={2}>
-              <FormLabel>{name}</FormLabel>
+              <FormLabel
+                style={{ fontWeight: sortBy === 'name' ? 'bold' : 'normal' }}
+              >
+                {name}
+              </FormLabel>
             </Margin>
           </Flex>
         </Radio>
       </FormGroup>
     </TableTd>
-    <TableTd right selected={selected}>
-      {bytes(memory, { decimalPlaces: 0 })}
+    <TableTd right selected={selected} bold={sortBy === 'memory'}>
+      {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
     </TableTd>
-    <TableTd right selected={selected}>
-      {bytes(disk, { decimalPlaces: 0 })}
+    <TableTd right selected={selected} bold={sortBy === 'disk'}>
+      {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
       {ssd && (
         <Margin inline left={1}>
           <Sup badge>SSD</Sup>
@@ -149,11 +154,11 @@ export const Package = ({
       )}
     </TableTd>
     {hasVms && (
-      <TableTd right selected={selected}>
+      <TableTd right bold={sortBy === 'vcpu'} selected={selected}>
         {vcpus}
       </TableTd>
     )}
-    <TableTd right selected={selected}>
+    <TableTd right bold={sortBy === 'price'} selected={selected}>
       {price}
     </TableTd>
   </TableTr>
@@ -252,11 +257,15 @@ export const Overview = ({
   onCancel
 }) => (
   <Fragment>
-    <H3 bold>{name}</H3>
+    <Margin bottom={2}>
+      <H3 bold noMargin>
+        {name}
+      </H3>
+    </Margin>
     <Flex alignCenter>
       <span>{price} $</span>
       <VerticalDivider />
-      <span>{bytes(memory, { decimalPlaces: 0 })}</span>
+      <span>{bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}</span>
       {hasVms && (
         <Fragment>
           <VerticalDivider />
@@ -264,7 +273,7 @@ export const Overview = ({
         </Fragment>
       )}
       <VerticalDivider />
-      <span>{bytes(disk, { decimalPlaces: 0 })} disk</span>
+      <span>{bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })} disk</span>
       <VerticalDivider />
       {ssd && <span>SSD</span>}
     </Flex>

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

@@ -12,14 +12,14 @@ const NoPackagesTitle = styled(H3)`
 
 const FullWidthCard = styled(Card)`
   width: 100%;
-`
+`;
 
 export default ({ children }) => (
   <FullWidthCard>
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
         <Margin bottom={2}>
-          <img src={NoPackagesImage} alt="Sad Animal"/>
+          <img src={NoPackagesImage} alt="Sad Animal" />
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>
       </Flex>

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

@@ -5,11 +5,21 @@ import { Margin, Padding } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 
-import { H3, FormGroup, FormLabel, Toggle, TagList, P, Strong, Card } from 'joyent-ui-toolkit';
+import {
+  H3,
+  FormGroup,
+  FormLabel,
+  Toggle,
+  TagList,
+  P,
+  Strong,
+  Card
+} from 'joyent-ui-toolkit';
 
 import Tag from '@components/tags';
 
-const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
+const capitalizeFirstLetter = string =>
+  string.charAt(0).toUpperCase() + string.slice(1);
 
 const Wildcards = {
   vmall: 'All VMs in DC',