better checkbox styles

ui/js/component/formField/view.jsx

@@ -174,19 +174,18 @@ class FormField extends React.PureComponent {
         {this.props.prefix
           ? <span className="form-field__prefix">{this.props.prefix}</span>
           : ""}
-        {renderElementInsideLabel
+        {element}
-          ? <label
+        {renderElementInsideLabel &&
-              htmlFor={elementId}
+          <label
-              className={
+            htmlFor={elementId}
-                "form-field__label " +
+            className={
-                (isError ? "form-field__label--error" : "") +
+              "form-field__label " +
-                (isCheck ? " checked" : "")
+              (isError ? "form-field__label--error" : "") +
-              }
+              (isCheck ? " checked" : "")
-            >
+            }
-              {element}
+          >
-              {this.props.label}
+            {this.props.label}
-            </label>
+          </label>}
-          : element}
         {formFieldFileSelectorTypes.includes(this.props.type)
           ? <FileSelector
               type={this.props.type}

ui/js/modal/modalRemoveFile/view.jsx

@@ -50,25 +50,22 @@ class ModalRemoveFile extends React.PureComponent {
         </p>
 
         <section>
-          <label>
+          <FormField
-            <FormField
+            type="checkbox"
-              type="checkbox"
+            checked={deleteChecked}
-              checked={deleteChecked}
+            onClick={this.handleDeleteCheckboxClicked.bind(this)}
-              onClick={this.handleDeleteCheckboxClicked.bind(this)}
+            label={__("Delete this file from my computer")}
-            />{" "}
+          />
-            {__("Delete this file from my computer")}
-          </label>
         </section>
+        <br />
         {claimIsMine &&
           <section>
-            <label>
+            <FormField
-              <FormField
+              type="checkbox"
-                type="checkbox"
+              checked={abandonClaimChecked}
-                checked={abandonClaimChecked}
+              onClick={this.handleAbandonClaimCheckboxClicked.bind(this)}
-                onClick={this.handleAbandonClaimCheckboxClicked.bind(this)}
+              label={__("Abandon the claim for this URI")}
-              />{" "}
+            />
-              {__("Abandon the claim for this URI")}
-            </label>
           </section>}
       </Modal>
     );

ui/scss/all.scss

@@ -25,4 +25,5 @@
 @import "component/_tabs.scss";
 @import "component/_media.scss";
 @import "component/_divider.scss";
+@import "component/_checkbox.scss";
 @import "page/_show.scss";

ui/scss/component/_checkbox.scss

@@ -0,0 +1,71 @@
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+$md-checkbox-checked-color: var(--color-primary);
+$md-checkbox-border-color: rgba(0, 0, 0, 0.54);
+
+$md-checkbox-size: 20px;
+$md-checkbox-padding: 4px;
+
+$md-checkmark-width: 2px;
+$md-checkmark-color: #fff;
+
+.form-field--checkbox {
+  position: relative;
+
+  label {
+    cursor: pointer;
+    &:before, &:after {
+      content: "";
+      position: absolute;
+      left:0;
+      top: 0;
+    }
+
+    &:before {
+      // box
+      width: $md-checkbox-size;
+      height: $md-checkbox-size;
+      background: transparent;
+      border: 2px solid $md-checkbox-border-color;
+      border-radius: 2px;
+      cursor: pointer;
+      transition: background .3s;
+    }
+
+    &:after {
+      // checkmark
+    }
+  }
+
+  input[type="checkbox"] {
+    outline: 0;
+    visibility: hidden;
+    margin-right: 16px;
+
+    &:checked {
+
+       + label:before{
+        background: $md-checkbox-checked-color;
+        border:none;
+      }
+      + label:after {
+
+        $md-checkmark-size: $md-checkbox-size - 2*$md-checkbox-padding;
+
+        transform: rotate(-45deg);
+
+        top: ($md-checkbox-size / 2) - ($md-checkmark-size / 4) - $md-checkbox-size/10;
+        left: $md-checkbox-padding;
+        width: $md-checkmark-size;
+        height: $md-checkmark-size / 2;
+
+        border: $md-checkmark-width solid $md-checkmark-color;
+        border-top-style: none;
+        border-right-style: none;
+      }
+    }
+  }
+
+}