options panel and custom checkbox

src/ui/components/common/Checkbox.css

@@ -0,0 +1,21 @@
+.Checkbox input[type="checkbox"] {
+  display: none;
+}
+
+.CheckboxDisplay {
+  height: 20px;
+  width: 20px;
+
+  border: 2px solid #ebebec;
+  border-radius: 2px;
+}
+
+.CheckboxDisplay:hover {
+  cursor: pointer;
+  border-color: #cecece;
+}
+
+.CheckboxDisplay img {
+  height: 100%;
+  /* filter: invert(78%) sepia(91%) saturate(923%) hue-rotate(334deg) brightness(106%) contrast(102%); */
+}

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>
     )
   }