Merge branch 'svg-backup'

components/Dropdown.js

@@ -4,10 +4,10 @@ import ArrowDown from './svg/Arrowdown'
 import CheckMark from './svg/Checkmark'
 import { COLORS } from '../lib/constants'
 
-const Dropdown = ({ list, selected, onChange }) => {
+const Dropdown = ({ button, color, list, selected, onChange }) => {
   return (
     <Downshift
-      render={renderDropdown(list)}
+      render={renderDropdown({ button, color, list, selected })}
       selectedItem={selected}
       defaultHighlightedIndex={list.findIndex(it => it === selected)}
       itemToString={item => item.name}
@@ -27,7 +27,7 @@ const reduceState = list => (state, changes) => {
   }
 }
 
-const renderDropdown = list => ({
+const renderDropdown = ({ button, color, list, selected }) => ({
   isOpen,
   highlightedIndex,
   setHighlightedIndex,
@@ -39,15 +39,19 @@ const renderDropdown = list => ({
   getItemProps
 }) => {
   return (
-    <DropdownContainer {...getRootProps({ refKey: 'innerRef' })} minWidth={minWidth(list)}>
+    <DropdownContainer
-      <SelectedItem {...getButtonProps()} {...getInputProps()} isOpen={isOpen}>
+      {...getRootProps({ refKey: 'innerRef' })}
+      minWidth={minWidth(button, selected, list)}
+    >
+      <SelectedItem {...getButtonProps()} {...getInputProps()} isOpen={isOpen} color={color}>
         {selectedItem.name}
       </SelectedItem>
       {isOpen ? (
-        <ListItems>
+        <ListItems color={color}>
           {list.map((item, index) => (
             <ListItem
               key={index}
+              color={color}
               {...getItemProps({
                 item,
                 isSelected: selectedItem === item,
@@ -77,19 +81,21 @@ const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
   )
 }
 
-const SelectedItem = ({ children, isOpen, ...rest }) => {
+const SelectedItem = ({ children, isOpen, color, ...rest }) => {
+  const itemColor = color || COLORS.SECONDARY
+
   return (
     <span {...rest} tabIndex="0" className="dropdown-display">
       <span className="dropdown-display-text">{children}</span>
       <div className={`dropdown-arrow ${isOpen ? 'is-reverse' : ''}`}>
-        <ArrowDown />
+        <ArrowDown fill={itemColor} />
       </div>
       <style jsx>{`
         .dropdown-display {
           display: flex;
           align-items: center;
           height: 100%;
-          border: 1px solid ${COLORS.SECONDARY};
+          border: 1px solid ${itemColor};
           border-radius: 3px;
           padding: 8px 16px;
           outline: none;
@@ -99,6 +105,7 @@ const SelectedItem = ({ children, isOpen, ...rest }) => {
         }
         .dropdown-display-text {
           flex-grow: 1;
+          color: ${itemColor};
         }
         .dropdown-arrow.is-reverse {
           transform: rotate(180deg);
@@ -108,14 +115,14 @@ const SelectedItem = ({ children, isOpen, ...rest }) => {
   )
 }
 
-const ListItems = ({ children }) => {
+const ListItems = ({ children, color }) => {
   return (
     <ul className="dropdown-list">
       {children}
       <style jsx>{`
         .dropdown-list {
           margin-top: -1px;
-          border: 1px solid ${COLORS.SECONDARY};
+          border: 1px solid ${color || COLORS.SECONDARY};
           border-radius: 0 0 3px 3px;
           max-height: 350px;
           overflow-y: scroll;
@@ -125,7 +132,9 @@ const ListItems = ({ children }) => {
   )
 }
 
-const ListItem = ({ children, isHighlighted, isSelected, ...rest }) => {
+const ListItem = ({ children, color, isHighlighted, isSelected, ...rest }) => {
+  const itemColor = color || COLORS.SECONDARY
+
   return (
     <li {...rest} className="dropdown-list-item">
       <span className="dropdown-list-item-text">{children}</span>
@@ -136,22 +145,25 @@ const ListItem = ({ children, isHighlighted, isSelected, ...rest }) => {
           align-items: center;
           background: ${isHighlighted ? COLORS.HOVER : COLORS.BLACK};
           padding: 8px 16px;
-          border-bottom: 1px solid ${COLORS.SECONDARY};
+          border-bottom: 1px solid ${itemColor};
         }
         .dropdown-list-item:hover {
           background: ${COLORS.HOVER};
         }
         .dropdown-list-item-text {
           flex-grow: 1;
+          color: ${itemColor};
         }
       `}</style>
     </li>
   )
 }
 
-function minWidth(list) {
+function minWidth(isButton, selected, list) {
-  return list.reduce((max, { name }) => {
+  const items = isButton ? [...list, selected] : list
-    const wordSize = name.length * 12
+
+  return items.reduce((max, { name }) => {
+    const wordSize = name.length * 10 + 32
     return wordSize > max ? wordSize : max
   }, 0)
 }

components/style/Font.js

@@ -2,43 +2,28 @@ export default () => (
   <style jsx global>{`
     @font-face {
       font-family: 'Iosevka';
-      src: url('//cdn.jsdelivr.net/npm/@typopro/web-iosevka@3.7.5/TypoPRO-iosevka-term-bold.eot');
+      src: url('//cdn.jsdelivr.net/npm/@typopro/web-iosevka@3.7.5/TypoPRO-iosevka-term-bold.woff')
-      src: url('//cdn.jsdelivr.net/npm/@typopro/web-iosevka@3.7.5/TypoPRO-iosevka-term-bold.eot')
+        format('woff');
-          format('embedded-opentype'),
-        url('//cdn.jsdelivr.net/npm/@typopro/web-iosevka@3.7.5/TypoPRO-iosevka-term-bold.woff')
-          format('woff'),
-        url('//cdn.jsdelivr.net/npm/@typopro/web-iosevka@3.7.5/TypoPRO-iosevka-term-bold.ttf')
-          format('truetype');
       font-weight: 400;
       font-style: normal;
     }
 
     @font-face {
       font-family: 'Hack';
-      src: url('//cdn.jsdelivr.net/font-hack/2.020/fonts/eot/hack-regular-webfont.eot?v=2.020');
+      src: url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff2/hack-regular-webfont.woff2?v=2.020')
-      src: url('//cdn.jsdelivr.net/font-hack/2.020/fonts/eot/hack-regular-webfont.eot?#iefix&v=2.020')
-          format('embedded-opentype'),
-        url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff2/hack-regular-webfont.woff2?v=2.020')
           format('woff2'),
         url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff/hack-regular-webfont.woff?v=2.020')
-          format('woff'),
+          format('woff');
-        url('//cdn.jsdelivr.net/font-hack/2.020/fonts/web-ttf/hack-regular-webfont.ttf?v=2.020')
-          format('truetype');
       font-weight: 400;
       font-style: normal;
     }
 
     @font-face {
       font-family: 'Fira Code';
-      src: url('//cdn.rawgit.com/tonsky/FiraCode/1.204/distr/eot/FiraCode-Regular.eot');
+      src: url('//cdn.rawgit.com/tonsky/FiraCode/1.204/distr/woff2/FiraCode-Regular.woff2')
-      src: url('//cdn.rawgit.com/tonsky/FiraCode/1.204/distr/eot/FiraCode-Regular.eot')
-          format('embedded-opentype'),
-        url('//cdn.rawgit.com/tonsky/FiraCode/1.204/distr/woff2/FiraCode-Regular.woff2')
           format('woff2'),
         url('//cdn.rawgit.com/tonsky/FiraCode/1.204/distr/woff/FiraCode-Regular.woff')
-          format('woff'),
+          format('woff');
-        url('//cdn.rawgit.com/tonsky/FiraCode/1.204/distr/ttf/FiraCode-Regular.ttf')
-          format('truetype');
       font-weight: 400;
       font-style: normal;
     }

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

@@ -68,7 +68,6 @@ class Editor extends React.Component {
         ...DEFAULT_SETTINGS,
         uploading: false,
         code: props.content,
-        saveAs: 'png',
         _initialState: this.props.initialState
       },
       this.props.initialState
@@ -138,7 +137,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()
@@ -199,16 +198,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>