Add button dropdown

components/Dropdown.js

@@ -41,7 +41,11 @@ class Dropdown extends React.Component {
             background: ${COLORS.BLACK};
             user-select: none;
             padding: 8px 16px;
-            border-bottom: 1px solid ${COLORS.SECONDARY};
+            border-bottom: 1px solid ${this.props.color || COLORS.SECONDARY};
+          }
+
+          .dropdown-list-item span {
+            color: ${this.props.color || '#fff'};
           }
 
           .dropdown-list-item:hover {
@@ -58,8 +62,11 @@ class Dropdown extends React.Component {
   }
 
   render() {
+    const color = this.props.color || COLORS.SECONDARY
+
     // find longest list value in number of characters
-    const MIN_WIDTH = this.props.list.reduce(
+    const list = this.props.button ? [...this.props.list, this.props.selected] : this.props.list
+    const MIN_WIDTH = list.reduce(
       (max, { name }) => (name && name.length > max ? name.length : max),
       0
     )
@@ -67,13 +74,13 @@ class Dropdown extends React.Component {
     return (
       <div
         className="dropdown-container"
-        style={{ minWidth: MIN_WIDTH * 14 }}
+        style={{ minWidth: MIN_WIDTH * 10 + 32 }}
         onClick={this.toggle}
       >
         <div className={`dropdown-display ${this.state.isVisible ? 'is-visible' : ''}`}>
           <span style={{ minWidth: '4rem' }}>{this.props.selected.name}</span>
           <div className="arrow-down">
-            <ArrowDown />
+            <ArrowDown fill={color} />
           </div>
         </div>
         <div className="dropdown-list">{this.renderListItems()}</div>
@@ -98,7 +105,7 @@ class Dropdown extends React.Component {
 
           .dropdown-display {
             height: 100%;
-            border: 1px solid ${COLORS.SECONDARY};
+            border: 1px solid ${color};
             border-radius: 3px;
             user-select: none;
             padding: 8px 16px;
@@ -109,6 +116,10 @@ class Dropdown extends React.Component {
             z-index: 1;
           }
 
+          .dropdown-display span {
+            color: ${color};
+          }
+
           .dropdown-display:hover {
             background: ${COLORS.HOVER};
           }
@@ -120,7 +131,7 @@ class Dropdown extends React.Component {
           .dropdown-list {
             display: none;
             margin-top: -1px;
-            border: 1px solid ${COLORS.SECONDARY};
+            border: 1px solid ${color};
             border-radius: 0px 0px 3px 3px;
             max-height: 350px;
             overflow-y: scroll;

components/svg/Arrowdown.js

@@ -1,9 +1,9 @@
 import React from 'react'
 
-export default () => (
+export default ({ fill }) => (
   <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
     <path
-      fill="#fff"
+      fill={fill}
       fillRule="evenodd"
       d="M93.7890633,17.6396882 L97.4926052,14.0851393 C97.6061243,13.9716202 97.7196417,13.9716202 97.8331608,14.0851393 L98.4929872,14.723681 C98.6065063,14.8372001 98.6065063,14.9507175 98.4929872,15.0642366 L93.9593411,19.4063203 C93.9167714,19.4488899 93.8600127,19.4701744 93.7890633,19.4701744 C93.7181138,19.4701744 93.6613552,19.4488899 93.6187855,19.4063203 L89.0851393,15.0642366 C88.9716202,14.9507175 88.9716202,14.8372001 89.0851393,14.723681 L89.7449658,14.0851393 C89.8584849,13.9716202 89.9720022,13.9716202 90.0855213,14.0851393 L93.7890633,17.6396882 Z"
       transform="translate(-89 -14)"

pages/editor.js

@@ -76,7 +76,6 @@ class Editor extends React.Component {
         paddingHorizontal: '32px',
         uploading: false,
         code: props.content,
-        saveAs: 'png',
         _initialState: this.props.initialState
       },
       this.props.initialState
@@ -136,7 +135,7 @@ class Editor extends React.Component {
   save({ format } = { format: 'png' }) {
     this.getCarbonImage({ format }).then(dataUrl => {
       const link = document.createElement('a')
-      link.download = 'carbon.' + format
+      link.download = `carbon.${format}`
       link.href = dataUrl
       document.body.appendChild(link)
       link.click()
@@ -191,16 +190,12 @@ class Editor extends React.Component {
                 color="#57b5f9"
                 style={{ marginRight: '8px' }}
               />
-              <Button
-                onClick={e => this.save({ format: this.state.saveAs })}
-                title="Save Image"
-                color="#c198fb"
-                style={{ marginRight: '8px' }}
-              />
               <Dropdown
-                selected={{ id: this.state.saveAs, name: `(${this.state.saveAs.toUpperCase()})` }}
+                button
+                color="#c198fb"
+                selected={{ id: 'SAVE_IMAGE', name: 'Save Image' }}
                 list={['png', 'svg'].map(id => ({ id, name: id.toUpperCase() }))}
-                onChange={saveAs => this.setState({ saveAs: saveAs.id })}
+                onChange={saveAs => this.save({ format: saveAs.id })}
               />
             </div>
           </Toolbar>