Improve Checkbox

src/components/Checkbox/Checkbox.tsx

@@ -4,83 +4,77 @@ import styled from "styled-components";
 const Container = styled.label`
   display: block;
   position: relative;
-  padding-left: 35px;
-  margin-bottom: 12px;
+  padding-left: 2rem;
   cursor: pointer;
-  font-size: 22px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
+  font-size: 1.5rem; /* 24px */
   user-select: none;
 
   /* On mouse-over, add a grey background color */
-  &:hover input ~ .checkbox {
-    background-color: #ccc;
+  &:hover input ~ .custombox {
+    background-color: #d4d0c7; /* grey1 */
   }
-
-/* When the checkbox is checked, add a blue background */
-& input:checked ~ .checkbox {
-  background-color: #2196F3;
-}
-
-/* Style the checkmark/indicator */
-  & .checkbox:after {
-  left: 9px;
-  top: 5px;
-  width: 5px;
-  height: 10px;
-  border: solid white;
-  border-width: 0 3px 3px 0;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-
-/* Show the checkmark when checked */
-& input:checked ~ .checkbox:after {
-  display: block;
-}
 `;
 
 /* Hide the browser's default checkbox */
 const DefaultBox = styled.input`
   position: absolute;
   opacity: 0;
-  cursor: pointer;
   height: 0;
   width: 0;
 `;
 
 /* Create a custom checkbox */
-const CustomBox = styled.span`
+const CustomBox = styled.span<{checked?: boolean}>`
+  border-radius: 4px;
   position: absolute;
   top: 0;
   left: 0;
-  height: 25px;
-  width: 25px;
-  background-color: #eee;
+  height: 1em;
+  width: 1em;
+  background-color: ${(props) => props.checked ? "#002d3a" : "#efece4"}; /* dark-blue or grey2 */
 
-  /* Create the checkmark/indicator (hidden when not checked) */
-  &:after {
-    content: "";
+  &:focus &:before {
+    transition: box-shadow 150ms ease;
+    content: '';
+    display: block;
     position: absolute;
-    display: none;
+    top: -4px;
+    bottom: -4px;
+    left: -4px;
+    right: -4px;
+    border-radius: 6px;
+    border: 2px solid color(blue);
   }
 `;
 
+const Checkmark = styled.span`
+  position: absolute;
+  left: 0.375em;
+  top: calc(0.25em - 1px);
+  width: 0.25em;
+  height: 0.5em;
+  border: solid #fff;
+  border-width: 0 0.125em 0.125em 0;
+  transform: rotate(45deg);
+`;
+
 type CheckboxProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   "type"
 >;
 
-const Checkbox: React.FC<CheckboxProps> = ({children, ...props}) => (
+const Checkbox: React.FC<CheckboxProps> = ({children, checked, ...props}) => (
   <Container>
     {children}
     <DefaultBox
       type="checkbox"
+      checked={checked}
       {...props}
+      tabIndex={-1}
     />
-    <CustomBox className="checkbox" />
+    <CustomBox tabIndex={0} checked={checked} className="custombox">
+      {checked && (<Checkmark />)}
+    </CustomBox>
   </Container>
 )
 

src/components/Checkbox/Checkboxes.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import styled from "styled-components";
 import { WidgetProps } from "react-jsonschema-form";
 import Checkbox from "./Checkbox";
 
@@ -20,6 +21,10 @@ type CheckboxesProps = Omit<WidgetProps, "options"> & {
   options: any;
 };
 
+const CheckboxContainer = styled.div`
+  margin-bottom: 0.5rem;
+`;
+
 const Checkboxes: React.FC<CheckboxesProps> = ({id, disabled, options, value, autofocus, readonly, onChange}) => {
   const { enumOptions, enumDisabled, inline } = options;
   return (
@@ -53,9 +58,9 @@ const Checkboxes: React.FC<CheckboxesProps> = ({id, disabled, options, value, au
             {checkbox}
           </label>
         ) : (
-          <div key={index} className={`checkbox ${disabledCls}`}>
-            <label>{checkbox}</label>
-          </div>
+          <CheckboxContainer key={index} className={disabledCls}>
+            {checkbox}
+          </CheckboxContainer>
         );
       })}
     </div>

src/views/SignUpPage/SignUpPage.scss

@@ -56,25 +56,6 @@
         font-size: 1.5rem;
         padding: 0 16px;
       }
-
-      input[type="radio"], input[type="checkbox"] {
-        margin-right: 4px;
-        width: 24px;
-        height: 24px;
-      }
-
-      .radio, .checkbox {
-        padding-bottom: 0.5rem;
-
-        & > label {
-          display: block;
-          height: 100%;
-
-          & span {
-            vertical-align: super;
-          }
-        }
-      }
     }
   }
 }

src/views/SignUpPage/SignUpPageView.tsx

@@ -6,7 +6,6 @@ import { SignupForm } from "@models/SignupForm";
 import { buildSchema, buildUISchema } from "./FormUtils";
 import AsideSection from "@components/AsideSection";
 import MainSection from "@components/MainSection";
-import Checkbox from "@components/Checkbox/Checkbox";
 import Checkboxes from "@components/Checkbox/Checkboxes";
 
 const customWidgets = {