Fix checkbox css

Author: manosim

src/js/components/ui/checkbox.tsx

@@ -20,8 +20,7 @@ const Icon = styled.svg`
 // Source: https://polished.js.org/docs/#hidevisually
 const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
   border: 0;
-  clip: rect(0 0 0 0);
-  clippath: inset(50%);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -37,7 +36,7 @@ const StyledCheckbox = styled.div`
   height: 24px;
   background: ${props =>
     // @ts-ignore
-    props.isChecked ? props.theme.primaryDark : props.theme.primary}
+    props.isChecked ? props.theme.primaryDark : props.theme.primary};
   border-radius: 3px;
   transition: all 150ms;
 
@@ -47,7 +46,7 @@ const StyledCheckbox = styled.div`
 
   ${Icon} {
     // @ts-ignore
-    visibility: ${props => (props.isChecked ? 'visible' : 'hidden')}
+    visibility: ${props => (props.isChecked ? 'visible' : 'hidden')};
   }
 `;
 

src/js/routes/__snapshots__/settings.test.tsx.snap

@@ -32,14 +32,14 @@ exports[`routes/settings.tsx should render itself & its children 1`] = `
         >
           <input
             checked={false}
-            className="sc-AykKF JLUcA"
+            className="sc-AykKF eBGpvv"
             label="Show only participating"
             name="showOnlyParticipating"
             onChange={[Function]}
             type="checkbox"
           />
           <div
-            className="sc-AykKG eKMIud"
+            className="sc-AykKG kivYff"
           >
             <svg
               className="sc-AykKE iYrbLa"
@@ -86,14 +86,14 @@ exports[`routes/settings.tsx should render itself & its children 1`] = `
         >
           <input
             checked={true}
-            className="sc-AykKF JLUcA"
+            className="sc-AykKF eBGpvv"
             label="Play sound"
             name="playSound"
             onChange={[Function]}
             type="checkbox"
           />
           <div
-            className="sc-AykKG fcMxQD"
+            className="sc-AykKG bvKQsJ"
           >
             <svg
               className="sc-AykKE iYrbLa"
@@ -140,14 +140,14 @@ exports[`routes/settings.tsx should render itself & its children 1`] = `
         >
           <input
             checked={true}
-            className="sc-AykKF JLUcA"
+            className="sc-AykKF eBGpvv"
             label="Show notifications"
             name="showNotifications"
             onChange={[Function]}
             type="checkbox"
           />
           <div
-            className="sc-AykKG fcMxQD"
+            className="sc-AykKG bvKQsJ"
           >
             <svg
               className="sc-AykKE iYrbLa"
@@ -194,14 +194,14 @@ exports[`routes/settings.tsx should render itself & its children 1`] = `
         >
           <input
             checked={false}
-            className="sc-AykKF JLUcA"
+            className="sc-AykKF eBGpvv"
             label="On Click, Mark as Read"
             name="onClickMarkAsRead"
             onChange={[Function]}
             type="checkbox"
           />
           <div
-            className="sc-AykKG eKMIud"
+            className="sc-AykKG kivYff"
           >
             <svg
               className="sc-AykKE iYrbLa"
@@ -248,14 +248,14 @@ exports[`routes/settings.tsx should render itself & its children 1`] = `
         >
           <input
             checked={false}
-            className="sc-AykKF JLUcA"
+            className="sc-AykKF eBGpvv"
             label="Open at startup"
             name="openAtStartUp"
             onChange={[Function]}
             type="checkbox"
           />
           <div
-            className="sc-AykKG eKMIud"
+            className="sc-AykKG kivYff"
           >
             <svg
               className="sc-AykKE iYrbLa"