Using toggle switches instead of checkboxes

Author: DmnChzl

src/components/__tests__/__snapshots__/skills.test.js.snap

@@ -46,30 +46,31 @@ exports[`Skills renders correctly 1`] = `
       className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10"
     >
       <div
-        className="w-1/3 sm:w-1/4 my-6"
+        className="skillCheckbox w-1/3 sm:w-1/4 my-6 flex items-center"
         key="javascript"
       >
+        <input
+          checked={true}
+          className="offscreen"
+          id="javascript"
+          onChange={[Function]}
+          type="checkbox"
+        />
         <label
-          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+          className="switch cursor-pointer"
           htmlFor="javascript"
+        />
+        <img
+          alt="javascript"
+          className="ml-4 w-8 h-8 sm:w-10 sm:h-10 cursor-pointer"
+          onClick={[Function]}
+          src="javascript.svg"
+        />
+        <span
+          className="tooltiptext"
         >
-          <input
-            checked={true}
-            id="javascript"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <img
-            alt="javascript"
-            className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
-            src="javascript.svg"
-          />
-          <span
-            className="tooltiptext"
-          >
-            javascript
-          </span>
-        </label>
+          javascript
+        </span>
       </div>
     </div>
   </div>
@@ -86,54 +87,56 @@ exports[`Skills renders correctly 1`] = `
       className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10"
     >
       <div
-        className="w-1/3 sm:w-1/4 my-6"
+        className="skillCheckbox w-1/3 sm:w-1/4 my-6 flex items-center"
         key="react"
       >
+        <input
+          className="offscreen"
+          id="react"
+          onChange={[Function]}
+          type="checkbox"
+        />
         <label
-          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+          className="switch cursor-pointer"
           htmlFor="react"
+        />
+        <img
+          alt="react"
+          className="ml-4 w-8 h-8 sm:w-10 sm:h-10 cursor-pointer"
+          onClick={[Function]}
+          src="react.svg"
+        />
+        <span
+          className="tooltiptext"
         >
-          <input
-            id="react"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <img
-            alt="react"
-            className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
-            src="react.svg"
-          />
-          <span
-            className="tooltiptext"
-          >
-            react
-          </span>
-        </label>
+          react
+        </span>
       </div>
       <div
-        className="w-1/3 sm:w-1/4 my-6"
+        className="skillCheckbox w-1/3 sm:w-1/4 my-6 flex items-center"
         key="svelte"
       >
+        <input
+          className="offscreen"
+          id="svelte"
+          onChange={[Function]}
+          type="checkbox"
+        />
         <label
-          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+          className="switch cursor-pointer"
           htmlFor="svelte"
+        />
+        <img
+          alt="svelte"
+          className="ml-4 w-8 h-8 sm:w-10 sm:h-10 cursor-pointer"
+          onClick={[Function]}
+          src="svelte.svg"
+        />
+        <span
+          className="tooltiptext"
         >
-          <input
-            id="svelte"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <img
-            alt="svelte"
-            className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
-            src="svelte.svg"
-          />
-          <span
-            className="tooltiptext"
-          >
-            svelte
-          </span>
-        </label>
+          svelte
+        </span>
       </div>
     </div>
   </div>

src/components/skills.js

@@ -9,25 +9,25 @@ const Skills = props => {
   const inputRef = React.createRef()
   const createSkill = skill => {
     return (
-      <div className="w-1/3 sm:w-1/4 my-6" key={skill}>
-        <label
-          htmlFor={skill}
-          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
-        >
-          <input
-            id={skill}
-            type="checkbox"
-            checked={props.skills[skill]}
-            onChange={event => props.handleSkillsChange(skill)}
-          />
-          <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> 
+      <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>
     )
   }
 

src/pages/index.css

@@ -80,10 +80,50 @@ a {
   font-size: 14px;
 }
 
-.skillCheckboxLabel:hover .tooltiptext {
+.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;