Replace ShortBioToggle with IncompleteProfilesToggle and refactor filters to use reusable Checkbox component

web/components/filters/filters.tsx

@@ -20,6 +20,7 @@ import {DietFilter, DietFilterText} from 'web/components/filters/diet-filter'
 import {EducationFilter, EducationFilterText} from 'web/components/filters/education-filter'
 import {FieldToggles} from 'web/components/filters/field-toggles'
 import {HasPhotoFilter} from 'web/components/filters/has-photo-filter'
+import {IncompleteProfilesToggle} from 'web/components/filters/incomplete-profiles-toggle'
 import {InterestFilter, InterestFilterText} from 'web/components/filters/interest-filter'
 import {LanguageFilter, LanguageFilterText} from 'web/components/filters/language-filter'
 import {MbtiFilter, MbtiFilterText} from 'web/components/filters/mbti-filter'
@@ -30,7 +31,6 @@ import {
 } from 'web/components/filters/relationship-status-filter'
 import {ReligionFilter, ReligionFilterText} from 'web/components/filters/religion-filter'
 import {RomanticFilter, RomanticFilterText} from 'web/components/filters/romantic-filter'
-import {ShortBioToggle} from 'web/components/filters/short-bio-toggle'
 import {KidsLabel, WantsKidsFilter} from 'web/components/filters/wants-kids-filter'
 import {FilterGuide} from 'web/components/guidance'
 import {Col} from 'web/components/layout/col'
@@ -241,20 +241,18 @@ function Filters(props: {
       />
       <FilterGuide className={'justify-between px-4 py-2'} />
 
-      <Row className="justify-between px-4">
-        <Col className="py-2">
-          <MyMatchesToggle
-            setYourFilters={setYourFilters}
-            youProfile={youProfile}
-            on={isYourFilters}
-            hidden={!youProfile}
-          />
-        </Col>
+      <Row className="justify-between px-2">
+        <MyMatchesToggle
+          setYourFilters={setYourFilters}
+          youProfile={youProfile}
+          checked={isYourFilters}
+          hidden={!youProfile}
+        />
       </Row>
 
       {/* Short Bios */}
-      <Col className="p-4 pb-2">
-        <ShortBioToggle updateFilter={updateFilter} filters={filters} hidden={false} />
+      <Col className="p-2">
+        <IncompleteProfilesToggle updateFilter={updateFilter} filters={filters} hidden={false} />
       </Col>
 
       {/* ALWAYS VISIBLE FILTERS */}

web/components/filters/incomplete-profiles-toggle.tsx

@@ -0,0 +1,31 @@
+import clsx from 'clsx'
+import {FilterFields} from 'common/filters'
+import {Row} from 'web/components/layout/row'
+import {Checkbox} from 'web/components/widgets/checkbox'
+import {useT} from 'web/lib/locale'
+
+export function IncompleteProfilesToggle(props: {
+  filters: Partial<FilterFields>
+  updateFilter: (newState: Partial<FilterFields>) => void
+  hidden: boolean
+}) {
+  const {filters, updateFilter, hidden} = props
+  const t = useT()
+  if (hidden) {
+    return <></>
+  }
+
+  const label = t('filter.short_bio_toggle', 'Include incomplete profiles')
+
+  const checked = filters.shortBio || false
+
+  return (
+    <Row className={clsx('mr-2', checked && 'font-semibold')}>
+      <Checkbox
+        label={label}
+        checked={checked}
+        toggle={(checked) => updateFilter({shortBio: checked ? true : undefined})}
+      />
+    </Row>
+  )
+}

web/components/filters/my-matches-toggle.tsx

@@ -1,15 +1,16 @@
 import clsx from 'clsx'
 import {Profile} from 'common/profiles/profile'
 import {Row} from 'web/components/layout/row'
+import {Checkbox} from 'web/components/widgets/checkbox'
 import {useT} from 'web/lib/locale'
 
 export function MyMatchesToggle(props: {
   setYourFilters: (checked: boolean) => void
   youProfile: Profile | undefined | null
-  on: boolean
+  checked: boolean
   hidden: boolean
 }) {
-  const {setYourFilters, on, hidden} = props
+  const {setYourFilters, checked, hidden} = props
   const t = useT()
   if (hidden) {
     return <></>
@@ -18,17 +19,8 @@ export function MyMatchesToggle(props: {
   const label = t('filter.mine_toggle', 'Your filters')
 
   return (
-    <Row className={clsx('mr-2 items-center hover-bold', on && 'font-semibold')}>
-      <input
-        id={label}
-        type="checkbox"
-        className="border-ink-300 bg-canvas-0 dark:border-ink-500 text-primary-600 focus:ring-primary-500 h-4 w-4 rounded hover:bg-canvas-200"
-        checked={on}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setYourFilters(e.target.checked)}
-      />
-      <label htmlFor={label} className={clsx('text-ink-600 ml-2')}>
-        {label}
-      </label>
+    <Row className={clsx('mr-2', checked && 'font-semibold')}>
+      <Checkbox label={label} checked={checked} toggle={setYourFilters} />
     </Row>
   )
 }

web/components/filters/short-bio-toggle.tsx

@@ -1,37 +0,0 @@
-import clsx from 'clsx'
-import {FilterFields} from 'common/filters'
-import {Row} from 'web/components/layout/row'
-import {useT} from 'web/lib/locale'
-
-export function ShortBioToggle(props: {
-  filters: Partial<FilterFields>
-  updateFilter: (newState: Partial<FilterFields>) => void
-  hidden: boolean
-}) {
-  const {filters, updateFilter, hidden} = props
-  const t = useT()
-  if (hidden) {
-    return <></>
-  }
-
-  const label = t('filter.short_bio_toggle', 'Include incomplete profiles')
-
-  const on = filters.shortBio || false
-
-  return (
-    <Row className={clsx('mr-2 items-center hover-bold', on && 'font-semibold')}>
-      <input
-        id={label}
-        type="checkbox"
-        className="border-ink-300 bg-canvas-0 dark:border-ink-500 text-primary-600 focus:ring-primary-500 h-4 w-4 rounded hover:bg-canvas-200 cursor-pointer"
-        checked={on}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-          updateFilter({shortBio: e.target.checked ? true : undefined})
-        }
-      />
-      <label htmlFor={label} className={clsx('text-ink-600 ml-2')}>
-        {label}
-      </label>
-    </Row>
-  )
-}