fix(ui-toolkit): remove FormMeta left margin

fixes #964

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

@@ -512,7 +512,6 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c6 {
@@ -1730,7 +1729,6 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c6 {
@@ -2684,7 +2682,6 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c6 {
@@ -3769,7 +3766,6 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c6 {
@@ -4757,7 +4753,6 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c0 {
@@ -5831,7 +5826,6 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c6 {
@@ -6925,7 +6919,6 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c6 {
@@ -7955,7 +7948,6 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c6 {

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

@@ -377,7 +377,6 @@ exports[`renders <AddForm /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c16 {
@@ -1399,7 +1398,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c16 {

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

@@ -279,8 +279,6 @@ exports[`renders <Name /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
-  margin-left: 0;
 }
 
 .c2 {
@@ -729,8 +727,6 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
-  margin-left: 0;
 }
 
 .c2 {
@@ -1179,8 +1175,6 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
-  margin-left: 0;
 }
 
 .c2 {
@@ -1629,8 +1623,6 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
-  margin-left: 0;
 }
 
 .c2 {

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

@@ -27,7 +27,7 @@ export default ({
         <FormGroup name="name" fluid field={Field}>
           <FormLabel>Instance Name</FormLabel>
           <Input placeholder={placeholderName} onBlur={null} />
-          <FormMeta marginless />
+          <FormMeta />
         </FormGroup>
       </FlexItem>
       <FlexItem>

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

@@ -478,7 +478,6 @@ exports[`renders <AddForm /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c6 {
@@ -1553,7 +1552,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c15 {

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

@@ -786,7 +786,6 @@ Array [
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c9 {
@@ -2692,7 +2691,6 @@ Array [
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c9 {
@@ -3792,7 +3790,6 @@ Array [
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c9 {
@@ -5146,7 +5143,6 @@ Array [
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c9 {
@@ -6246,7 +6242,6 @@ Array [
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c9 {

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

@@ -784,7 +784,6 @@ Array [
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c25 {

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

@@ -525,7 +525,6 @@ Array [
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c9 {
@@ -1729,7 +1728,6 @@ Array [
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c9 {
@@ -3606,7 +3604,6 @@ Array [
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c9 {
@@ -4819,7 +4816,6 @@ Array [
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c9 {
@@ -6174,7 +6170,6 @@ Array [
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c9 {
@@ -7440,7 +7435,6 @@ Array [
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c9 {

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

@@ -2622,6 +2622,28 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   padding-bottom: 2.25rem;
 }
 
+.c10 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
+}
+
+.c10 + p,
+.c10 + small,
+.c10 + h1,
+.c10 + h2,
+.c10 + label,
+.c10 + h3,
+.c10 + h4,
+.c10 + h5,
+.c10 + div,
+.c10 + span {
+  padding-bottom: 2.25rem;
+}
+
 .c25 {
   display: inline-block;
 }
@@ -2772,19 +2794,6 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c9 + p,
-.c9 + small,
-.c9 + h1,
-.c9 + h2,
-.c9 + label,
-.c9 + h3,
-.c9 + h4,
-.c9 + h5,
-.c9 + div,
-.c9 + span {
-  margin-top: 0.75rem;
-}
-
 .c16 {
   background-color: rgb(216,216,216);
   margin: 0;
@@ -2892,34 +2901,29 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
 }
 
 .c6 {
-  position: relative;
-  margin-bottom: 0.75rem;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
 }
 
 .c7 {
-  min-width: 2.25rem;
+  border-radius: 0.1875rem 0 0 0.1875rem;
-  margin-right: 1.125rem;
+  margin: -0.0625rem 0 -0.0625rem -0.0625rem;
+  min-width: 0.75rem;
   min-height: 100%;
   background-color: rgb(0,152,88);
   background-color: rgb(210,67,58);
 }
 
 .c8 {
-  padding: 0.75rem 0 0.84375rem 0;
+  padding: 1.125rem 1.125rem;
-}
-
-.c10 {
-  position: absolute;
-  right: 0.1875rem;
-  margin: 0;
 }
 
 .c15 {
@@ -3061,30 +3065,11 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
         Ooops!
       </h4>
       <p
-        className="c5"
+        className="c10"
       >
         An error occurred while loading your CNS services
       </p>
     </div>
-    <svg
-      className="c10 "
-      height="11.31"
-      innerRef={undefined}
-      onClick={[Function]}
-      style={
-        Object {
-          "transform": "rotate(0deg)",
-        }
-      }
-      viewBox="0 0 11.31 11.31"
-      width="11.31"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
-        fill="rgba(73, 73, 73, 1)"
-      />
-    </svg>
   </div>
   <div
     className="c11"
@@ -4646,6 +4631,28 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   padding-bottom: 2.25rem;
 }
 
+.c10 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
+}
+
+.c10 + p,
+.c10 + small,
+.c10 + h1,
+.c10 + h2,
+.c10 + label,
+.c10 + h3,
+.c10 + h4,
+.c10 + h5,
+.c10 + div,
+.c10 + span {
+  padding-bottom: 2.25rem;
+}
+
 .c25 {
   display: inline-block;
 }
@@ -4796,19 +4803,6 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c9 + p,
-.c9 + small,
-.c9 + h1,
-.c9 + h2,
-.c9 + label,
-.c9 + h3,
-.c9 + h4,
-.c9 + h5,
-.c9 + div,
-.c9 + span {
-  margin-top: 0.75rem;
-}
-
 .c16 {
   background-color: rgb(216,216,216);
   margin: 0;
@@ -5014,34 +5008,29 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
 }
 
 .c6 {
-  position: relative;
-  margin-bottom: 0.75rem;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
 }
 
 .c7 {
-  min-width: 2.25rem;
+  border-radius: 0.1875rem 0 0 0.1875rem;
-  margin-right: 1.125rem;
+  margin: -0.0625rem 0 -0.0625rem -0.0625rem;
+  min-width: 0.75rem;
   min-height: 100%;
   background-color: rgb(0,152,88);
   background-color: rgb(210,67,58);
 }
 
 .c8 {
-  padding: 0.75rem 0 0.84375rem 0;
+  padding: 1.125rem 1.125rem;
-}
-
-.c10 {
-  position: absolute;
-  right: 0.1875rem;
-  margin: 0;
 }
 
 .c15 {
@@ -5207,30 +5196,11 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
         Ooops!
       </h4>
       <p
-        className="c5"
+        className="c10"
       >
         mutation error
       </p>
     </div>
-    <svg
-      className="c10 "
-      height="11.31"
-      innerRef={undefined}
-      onClick={[Function]}
-      style={
-        Object {
-          "transform": "rotate(0deg)",
-        }
-      }
-      viewBox="0 0 11.31 11.31"
-      width="11.31"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
-        fill="rgba(73, 73, 73, 1)"
-      />
-    </svg>
   </div>
   <div
     className="c11"

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

@@ -2600,6 +2600,28 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   padding-bottom: 2.25rem;
 }
 
+.c10 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
+}
+
+.c10 + p,
+.c10 + small,
+.c10 + h1,
+.c10 + h2,
+.c10 + label,
+.c10 + h3,
+.c10 + h4,
+.c10 + h5,
+.c10 + div,
+.c10 + span {
+  padding-bottom: 2.25rem;
+}
+
 .c14 {
   font-size: 0.9375rem;
   font-style: normal;
@@ -2679,19 +2701,6 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c9 + p,
-.c9 + small,
-.c9 + h1,
-.c9 + h2,
-.c9 + label,
-.c9 + h3,
-.c9 + h4,
-.c9 + h5,
-.c9 + div,
-.c9 + span {
-  margin-top: 0.75rem;
-}
-
 .c18 {
   background-color: rgb(216,216,216);
   margin: 0;
@@ -2834,34 +2843,29 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
 }
 
 .c6 {
-  position: relative;
-  margin-bottom: 0.75rem;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
 }
 
 .c7 {
-  min-width: 2.25rem;
+  border-radius: 0.1875rem 0 0 0.1875rem;
-  margin-right: 1.125rem;
+  margin: -0.0625rem 0 -0.0625rem -0.0625rem;
+  min-width: 0.75rem;
   min-height: 100%;
   background-color: rgb(0,152,88);
   background-color: rgb(210,67,58);
 }
 
 .c8 {
-  padding: 0.75rem 0 0.84375rem 0;
+  padding: 1.125rem 1.125rem;
-}
-
-.c10 {
-  position: absolute;
-  right: 0.1875rem;
-  margin: 0;
 }
 
 .c13 {
@@ -3015,30 +3019,11 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
         Ooops!
       </h4>
       <p
-        className="c5"
+        className="c10"
       >
         An error occurred while loading your firewall rules
       </p>
     </div>
-    <svg
-      className="c10 "
-      height="11.31"
-      innerRef={undefined}
-      onClick={[Function]}
-      style={
-        Object {
-          "transform": "rotate(0deg)",
-        }
-      }
-      viewBox="0 0 11.31 11.31"
-      width="11.31"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
-        fill="rgba(73, 73, 73, 1)"
-      />
-    </svg>
   </div>
   <div
     className="c11"
@@ -3176,6 +3161,28 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   padding-bottom: 2.25rem;
 }
 
+.c10 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
+}
+
+.c10 + p,
+.c10 + small,
+.c10 + h1,
+.c10 + h2,
+.c10 + label,
+.c10 + h3,
+.c10 + h4,
+.c10 + h5,
+.c10 + div,
+.c10 + span {
+  padding-bottom: 2.25rem;
+}
+
 .c14 {
   font-size: 0.9375rem;
   font-style: normal;
@@ -3255,19 +3262,6 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c9 + p,
-.c9 + small,
-.c9 + h1,
-.c9 + h2,
-.c9 + label,
-.c9 + h3,
-.c9 + h4,
-.c9 + h5,
-.c9 + div,
-.c9 + span {
-  margin-top: 0.75rem;
-}
-
 .c18 {
   background-color: rgb(216,216,216);
   margin: 0;
@@ -3410,34 +3404,29 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
 }
 
 .c6 {
-  position: relative;
-  margin-bottom: 0.75rem;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
 }
 
 .c7 {
-  min-width: 2.25rem;
+  border-radius: 0.1875rem 0 0 0.1875rem;
-  margin-right: 1.125rem;
+  margin: -0.0625rem 0 -0.0625rem -0.0625rem;
+  min-width: 0.75rem;
   min-height: 100%;
   background-color: rgb(0,152,88);
   background-color: rgb(210,67,58);
 }
 
 .c8 {
-  padding: 0.75rem 0 0.84375rem 0;
+  padding: 1.125rem 1.125rem;
-}
-
-.c10 {
-  position: absolute;
-  right: 0.1875rem;
-  margin: 0;
 }
 
 .c13 {
@@ -3591,30 +3580,11 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
         Ooops!
       </h4>
       <p
-        className="c5"
+        className="c10"
       >
         error
       </p>
     </div>
-    <svg
-      className="c10 "
-      height="11.31"
-      innerRef={undefined}
-      onClick={[Function]}
-      style={
-        Object {
-          "transform": "rotate(0deg)",
-        }
-      }
-      viewBox="0 0 11.31 11.31"
-      width="11.31"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
-        fill="rgba(73, 73, 73, 1)"
-      />
-    </svg>
   </div>
   <div
     className="c11"

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

@@ -1014,7 +1014,7 @@ exports[`renders <List error /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
-.c30 {
+.c29 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1024,74 +1024,74 @@ exports[`renders <List error /> without throwing 1`] = `
   display: none;
 }
 
-.c30[type='checkbox'],
+.c29[type='checkbox'],
-.c30[type='radio'] {
+.c29[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c30[type='number']::-webkit-inner-spin-button,
+.c29[type='number']::-webkit-inner-spin-button,
-.c30[type='number']::-webkit-outer-spin-button {
+.c29[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c30[type='search'] {
+.c29[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c30[type='search']::-webkit-search-cancel-button,
+.c29[type='search']::-webkit-search-cancel-button,
-.c30[type='search']::-webkit-search-decoration {
+.c29[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c30::-webkit-file-upload-button {
+.c29::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c30:checked + label::after {
+.c29:checked + label::after {
   opacity: 1;
 }
 
-.c30:selected + label::after {
+.c29:selected + label::after {
   opacity: 1;
 }
 
-.c30:checked + label {
+.c29:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c30:selected + label {
+.c29:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c30:disabled + label {
+.c29: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;
 }
 
-.c33 {
+.c32 {
   margin-bottom: 0.125rem;
   margin-left: 0.5625rem;
 }
 
-.c37 {
+.c36 {
   padding: 0rem;
 }
 
@@ -1100,6 +1100,8 @@ exports[`renders <List error /> without throwing 1`] = `
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
 }
 
 .c19 + p,
@@ -1293,19 +1295,6 @@ exports[`renders <List error /> without throwing 1`] = `
   margin: 0;
 }
 
-.c18 + p,
-.c18 + small,
-.c18 + h1,
-.c18 + h2,
-.c18 + label,
-.c18 + h3,
-.c18 + h4,
-.c18 + h5,
-.c18 + div,
-.c18 + span {
-  margin-top: 0.75rem;
-}
-
 .c1 {
   background-color: rgb(216,216,216);
   margin: 0;
@@ -1320,7 +1309,7 @@ exports[`renders <List error /> without throwing 1`] = `
   height: 1.25rem;
 }
 
-.c31 {
+.c30 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -1338,7 +1327,7 @@ exports[`renders <List error /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c31::after {
+.c30::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -1355,7 +1344,7 @@ exports[`renders <List error /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c29 {
+.c28 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -1364,7 +1353,7 @@ exports[`renders <List error /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c28 {
+.c27 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1376,7 +1365,7 @@ exports[`renders <List error /> without throwing 1`] = `
   align-items: center;
 }
 
-.c28 label {
+.c27 label {
   font-weight: 400;
 }
 
@@ -1412,7 +1401,7 @@ exports[`renders <List error /> without throwing 1`] = `
   float: right;
 }
 
-.c27 {
+.c26 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -1491,37 +1480,32 @@ exports[`renders <List error /> without throwing 1`] = `
 }
 
 .c15 {
-  position: relative;
-  margin-bottom: 0.75rem;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
 }
 
 .c16 {
-  min-width: 2.25rem;
+  border-radius: 0.1875rem 0 0 0.1875rem;
-  margin-right: 1.125rem;
+  margin: -0.0625rem 0 -0.0625rem -0.0625rem;
+  min-width: 0.75rem;
   min-height: 100%;
   background-color: rgb(0,152,88);
   background-color: rgb(210,67,58);
 }
 
 .c17 {
-  padding: 0.75rem 0 0.84375rem 0;
+  padding: 1.125rem 1.125rem;
 }
 
 .c20 {
-  position: absolute;
-  right: 0.1875rem;
-  margin: 0;
-}
-
-.c21 {
   overflow: hidden;
   border-spacing: 0;
   border-collapse: separate;
@@ -1530,28 +1514,28 @@ 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;
 }
 
-.c39 {
+.c38 {
   width: 100%;
 }
 
-.c39 tr:first-child td {
+.c38 tr:first-child td {
   border-top: none;
 }
 
-.c25 {
+.c24 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -1569,15 +1553,15 @@ exports[`renders <List error /> without throwing 1`] = `
   font-weight: 500;
 }
 
-.c25:not(:first-child) {
+.c24:not(:first-child) {
   border-left-width: 0;
 }
 
-.c25:not(:last-child) {
+.c24:not(:last-child) {
   border-right-width: 0;
 }
 
-.c32 {
+.c31 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -1600,11 +1584,42 @@ exports[`renders <List error /> without throwing 1`] = `
   font-weight: bold;
 }
 
-.c32:not(:first-child) {
+.c31:not(:first-child) {
   border-left-width: 0;
 }
 
-.c32:not(:last-child) {
+.c31:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c33 {
+  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;
+}
+
+.c33:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c33:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -1617,8 +1632,8 @@ exports[`renders <List error /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 9.375rem;
+  width: 0rem;
-  display: table-cell;
+  display: none;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1670,38 +1685,7 @@ exports[`renders <List error /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c36 {
+.c37 {
-  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;
-}
-
-.c36:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c36:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c38 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -1717,15 +1701,15 @@ exports[`renders <List error /> without throwing 1`] = `
   font-weight: 500;
 }
 
-.c38:not(:first-child) {
+.c37:not(:first-child) {
   border-left-width: 0;
 }
 
-.c38:not(:last-child) {
+.c37:not(:last-child) {
   border-right-width: 0;
 }
 
-.c23 {
+.c22 {
   display: table-row;
   color: rgba(73,73,73,1);
   background-color: rgb(255,255,255);
@@ -1737,11 +1721,11 @@ 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;
 }
 
@@ -1815,14 +1799,14 @@ exports[`renders <List error /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c35 {
+  .c34 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c36 {
+  .c35 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -1915,59 +1899,40 @@ exports[`renders <List error /> without throwing 1`] = `
         An error occurred while loading your instances
       </p>
     </div>
-    <svg
-      className="c20 "
-      height="11.31"
-      innerRef={undefined}
-      onClick={[Function]}
-      style={
-        Object {
-          "transform": "rotate(0deg)",
-        }
-      }
-      viewBox="0 0 11.31 11.31"
-      width="11.31"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
-        fill="rgba(73, 73, 73, 1)"
-      />
-    </svg>
   </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 c27"
+              className="c25 baseline-jVaZNU c25 c26"
               role="group"
               style={undefined}
             >
               <li
-                className="c28"
+                className="c27"
               >
                 <div
                   checked={0}
-                  className="c29"
+                  className="c28"
                   disabled={false}
                   id="x"
                   onBlur={undefined}
@@ -1976,7 +1941,7 @@ exports[`renders <List error /> without throwing 1`] = `
                 >
                   <input
                     checked={false}
-                    className="c30"
+                    className="c29"
                     disabled={false}
                     id="y"
                     onBlur={undefined}
@@ -1984,7 +1949,7 @@ exports[`renders <List error /> without throwing 1`] = `
                     type="checkbox"
                   />
                   <label
-                    className="c31"
+                    className="c30"
                     htmlFor="y"
                   />
                 </div>
@@ -1992,7 +1957,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </div>
           </th>
           <th
-            className="c32"
+            className="c31"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -2002,7 +1967,7 @@ exports[`renders <List error /> without throwing 1`] = `
               Name 
             </span>
             <svg
-              className="c33"
+              className="c32"
               height="6"
               innerRef={undefined}
               marginBottom="0.125rem"
@@ -2023,7 +1988,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </svg>
           </th>
           <th
-            className="c34"
+            className="c33"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -2034,7 +1999,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c35"
+            className="c34"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -2045,7 +2010,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c36"
+            className="c35"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -2056,7 +2021,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c37 c38"
+            className="c36 c37"
             disabled={undefined}
             name="th"
             selected={undefined}
@@ -2064,7 +2029,7 @@ exports[`renders <List error /> without throwing 1`] = `
         </tr>
       </thead>
       <tbody
-        className="c39"
+        className="c38"
         disabled={undefined}
         name="tbody"
         selected={undefined}

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

@@ -991,7 +991,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c0 {
@@ -2001,7 +2000,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   margin-top: undefined;
 }
 
-.c23 {
+.c22 {
   margin-bottom: 2rem;
 }
 
@@ -2042,6 +2041,8 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
 }
 
 .c21 + p,
@@ -2227,7 +2228,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c24 {
+.c23 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -2235,16 +2236,16 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   margin: 0;
 }
 
-.c24 + p,
+.c23 + p,
-.c24 + small,
+.c23 + small,
-.c24 + h1,
+.c23 + h1,
-.c24 + h2,
+.c23 + h2,
-.c24 + label,
+.c23 + label,
-.c24 + h3,
+.c23 + h3,
-.c24 + h4,
+.c23 + h4,
-.c24 + h5,
+.c23 + h5,
-.c24 + div,
+.c23 + div,
-.c24 + span {
+.c23 + span {
   margin-top: 1.5rem;
 }
 
@@ -2256,19 +2257,6 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   margin: 0;
 }
 
-.c20 + p,
-.c20 + small,
-.c20 + h1,
-.c20 + h2,
-.c20 + label,
-.c20 + h3,
-.c20 + h4,
-.c20 + h5,
-.c20 + div,
-.c20 + span {
-  margin-top: 0.75rem;
-}
-
 .c12 {
   background-color: rgb(216,216,216);
   margin: 0;
@@ -2392,34 +2380,29 @@ exports[`renders <Metadata error /> without throwing 1`] = `
 }
 
 .c17 {
-  position: relative;
-  margin-bottom: 0.75rem;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
 }
 
 .c18 {
-  min-width: 2.25rem;
+  border-radius: 0.1875rem 0 0 0.1875rem;
-  margin-right: 1.125rem;
+  margin: -0.0625rem 0 -0.0625rem -0.0625rem;
+  min-width: 0.75rem;
   min-height: 100%;
   background-color: rgb(0,152,88);
   background-color: rgb(210,67,58);
 }
 
 .c19 {
-  padding: 0.75rem 0 0.84375rem 0;
+  padding: 1.125rem 1.125rem;
-}
-
-.c22 {
-  position: absolute;
-  right: 0.1875rem;
-  margin: 0;
 }
 
 @media only screen and (min-width:48em) {
@@ -2582,31 +2565,12 @@ exports[`renders <Metadata error /> without throwing 1`] = `
         An error occurred while loading your metadata
       </p>
     </div>
-    <svg
-      className="c22 "
-      height="11.31"
-      innerRef={undefined}
-      onClick={[Function]}
-      style={
-        Object {
-          "transform": "rotate(0deg)",
-        }
-      }
-      viewBox="0 0 11.31 11.31"
-      width="11.31"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
-        fill="rgba(73, 73, 73, 1)"
-      />
-    </svg>
   </div>
   <div
-    className="c23"
+    className="c22"
   >
     <h3
-      className="c24"
+      className="c23"
     >
       0
        key:value pair
@@ -3907,7 +3871,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c0 {

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

@@ -200,6 +200,28 @@ exports[`renders <Networks error /> without throwing 1`] = `
   padding-bottom: 2.25rem;
 }
 
+.c11 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
+}
+
+.c11 + p,
+.c11 + small,
+.c11 + h1,
+.c11 + h2,
+.c11 + label,
+.c11 + h3,
+.c11 + h4,
+.c11 + h5,
+.c11 + div,
+.c11 + span {
+  padding-bottom: 2.25rem;
+}
+
 .c0 {
   margin-right: auto;
   margin-left: auto;
@@ -266,48 +288,30 @@ exports[`renders <Networks error /> without throwing 1`] = `
   margin: 0;
 }
 
-.c10 + p,
-.c10 + small,
-.c10 + h1,
-.c10 + h2,
-.c10 + label,
-.c10 + h3,
-.c10 + h4,
-.c10 + h5,
-.c10 + div,
-.c10 + span {
-  margin-top: 0.75rem;
-}
-
 .c7 {
-  position: relative;
-  margin-bottom: 0.75rem;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
 }
 
 .c8 {
-  min-width: 2.25rem;
+  border-radius: 0.1875rem 0 0 0.1875rem;
-  margin-right: 1.125rem;
+  margin: -0.0625rem 0 -0.0625rem -0.0625rem;
+  min-width: 0.75rem;
   min-height: 100%;
   background-color: rgb(0,152,88);
   background-color: rgb(210,67,58);
 }
 
 .c9 {
-  padding: 0.75rem 0 0.84375rem 0;
+  padding: 1.125rem 1.125rem;
-}
-
-.c11 {
-  position: absolute;
-  right: 0.1875rem;
-  margin: 0;
 }
 
 @media only screen and (min-width:48em) {
@@ -406,30 +410,11 @@ exports[`renders <Networks error /> without throwing 1`] = `
         Ooops!
       </h4>
       <p
-        className="c5"
+        className="c11"
       >
         An error occurred while loading your networks
       </p>
     </div>
-    <svg
-      className="c11 "
-      height="11.31"
-      innerRef={undefined}
-      onClick={[Function]}
-      style={
-        Object {
-          "transform": "rotate(0deg)",
-        }
-      }
-      viewBox="0 0 11.31 11.31"
-      width="11.31"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
-        fill="rgba(73, 73, 73, 1)"
-      />
-    </svg>
   </div>
 </div>
 `;

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

@@ -225,6 +225,8 @@ exports[`renders <Summary loadingError /> without throwing 1`] = `
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
 }
 
 .c5 + p,
@@ -257,48 +259,30 @@ exports[`renders <Summary loadingError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + span {
-  margin-top: 0.75rem;
-}
-
 .c1 {
-  position: relative;
-  margin-bottom: 0.75rem;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
 }
 
 .c2 {
-  min-width: 2.25rem;
+  border-radius: 0.1875rem 0 0 0.1875rem;
-  margin-right: 1.125rem;
+  margin: -0.0625rem 0 -0.0625rem -0.0625rem;
+  min-width: 0.75rem;
   min-height: 100%;
   background-color: rgb(0,152,88);
   background-color: rgb(210,67,58);
 }
 
 .c3 {
-  padding: 0.75rem 0 0.84375rem 0;
+  padding: 1.125rem 1.125rem;
-}
-
-.c6 {
-  position: absolute;
-  right: 0.1875rem;
-  margin: 0;
 }
 
 @media only screen and (min-width:48em) {
@@ -349,25 +333,6 @@ exports[`renders <Summary loadingError /> without throwing 1`] = `
         An error occurred while loading your instance summary
       </p>
     </div>
-    <svg
-      className="c6 "
-      height="11.31"
-      innerRef={undefined}
-      onClick={[Function]}
-      style={
-        Object {
-          "transform": "rotate(0deg)",
-        }
-      }
-      viewBox="0 0 11.31 11.31"
-      width="11.31"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
-        fill="rgba(73, 73, 73, 1)"
-      />
-    </svg>
   </div>
 </div>
 `;
@@ -378,6 +343,8 @@ exports[`renders <Summary mutationError /> without throwing 1`] = `
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
 }
 
 .c5 + p,
@@ -410,48 +377,30 @@ exports[`renders <Summary mutationError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + span {
-  margin-top: 0.75rem;
-}
-
 .c1 {
-  position: relative;
-  margin-bottom: 0.75rem;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
 }
 
 .c2 {
-  min-width: 2.25rem;
+  border-radius: 0.1875rem 0 0 0.1875rem;
-  margin-right: 1.125rem;
+  margin: -0.0625rem 0 -0.0625rem -0.0625rem;
+  min-width: 0.75rem;
   min-height: 100%;
   background-color: rgb(0,152,88);
   background-color: rgb(210,67,58);
 }
 
 .c3 {
-  padding: 0.75rem 0 0.84375rem 0;
+  padding: 1.125rem 1.125rem;
-}
-
-.c6 {
-  position: absolute;
-  right: 0.1875rem;
-  margin: 0;
 }
 
 @media only screen and (min-width:48em) {
@@ -502,25 +451,6 @@ exports[`renders <Summary mutationError /> without throwing 1`] = `
         some mutation error
       </p>
     </div>
-    <svg
-      className="c6 "
-      height="11.31"
-      innerRef={undefined}
-      onClick={[Function]}
-      style={
-        Object {
-          "transform": "rotate(0deg)",
-        }
-      }
-      viewBox="0 0 11.31 11.31"
-      width="11.31"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
-        fill="rgba(73, 73, 73, 1)"
-      />
-    </svg>
   </div>
 </div>
 `;

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

@@ -995,7 +995,6 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c0 {
@@ -3000,7 +2999,6 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c0 {
@@ -4574,7 +4572,6 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c0 {

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

@@ -243,7 +243,6 @@ exports[`Form FormMeta 1`] = `
   -webkit-text-fill-color: currentcolor;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c1 {
@@ -258,7 +257,6 @@ exports[`Form FormMeta 1`] = `
   -webkit-text-fill-color: currentcolor;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 .c2 {
@@ -273,7 +271,6 @@ exports[`Form FormMeta 1`] = `
   -webkit-text-fill-color: currentcolor;
   font-size: 0.8125rem;
   float: none;
-  margin-left: 1.75rem;
 }
 
 <div>

packages/ui-toolkit/src/form/meta.js

@@ -29,11 +29,6 @@ const StyledLabel = Label.extend`
 
   font-size: ${remcalc(13)};
   float: none;
-  margin-left: ${remcalc(28)};
-
-  ${is('marginless')`
-    margin-left: 0;
-  `};
 `;
 
 const Meta = props => {

yarn.lock

@@ -2178,8 +2178,8 @@ caniuse-api@^1.5.2:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000794"
+  version "1.0.30000795"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000794.tgz#bbe71104fa277ce4b362387d54905e8b88e52f35"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000795.tgz#644f03fab00dd8bd1693e5e1e70d86b31c5cfece"
 
 caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000792:
   version "1.0.30000792"
@@ -3472,8 +3472,8 @@ dom-urls@^1.1.0:
     urijs "^1.16.1"
 
 domain-browser@^1.1.1:
-  version "1.1.7"
+  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
 
 domelementtype@1:
   version "1.3.0"
@@ -3830,8 +3830,8 @@ eslint-plugin-flowtype@2.39.1:
     lodash "^4.15.0"
 
 eslint-plugin-flowtype@^2.39.1:
-  version "2.41.1"
+  version "2.42.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.41.1.tgz#0996e1ea1d501dfc945802453a304ae9e8098b78"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.42.0.tgz#7fcc98df4ed9482a22ac10ba4ca48d649c4c733a"
   dependencies:
     lodash "^4.15.0"
 
@@ -3906,12 +3906,12 @@ eslint-plugin-react@7.4.0:
     prop-types "^15.5.10"
 
 eslint-plugin-react@^7.4.0:
-  version "7.5.1"
+  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.5.1.tgz#52e56e8d80c810de158859ef07b880d2f56ee30b"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.6.0.tgz#351651188c74c5b2fecc2717e3936b7207baa728"
   dependencies:
-    doctrine "^2.0.0"
+    doctrine "^2.0.2"
     has "^1.0.1"
-    jsx-ast-utils "^2.0.0"
+    jsx-ast-utils "^2.0.1"
     prop-types "^15.6.0"
 
 eslint-scope@^3.7.1, eslint-scope@~3.7.1:
@@ -4795,8 +4795,8 @@ global-prefix@^1.0.1:
     which "^1.2.14"
 
 globals@^11.0.1, globals@^11.1.0:
-  version "11.1.0"
+  version "11.2.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.1.0.tgz#632644457f5f0e3ae711807183700ebf2e4633e4"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.2.0.tgz#aa2ece052a787563ba70a3dcd9dc2eb8a9a0488c"
 
 globals@^9.17.0, globals@^9.18.0:
   version "9.18.0"
@@ -5928,10 +5928,14 @@ istanbul-reports@^1.1.3:
   dependencies:
     handlebars "^4.0.3"
 
-iterall@1.1.3, iterall@^1.1.3:
+iterall@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.3.tgz#1cbbff96204056dde6656e2ed2e2226d0e6d72c9"
 
+iterall@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.4.tgz#0db40d38fdcf53ae14dc8ec674e62ab190d52cfc"
+
 javascript-stringify@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-1.6.0.tgz#142d111f3a6e3dae8f4a9afd77d45855b5a9cce3"
@@ -6383,7 +6387,7 @@ jsx-ast-utils@^1.4.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
 
-jsx-ast-utils@^2.0.0:
+jsx-ast-utils@^2.0.0, jsx-ast-utils@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f"
   dependencies:
@@ -9074,8 +9078,8 @@ regexpu-core@^2.0.0:
     regjsparser "^0.1.4"
 
 registry-auth-token@^3.0.1:
-  version "3.3.1"
+  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.1.tgz#fb0d3289ee0d9ada2cbb52af5dfe66cb070d3006"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.2.tgz#851fd49038eecb586911115af845260eec983f20"
   dependencies:
     rc "^1.1.6"
     safe-buffer "^5.0.1"