From c85f0553a1f7facc97b6071e9cd3cf9dfe82db05 Mon Sep 17 00:00:00 2001
From: Jake Dexheimer <jakedex@gmail.com>
Date: Sat, 17 Jun 2017 16:11:43 -0700
Subject: [PATCH] Start settings button

---
 components/dropdown.js            |  2 +-
 components/settings.js            | 20 ++++++++++++++++++++
 components/{ => svg}/arrowdown.js |  0
 components/svg/settings.js        |  7 +++++++
 components/toolbar.js             |  6 ++++--
 5 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 components/settings.js
 rename components/{ => svg}/arrowdown.js (100%)
 create mode 100644 components/svg/settings.js

diff --git a/components/dropdown.js b/components/dropdown.js
index 1b70bad..d3c2abf 100644
--- a/components/dropdown.js
+++ b/components/dropdown.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import ArrowDown from './arrowdown'
+import ArrowDown from './svg/arrowdown'
 
 export default class extends React.Component {
   constructor(props) {
diff --git a/components/settings.js b/components/settings.js
new file mode 100644
index 0000000..613801f
--- /dev/null
+++ b/components/settings.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import Settings from './svg/settings'
+
+export default () => (
+  <div className="settings-container">
+    <Settings />
+    <style jsx>{`
+      .settings-container {
+        height: 37px;
+        width: 37px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #000;
+        border: 0.5px solid #333;
+        border-radius: 3px;
+      }
+    `}</style>
+  </div>
+)
diff --git a/components/arrowdown.js b/components/svg/arrowdown.js
similarity index 100%
rename from components/arrowdown.js
rename to components/svg/arrowdown.js
diff --git a/components/svg/settings.js b/components/svg/settings.js
new file mode 100644
index 0000000..bd2d790
--- /dev/null
+++ b/components/svg/settings.js
@@ -0,0 +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="#B4B3AE" fill-rule="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/components/toolbar.js b/components/toolbar.js
index 536580e..b5d11d7 100644
--- a/components/toolbar.js
+++ b/components/toolbar.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import Dropdown from './dropdown'
 import ColorPicker from './colorpicker'
+import Settings from './settings'
 
 const themes = [
   {
@@ -37,8 +38,9 @@ export default class extends React.Component {
         <Dropdown list={themes} />
         <Dropdown list={langauges} />
         <ColorPicker />
-        <div className="settings"></div>
-        <div className="toolbarbtn"><span>Copy Imgur Link</span></div>
+        <Settings />
+        <div className="toolbarbtn copy"><span>Copy Imgur Link</span></div>
+        <div className="toolbarbtn dl"><span>Save Image</span></div>
         <style jsx>{`
           #toolbar {
             width: 100%;