fix(my-joy-beta): remove artifact above toolbar cta

fixes #1047

packages/my-joy-beta/src/app.js

@@ -51,7 +51,8 @@ const fullTheme = {
     7: remcalc(42),
     8: remcalc(48),
     9: remcalc(54),
-    10: remcalc(60)
+    10: remcalc(60),
+    '14px': remcalc(14)
   }
 };
 

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

@@ -2,6 +2,7 @@
 
 exports[`renders <Name /> without throwing 1`] = `
 .c6 {
+  margin-top: undefined;
   margin-left: 0.25rem;
 }
 
@@ -397,12 +398,6 @@ exports[`renders <Name /> without throwing 1`] = `
     <div
       className="c1"
     >
-      <label
-        className="c3"
-        htmlFor=""
-      >
-        ⁣
-      </label>
       <div
         className="c6"
       >
@@ -457,6 +452,7 @@ exports[`renders <Name /> without throwing 1`] = `
 
 exports[`renders <Name expanded /> without throwing 1`] = `
 .c6 {
+  margin-top: undefined;
   margin-left: 0.25rem;
 }
 
@@ -852,12 +848,6 @@ exports[`renders <Name expanded /> without throwing 1`] = `
     <div
       className="c1"
     >
-      <label
-        className="c3"
-        htmlFor=""
-      >
-        ⁣
-      </label>
       <div
         className="c6"
       >
@@ -912,6 +902,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
 
 exports[`renders <Name name="test" /> without throwing 1`] = `
 .c6 {
+  margin-top: undefined;
   margin-left: 0.25rem;
 }
 
@@ -1307,12 +1298,6 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
     <div
       className="c1"
     >
-      <label
-        className="c3"
-        htmlFor=""
-      >
-        ⁣
-      </label>
       <div
         className="c6"
       >
@@ -1367,6 +1352,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
 
 exports[`renders <Name pristine={false} /> without throwing 1`] = `
 .c6 {
+  margin-top: undefined;
   margin-left: 0.25rem;
 }
 
@@ -1762,12 +1748,6 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
     <div
       className="c1"
     >
-      <label
-        className="c3"
-        htmlFor=""
-      >
-        ⁣
-      </label>
       <div
         className="c6"
       >

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

@@ -31,8 +31,7 @@ export default ({
         </FormGroup>
       </FlexItem>
       <FlexItem>
-        <FormLabel>&#8291;</FormLabel>
-        <Margin left={1}>
+        <Margin left={1} top="14px">
           <Button
             type="button"
             marginTop={remcalc(8)}

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

@@ -1,7 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Toolbar /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: undefined;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -14,30 +18,30 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -88,37 +92,37 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 svg + span {
+.c8 svg + span {
   margin-left: 0.75rem;
 }
 
-.c7 svg {
+.c8 svg {
   max-height: 1.125rem;
 }
 
@@ -345,14 +349,11 @@ exports[`renders <Toolbar /> without throwing 1`] = `
       role="group"
       style={undefined}
     >
-      <label
-        className="c3"
-        htmlFor="m"
+      <div
+        className="c7"
       >
-        ⁣
-      </label>
         <button
-        className="c7 c8 c9"
+          className="c8 c9 c10"
           disabled={false}
           href=""
           icon={true}
@@ -363,11 +364,16 @@ exports[`renders <Toolbar /> without throwing 1`] = `
         </button>
       </div>
     </div>
+  </div>
 </div>
 `;
 
 exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: undefined;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -380,30 +386,30 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -454,37 +460,37 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 svg + span {
+.c8 svg + span {
   margin-left: 0.75rem;
 }
 
-.c7 svg {
+.c8 svg {
   max-height: 1.125rem;
 }
 
@@ -711,14 +717,11 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
       role="group"
       style={undefined}
     >
-      <label
-        className="c3"
-        htmlFor="y"
+      <div
+        className="c7"
       >
-        ⁣
-      </label>
         <button
-        className="c7 c8 c9"
+          className="c8 c9 c10"
           disabled={false}
           href=""
           icon={true}
@@ -729,11 +732,16 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
         </button>
       </div>
     </div>
+  </div>
 </div>
 `;
 
 exports[`renders <Toolbar actionable /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: undefined;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -746,30 +754,30 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -825,54 +833,54 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7:focus {
+.c8:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c7 svg + span {
+.c8 svg + span {
   margin-left: 0.75rem;
 }
 
-.c7 svg {
+.c8 svg {
   max-height: 1.125rem;
 }
 
@@ -1099,14 +1107,11 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
       role="group"
       style={undefined}
     >
-      <label
-        className="c3"
-        htmlFor="B"
+      <div
+        className="c7"
       >
-        ⁣
-      </label>
         <button
-        className="c7 c8 c9"
+          className="c8 c9 c10"
           disabled={true}
           href=""
           icon={true}
@@ -1117,11 +1122,16 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
         </button>
       </div>
     </div>
+  </div>
 </div>
 `;
 
 exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: undefined;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1134,30 +1144,30 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1208,37 +1218,37 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 svg + span {
+.c8 svg + span {
   margin-left: 0.75rem;
 }
 
-.c7 svg {
+.c8 svg {
   max-height: 1.125rem;
 }
 
@@ -1465,14 +1475,11 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
       role="group"
       style={undefined}
     >
-      <label
-        className="c3"
-        htmlFor="E"
+      <div
+        className="c7"
       >
-        ⁣
-      </label>
         <button
-        className="c7 c8 c9"
+          className="c8 c9 c10"
           disabled={false}
           href=""
           icon={true}
@@ -1483,11 +1490,16 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
         </button>
       </div>
     </div>
+  </div>
 </div>
 `;
 
 exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: undefined;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1500,30 +1512,30 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1574,37 +1586,37 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 svg + span {
+.c8 svg + span {
   margin-left: 0.75rem;
 }
 
-.c7 svg {
+.c8 svg {
   max-height: 1.125rem;
 }
 
@@ -1831,14 +1843,11 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
       role="group"
       style={undefined}
     >
-      <label
-        className="c3"
-        htmlFor="p"
+      <div
+        className="c7"
       >
-        ⁣
-      </label>
         <button
-        className="c7 c8 c9"
+          className="c8 c9 c10"
           disabled={false}
           href=""
           icon={true}
@@ -1849,11 +1858,16 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
         </button>
       </div>
     </div>
+  </div>
 </div>
 `;
 
 exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: undefined;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1866,30 +1880,30 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1940,37 +1954,37 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 svg + span {
+.c8 svg + span {
   margin-left: 0.75rem;
 }
 
-.c7 svg {
+.c8 svg {
   max-height: 1.125rem;
 }
 
@@ -2197,14 +2211,11 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
       role="group"
       style={undefined}
     >
-      <label
-        className="c3"
-        htmlFor="s"
+      <div
+        className="c7"
       >
-        ⁣
-      </label>
         <button
-        className="c7 c8 c9"
+          className="c8 c9 c10"
           disabled={false}
           href=""
           icon={true}
@@ -2215,11 +2226,16 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
         </button>
       </div>
     </div>
+  </div>
 </div>
 `;
 
 exports[`renders <Toolbar searchable /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: undefined;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2232,30 +2248,30 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2306,37 +2322,37 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 svg + span {
+.c8 svg + span {
   margin-left: 0.75rem;
 }
 
-.c7 svg {
+.c8 svg {
   max-height: 1.125rem;
 }
 
@@ -2578,14 +2594,11 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
       role="group"
       style={undefined}
     >
-      <label
-        className="c3"
-        htmlFor="v"
+      <div
+        className="c7"
       >
-        ⁣
-      </label>
         <button
-        className="c7 c8 c9"
+          className="c8 c9 c10"
           disabled={false}
           href=""
           icon={true}
@@ -2596,5 +2609,6 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
         </button>
       </div>
     </div>
+  </div>
 </div>
 `;

packages/my-joy-beta/src/components/instances/metadata.js

@@ -12,34 +12,6 @@ import {
 
 import KeyValue from '@components/key-value';
 
-export const MenuForm = ({ searchable, onAdd }) => (
-  <form>
-    <Row>
-      <Col xs={7} sm={5}>
-        <FormGroup name="filter" field={Field} fluid>
-          <FormLabel>Filter</FormLabel>
-          <Input onBlur={null} disabled={!searchable} fluid />
-        </FormGroup>
-      </Col>
-      <Col xs={5} sm={7}>
-        <FormGroup right>
-          <FormLabel>&#8291;</FormLabel>
-          <Button
-            type="button"
-            disabled={!searchable}
-            onClick={onAdd}
-            small
-            icon
-            fluid
-          >
-            Add metadata
-          </Button>
-        </FormGroup>
-      </Col>
-    </Row>
-  </form>
-);
-
 export const AddForm = props => (
   <KeyValue {...props} method="add" input="textarea" type="metadata" expanded />
 );

packages/my-joy-beta/src/components/instances/toolbar.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Field } from 'redux-form';
+import { Margin } from 'styled-components-spacing';
 import remcalc from 'remcalc';
 
 import {
@@ -29,7 +30,7 @@ export const Toolbar = ({
     </Col>
     <Col xs={5} sm={7}>
       <FormGroup right>
-        <FormLabel>&#8291;</FormLabel>
+        <Margin top="14px">
           <Button
             type={onActionClick ? 'button' : 'submit'}
             disabled={!actionable}
@@ -39,6 +40,7 @@ export const Toolbar = ({
           >
             {actionLabel}
           </Button>
+        </Margin>
       </FormGroup>
     </Col>
   </Row>