Replace Toggle with a custom component

app/soapbox/components/ui/toggle/toggle.tsx

@@ -1,13 +1,37 @@
-import React from 'react';
+import clsx from 'clsx';
-import ReactToggle, { ToggleProps } from 'react-toggle';
+import React, { useRef } from 'react';
+
+interface IToggle extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'checked' | 'onChange' | 'required'> {
+
+}
 
 /** A glorified checkbox. Wrapper around react-toggle. */
-const Toggle: React.FC<ToggleProps> = ({ icons = false, ...rest }) => {
+const Toggle: React.FC<IToggle> = ({ id, checked, onChange, required }) => {
+  const input = useRef<HTMLInputElement>(null);
+
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault();
+    input.current?.focus();
+    input.current?.click();
+  };
+
   return (
-    <ReactToggle
+    <button
-      icons={icons}
+      className='w-9 rounded-full bg-gray-500 p-0.5'
-      {...rest}
+      onClick={handleClick}
+    >
+      <div className={clsx('h-4.5 w-4.5 rounded-full bg-white transition-transform', { 'translate-x-3': checked })} />
+
+      <input
+        id={id}
+        ref={input}
+        type='checkbox'
+        className='sr-only'
+        checked={checked}
+        onChange={onChange}
+        required={required}
       />
+    </button>
   );
 };
 

app/soapbox/features/filters/edit-filter.tsx

@@ -71,7 +71,6 @@ const FilterField: StreamfieldComponent<IFilterField> = ({ value, onChange }) =>
         <Toggle
           checked={value.whole_word}
           onChange={handleChange('whole_word')}
-          icons={false}
         />
 
         <Text tag='span' theme='muted'>
@@ -212,28 +211,24 @@ const EditFilter: React.FC<IEditFilter> = ({ params }) => {
         <List>
           <ListItem label={intl.formatMessage(messages.home_timeline)}>
             <Toggle
-              name='home_timeline'
               checked={homeTimeline}
               onChange={({ target }) => setHomeTimeline(target.checked)}
             />
           </ListItem>
           <ListItem label={intl.formatMessage(messages.public_timeline)}>
             <Toggle
-              name='public_timeline'
               checked={publicTimeline}
               onChange={({ target }) => setPublicTimeline(target.checked)}
             />
           </ListItem>
           <ListItem label={intl.formatMessage(messages.notifications)}>
             <Toggle
-              name='notifications'
               checked={notifications}
               onChange={({ target }) => setNotifications(target.checked)}
             />
           </ListItem>
           <ListItem label={intl.formatMessage(messages.conversations)}>
             <Toggle
-              name='conversations'
               checked={conversations}
               onChange={({ target }) => setConversations(target.checked)}
             />
@@ -241,7 +236,6 @@ const EditFilter: React.FC<IEditFilter> = ({ params }) => {
           {features.filtersV2 && (
             <ListItem label={intl.formatMessage(messages.accounts)}>
               <Toggle
-                name='accounts'
                 checked={accounts}
                 onChange={({ target }) => setAccounts(target.checked)}
               />
@@ -255,7 +249,6 @@ const EditFilter: React.FC<IEditFilter> = ({ params }) => {
             hint={intl.formatMessage(features.filtersV2 ? messages.hide_hint : messages.drop_hint)}
           >
             <Toggle
-              name='hide'
               checked={hide}
               onChange={({ target }) => setHide(target.checked)}
             />

app/soapbox/features/ui/components/modals/edit-announcement-modal.tsx

@@ -98,7 +98,6 @@ const EditAnnouncementModal: React.FC<IEditAnnouncementModal> = ({ onClose }) =>
         </FormGroup>
         <HStack alignItems='center' space={2}>
           <Toggle
-            icons={false}
             checked={allDay}
             onChange={onChangeAllDay}
           />