Using redesigned checkboxes rather than toggle switches

Author: DmnChzl

src/components/addons.js

@@ -12,13 +12,15 @@ const AddonsItem = ({ inputId, inputChecked, onInputChange, Options, onIconClick
   return (
     <>
       <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-        <label htmlFor={inputId} className="cursor-pointer flex items-center">
+        <label htmlFor={inputId} className="checkbox-label flex items-center">
           <input
-            type="checkbox"
             id={inputId}
+            type="checkbox"
+            className="checkbox-label__input"
             checked={inputChecked}
             onChange={onInputChange}
           />
+          <span class="checkbox-label__control" />
           <span className="pl-4">{props.children}</span>
         </label>
         {Options && (

src/components/skills.js

@@ -9,25 +9,27 @@ const Skills = props => {
   const inputRef = React.createRef()
   const createSkill = skill => {
     return (
-      <div
-        className="skillCheckbox w-1/3 sm:w-1/4 my-6 flex items-center"
-        key={skill}>
-        <input
-          type="checkbox"
-          id={skill}
-          className="offscreen"
-          checked={props.skills[skill]}
-          onChange={event => props.handleSkillsChange(skill)}
-        />
-        <label htmlFor={skill} className="switch cursor-pointer" />
-        <img
-          className="ml-4 w-8 h-8 sm:w-10 sm:h-10 cursor-pointer"
-          onClick={event => props.handleSkillsChange(skill)}
-          src={icons[skill]}
-          alt={skill}
-        />
-        <span className="tooltiptext">{skill}</span>
-      </div>
+      <div className="w-1/3 sm:w-1/4 my-6" key={skill}>
+        <label
+          htmlFor={skill}
+          className="checkbox-label flex items-center justify-start"
+        >
+          <input
+            id={skill}
+            type="checkbox"
+            className="checkbox-label__input"
+            checked={props.skills[skill]}
+            onChange={event => props.handleSkillsChange(skill)}
+          />
+          <span class="checkbox-label__control" />
+          <img
+            className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
+            src={icons[skill]}
+            alt={skill}
+          />
+          <span className="tooltiptext">{skill}</span>
+        </label>
+      </div> 
     )
   }
 
@@ -101,4 +103,4 @@ const Skills = props => {
   ) 
 }
 
-export default Skills
+export default Skills

src/pages/index.css

@@ -1,5 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400&display=swap");
+
 :root {
   --grey-05: #f5f6f7;
   --grey-10: #dfdfe2;
@@ -25,12 +26,45 @@ body {
   color: var(--grey-90);
 }
 
-[type="checkbox"] {
-  -webkit-box-shadow: 0 1px 1px var(--grey-90) !important;
-  -moz-box-shadow: 0 1px 1px var(--grey-90) !important;
-  box-shadow: 0 1px 1px var(--grey-90) !important;
+input[type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.checkbox-label {
   cursor: pointer;
-  border-radius: 0px !important;
+}
+.checkbox-label:hover .tooltiptext {
+  visibility: visible;
+}
+.checkbox-label__input {
+  position: absolute;
+  opacity: 0;
+}
+.checkbox-label__control {
+  position: relative;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin-right: 12px;
+  vertical-align: middle;
+  background-color: var(--grey-05);
+  border: 2px solid var(--grey-90);
+  transform: scale(0.75);
+}
+.checkbox-label__input:checked + .checkbox-label__control:after {
+  position: absolute;
+  display: block;
+  content: "";
+  top: 5px;
+  left: 5px;
+  width: 10px;
+  height: 10px;
+  background-color: var(--dark-purple);
+}
+.checkbox-label__input:hover + .checkbox-label__control,
+.checkbox-label__input:focus + .checkbox-label__control {
+  box-shadow: 0 0 0 10px rgba(10, 10, 35, .1);
 }
 
 .section {
@@ -79,51 +113,6 @@ a {
   padding: 2% 5%;
   font-size: 14px;
 }
-
-.skillCheckbox:hover .tooltiptext {
-  visibility: visible;
-}
-
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  height: 20px;
-  background-color: rgba(0, 0, 0, 0.25);
-  border-radius: 20px;
-  transition: all 0.25s;
-}
-.switch::after {
-  content: '';
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  border-radius: 16px;
-  background-color: #fff;
-  top: 2px;
-  left: 2px;
-  transition: all 0.25s;
-}
-
-input[type='checkbox']:checked+.switch::after {
-  transform: translateX(20px);
-}
-input[type='checkbox']:checked+.switch {
-  background-color: var(--light-green);
-}
-input[type='checkbox']:focus+.switch {
-  background-color: var(--blue);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-input[type='checkbox']:checked:focus+.switch {
-  background-color: var(--light-green);
-}
-
-.offscreen {
-  position: absolute;
-  left: -9999px;
-}
-
 .tooltiptext::after {
   content: " ";
   position: absolute;
@@ -135,6 +124,7 @@ input[type='checkbox']:checked:focus+.switch {
   border-style: solid;
   border-color: transparent var(--grey-90) transparent transparent;
 }
+
 .workflow {
   margin-left: 2%;
   padding: 1%;
@@ -160,9 +150,11 @@ input[type='checkbox']:checked:focus+.switch {
   .tooltiptext {
     display: none;
   }
+
   .warning {
     font-size: 10px;
   }
+
   .workflow {
     font-size: 12px;
   }