Improve checkbox

website/src/Auth/Login.js

@@ -39,7 +39,7 @@ export class Login extends React.Component {
     reactAutoBind(this)
     this.state = {
       waitModal: false,
-      messageModal: { icon: 'hold', message: 'Wait there just a second', detail: 'This is just a test' },
+      messageModal: null,
       binder: new FormBinder({}, Login.bindings)
     }
   }

website/src/ui/Checkbox.js

@@ -10,7 +10,7 @@ class Checkbox extends Component {
     value: PropTypes.bool,
     label: PropTypes.string,
     visible: PropTypes.bool,
-    // disabled: PropTypes.bool,
+    disabled: PropTypes.bool,
     name: PropTypes.string,
   }
 
@@ -27,27 +27,26 @@ class Checkbox extends Component {
   }
 
   render() {
-    const { visible, name, label } = this.props
+    const { visible, name, label, disabled } = this.props
+    const { checked } = this.state
 
     return (
       <div style={[!visible && { display: 'none' }]}>
-        <div style={[style.checkbox, !this.state.checked && style.checkboxUnchecked]} onClick={this.onClick}>
+        <div style={[style.checkbox, disabled ? style.checkboxDisabled : !checked ? style.checkboxUnchecked : null]}
-          <div style={[style.checkmark, !this.state.checked && style.checkmarkUnchecked]} />
+          onClick={disabled ? null : this.onClick}>
+          <input id={name} type='checkbox' style={style.input} disabled={disabled} />
+          <div style={[style.checkmark, !checked && style.checkmarkUnchecked]} />
         </div>
-        { /* TODO: Move this into .style.js */ }
+        <label
-        { /* TODO: Implement disabled */ }
+          htmlFor={name}
-        { /* TODO: Add checkbox input element back in */ }
+          style={[style.label, {
-        { /* TODO: Use an actual label element with a for (shortid) */ }
-        <span name={name}
-          style={{
             verticalAlign: 'top',
             fontSize: fontInfo.size.medium,
             fontFamily: fontInfo.family,
-            color: fontInfo.color.normal,
+            color: disabled ? fontInfo.color.dimmed : fontInfo.color.normal,
-            marginLeft: 10
+          }]}>
-          }}>
           {label}
-        </span>
+        </label>
       </div>
     )
   }

website/src/ui/Checkbox.style.js

@@ -1,22 +1,35 @@
-import { colorInfo } from './style'
+import { colorInfo, sizeInfo } from './style'
 
 export default {
   checkbox: {
+    position: 'relative',
     display: 'inline-block',
     cursor: 'pointer',
-    position: 'relative',
     backgroundColor: colorInfo.buttonBackground,
-    height: 25,
+    height: sizeInfo.checkboxSize,
-    width: 25,
+    width: sizeInfo.checkboxSize,
+    ':hover': {
+      backgroundColor: colorInfo.buttonBackgroundHover
+    }
+  },
+
+  input: {
+    position: 'absolute',
+    opacity: 0,
+    cursor: 'pointer',
   },
 
   checkboxUnchecked: {
-    backgroundColor: '#E0E0E0',
+    backgroundColor: colorInfo.uncheckedCheckbox,
     ':hover': {
-      backgroundColor: '#C0C0C0'
+      backgroundColor: colorInfo.uncheckedCheckboxHover,
     }
   },
 
+  checkboxDisabled: {
+    backgroundColor: colorInfo.disabledButtonBackground,
+  },
+
   checkmark: {
     position: 'absolute',
     content: '',
@@ -27,10 +40,14 @@ export default {
     borderStyle: 'solid',
     borderColor: '#FFFFFF',
     borderWidth: '0 3px 3px 0',
-    transform: 'rotate(45deg)'
+    transform: 'rotate(45deg)',
   },
 
   checkmarkUnchecked: {
     display: 'none'
   },
+
+  label: {
+    marginLeft: 10,
+  }
 }

website/src/ui/Text.js

@@ -21,7 +21,7 @@ class Text extends Component {
   }
 
   render() {
-    const { margin, width, align } = this.props
+    const { margin, width, align, children } = this.props
 
     return (
       <span style={{
@@ -32,7 +32,7 @@ class Text extends Component {
         textAlign: align,
         margin,
         width,
-      }}>{this.props.children}</span>
+      }}>{children}</span>
     )
   }
 }

website/src/ui/style.js

@@ -6,8 +6,10 @@ export const colorInfo = {
   buttonBackgroundHover: '#3CB0FD',
   headerButtonBackground: '#FAFAFA',
   headerButtonBackgroundHover: '#DADADA',
-  disabledButtonBackground: '#A0A0A0',
+  disabledButtonBackground: '#E0E0E0',
   modalBackground: '#FFFFFF',
+  uncheckedCheckbox: '#A0A0A0',
+  uncheckedCheckboxHover: '#808080',
 }
 
 export const sizeInfo = {
@@ -17,6 +19,7 @@ export const sizeInfo = {
   headerBorderWidth: 1,
   buttonHeight: 40,
   minButtonWidth: 100,
+  checkboxSize: 25,
 }
 
 export const fontInfo = {