From 93ec8dc95298ebd8f6d4946549bc7cab942faff9 Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Sat, 17 Jun 2017 17:35:51 -0700
Subject: [PATCH] isolate button style

---
 components/button.js  | 22 +++++++++++++++++++++-
 components/toolbar.js | 27 +++------------------------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/components/button.js b/components/button.js
index 4692443..298900a 100644
--- a/components/button.js
+++ b/components/button.js
@@ -1,5 +1,25 @@
 import React from 'react'
 
 export default (props) => (
-  <div></div>
+  <div className="toolbar-btn" style={Object.assign({
+    background: props.bg
+  }, props.style)}>
+    <span>{props.title}</span>
+    <style jsx>{`
+      div {
+        height: 37px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 16px;
+        color: #000;
+        border: 0.5px solid #333;
+        border-radius: 3px;
+      }
+      div:last-of-type {
+        border-radius: 0px 3px 3px 0px;
+        border-left: 0px;
+      }
+    `}</style>
+  </div>
 )
diff --git a/components/toolbar.js b/components/toolbar.js
index ff078d8..91e2ad1 100644
--- a/components/toolbar.js
+++ b/components/toolbar.js
@@ -2,6 +2,7 @@ import React from 'react'
 import Dropdown from './dropdown'
 import ColorPicker from './colorpicker'
 import Settings from './settings'
+import Button from './button'
 
 const themes = [
   {
@@ -88,8 +89,8 @@ export default class extends React.Component {
         <Dropdown list={langauges} />
         <ColorPicker />
         <Settings />
-        <div className="toolbar-btn copy"><span>Copy Imgur Link</span></div>
-        <div className="toolbar-btn dl"><span>Save Image</span></div>
+        <Button title="Copy Imgur Link" bg="#84ACFC" style={{ borderRadius: '3px 0px 0px 3px' }}/>
+        <Button title="Save Image" bg="#C3E98D" />
         <style jsx>{`
           #toolbar {
             width: 100%;
@@ -99,28 +100,6 @@ export default class extends React.Component {
             position: relative;
             z-index: 1;
           }
-
-          .toolbar-btn {
-            height: 37px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0 16px;
-            color: #000;
-            border: 0.5px solid #333;
-            border-radius: 3px;
-          }
-
-          .copy {
-            background: #84ACFC;
-            border-radius: 3px 0px 0px 3px;
-          }
-
-          .dl {
-            background: #C3E98D;
-            border-radius: 0px 3px 3px 0px;
-            border-left: 0px;
-          }
         `}</style>
       </div>
     )