From 85b193e1f1abc7ec90692a3ac64607252bec397a Mon Sep 17 00:00:00 2001
From: Jake Dexheimer <jakedex@gmail.com>
Date: Sun, 16 Jul 2017 18:10:10 -0700
Subject: [PATCH] =?UTF-8?q?Make=20pretty=20=F0=9F=91=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Button.js        | 12 +++++-------
 components/Colorpicker.js   |  4 +++-
 components/CopyButton.js    |  8 ++++----
 components/Dropdown.js      | 28 ++++++++++------------------
 components/Footer.js        |  2 +-
 components/Meta.js          |  8 ++++++--
 components/Settings.js      |  4 ++--
 components/Slider.js        |  1 -
 components/ThemeSelect.js   |  1 -
 components/Toggle.js        |  1 -
 components/Toolbar.js       |  2 +-
 components/svg/Arrowdown.js |  2 +-
 components/svg/Checkmark.js |  2 +-
 components/svg/Settings.js  |  4 ++--
 lib/constants.js            |  3 ++-
 pages/index.js              |  2 ++
 16 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/components/Button.js b/components/Button.js
index a3df771..e9144a8 100644
--- a/components/Button.js
+++ b/components/Button.js
@@ -1,8 +1,11 @@
 import React from 'react'
+import { PALETTE } from '../lib/constants'
 
 export default (props) => (
   <div onClick={props.onClick} className="toolbar-btn" style={Object.assign({
-    background: props.bg
+    background: PALETTE.EDITOR_BG,
+    color: props.color,
+    border: `0.5px solid ${props.color}`
   }, props.style)}>
     <span>{props.title}</span>
     <style jsx>{`
@@ -13,13 +16,8 @@ export default (props) => (
         align-items: center;
         justify-content: center;
         padding: 0 16px;
-        color: #000;
-        border: 0.5px solid #000;
         border-radius: 3px;
-      }
-      div:last-of-type {
-        border-radius: 0px 3px 3px 0px;
-        border-left: 0px;
+        user-select: none;
       }
     `}</style>
   </div>
diff --git a/components/Colorpicker.js b/components/Colorpicker.js
index 7ac4e46..23d3006 100644
--- a/components/Colorpicker.js
+++ b/components/Colorpicker.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import enhanceWithClickOutside from 'react-click-outside'
 import { TwitterPicker } from 'react-color'
+import { PALETTE } from '../lib/constants'
 
 class ColorPicker extends React.Component {
   constructor() {
@@ -44,7 +45,7 @@ class ColorPicker extends React.Component {
             display: flex;
             height: 100%;
             width: 72px;
-            border: 0.5px solid #000;
+            border: 0.5px solid ${PALETTE.SECONDARY};
             border-radius: 3px;
           }
 
@@ -56,6 +57,7 @@ class ColorPicker extends React.Component {
             cursor: default;
             height: 100%;
             width: 36px;
+            border-right: 0.5px solid ${PALETTE.SECONDARY};
           }
 
           .bg-color {
diff --git a/components/CopyButton.js b/components/CopyButton.js
index 07b48fb..d1386e5 100644
--- a/components/CopyButton.js
+++ b/components/CopyButton.js
@@ -5,8 +5,8 @@ import Button from './Button'
 import api from '../lib/api'
 
 // constants
-const BUTTON_COLOR = '#84ACFC'
-const BUTTON_STYLE = { borderRadius: '3px 0px 0px 3px' }
+const BUTTON_COLOR = '#F6A623'
+const BUTTON_STYLE = { marginRight: '8px' }
 const DEBOUNCE_DURATION = 10000
 
 const STATUS = {
@@ -84,10 +84,10 @@ class CopyButton extends React.Component {
     return (
       <div >
         { this.state.link ? <input id="linkTarget" type="hidden" value="https://github.com/zenorocha/clipboard.js.git" /> : null }
-        <Button onClick={this.handleClick} title={textMap[this.state.status]} bg={BUTTON_COLOR} style={BUTTON_STYLE}/>
+        <Button onClick={this.handleClick} title={textMap[this.state.status]} color={BUTTON_COLOR} style={BUTTON_STYLE} />
       </div>
     )
   }
 }
 
-export default CopyButton
\ No newline at end of file
+export default CopyButton
diff --git a/components/Dropdown.js b/components/Dropdown.js
index d114f9c..d3233c9 100644
--- a/components/Dropdown.js
+++ b/components/Dropdown.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import enhanceWithClickOutside from 'react-click-outside'
 import ArrowDown from './svg/Arrowdown'
+import Checkmark from './svg/Checkmark'
 import { PALETTE } from '../lib/constants'
 
 class Dropdown extends React.Component {
@@ -31,27 +32,18 @@ class Dropdown extends React.Component {
 
   renderListItems() {
     return this.props.list.map((item, i) => (
-      <div className={`dropdown-list-item ${this.state.selected === item ? "selected" : ""}`} key={i} onClick={this.select.bind(null, item)}>
+      <div className="dropdown-list-item" key={i} onClick={this.select.bind(null, item)}>
         <span>{ item.name }</span>
+        { this.state.selected === item ? <Checkmark /> : null }
         <style jsx>{`
           .dropdown-list-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
             background: ${PALETTE.EDITOR_BG};
             user-select: none;
             padding: 8px 16px;
-            border-bottom: 0.5px solid #000;
-          }
-
-          .selected {
-            background: #506874;
-            color: #fff;
-          }
-
-          .selected:hover {
-            background: #506874 !important;
-          }
-
-          .dropdown-list-item:hover {
-            background: #222;
+            border-bottom: 0.5px solid ${PALETTE.SECONDARY};
           }
 
           .dropdown-list-item:last-of-type {
@@ -98,7 +90,7 @@ class Dropdown extends React.Component {
 
           .dropdown-display {
             height: 100%;
-            border: 1px solid #000;
+            border: 1px solid ${PALETTE.SECONDARY};
             border-radius: 3px;
             user-select: none;
             padding: 8px 16px;
@@ -119,8 +111,8 @@ class Dropdown extends React.Component {
 
           .dropdown-list {
             display: none;
-            margin-top: -2px;
-            border: 0.5px solid #000;
+            margin-top: -1px;
+            border: 0.5px solid ${PALETTE.SECONDARY};
             border-radius: 0px 0px 3px 3px;
             max-height: 350px;
             overflow-y: scroll;
diff --git a/components/Footer.js b/components/Footer.js
index 67e3d42..743ff2d 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -7,7 +7,7 @@ const Footer = (props) => (
       div {
         font-size: 14px;
         margin: 32px 0;
-        color: #506874;
+        color: rgba(255, 255, 255, 0.5);
       }
       a {
         color: #C694E8;
diff --git a/components/Meta.js b/components/Meta.js
index 307e893..d0752b6 100644
--- a/components/Meta.js
+++ b/components/Meta.js
@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import { THEMES } from '../lib/constants'
+import { THEMES, PALETTE } from '../lib/constants'
 
 export default () => (
   <div className="meta">
@@ -23,7 +23,7 @@ export default () => (
     `}</style>
     <style jsx global>{`
       body {
-        font-family: Hack, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
         background: #000;
       }
 
@@ -48,6 +48,10 @@ export default () => (
         margin-right: 0px;
       }
 
+      .settings-settings > div {
+        border-bottom: solid 1px ${PALETTE.SECONDARY};
+      }
+
       .selected svg {
         border-radius: 3px;
         border: solid 2px #fff;
diff --git a/components/Settings.js b/components/Settings.js
index 849aca3..a038883 100644
--- a/components/Settings.js
+++ b/components/Settings.js
@@ -61,7 +61,7 @@ class Settings extends React.Component {
             display: flex;
             justify-content: center;
             align-items: center;
-            border: 0.5px solid #000;
+            border: 0.5px solid ${PALETTE.SECONDARY};
             border-radius: 3px;
             user-select: none;
             position: relative;
@@ -82,7 +82,7 @@ class Settings extends React.Component {
             position: absolute;
             top: 48px;
             left: 0;
-            border: 0.5px solid #000;
+            border: 0.5px solid ${PALETTE.SECONDARY};
             width: 184px;
             border-radius: 3px;
             background: ${PALETTE.EDITOR_BG};
diff --git a/components/Slider.js b/components/Slider.js
index 733ad86..2644344 100644
--- a/components/Slider.js
+++ b/components/Slider.js
@@ -27,7 +27,6 @@ export default class extends React.Component {
             position: relative;
             height: 32px;
             overflow: hidden;
-            border-bottom: solid 1px #000;
           }
 
           .slider:last-of-type {
diff --git a/components/ThemeSelect.js b/components/ThemeSelect.js
index 5a4b054..cf1b9ac 100644
--- a/components/ThemeSelect.js
+++ b/components/ThemeSelect.js
@@ -45,7 +45,6 @@ export default class extends React.Component {
         <style jsx>{`
           .window-theme {
             padding: 8px;
-            border-bottom: solid 1px #000;
           }
 
           .window-theme span {
diff --git a/components/Toggle.js b/components/Toggle.js
index 4066989..8bed52e 100644
--- a/components/Toggle.js
+++ b/components/Toggle.js
@@ -27,7 +27,6 @@ export default class extends React.Component {
             cursor: pointer;
             user-select: none;
             padding: 8px;
-            border-bottom: solid 1px #000;
           }
         `}</style>
       </div>
diff --git a/components/Toolbar.js b/components/Toolbar.js
index aff3c46..f66416e 100644
--- a/components/Toolbar.js
+++ b/components/Toolbar.js
@@ -17,7 +17,7 @@ const Toolbar = (props) => (
     <Settings onChange={props.onSettingsChange} enabled={props.enabled} />
     <div className="buttons">
       <CopyButton />
-      <Button onClick={props.save} title="Save Image" bg="#C3E98D" />
+      <Button onClick={props.save} title="Save Image" color="#84ACFC" />
     </div>
     <style jsx>{`
       #toolbar {
diff --git a/components/svg/Arrowdown.js b/components/svg/Arrowdown.js
index 75f3ef0..0925367 100644
--- a/components/svg/Arrowdown.js
+++ b/components/svg/Arrowdown.js
@@ -2,6 +2,6 @@ import React from 'react'
 
 export default () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
-    <path fill="#506874" 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)"/>
+    <path fill="#fff" 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)"/>
   </svg>
 )
diff --git a/components/svg/Checkmark.js b/components/svg/Checkmark.js
index 3a21a3a..adad7af 100644
--- a/components/svg/Checkmark.js
+++ b/components/svg/Checkmark.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="9" height="7" viewBox="0 0 9 7">
+  <svg xmlns="http://www.w3.org/2000/svg" width="9" height="8" viewBox="0 0 9 7">
     <polygon fill="#FFFFFF" fillRule="evenodd" points="2.852 5.016 8.275 0 9 .67 2.852 6.344 0 3.711 .713 3.042"/>
   </svg>
 )
diff --git a/components/svg/Settings.js b/components/svg/Settings.js
index c4632c5..18ed58d 100644
--- a/components/svg/Settings.js
+++ b/components/svg/Settings.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-    <path fill="#4F6875" fillRule="evenodd" d="M206.532032,366.702224 L208.523318,368.142728 C208.69279,368.3122 208.721035,368.509915 208.608053,368.735877 L206.786238,371.74399 C206.673257,371.969953 206.503788,372.040565 206.277825,371.955829 L203.989964,371.066106 C203.283831,371.546276 202.775423,371.842848 202.464724,371.955829 L202.125782,374.286058 C202.069291,374.51202 201.913944,374.625 201.659736,374.625 L198.058474,374.625 C197.804266,374.625 197.648919,374.51202 197.592428,374.286058 L197.253486,371.955829 C196.829806,371.786357 196.321398,371.489786 195.728246,371.066106 L193.440385,371.955829 C193.214422,372.068811 193.044953,371.998198 192.931972,371.74399 L191.110157,368.735877 C190.96893,368.481669 190.997175,368.283955 191.194892,368.142728 L193.101443,366.702224 C193.101443,366.617488 193.094382,366.476263 193.080259,366.278546 C193.066136,366.080828 193.059075,365.925481 193.059075,365.8125 C193.059075,365.699519 193.066136,365.544172 193.080259,365.346454 C193.094382,365.148737 193.101443,365.007512 193.101443,364.922776 L191.152525,363.482272 C190.983053,363.3128 190.954808,363.115085 191.067789,362.889123 L192.889604,359.88101 C193.002585,359.655047 193.172055,359.584435 193.398017,359.669171 L195.685878,360.558894 C196.392011,360.078724 196.90042,359.782152 197.211118,359.669171 L197.550061,357.338942 C197.606551,357.11298 197.761898,357 198.016106,357 L201.617368,357 C201.871576,357 202.026923,357.11298 202.083414,357.338942 L202.379988,359.669171 C202.803668,359.838643 203.312077,360.135214 203.905229,360.558894 L206.150722,359.669171 C206.376684,359.556189 206.560276,359.626802 206.701503,359.88101 L208.523318,362.889123 C208.664544,363.143331 208.6363,363.341045 208.438582,363.482272 L206.532032,364.922776 C206.532032,365.007512 206.539093,365.148737 206.553216,365.346454 C206.567338,365.544172 206.5744,365.699519 206.5744,365.8125 C206.5744,366.23618 206.560277,366.532752 206.532032,366.702224 Z M199.795553,368.905349 C200.671159,368.905349 201.419649,368.608777 202.041046,368.015625 C202.662443,367.422473 202.973138,366.688105 202.973138,365.8125 C202.973138,364.936895 202.662443,364.202527 202.041046,363.609375 C201.419649,363.016223 200.671159,362.719651 199.795553,362.719651 C198.919948,362.719651 198.178519,363.016223 197.571244,363.609375 C196.96397,364.202527 196.660337,364.936895 196.660337,365.8125 C196.660337,366.688105 196.96397,367.422473 197.571244,368.015625 C198.178519,368.608777 198.919948,368.905349 199.795553,368.905349 Z" transform="translate(-191 -357)"/>
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 18 18">
+    <path fill="#fff" fillRule="evenodd" d="M206.532032,366.702224 L208.523318,368.142728 C208.69279,368.3122 208.721035,368.509915 208.608053,368.735877 L206.786238,371.74399 C206.673257,371.969953 206.503788,372.040565 206.277825,371.955829 L203.989964,371.066106 C203.283831,371.546276 202.775423,371.842848 202.464724,371.955829 L202.125782,374.286058 C202.069291,374.51202 201.913944,374.625 201.659736,374.625 L198.058474,374.625 C197.804266,374.625 197.648919,374.51202 197.592428,374.286058 L197.253486,371.955829 C196.829806,371.786357 196.321398,371.489786 195.728246,371.066106 L193.440385,371.955829 C193.214422,372.068811 193.044953,371.998198 192.931972,371.74399 L191.110157,368.735877 C190.96893,368.481669 190.997175,368.283955 191.194892,368.142728 L193.101443,366.702224 C193.101443,366.617488 193.094382,366.476263 193.080259,366.278546 C193.066136,366.080828 193.059075,365.925481 193.059075,365.8125 C193.059075,365.699519 193.066136,365.544172 193.080259,365.346454 C193.094382,365.148737 193.101443,365.007512 193.101443,364.922776 L191.152525,363.482272 C190.983053,363.3128 190.954808,363.115085 191.067789,362.889123 L192.889604,359.88101 C193.002585,359.655047 193.172055,359.584435 193.398017,359.669171 L195.685878,360.558894 C196.392011,360.078724 196.90042,359.782152 197.211118,359.669171 L197.550061,357.338942 C197.606551,357.11298 197.761898,357 198.016106,357 L201.617368,357 C201.871576,357 202.026923,357.11298 202.083414,357.338942 L202.379988,359.669171 C202.803668,359.838643 203.312077,360.135214 203.905229,360.558894 L206.150722,359.669171 C206.376684,359.556189 206.560276,359.626802 206.701503,359.88101 L208.523318,362.889123 C208.664544,363.143331 208.6363,363.341045 208.438582,363.482272 L206.532032,364.922776 C206.532032,365.007512 206.539093,365.148737 206.553216,365.346454 C206.567338,365.544172 206.5744,365.699519 206.5744,365.8125 C206.5744,366.23618 206.560277,366.532752 206.532032,366.702224 Z M199.795553,368.905349 C200.671159,368.905349 201.419649,368.608777 202.041046,368.015625 C202.662443,367.422473 202.973138,366.688105 202.973138,365.8125 C202.973138,364.936895 202.662443,364.202527 202.041046,363.609375 C201.419649,363.016223 200.671159,362.719651 199.795553,362.719651 C198.919948,362.719651 198.178519,363.016223 197.571244,363.609375 C196.96397,364.202527 196.660337,364.936895 196.660337,365.8125 C196.660337,366.688105 196.96397,367.422473 197.571244,368.015625 C198.178519,368.608777 198.919948,368.905349 199.795553,368.905349 Z" transform="translate(-191 -357)"/>
   </svg>
 )
diff --git a/lib/constants.js b/lib/constants.js
index ce01aee..42a47a3 100644
--- a/lib/constants.js
+++ b/lib/constants.js
@@ -230,7 +230,8 @@ export const LANGUAGES = [
 ]
 
 export const PALETTE = {
-  'EDITOR_BG': '#1A1A1A'
+  EDITOR_BG: '#1A1A1A',
+  SECONDARY: '#fff'
 }
 
 export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
diff --git a/pages/index.js b/pages/index.js
index c06ba29..4851193 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -101,6 +101,8 @@ class Index extends React.Component {
 
             #editor {
               background: ${PALETTE.EDITOR_BG};
+              border: 3px solid ${PALETTE.SECONDARY};
+              border-radius: 8px;
               padding: 16px;
             }
           `}