Remove title prop from Button

components/Button.js

@@ -12,7 +12,6 @@ const Button = ({
   disabled,
   notAllowed,
   selected,
-  title,
   children,
   border,
   center,
@@ -23,7 +22,6 @@ const Button = ({
   margin = 0
 }) => (
   <button onClick={onClick} className={className} disabled={disabled || notAllowed} style={style}>
-    {title && <span className="button-title">{title}</span>}
     {children}
     <style jsx>
       {`
@@ -50,10 +48,6 @@ const Button = ({
           background-color: ${hoverBackground} !important;
           color: ${hoverColor || color};
         }
-
-        .button-title {
-          font-size: ${large ? '14px' : '12px'};
-        }
       `}
     </style>
   </button>

components/Editor.js

@@ -355,9 +355,10 @@ class Editor extends React.Component {
                   padding="0 16px"
                   margin="0 8px 0 0"
                   onClick={this.upload}
-                  title={uploading ? 'Loading...' : 'Tweet'}
                   color="#57b5f9"
-                />
+                >
+                  {uploading ? 'Loading...' : 'Tweet'}
+                </Button>
               )}
               <ExportMenu
                 onChange={this.updateSetting}

components/ExportMenu.js

@@ -22,13 +22,9 @@ const CopyEmbed = withRouter(
     ({ router: { asPath } }) => (
       <CopyButton text={toIFrame(asPath)}>
         {({ copied }) => (
-          <Button
+          <Button center color={COLORS.PURPLE} padding="12px 16px" flex="1 0 68px">
-            center
+            {copied ? 'Copied!' : 'Copy Embed'}
-            title={copied ? 'Copied!' : 'Copy Embed'}
+          </Button>
-            color={COLORS.PURPLE}
-            padding="12px 16px"
-            flex="1 0 68px"
-          />
         )}
       </CopyButton>
     ),
@@ -64,12 +60,13 @@ class ExportMenu extends React.PureComponent {
           <Button
             border
             large
-            title="Export"
             color={COLORS.PURPLE}
             padding="0 16px"
             selected={isVisible}
             onClick={this.toggle}
-          />
+          >
+            Export
+          </Button>
         </div>
         <Popout
           hidden={!isVisible}
@@ -96,36 +93,41 @@ class ExportMenu extends React.PureComponent {
                 <Button
                   center
                   key={name}
-                  title={name}
                   hoverColor={COLORS.PURPLE}
                   margin={i === EXPORT_SIZES.length - 1 ? 0 : '0 10px 0 0'}
                   color={exportSize === name ? COLORS.PURPLE : COLORS.DARK_PURPLE}
                   onClick={this.handleExportSizeChange(name)}
-                />
+                >
+                  {name}
+                </Button>
               ))}
             </div>
           </div>
           <div className="export-row">
-            <Button center title="Open" color={COLORS.PURPLE} onClick={this.handleExport('open')} />
+            <Button center color={COLORS.PURPLE} onClick={this.handleExport('open')}>
+              Open
+            </Button>
             <CopyEmbed />
             <div className="save-container">
               <span>Save as</span>
               <div>
                 <Button
                   center
-                  title="PNG"
                   margin="0 8px 0 0"
                   hoverColor={COLORS.PURPLE}
                   color={COLORS.DARK_PURPLE}
                   onClick={this.handleExport('png')}
-                />
+                >
+                  PNG
+                </Button>
                 <Button
                   center
-                  title="SVG"
                   hoverColor={COLORS.PURPLE}
                   color={COLORS.DARK_PURPLE}
                   onClick={this.handleExport('svg')}
-                />
+                >
+                  SVG
+                </Button>
               </div>
             </div>
           </div>

components/Settings.js

@@ -138,14 +138,12 @@ const resetButtonStyle = { borderTop: `1px solid ${COLORS.SECONDARY}` }
 const MiscSettings = React.memo(({ format, reset }) => {
   return (
     <div className="settings-content">
-      <Button center title="Prettify code" onClick={format} />
+      <Button center onClick={format}>
-      <Button
+        Prettify code
-        center
+      </Button>
-        title="Reset settings"
+      <Button center color={COLORS.RED} onClick={reset} style={resetButtonStyle}>
-        color={COLORS.RED}
+        Reset settings
-        onClick={reset}
+      </Button>
-        style={resetButtonStyle}
-      />
       <style jsx>
         {`
           .settings-content {
@@ -269,7 +267,6 @@ const Presets = React.memo(
           <span>Presets</span>
           {show && (
             <Button
-              title="create +"
               margin="0 0 0 8px"
               flex="0 0 48px"
               color={COLORS.GRAY}
@@ -277,7 +274,9 @@ const Presets = React.memo(
               hoverColor={disabledCreate ? COLORS.GRAY : COLORS.SECONDARY}
               onClick={create}
               notAllowed={disabledCreate}
-            />
+            >
+              create +
+            </Button>
           )}
           <Button center onClick={toggle} style={arrowButtonStyle} hoverBackground={COLORS.BLACK}>
             {show ? <Arrows.Up /> : <Arrows.Down />}