increase button click area (#584)

components/ExportButton.js

@@ -1,43 +0,0 @@
-import React from 'react'
-import { withRouter } from 'next/router'
-
-import CopyButton from './CopyButton'
-
-const toIFrame = url =>
-  `<iframe
-  src="https://carbon.now.sh/embed${url}"
-  style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;"
-  sandbox="allow-scripts allow-same-origin">
-</iframe>
-`
-
-function ExportButton({ router, color }) {
-  return (
-    <React.Fragment>
-      <CopyButton text={toIFrame(router.asPath)}>
-        {({ copied }) => <button>{copied ? 'Copied!' : 'Copy Embed'}</button>}
-      </CopyButton>
-      <style jsx>
-        {`
-          button {
-            margin: 0;
-            padding: 0;
-            border: 0;
-            font-size: 100%;
-            vertical-align: baseline;
-            color: ${color};
-            background: transparent;
-            cursor: pointer;
-            user-select: none;
-          }
-
-          &:active {
-            outline: none;
-          }
-        `}
-      </style>
-    </React.Fragment>
-  )
-}
-
-export default withRouter(ExportButton)

components/ExportMenu.js

@@ -1,12 +1,21 @@
 import React from 'react'
 import enhanceWithClickOutside from 'react-click-outside'
 import shallowCompare from 'react-addons-shallow-compare'
+import { withRouter } from 'next/router'
 
 import { COLORS, EXPORT_SIZES } from '../lib/constants'
-import ExportButton from './ExportButton'
 import Button from './Button'
+import CopyButton from './CopyButton'
 import WindowPointer from './WindowPointer'
 
+const toIFrame = url =>
+  `<iframe
+  src="https://carbon.now.sh/embed${url}"
+  style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;"
+  sandbox="allow-scripts allow-same-origin">
+</iframe>
+`
+
 class ExportMenu extends React.Component {
   state = {
     isVisible: false
@@ -40,7 +49,7 @@ class ExportMenu extends React.Component {
   }
 
   render() {
-    const { exportSize, filename } = this.props
+    const { exportSize, filename, router } = this.props
     const { isVisible } = this.state
 
     return (
@@ -80,12 +89,14 @@ class ExportMenu extends React.Component {
             </div>
           </div>
           <div className="export-option">
-            <div className="open-container">
+            <button className="open-button" onClick={this.handleExport('open')}>
-              <button onClick={this.handleExport('open')}>Open ↗</button>
+              Open ↗
-            </div>
+            </button>
-            <div className="copy-container">
+            <CopyButton text={toIFrame(router.asPath)}>
-              <ExportButton color={COLORS.PURPLE}>Copy Embed</ExportButton>
+              {({ copied }) => (
-            </div>
+                <button className="copy-button">{copied ? 'Copied!' : 'Copy Embed'}</button>
+              )}
+            </CopyButton>
             <div className="save-container">
               <span>Save as</span>
               <div>
@@ -177,8 +188,8 @@ class ExportMenu extends React.Component {
               opacity: 1;
             }
 
-            .copy-container,
+            .copy-button,
-            .open-container,
+            .open-button,
             .save-container {
               display: flex;
               flex: 1;
@@ -187,12 +198,12 @@ class ExportMenu extends React.Component {
               padding: 12px 16px;
             }
 
-            .copy-container {
+            .copy-button {
               flex-basis: 72px;
             }
 
-            .copy-container,
+            .copy-button,
-            .open-container {
+            .open-button {
               border-right: 1px solid ${COLORS.PURPLE};
             }
 
@@ -219,4 +230,4 @@ class ExportMenu extends React.Component {
   }
 }
 
-export default enhanceWithClickOutside(ExportMenu)
+export default withRouter(enhanceWithClickOutside(ExportMenu))