improve appearance of toggle

web/src/components/button/ToggleButton.tsx

@@ -0,0 +1,17 @@
+import Button from './Button'
+import type { ButtonProps } from './Button'
+import type { PropsWithChildren } from 'react'
+import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/20/solid'
+
+export interface ToggleButtonProps extends ButtonProps {
+  toggled?: boolean
+}
+
+export default function ToggleButton({ className = '', toggled, ...props }: PropsWithChildren<ToggleButtonProps>) {
+  return (
+    <Button className={`toggle ${toggled ? 'fill positive' : 'outline negative'} ${className}`} {...props}>
+      {toggled ? <CheckCircleIcon /> : <XCircleIcon />}
+      {props.children || <span>Toggle</span>}
+    </Button>
+  )
+}

web/src/components/form/FormGroup.scss

@@ -24,6 +24,6 @@
   }
 
   .button-set {
-    margin-top: $space-m;
+    margin-top: $space-s;
   }
 }

web/src/components/form/FormToggle.scss

@@ -1,13 +0,0 @@
-@import '@/vars.scss';
-@import './mixins.scss';
-
-.toggle {
-  display: flex;
-  flex-direction: row;
-  font: inherit;
-
-  label {
-    margin-left: $space-s;
-    margin-bottom: $space-xs;
-  }
-}

web/src/components/form/FormToggle.tsx

@@ -1,18 +0,0 @@
-import './FormToggle.scss'
-import type { HTMLAttributes } from 'react'
-
-export interface FormToggleProps extends HTMLAttributes<HTMLInputElement> {
-  checked?: boolean
-  label: string
-}
-
-export default function FormToggle({ className = '', id, label, ...props }: FormToggleProps) {
-  return (
-    <section className={`toggle ${className}`}>
-      <div className="checkbox">
-        <input type="checkbox" id={id} {...props} />
-      </div>
-      <label htmlFor={id}>{label}</label>
-    </section>
-  )
-}

web/src/views/HerdView.tsx

@@ -9,7 +9,6 @@ import type { DragEndEvent } from '@dnd-kit/core'
 import EditButton from '@/components/button/EditButton'
 import FormGroup from '@/components/form/FormGroup'
 import FormInput from '@/components/form/FormInput'
-import FormToggle from '@/components/form/FormToggle'
 import LoadingIndicator from '@/components/LoadingIndicator'
 import Main from '@/components/Main'
 import Notice from '@/components/Notice'
@@ -20,6 +19,7 @@ import SaveButton from '@/components/button/SaveButton'
 import SearchForm from '@/components/SearchForm'
 import SortableRow from '@/components/SortableRow'
 import type { SubmitHandler } from 'react-hook-form'
+import ToggleButton from '@/components/button/ToggleButton'
 import api from '@/api'
 import { useForm } from 'react-hook-form'
 import { CheckCircleIcon, CloudIcon, TrashIcon, XCircleIcon, XMarkIcon } from '@heroicons/react/20/solid'
@@ -247,7 +247,11 @@ export default function HerdView() {
       </header>
 
       <SearchForm>
-        <FormToggle label="Show completed tasks" id="show-completed" checked={showCompleted} onChange={toggleShowCompleted} />
+        <ButtonSet>
+          <ToggleButton className="mini" toggled={showCompleted} onClick={toggleShowCompleted}>
+            <span>Show completed items</span>
+          </ToggleButton>
+        </ButtonSet>
       </SearchForm>
 
       <Notice error={error} />