test(my-joy-beta): update snapshots

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

@@ -1462,7 +1462,7 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
 }
 
 .c7 {
-  width: calc(100% - 2px);
+  width: calc(100% - 0.125rem);
   border-top: none;
 }
 
@@ -2010,7 +2010,7 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
 }
 
 .c7 {
-  width: calc(100% - 2px);
+  width: calc(100% - 0.125rem);
   border-top: none;
 }
 
@@ -2558,7 +2558,7 @@ exports[`renders <Packages loading /> without throwing 1`] = `
 }
 
 .c7 {
-  width: calc(100% - 2px);
+  width: calc(100% - 0.125rem);
   border-top: none;
 }
 
@@ -3316,7 +3316,7 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
 }
 
 .c7 {
-  width: calc(100% - 2px);
+  width: calc(100% - 0.125rem);
   border-top: none;
 }
 

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

@@ -581,8 +581,7 @@ Array [
 }
 
 .c0 {
-  width: calc(100% - 2px);
-  border-top: none;
+  width: calc(100% - 0.125rem);
 }
 
 <div
@@ -2373,8 +2372,7 @@ Array [
 }
 
 .c0 {
-  width: calc(100% - 2px);
-  border-top: none;
+  width: calc(100% - 0.125rem);
 }
 
 <div
@@ -3207,8 +3205,7 @@ Array [
 }
 
 .c0 {
-  width: calc(100% - 2px);
-  border-top: none;
+  width: calc(100% - 0.125rem);
 }
 
 <div
@@ -4041,8 +4038,7 @@ Array [
 }
 
 .c0 {
-  width: calc(100% - 2px);
-  border-top: none;
+  width: calc(100% - 0.125rem);
 }
 
 <div
@@ -4875,8 +4871,7 @@ Array [
 }
 
 .c0 {
-  width: calc(100% - 2px);
-  border-top: none;
+  width: calc(100% - 0.125rem);
 }
 
 <div
@@ -5709,8 +5704,7 @@ Array [
 }
 
 .c0 {
-  width: calc(100% - 2px);
-  border-top: none;
+  width: calc(100% - 0.125rem);
 }
 
 <div

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

@@ -309,8 +309,7 @@ Array [
 }
 
 .c15 {
-  width: calc(100% - 2px);
-  border-top: none;
+  width: calc(100% - 0.125rem);
 }
 
 @media only screen and (min-width:48em) {
@@ -1008,8 +1007,7 @@ Array [
 }
 
 .c16 {
-  width: calc(100% - 2px);
-  border-top: none;
+  width: calc(100% - 0.125rem);
 }
 
 @media only screen and (min-width:48em) {
@@ -1752,8 +1750,7 @@ Array [
 }
 
 .c15 {
-  width: calc(100% - 2px);
-  border-top: none;
+  width: calc(100% - 0.125rem);
 }
 
 @media only screen and (min-width:48em) {
@@ -2451,8 +2448,7 @@ Array [
 }
 
 .c16 {
-  width: calc(100% - 2px);
-  border-top: none;
+  width: calc(100% - 0.125rem);
 }
 
 @media only screen and (min-width:48em) {
@@ -3366,15 +3362,15 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c13 {
+.c12 {
   margin-bottom: 2.625rem;
 }
 
-.c21 {
+.c20 {
   margin-top: 1.875rem;
 }
 
-.c26 {
+.c25 {
   margin-bottom: 0.75rem;
 }
 
@@ -3382,7 +3378,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   margin-bottom: 1.5rem;
 }
 
-.c24 {
+.c23 {
   padding: 2.25rem;
 }
 
@@ -3393,7 +3389,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c12 {
+.c11 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -3402,7 +3398,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c16 {
+.c15 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -3455,17 +3451,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   display: block;
 }
 
-.c7 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c28 {
+.c27 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -3473,20 +3459,20 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c28 + p,
-.c28 + small,
-.c28 + h1,
-.c28 + h2,
-.c28 + label,
-.c28 + h3,
-.c28 + h4,
-.c28 + h5,
-.c28 + div,
-.c28 + span {
+.c27 + p,
+.c27 + small,
+.c27 + h1,
+.c27 + h2,
+.c27 + label,
+.c27 + h3,
+.c27 + h4,
+.c27 + h5,
+.c27 + div,
+.c27 + span {
   margin-top: 1.5rem;
 }
 
-.c11 {
+.c10 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -3494,13 +3480,13 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c20 {
+.c19 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c15 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3524,7 +3510,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   align-items: center;
 }
 
-.c25 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3555,7 +3541,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   align-items: center;
 }
 
-.c8 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3568,30 +3554,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   width: 100%;
 }
 
-.c8:before,
-.c8:after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-
-.c8:before {
-  top: -0.4375rem;
-  right: 1.0625rem;
-  border-width: 0 0.34375rem 0.4375rem 0.34375rem;
-  border-color: transparent transparent rgb(216,216,216) transparent;
-}
-
-.c8:after {
-  top: -0.375rem;
-  right: 1.125rem;
-  border-width: 0 0.28125rem 0.375rem 0.28125rem;
-  border-color: transparent transparent rgb(255,255,255) transparent;
-}
-
-.c9 {
+.c8 {
   border-radius: 0.1875rem 0 0 0.1875rem;
   margin: -0.0625rem 0 -0.0625rem -0.0625rem;
   min-width: 0.75rem;
@@ -3600,11 +3563,11 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   background-color: rgb(210,67,58);
 }
 
-.c10 {
+.c9 {
   padding: 1.125rem 1.125rem;
 }
 
-.c23 {
+.c22 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3626,7 +3589,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c14 {
+.c13 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -3641,7 +3604,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c17 {
+.c16 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -3654,27 +3617,27 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   align-items: center;
 }
 
-.c18 {
+.c17 {
   display: none;
 }
 
-.c18:checked + label {
+.c17:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c18:checked + label:after {
+.c17:checked + label:after {
   -webkit-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c18:checked + label:active {
+.c17:checked + label:active {
   box-shadow: none;
 }
 
-.c19 {
+.c18 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -3694,24 +3657,24 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   margin-right: 0.375rem;
 }
 
-.c19::selection {
+.c18::selection {
   background: none;
 }
 
-.c19:active {
+.c18:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c19:hover {
+.c18:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c19:hover:after {
+.c18:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c19:after,
-.c19:before {
+.c18:after,
+.c18:before {
   position: relative;
   display: block;
   content: '';
@@ -3719,7 +3682,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   height: 100%;
 }
 
-.c19:after {
+.c18:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -3731,22 +3694,21 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c19:active {
+.c18:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c19:before {
+.c18:before {
   display: none;
 }
 
-.c27 {
+.c26 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c22 {
-  width: calc(100% - 2px);
-  border-top: none;
+.c21 {
+  width: calc(100% - 0.125rem);
 }
 
 @media only screen and (min-width:48em) {
@@ -3792,24 +3754,6 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   }
 }
 
-@media only screen and (min-width:48em) {
-  .c7 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c7 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
 <div
   className="c0"
 >
@@ -3846,77 +3790,69 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
     className="c6"
   >
     <div
-      className="c2"
+      className="c7"
     >
       <div
-        className="c7"
+        className="c8"
+      />
+      <div
+        className="c9"
       >
-        <div
-          className="c8"
+        <h4
+          className="c10"
         >
-          <div
-            className="c9"
-          />
-          <div
-            className="c10"
-          >
-            <h4
-              className="c11"
-            >
-              Ooops!
-            </h4>
-            <p
-              className="c12"
-            >
-              An error occurred while loading your firewall rules
-            </p>
-          </div>
-        </div>
+          Ooops!
+        </h4>
+        <p
+          className="c11"
+        >
+          An error occurred while loading your firewall rules
+        </p>
       </div>
     </div>
   </div>
   <div
-    className="c13"
+    className="c12"
   >
     <form
       onChange={[Function]}
     >
       <div
-        className="baseline-jVaZNU kXgQxt c14"
+        className="baseline-jVaZNU kXgQxt c13"
         name="enabled"
         role="group"
         style={undefined}
         type="checkbox"
       >
         <div
-          className="c15"
+          className="c14"
         >
           <label
-            className="c16"
+            className="c15"
             htmlFor="q"
           >
             Enable Firewall
           </label>
           <div
-            className="c17"
+            className="c16"
           >
             <input
               checked={undefined}
-              className="c18"
+              className="c17"
               disabled={false}
               id="q"
               onBlur={undefined}
               type="checkbox"
             />
             <label
-              className="c19"
+              className="c18"
               disabled={false}
               htmlFor="q"
               id="q"
               onBlur={undefined}
             />
             <label
-              className="c16"
+              className="c15"
               disabled={false}
               htmlFor="q"
               id="q"
@@ -3930,25 +3866,25 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
     </form>
   </div>
   <div
-    className="c20 c2"
+    className="c19 c2"
     height="0.0625rem"
   />
   <div
-    className="c21"
+    className="c20"
   >
     <div
-      className="c22 c23"
+      className="c21 c22"
       disabled={false}
       name="card"
     >
       <div
-        className="c24"
+        className="c23"
       >
         <div
-          className="c25"
+          className="c24"
         >
           <div
-            className="c26"
+            className="c25"
           >
             <svg
               height={60}
@@ -4175,7 +4111,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
             </svg>
           </div>
           <h3
-            className="c27 c28"
+            className="c26 c27"
           >
             Sorry, but we weren’t able to find any firewall rules.
           </h3>
@@ -4195,15 +4131,15 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c13 {
+.c12 {
   margin-bottom: 2.625rem;
 }
 
-.c21 {
+.c20 {
   margin-top: 1.875rem;
 }
 
-.c26 {
+.c25 {
   margin-bottom: 0.75rem;
 }
 
@@ -4211,7 +4147,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   margin-bottom: 1.5rem;
 }
 
-.c24 {
+.c23 {
   padding: 2.25rem;
 }
 
@@ -4222,7 +4158,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c12 {
+.c11 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -4231,7 +4167,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c16 {
+.c15 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -4284,17 +4220,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   display: block;
 }
 
-.c7 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c28 {
+.c27 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -4302,20 +4228,20 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c28 + p,
-.c28 + small,
-.c28 + h1,
-.c28 + h2,
-.c28 + label,
-.c28 + h3,
-.c28 + h4,
-.c28 + h5,
-.c28 + div,
-.c28 + span {
+.c27 + p,
+.c27 + small,
+.c27 + h1,
+.c27 + h2,
+.c27 + label,
+.c27 + h3,
+.c27 + h4,
+.c27 + h5,
+.c27 + div,
+.c27 + span {
   margin-top: 1.5rem;
 }
 
-.c11 {
+.c10 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -4323,13 +4249,13 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c20 {
+.c19 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c15 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4353,7 +4279,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   align-items: center;
 }
 
-.c25 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4384,7 +4310,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   align-items: center;
 }
 
-.c8 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4397,30 +4323,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   width: 100%;
 }
 
-.c8:before,
-.c8:after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-
-.c8:before {
-  top: -0.4375rem;
-  right: 1.0625rem;
-  border-width: 0 0.34375rem 0.4375rem 0.34375rem;
-  border-color: transparent transparent rgb(216,216,216) transparent;
-}
-
-.c8:after {
-  top: -0.375rem;
-  right: 1.125rem;
-  border-width: 0 0.28125rem 0.375rem 0.28125rem;
-  border-color: transparent transparent rgb(255,255,255) transparent;
-}
-
-.c9 {
+.c8 {
   border-radius: 0.1875rem 0 0 0.1875rem;
   margin: -0.0625rem 0 -0.0625rem -0.0625rem;
   min-width: 0.75rem;
@@ -4429,11 +4332,11 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   background-color: rgb(210,67,58);
 }
 
-.c10 {
+.c9 {
   padding: 1.125rem 1.125rem;
 }
 
-.c23 {
+.c22 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4455,7 +4358,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c14 {
+.c13 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -4470,7 +4373,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c17 {
+.c16 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -4483,27 +4386,27 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   align-items: center;
 }
 
-.c18 {
+.c17 {
   display: none;
 }
 
-.c18:checked + label {
+.c17:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c18:checked + label:after {
+.c17:checked + label:after {
   -webkit-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c18:checked + label:active {
+.c17:checked + label:active {
   box-shadow: none;
 }
 
-.c19 {
+.c18 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -4523,24 +4426,24 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   margin-right: 0.375rem;
 }
 
-.c19::selection {
+.c18::selection {
   background: none;
 }
 
-.c19:active {
+.c18:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c19:hover {
+.c18:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c19:hover:after {
+.c18:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c19:after,
-.c19:before {
+.c18:after,
+.c18:before {
   position: relative;
   display: block;
   content: '';
@@ -4548,7 +4451,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   height: 100%;
 }
 
-.c19:after {
+.c18:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -4560,22 +4463,21 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c19:active {
+.c18:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c19:before {
+.c18:before {
   display: none;
 }
 
-.c27 {
+.c26 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c22 {
-  width: calc(100% - 2px);
-  border-top: none;
+.c21 {
+  width: calc(100% - 0.125rem);
 }
 
 @media only screen and (min-width:48em) {
@@ -4621,24 +4523,6 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   }
 }
 
-@media only screen and (min-width:48em) {
-  .c7 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c7 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
 <div
   className="c0"
 >
@@ -4675,77 +4559,69 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
     className="c6"
   >
     <div
-      className="c2"
+      className="c7"
     >
       <div
-        className="c7"
+        className="c8"
+      />
+      <div
+        className="c9"
       >
-        <div
-          className="c8"
+        <h4
+          className="c10"
         >
-          <div
-            className="c9"
-          />
-          <div
-            className="c10"
-          >
-            <h4
-              className="c11"
-            >
-              Ooops!
-            </h4>
-            <p
-              className="c12"
-            >
-              error
-            </p>
-          </div>
-        </div>
+          Ooops!
+        </h4>
+        <p
+          className="c11"
+        >
+          error
+        </p>
       </div>
     </div>
   </div>
   <div
-    className="c13"
+    className="c12"
   >
     <form
       onChange={[Function]}
     >
       <div
-        className="baseline-jVaZNU kXgQxt c14"
+        className="baseline-jVaZNU kXgQxt c13"
         name="enabled"
         role="group"
         style={undefined}
         type="checkbox"
       >
         <div
-          className="c15"
+          className="c14"
         >
           <label
-            className="c16"
+            className="c15"
             htmlFor="r"
           >
             Enable Firewall
           </label>
           <div
-            className="c17"
+            className="c16"
           >
             <input
               checked={undefined}
-              className="c18"
+              className="c17"
               disabled={false}
               id="r"
               onBlur={undefined}
               type="checkbox"
             />
             <label
-              className="c19"
+              className="c18"
               disabled={false}
               htmlFor="r"
               id="r"
               onBlur={undefined}
             />
             <label
-              className="c16"
+              className="c15"
               disabled={false}
               htmlFor="r"
               id="r"
@@ -4759,25 +4635,25 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
     </form>
   </div>
   <div
-    className="c20 c2"
+    className="c19 c2"
     height="0.0625rem"
   />
   <div
-    className="c21"
+    className="c20"
   >
     <div
-      className="c22 c23"
+      className="c21 c22"
       disabled={false}
       name="card"
     >
       <div
-        className="c24"
+        className="c23"
       >
         <div
-          className="c25"
+          className="c24"
         >
           <div
-            className="c26"
+            className="c25"
           >
             <svg
               height={60}
@@ -5004,7 +4880,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
             </svg>
           </div>
           <h3
-            className="c27 c28"
+            className="c26 c27"
           >
             Sorry, but we weren’t able to find any firewall rules.
           </h3>

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap

@@ -767,7 +767,7 @@ exports[`renders <List /> without throwing 1`] = `
 }
 
 .c32 {
-  width: calc(100% - 2px);
+  width: calc(100% - 0.125rem);
   border-top: none;
 }
 
@@ -1264,7 +1264,7 @@ exports[`renders <List error /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c43 {
+.c42 {
   margin-bottom: 0.75rem;
 }
 
@@ -1272,7 +1272,7 @@ exports[`renders <List error /> without throwing 1`] = `
   margin-bottom: 1.5rem;
 }
 
-.c41 {
+.c40 {
   padding: 2.25rem;
 }
 
@@ -1309,7 +1309,7 @@ exports[`renders <List error /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
-.c29 {
+.c28 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1319,78 +1319,78 @@ exports[`renders <List error /> without throwing 1`] = `
   display: none;
 }
 
-.c29[type='checkbox'],
-.c29[type='radio'] {
+.c28[type='checkbox'],
+.c28[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c29[type='number']::-webkit-inner-spin-button,
-.c29[type='number']::-webkit-outer-spin-button {
+.c28[type='number']::-webkit-inner-spin-button,
+.c28[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c29[type='search'] {
+.c28[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c29[type='search']::-webkit-search-cancel-button,
-.c29[type='search']::-webkit-search-decoration {
+.c28[type='search']::-webkit-search-cancel-button,
+.c28[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c29::-webkit-file-upload-button {
+.c28::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c29:checked + label::after {
+.c28:checked + label::after {
   opacity: 1;
 }
 
-.c29:selected + label::after {
+.c28:selected + label::after {
   opacity: 1;
 }
 
-.c29:checked + label {
+.c28:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c29:selected + label {
+.c28:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c29:disabled + label {
+.c28:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c24 {
+.c23 {
   padding: 0rem;
   padding-left: 0.75rem;
 }
 
-.c26 {
+.c25 {
   padding-top: 0.25rem;
 }
 
-.c32 {
+.c31 {
   margin-bottom: 0.125rem;
   margin-left: 0.5625rem;
 }
 
-.c36 {
+.c35 {
   padding: 0rem;
 }
 
-.c20 {
+.c19 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -1536,17 +1536,7 @@ exports[`renders <List error /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c15 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c45 {
+.c44 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -1554,20 +1544,20 @@ exports[`renders <List error /> without throwing 1`] = `
   margin: 0;
 }
 
-.c45 + p,
-.c45 + small,
-.c45 + h1,
-.c45 + h2,
-.c45 + label,
-.c45 + h3,
-.c45 + h4,
-.c45 + h5,
-.c45 + div,
-.c45 + span {
+.c44 + p,
+.c44 + small,
+.c44 + h1,
+.c44 + h2,
+.c44 + label,
+.c44 + h3,
+.c44 + h4,
+.c44 + h5,
+.c44 + div,
+.c44 + span {
   margin-top: 1.5rem;
 }
 
-.c19 {
+.c18 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -1620,7 +1610,7 @@ exports[`renders <List error /> without throwing 1`] = `
   justify-content: space-between;
 }
 
-.c42 {
+.c41 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1651,7 +1641,7 @@ exports[`renders <List error /> without throwing 1`] = `
   align-items: center;
 }
 
-.c16 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1664,30 +1654,7 @@ exports[`renders <List error /> without throwing 1`] = `
   width: 100%;
 }
 
-.c16:before,
-.c16:after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-
-.c16:before {
-  top: -0.4375rem;
-  right: 1.0625rem;
-  border-width: 0 0.34375rem 0.4375rem 0.34375rem;
-  border-color: transparent transparent rgb(216,216,216) transparent;
-}
-
-.c16:after {
-  top: -0.375rem;
-  right: 1.125rem;
-  border-width: 0 0.28125rem 0.375rem 0.28125rem;
-  border-color: transparent transparent rgb(255,255,255) transparent;
-}
-
-.c17 {
+.c16 {
   border-radius: 0.1875rem 0 0 0.1875rem;
   margin: -0.0625rem 0 -0.0625rem -0.0625rem;
   min-width: 0.75rem;
@@ -1696,11 +1663,11 @@ exports[`renders <List error /> without throwing 1`] = `
   background-color: rgb(210,67,58);
 }
 
-.c18 {
+.c17 {
   padding: 1.125rem 1.125rem;
 }
 
-.c40 {
+.c39 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1722,7 +1689,7 @@ exports[`renders <List error /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c30 {
+.c29 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -1740,7 +1707,7 @@ exports[`renders <List error /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c30::after {
+.c29::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -1757,7 +1724,7 @@ exports[`renders <List error /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c28 {
+.c27 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -1766,7 +1733,7 @@ exports[`renders <List error /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c27 {
+.c26 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1778,7 +1745,7 @@ exports[`renders <List error /> without throwing 1`] = `
   align-items: center;
 }
 
-.c27 label {
+.c26 label {
   font-weight: 400;
 }
 
@@ -1874,7 +1841,7 @@ exports[`renders <List error /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c21 {
+.c20 {
   overflow: hidden;
   border-spacing: 0;
   border-collapse: separate;
@@ -1883,24 +1850,24 @@ exports[`renders <List error /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c22 {
+.c21 {
   width: 100%;
   background: rgb(250,250,250);
 }
 
-.c22 th:first-child {
+.c21 th:first-child {
   border-top-left-radius: 0.25rem;
 }
 
-.c22 th:last-child {
+.c21 th:last-child {
   border-top-right-radius: 0.25rem;
 }
 
-.c38 {
+.c37 {
   width: 100%;
 }
 
-.c25 {
+.c24 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -1919,15 +1886,15 @@ exports[`renders <List error /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c25:not(:first-child) {
+.c24:not(:first-child) {
   border-left-width: 0;
 }
 
-.c25:not(:last-child) {
+.c24:not(:last-child) {
   border-right-width: 0;
 }
 
-.c31 {
+.c30 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -1951,11 +1918,43 @@ exports[`renders <List error /> without throwing 1`] = `
   font-weight: bold;
 }
 
-.c31:not(:first-child) {
+.c30:not(:first-child) {
   border-left-width: 0;
 }
 
-.c31:not(:last-child) {
+.c30:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c32 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 9.375rem;
+  display: table-cell;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c32:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c32:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -1968,8 +1967,8 @@ exports[`renders <List error /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 9.375rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -2023,39 +2022,7 @@ exports[`renders <List error /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c35 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
-.c35:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c35:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c37 {
+.c36 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -2072,15 +2039,15 @@ exports[`renders <List error /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c37:not(:first-child) {
+.c36:not(:first-child) {
   border-left-width: 0;
 }
 
-.c37:not(:last-child) {
+.c36:not(:last-child) {
   border-right-width: 0;
 }
 
-.c23 {
+.c22 {
   display: table-row;
   color: rgba(73,73,73,1);
   background-color: rgb(255,255,255);
@@ -2092,21 +2059,21 @@ exports[`renders <List error /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c23:last-child {
+.c22:last-child {
   box-shadow: none;
 }
 
-.c23:last-child td {
+.c22:last-child td {
   border-bottom-width: 0.0625rem;
 }
 
-.c44 {
+.c43 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c39 {
-  width: calc(100% - 2px);
+.c38 {
+  width: calc(100% - 0.125rem);
   border-top: none;
 }
 
@@ -2135,33 +2102,15 @@ exports[`renders <List error /> without throwing 1`] = `
   }
 }
 
-@media only screen and (min-width:48em) {
-  .c15 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c15 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
 @media only screen and (min-width:47.9375rem) {
-  .c34 {
+  .c33 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c35 {
+  .c34 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -2234,68 +2183,60 @@ exports[`renders <List error /> without throwing 1`] = `
     className="c14"
   >
     <div
-      className="c2"
+      className="c15"
     >
       <div
-        className="c15"
+        className="c16"
+      />
+      <div
+        className="c17"
       >
-        <div
-          className="c16"
+        <h4
+          className="c18"
         >
-          <div
-            className="c17"
-          />
-          <div
-            className="c18"
-          >
-            <h4
-              className="c19"
-            >
-              Ooops!
-            </h4>
-            <p
-              className="c20"
-            >
-              An error occurred while loading your instances
-            </p>
-          </div>
-        </div>
+          Ooops!
+        </h4>
+        <p
+          className="c19"
+        >
+          An error occurred while loading your instances
+        </p>
       </div>
     </div>
   </div>
   <form>
     <table
-      className="c21"
+      className="c20"
     >
       <thead
-        className="c22"
+        className="c21"
         disabled={undefined}
         name="thdead"
         selected={undefined}
       >
         <tr
-          className="c23"
+          className="c22"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <th
-            className="c24 c25"
+            className="c23 c24"
             disabled={undefined}
             name="th"
             selected={undefined}
           >
             <div
-              className="c26 baseline-jVaZNU c26 c4"
+              className="c25 baseline-jVaZNU c25 c4"
               role="group"
               style={undefined}
             >
               <li
-                className="c27"
+                className="c26"
               >
                 <div
                   checked={0}
-                  className="c28"
+                  className="c27"
                   disabled={true}
                   id="x"
                   onBlur={undefined}
@@ -2304,7 +2245,7 @@ exports[`renders <List error /> without throwing 1`] = `
                 >
                   <input
                     checked={false}
-                    className="c29"
+                    className="c28"
                     disabled={true}
                     id="y"
                     onBlur={undefined}
@@ -2312,7 +2253,7 @@ exports[`renders <List error /> without throwing 1`] = `
                     type="checkbox"
                   />
                   <label
-                    className="c30"
+                    className="c29"
                     htmlFor="y"
                   />
                 </div>
@@ -2320,7 +2261,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </div>
           </th>
           <th
-            className="c31"
+            className="c30"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -2330,7 +2271,7 @@ exports[`renders <List error /> without throwing 1`] = `
               Name 
             </span>
             <svg
-              className="c32"
+              className="c31"
               height="6"
               innerRef={undefined}
               marginBottom="0.125rem"
@@ -2351,7 +2292,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </svg>
           </th>
           <th
-            className="c33"
+            className="c32"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -2362,7 +2303,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c34"
+            className="c33"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -2373,7 +2314,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c35"
+            className="c34"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -2384,7 +2325,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c36 c37"
+            className="c35 c36"
             disabled={undefined}
             name="th"
             selected={undefined}
@@ -2392,7 +2333,7 @@ exports[`renders <List error /> without throwing 1`] = `
         </tr>
       </thead>
       <tbody
-        className="c38"
+        className="c37"
         disabled={undefined}
         name="tbody"
         selected={undefined}
@@ -2400,18 +2341,18 @@ exports[`renders <List error /> without throwing 1`] = `
     </table>
   </form>
   <div
-    className="c39 c40"
+    className="c38 c39"
     disabled={false}
     name="card"
   >
     <div
-      className="c41"
+      className="c40"
     >
       <div
-        className="c42"
+        className="c41"
       >
         <div
-          className="c43"
+          className="c42"
         >
           <svg
             height={60}
@@ -2638,7 +2579,7 @@ exports[`renders <List error /> without throwing 1`] = `
           </svg>
         </div>
         <h3
-          className="c44 c45"
+          className="c43 c44"
         >
           You haven't created any instances yet, but they're really easy to set up.
                   Click above to get going.

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

@@ -1944,7 +1944,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
-.c22 {
+.c21 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -2090,17 +2090,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c17 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c23 {
+.c22 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -2108,20 +2098,20 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   margin: 0;
 }
 
-.c23 + p,
-.c23 + small,
-.c23 + h1,
-.c23 + h2,
-.c23 + label,
-.c23 + h3,
-.c23 + h4,
-.c23 + h5,
-.c23 + div,
-.c23 + span {
+.c22 + p,
+.c22 + small,
+.c22 + h1,
+.c22 + h2,
+.c22 + label,
+.c22 + h3,
+.c22 + h4,
+.c22 + h5,
+.c22 + div,
+.c22 + span {
   margin-top: 1.5rem;
 }
 
-.c21 {
+.c20 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -2187,7 +2177,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   justify-content: space-between;
 }
 
-.c18 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2200,30 +2190,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   width: 100%;
 }
 
-.c18:before,
-.c18:after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-
-.c18:before {
-  top: -0.4375rem;
-  right: 1.0625rem;
-  border-width: 0 0.34375rem 0.4375rem 0.34375rem;
-  border-color: transparent transparent rgb(216,216,216) transparent;
-}
-
-.c18:after {
-  top: -0.375rem;
-  right: 1.125rem;
-  border-width: 0 0.28125rem 0.375rem 0.28125rem;
-  border-color: transparent transparent rgb(255,255,255) transparent;
-}
-
-.c19 {
+.c18 {
   border-radius: 0.1875rem 0 0 0.1875rem;
   margin: -0.0625rem 0 -0.0625rem -0.0625rem;
   min-width: 0.75rem;
@@ -2232,7 +2199,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   background-color: rgb(210,67,58);
 }
 
-.c20 {
+.c19 {
   padding: 1.125rem 1.125rem;
 }
 
@@ -2353,24 +2320,6 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   }
 }
 
-@media only screen and (min-width:48em) {
-  .c17 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c17 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
 <div
   className="c0"
 >
@@ -2446,32 +2395,24 @@ exports[`renders <Metadata error /> without throwing 1`] = `
     className="c16"
   >
     <div
-      className="c8"
+      className="c17"
     >
       <div
-        className="c17"
+        className="c18"
+      />
+      <div
+        className="c19"
       >
-        <div
-          className="c18"
+        <h4
+          className="c20"
         >
-          <div
-            className="c19"
-          />
-          <div
-            className="c20"
-          >
-            <h4
-              className="c21"
-            >
-              Ooops!
-            </h4>
-            <p
-              className="c22"
-            >
-              An error occurred while loading your metadata
-            </p>
-          </div>
-        </div>
+          Ooops!
+        </h4>
+        <p
+          className="c21"
+        >
+          An error occurred while loading your metadata
+        </p>
       </div>
     </div>
   </div>
@@ -2479,7 +2420,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
     className="c16"
   >
     <h3
-      className="c23"
+      className="c22"
     >
       0
        key:value pair

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

@@ -177,7 +177,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
   margin: 0;
 }
 
-.c13 {
+.c12 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -224,16 +224,6 @@ exports[`renders <Networks error /> without throwing 1`] = `
   display: block;
 }
 
-.c8 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
 .c6 {
   color: rgba(73,73,73,1);
   font-weight: normal;
@@ -255,7 +245,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
   margin-top: 1.5rem;
 }
 
-.c12 {
+.c11 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -263,7 +253,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
   margin: 0;
 }
 
-.c9 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -276,30 +266,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
   width: 100%;
 }
 
-.c9:before,
-.c9:after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-
-.c9:before {
-  top: -0.4375rem;
-  right: 1.0625rem;
-  border-width: 0 0.34375rem 0.4375rem 0.34375rem;
-  border-color: transparent transparent rgb(216,216,216) transparent;
-}
-
-.c9:after {
-  top: -0.375rem;
-  right: 1.125rem;
-  border-width: 0 0.28125rem 0.375rem 0.28125rem;
-  border-color: transparent transparent rgb(255,255,255) transparent;
-}
-
-.c10 {
+.c9 {
   border-radius: 0.1875rem 0 0 0.1875rem;
   margin: -0.0625rem 0 -0.0625rem -0.0625rem;
   min-width: 0.75rem;
@@ -308,7 +275,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
   background-color: rgb(210,67,58);
 }
 
-.c11 {
+.c10 {
   padding: 1.125rem 1.125rem;
 }
 
@@ -355,24 +322,6 @@ exports[`renders <Networks error /> without throwing 1`] = `
   }
 }
 
-@media only screen and (min-width:48em) {
-  .c8 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c8 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
 <div
   className="c0"
 >
@@ -413,32 +362,24 @@ exports[`renders <Networks error /> without throwing 1`] = `
     className="c7"
   >
     <div
-      className="c2"
+      className="c8"
     >
       <div
-        className="c8"
+        className="c9"
+      />
+      <div
+        className="c10"
       >
-        <div
-          className="c9"
+        <h4
+          className="c11"
         >
-          <div
-            className="c10"
-          />
-          <div
-            className="c11"
-          >
-            <h4
-              className="c12"
-            >
-              Ooops!
-            </h4>
-            <p
-              className="c13"
-            >
-              An error occurred while loading your networks
-            </p>
-          </div>
-        </div>
+          Ooops!
+        </h4>
+        <p
+          className="c12"
+        >
+          An error occurred while loading your networks
+        </p>
       </div>
     </div>
   </div>

packages/ui-toolkit/src/message/__tests__/__snapshots__/message.spec.js.snap

@@ -18,36 +18,7 @@ exports[`Message Description 1`] = `
 `;
 
 exports[`Message Message 1`] = `
-.c0 {
-  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;
-}
-
-.c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c5 {
+.c3 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -55,7 +26,7 @@ exports[`Message Message 1`] = `
   margin: 0;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -68,30 +39,7 @@ exports[`Message Message 1`] = `
   width: 100%;
 }
 
-.c2:before,
-.c2:after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-
-.c2:before {
-  top: -0.4375rem;
-  right: 1.0625rem;
-  border-width: 0 0.34375rem 0.4375rem 0.34375rem;
-  border-color: transparent transparent rgb(216,216,216) transparent;
-}
-
-.c2:after {
-  top: -0.375rem;
-  right: 1.125rem;
-  border-width: 0 0.28125rem 0.375rem 0.28125rem;
-  border-color: transparent transparent rgb(255,255,255) transparent;
-}
-
-.c3 {
+.c1 {
   border-radius: 0.1875rem 0 0 0.1875rem;
   margin: -0.0625rem 0 -0.0625rem -0.0625rem;
   min-width: 0.75rem;
@@ -99,11 +47,11 @@ exports[`Message Message 1`] = `
   background-color: rgb(0,152,88);
 }
 
-.c4 {
+.c2 {
   padding: 1.125rem 1.125rem;
 }
 
-.c6 {
+.c4 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -112,86 +60,31 @@ exports[`Message Message 1`] = `
   font-size: 0.8125rem;
 }
 
-@media only screen and (min-width:48em) {
-  .c1 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c1 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
 <div
   className="c0"
 >
   <div
     className="c1"
+  />
+  <div
+    className="c2"
   >
-    <div
-      className="c2"
+    <h4
+      className="c3"
     >
-      <div
-        className="c3"
-      />
-      <div
-        className="c4"
-      >
-        <h4
-          className="c5"
-        >
-          Choosing deployment data center
-        </h4>
-        <p
-          className="c6"
-        >
-          Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
-        </p>
-      </div>
-    </div>
+      Choosing deployment data center
+    </h4>
+    <p
+      className="c4"
+    >
+      Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
+    </p>
   </div>
 </div>
 `;
 
 exports[`Message Message Error 1`] = `
-.c0 {
-  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;
-}
-
-.c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c5 {
+.c3 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -199,7 +92,7 @@ exports[`Message Message Error 1`] = `
   margin: 0;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -212,30 +105,7 @@ exports[`Message Message Error 1`] = `
   width: 100%;
 }
 
-.c2:before,
-.c2:after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-
-.c2:before {
-  top: -0.4375rem;
-  right: 1.0625rem;
-  border-width: 0 0.34375rem 0.4375rem 0.34375rem;
-  border-color: transparent transparent rgb(216,216,216) transparent;
-}
-
-.c2:after {
-  top: -0.375rem;
-  right: 1.125rem;
-  border-width: 0 0.28125rem 0.375rem 0.28125rem;
-  border-color: transparent transparent rgb(255,255,255) transparent;
-}
-
-.c3 {
+.c1 {
   border-radius: 0.1875rem 0 0 0.1875rem;
   margin: -0.0625rem 0 -0.0625rem -0.0625rem;
   min-width: 0.75rem;
@@ -244,11 +114,11 @@ exports[`Message Message Error 1`] = `
   background-color: rgb(210,67,58);
 }
 
-.c4 {
+.c2 {
   padding: 1.125rem 1.125rem;
 }
 
-.c6 {
+.c4 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -257,86 +127,31 @@ exports[`Message Message Error 1`] = `
   font-size: 0.8125rem;
 }
 
-@media only screen and (min-width:48em) {
-  .c1 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c1 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
 <div
   className="c0"
 >
   <div
     className="c1"
+  />
+  <div
+    className="c2"
   >
-    <div
-      className="c2"
+    <h4
+      className="c3"
     >
-      <div
-        className="c3"
-      />
-      <div
-        className="c4"
-      >
-        <h4
-          className="c5"
-        >
-          Choosing deployment data center
-        </h4>
-        <p
-          className="c6"
-        >
-          Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
-        </p>
-      </div>
-    </div>
+      Choosing deployment data center
+    </h4>
+    <p
+      className="c4"
+    >
+      Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
+    </p>
   </div>
 </div>
 `;
 
 exports[`Message Message Warning 1`] = `
-.c0 {
-  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;
-}
-
-.c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c5 {
+.c3 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -344,7 +159,7 @@ exports[`Message Message Warning 1`] = `
   margin: 0;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -357,30 +172,7 @@ exports[`Message Message Warning 1`] = `
   width: 100%;
 }
 
-.c2:before,
-.c2:after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-
-.c2:before {
-  top: -0.4375rem;
-  right: 1.0625rem;
-  border-width: 0 0.34375rem 0.4375rem 0.34375rem;
-  border-color: transparent transparent rgb(216,216,216) transparent;
-}
-
-.c2:after {
-  top: -0.375rem;
-  right: 1.125rem;
-  border-width: 0 0.28125rem 0.375rem 0.28125rem;
-  border-color: transparent transparent rgb(255,255,255) transparent;
-}
-
-.c3 {
+.c1 {
   border-radius: 0.1875rem 0 0 0.1875rem;
   margin: -0.0625rem 0 -0.0625rem -0.0625rem;
   min-width: 0.75rem;
@@ -389,11 +181,11 @@ exports[`Message Message Warning 1`] = `
   background-color: rgb(227,130,0);
 }
 
-.c4 {
+.c2 {
   padding: 1.125rem 1.125rem;
 }
 
-.c6 {
+.c4 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -402,51 +194,25 @@ exports[`Message Message Warning 1`] = `
   font-size: 0.8125rem;
 }
 
-@media only screen and (min-width:48em) {
-  .c1 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c1 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
 <div
   className="c0"
 >
   <div
     className="c1"
+  />
+  <div
+    className="c2"
   >
-    <div
-      className="c2"
+    <h4
+      className="c3"
     >
-      <div
-        className="c3"
-      />
-      <div
-        className="c4"
-      >
-        <h4
-          className="c5"
-        >
-          Choosing deployment data center
-        </h4>
-        <p
-          className="c6"
-        >
-          Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
-        </p>
-      </div>
-    </div>
+      Choosing deployment data center
+    </h4>
+    <p
+      className="c4"
+    >
+      Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
+    </p>
   </div>
 </div>
 `;

packages/ui-toolkit/src/message/index.js

@@ -92,4 +92,4 @@ Message.defaultProps = {
   success: true
 };
 
-export default Message;
+export default Message;