Fix Live Update checkbox

renderer/src/styles/builtins/customcss.css

@@ -14,12 +14,25 @@
     align-items: center;
 }
 
-#bd-editor-controls button:hover {
+#bd-editor-controls .checkbox-wrapper {
+    border: 1px solid var(--interactive-normal);
+    margin: 0 5px 0 0;
+    width: 22px;
+    height: 22px;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#bd-editor-controls button:hover,
+#bd-editor-controls .checkbox-wrapper:hover {
     background: var(--background-modifier-hover);
     color: var(--interactive-hover);
 }
 
-#bd-editor-controls button:active {
+#bd-editor-controls button:active,
+#bd-editor-controls .checkbox-wrapper:active {
     background: var(--background-modifier-active);
 }
 
@@ -27,6 +40,25 @@
     fill: currentColor;
 }
 
+#bd-editor-controls .checkbox {
+    position: absolute;
+    opacity: 0;
+    margin: 0;
+    width: 22px;
+    height: 22px;
+    cursor: pointer;
+    z-index: 1;
+}
+
+#bd-editor-controls .checkbox-wrapper:not(.checked) svg {
+    opacity: 0;
+}
+
+#bd-editor-controls .checkbox-wrapper.checked {
+    background-color: #3E82E5;
+    border-color: #3875CE;
+}
+
 #bd-editor-controls {
     display: flex;
     align-items: center;
@@ -55,16 +87,6 @@
     align-items: center;
 }
 
-.controls-section .checkbox-inner {
-    width: 14px;
-    height: 14px;
-}
-
-.controls-section .checkbox-inner .checkbox:checked + span::after {
-    left: 2px;
-    top: -2px;
-}
-
 .controls-section .checkbox-label {
     font-size: 14px;
     font-weight: 500;

renderer/src/styles/ui/bdsettings.css

@@ -233,5 +233,6 @@
 }
 
 .checkbox-item .checkbox-label {
+    margin: auto;
     margin-right: 8px;
 }

renderer/src/ui/customcss/checkbox.jsx

@@ -1,5 +1,7 @@
 import {React} from "modules";
 
+import Checkmark from "../icons/check";
+
 export default class Checkbox extends React.Component {
     constructor(props) {
         super(props);
@@ -9,13 +11,10 @@ export default class Checkbox extends React.Component {
 
     render() {
         return <div className="checkbox-item">
-            <div className="checkbox-label label-JWQiNe da-label">{this.props.text}</div>
-            <div className="checkbox-wrapper checkbox-3kaeSU da-checkbox checkbox-3EVISJ da-checkbox" onClick={this.onClick}>
-                <div className="checkbox-inner checkboxInner-3yjcPe da-checkboxInner">
-                    <input className="checkbox checkboxElement-1qV33p da-checkboxElement" checked={this.state.checked} type="checkbox" />
-                    <span></span>
-                </div>
-                <span></span>
+            <div className="checkbox-label">{this.props.text}</div>
+            <div className={"checkbox-wrapper" + (this.state.checked ? " checked" : "")} onClick={this.onClick}>
+                <input className="checkbox" checked={this.state.checked} type="checkbox" />
+                <Checkmark size="18px" />
             </div>
         </div>;
     }