Add quick export button next to the export menu (#978)

* quick export menu

* tweaks

* move #export-menu to button

components/ExportMenu.js

@@ -6,6 +6,8 @@ import Button from './Button'
 import Input from './Input'
 import Popout, { managePopout } from './Popout'
 
+import { Down as ArrowDown } from './svg/Arrows'
+
 const MAX_PAYLOAD_SIZE = 5e6 // bytes
 function verifyPayloadSize(str) {
   if (typeof str !== 'string') return true
@@ -54,30 +56,42 @@ function ExportMenu({
 
   const handleExport = format => () =>
     exportImage(format, {
-      filename: input.current.value
+      filename: input.current && input.current.value
     })
 
   return (
-    <div className="export-menu-container" id="export-menu">
+    <div className="export-menu-container">
       <div className="flex">
         <Button
           border
           large
           center
           color={COLORS.PURPLE}
-          padding="0 16px"
-          selected={isVisible}
+          onClick={handleExport('png')}
+          data-cy="quick-export-button"
+          style={{ minWidth: 92, borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
+        >
+          {loading ? 'Exporting…' : 'Export'}
+        </Button>
+        <Button
+          id="export-menu"
+          border
+          large
+          center
+          color={COLORS.PURPLE}
+          padding="0 8px"
           onClick={toggleVisibility}
           data-cy="export-button"
-          style={{ width: 92 }}
+          margin="0 0 0 -1px"
+          style={{ borderBottomLeftRadius: 0, borderTopLeftRadius: 0 }}
         >
-          {loading ? 'Exporting…' : 'Export'}
+          <ArrowDown color={COLORS.PURPLE} />
         </Button>
       </div>
       <Popout
         hidden={!isVisible}
         borderColor={COLORS.PURPLE}
-        pointerRight="36px"
+        pointerRight="6px"
         style={popoutStyle}
       >
         <div className="export-row">