From ad570aa798fae952b9f996c8681270693fe4da38 Mon Sep 17 00:00:00 2001
From: Martin Ashby <martin@martin-laptop.lan>
Date: Fri, 18 May 2018 11:15:19 +0100
Subject: Styled everything a bit nicer

---
 src/Toolkit.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

(limited to 'src/Toolkit.js')

diff --git a/src/Toolkit.js b/src/Toolkit.js
index 35d8759..b12f418 100644
--- a/src/Toolkit.js
+++ b/src/Toolkit.js
@@ -4,11 +4,11 @@ import './fontawesome-all.min.js'
 class ToolKitItem extends Component {
   render() {
     let iconClass = this.props.tool.icon + " fa-2x" 
-    var divClass = "toolkititem"
+    let style = styles.toolkititem
     if (this.props.selected) {
-      divClass += " selected"
+      style = Object.assign({}, style, styles.selected)
     }
-    return <div className={divClass}
+    return <div style={style}
         onClick={() => this.props.onSelectTool(this.props.tool)}>
         <i className={iconClass}></i>
       </div>
@@ -24,8 +24,20 @@ export default class Toolkit extends Component {
         selected={tool === this.props.selectedTool}
         onSelectTool={this.props.onSelectTool}/>
     })
-    return <div className="toolkit">
+    return <div style={styles.toolkit}>
       {toolComponents}
     </div>
   }
 }
+
+const styles = {
+  toolkit: {
+    background: "grey"
+  },
+  toolkititem: {
+    padding: "5px",
+  },
+  selected: {
+    background: "lightcoral"
+  }
+}
\ No newline at end of file
-- 
cgit v1.2.3-ZIG