options panel and custom checkbox

src/ui/components/common/Checkbox.tsx

@@ -1,9 +1,13 @@
 import React from 'react'
+import checkmark from '../../../resources/icons/check.svg'
+
+import './Checkbox.css'
 
 interface IProps {
   label: string,
   checked: boolean,
   onChange: () => void,
+  id: string
 }
 
 interface IState {
@@ -27,8 +31,12 @@ export default class Checkbox extends React.Component<IProps, IState> {
   render() {
     return (
       <div className="Checkbox">
-        <input type="checkbox" onChange={this.handleChange} />
-        <label>{this.props.label}</label>
+        <input type='checkbox' id={this.props.id} checked={this.state.checked} onChange={this.handleChange} />
+        <label htmlFor={this.props.id}>
+          <div className="CheckboxDisplay">
+            {this.state.checked ? <img src={checkmark} alt='Checkmark' /> : null}
+          </div>
+        </label>
       </div>
     )
   }