From e40fe65272d79eb933277fc0f29a494503ec09fc Mon Sep 17 00:00:00 2001
From: Jessica Boezwinkle <jessica@trbl.design>
Date: Tue, 7 Feb 2023 10:09:04 +0000
Subject: [PATCH] chore: consolidates styles

---
 .../forms/field-types/Checkbox/Input.tsx           |  5 -----
 .../forms/field-types/Checkbox/index.scss          | 14 ++++++--------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/admin/components/forms/field-types/Checkbox/Input.tsx b/src/admin/components/forms/field-types/Checkbox/Input.tsx
index c071c9d9de..6c0c41917a 100644
--- a/src/admin/components/forms/field-types/Checkbox/Input.tsx
+++ b/src/admin/components/forms/field-types/Checkbox/Input.tsx
@@ -28,15 +28,12 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = (props) => {
     required,
   } = props;
 
-  const [isFocused, setIsFocused] = React.useState(false);
-
   return (
     <span
       className={[
         baseClass,
         checked && `${baseClass}--checked`,
         readOnly && `${baseClass}--read-only`,
-        isFocused && `${baseClass}--is-focused`,
       ].filter(Boolean).join(' ')}
     >
       <input
@@ -50,8 +47,6 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = (props) => {
       />
       <button
         type="button"
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
         onClick={onToggle}
       >
         <span className={`${baseClass}__input`}>
diff --git a/src/admin/components/forms/field-types/Checkbox/index.scss b/src/admin/components/forms/field-types/Checkbox/index.scss
index 82ffa2a52d..88ae8efeae 100644
--- a/src/admin/components/forms/field-types/Checkbox/index.scss
+++ b/src/admin/components/forms/field-types/Checkbox/index.scss
@@ -66,6 +66,12 @@
       outline: none;
     }
 
+    &:focus {
+      .custom-checkbox__input {
+        box-shadow: 0 0 3px 3px var(--theme-success-400);
+      }
+    }
+
     &:hover {
       svg {
         opacity: .2;
@@ -82,12 +88,4 @@
       }
     }
   }
-
-  &--is-focused {
-    button {
-      .custom-checkbox__input {
-        box-shadow: 0 0 3px 3px var(--theme-success-400);
-      }
-    }
-  }
 }