Custom checkbox

src/components/ConfigurationItem/ConfigurationItem.js

@@ -36,10 +36,15 @@ export default connect(null, mapDispatchToProps)(props => {
   let data;
   switch (props.template.type) {
     case "bool":
-      data = <input checked={JSON.parse(props.value)}
-                    disabled={props.readOnly}
-                    onChange={e=>handleChanged(e)}
-                    type={'checkbox'}/>;
+      data = (
+        <label className='CheckBoxOwner'>
+          <input checked={JSON.parse(props.value)}
+                 disabled={props.readOnly}
+                 onChange={e=>handleChanged(e)}
+                 type='checkbox'/>
+          <span className='CheckMark'/>
+        </label>
+      );
     break;
 
     case "double":

src/components/MountItem/MountItem.js

@@ -125,9 +125,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
               colSpan={28}
               row={secondRow}
               rowSpan={7}>
-      <input checked={props.PState.AutoMount}
-             onChange={handleAutoMountChanged}
-             type='checkbox'/>Auto-mount
+      <label className='CheckBoxOwner'>Auto-mount
+        <input checked={props.PState.AutoMount}
+               id={'checkbox_am_' + props.provider}
+               onChange={handleAutoMountChanged}
+               type='checkbox'/>
+        <span className='CheckMark'/>
+      </label>
     </RootElem>
   );
 
@@ -136,9 +140,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
               colSpan={24}
               row={secondRow}
               rowSpan={7}>
-      <input checked={props.PState.AutoRestart}
-             onChange={handleAutoRestartChanged}
-             type='checkbox'/>Restart
+      <label className='CheckBoxOwner'>Restart
+        <input checked={props.PState.AutoRestart}
+               id={'checkbox_ar_' + props.provider}
+               onChange={handleAutoRestartChanged}
+               type='checkbox'/>
+        <span className='CheckMark'/>
+      </label>
     </RootElem>
   );
 

src/css/checkbox.css

@@ -0,0 +1,68 @@
+/* Customize the label (the container) */
+label.CheckBoxOwner {
+	position: relative;
+	padding-left: 24px;
+	cursor: pointer;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+/* Hide the browser's default checkbox */
+label.CheckBoxOwner input[type=checkbox] {
+	position: absolute;
+	opacity: 0;
+	cursor: pointer;
+	height: 0;
+	width: 0;
+}
+
+/* Create a custom checkbox */
+.CheckMark {
+	display: block;
+	margin: 0;
+	border-radius: var(--border_radius);
+	background-color: var(--control_background);
+	box-sizing: border-box;
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 20px;
+	width: 20px;
+}
+
+/* On mouse-over, add a grey background color */
+label.CheckBoxOwner:hover input[type=checkbox] ~ .CheckMark {
+	background-color: var(--control_background_hover);
+}
+
+/* When the checkbox is checked, add a blue background */
+label.CheckBoxOwner input:checked ~ .CheckMark {
+	background-color: var(--control_background);
+}
+
+/* Create the CheckMark/indicator (hidden when not checked) */
+.CheckMark:after {
+	content: "";
+	position: absolute;
+	display: none;
+}
+
+/* Show the CheckMark when checked */
+label.CheckBoxOwner input:checked ~ .CheckMark:after {
+	display: block;
+}
+
+/* Style the CheckMark/indicator */
+label.CheckBoxOwner .CheckMark:after {
+	left: 6px;
+	top: 1px;
+	width: 5px;
+	height: 10px;
+	border: solid var(--heading_text_color);
+	border-width: 0 3px 3px 0;
+	-webkit-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	transform: rotate(45deg);
+}

src/index.css

@@ -2,7 +2,7 @@
   --border_radius: 4px;
 
   --control_background: rgba(105, 105, 150, 0.2);
-  --control_background_hover: rgba(105, 105, 150, 0.3);
+  --control_background_hover: rgba(105, 105, 150, 0.4);
   --control_border: 1px solid rgba(80, 80, 90, 0.9);
   --control_box_shadow: 2px 2px 2px black;
   --control_transparent_background: rgba(10, 10, 16, 0.5);

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
+import './css/checkbox.css';
 import App from './App';
 import createAppStore from './redux/store/createAppStore';
 import {getIPCRenderer} from './utils';