From 5d70de6202917097837732bd7a7be17b910e4559 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Mon, 9 Jan 2017 21:43:14 +0100
Subject: [PATCH] Center checkbox

---
 src/components/inputs/CheckboxInput.jsx | 76 +++++++++++++------------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/components/inputs/CheckboxInput.jsx b/src/components/inputs/CheckboxInput.jsx
index 38ba19f..c903aa5 100644
--- a/src/components/inputs/CheckboxInput.jsx
+++ b/src/components/inputs/CheckboxInput.jsx
@@ -12,59 +12,61 @@ class CheckboxInput extends React.Component {
 
   render() {
     const styles = {
-			root: {
+      root: {
         ...input.base,
+        lineHeight: 0.7,
         padding: 0,
-				position: 'relative',
+        position: 'relative',
         textAlign: 'center ',
-				cursor: 'pointer'
-			},
-			input: {
-				position: 'absolute',
-				zIndex: -1,
-				opacity: 0
-			},
-			box: {
-				display: 'inline-block',
+        verticalAlign: 'middle',
+        cursor: 'pointer'
+      },
+      input: {
+        position: 'absolute',
+        zIndex: -1,
+        opacity: 0
+      },
+      box: {
+        display: 'inline-block',
         textAlign: 'center ',
         height: 15,
         width: 15,
-				marginRight: margins[1],
-				marginBottom: null,
-				backgroundColor: colors.gray,
-				borderRadius: 2,
-				borderStyle: 'solid',
-				borderWidth: 2,
-				borderColor: colors.gray,
-				transition: 'background-color .1s ease-out'
-			},
-			icon: {
-				display: this.props.value ? null : 'none',
-				width: '75%',
-				height: '75%',
-				marginTop: 1,
-				fill: colors.lowgray
-			}
+        marginRight: margins[1],
+        marginBottom: null,
+        backgroundColor: colors.gray,
+        borderRadius: 2,
+        borderStyle: 'solid',
+        borderWidth: 2,
+        borderColor: colors.gray,
+        transition: 'background-color .1s ease-out'
+      },
+      icon: {
+        display: this.props.value ? null : 'none',
+        width: '75%',
+        height: '75%',
+        marginTop: 1,
+        fill: colors.lowgray
+      }
     }
 
-		return <label style={styles.root}>
+    return <label style={styles.root}>
       <input
-				type="checkbox"
-				style={{
+        type="checkbox"
+        style={{
           ...styles.input,
-					...this.props.style,
-				}}
-				onChange={e => {this.props.onChange(!this.props.value)}}
-				checked={this.props.value}
-			/>
+          ...this.props.style,
+        }}
+        onChange={e => {this.props.onChange(!this.props.value)}}
+        checked={this.props.value}
+      />
       <div style={styles.box}>
         <svg
           viewBox='0 0 32 32'
           style={styles.icon}>
           <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
         </svg>
-		  </div>
-		</label>
+      </div>
+    </label>
   }
 }