From 04463b8aafead83840ddde6e57c689433c9c7509 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 6 May 2022 12:37:46 -0500
Subject: [PATCH 1/8] EditProfile: use Toggle instead of Checkbox

---
 app/soapbox/features/edit_profile/index.tsx | 79 ++++++++++++---------
 1 file changed, 47 insertions(+), 32 deletions(-)

diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index 647bb98e3..f3254dbc4 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/app/soapbox/features/edit_profile/index.tsx
@@ -1,19 +1,16 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import Toggle from 'react-toggle';
 
 import { updateNotificationSettings } from 'soapbox/actions/accounts';
 import { patchMe } from 'soapbox/actions/me';
 import snackbar from 'soapbox/actions/snackbar';
-import {
-  Checkbox,
-} from 'soapbox/features/forms';
+import List, { ListItem } from 'soapbox/components/list';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
 import { normalizeAccount } from 'soapbox/normalizers';
 import resizeImage from 'soapbox/utils/resize_image';
 
-import { Button, Column, Form, FormActions, FormGroup, Input, Textarea } from '../../components/ui';
-import HStack from '../../components/ui/hstack/hstack';
-import Stack from '../../components/ui/stack/stack';
+import { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack } from '../../components/ui';
 import Streamfield, { StreamfieldComponent } from '../../components/ui/streamfield/streamfield';
 
 import ProfilePreview from './components/profile-preview';
@@ -396,61 +393,79 @@ const EditProfile: React.FC = () => {
 
         {/* HACK: wrap these checkboxes in a .simple_form container so they get styled (for now) */}
         {/* Need a either move, replace, or refactor these checkboxes. */}
-        <Stack space={2} className='simple_form'>
+        <List>
           {features.followRequests && (
-            <Checkbox
+            <ListItem
               label={<FormattedMessage id='edit_profile.fields.locked_label' defaultMessage='Lock account' />}
               hint={<FormattedMessage id='edit_profile.hints.locked' defaultMessage='Requires you to manually approve followers' />}
-              checked={data.locked}
-              onChange={handleCheckboxChange('locked')}
-            />
+            >
+              <Toggle
+                checked={data.locked}
+                onChange={handleCheckboxChange('locked')}
+              />
+            </ListItem>
           )}
 
           {features.hideNetwork && (
-            <Checkbox
+            <ListItem
               label={<FormattedMessage id='edit_profile.fields.hide_network_label' defaultMessage='Hide network' />}
               hint={<FormattedMessage id='edit_profile.hints.hide_network' defaultMessage='Who you follow and who follows you will not be shown on your profile' />}
-              checked={account ? hidesNetwork(account): false}
-              onChange={handleHideNetworkChange}
-            />
+            >
+              <Toggle
+                checked={account ? hidesNetwork(account): false}
+                onChange={handleHideNetworkChange}
+              />
+            </ListItem>
           )}
 
           {features.bots && (
-            <Checkbox
+            <ListItem
               label={<FormattedMessage id='edit_profile.fields.bot_label' defaultMessage='This is a bot account' />}
               hint={<FormattedMessage id='edit_profile.hints.bot' defaultMessage='This account mainly performs automated actions and might not be monitored' />}
-              checked={data.bot}
-              onChange={handleCheckboxChange('bot')}
-            />
+            >
+              <Toggle
+                checked={data.bot}
+                onChange={handleCheckboxChange('bot')}
+              />
+            </ListItem>
           )}
 
           {features.muteStrangers && (
-            <Checkbox
+            <ListItem
               label={<FormattedMessage id='edit_profile.fields.stranger_notifications_label' defaultMessage='Block notifications from strangers' />}
               hint={<FormattedMessage id='edit_profile.hints.stranger_notifications' defaultMessage='Only show notifications from people you follow' />}
-              checked={muteStrangers}
-              onChange={(e) => setMuteStrangers(e.target.checked)}
-            />
+            >
+              <Toggle
+                checked={muteStrangers}
+                onChange={(e) => setMuteStrangers(e.target.checked)}
+              />
+            </ListItem>
           )}
 
           {features.profileDirectory && (
-            <Checkbox
+            <ListItem
               label={<FormattedMessage id='edit_profile.fields.discoverable_label' defaultMessage='Allow account discovery' />}
               hint={<FormattedMessage id='edit_profile.hints.discoverable' defaultMessage='Display account in profile directory and allow indexing by external services' />}
-              checked={data.discoverable}
-              onChange={handleCheckboxChange('discoverable')}
-            />
+            >
+              <Toggle
+                checked={data.discoverable}
+                onChange={handleCheckboxChange('discoverable')}
+              />
+            </ListItem>
           )}
 
           {features.emailList && (
-            <Checkbox
+            <ListItem
               label={<FormattedMessage id='edit_profile.fields.accepts_email_list_label' defaultMessage='Subscribe to newsletter' />}
               hint={<FormattedMessage id='edit_profile.hints.accepts_email_list' defaultMessage='Opt-in to news and marketing updates.' />}
-              checked={data.accepts_email_list}
-              onChange={handleCheckboxChange('accepts_email_list')}
-            />
+            >
+              <Toggle
+                checked={data.accepts_email_list}
+                onChange={handleCheckboxChange('accepts_email_list')}
+              />
+            </ListItem>
           )}
-        </Stack>
+        </List>
 
         {features.profileFields && (
           <Streamfield

From 8ad66ec45a70be6660130f682e570c8780f1f202 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 6 May 2022 12:46:42 -0500
Subject: [PATCH 2/8] Add custom Toggle component (wrapper around react-toggle)

---
 app/soapbox/components/toggle.tsx                  | 14 ++++++++++++++
 app/soapbox/features/edit_profile/index.tsx        |  2 +-
 .../notifications/components/setting_toggle.js     |  4 ++--
 app/soapbox/features/soapbox_config/index.tsx      |  2 +-
 4 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 app/soapbox/components/toggle.tsx

diff --git a/app/soapbox/components/toggle.tsx b/app/soapbox/components/toggle.tsx
new file mode 100644
index 000000000..32b286efa
--- /dev/null
+++ b/app/soapbox/components/toggle.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactToggle, { ToggleProps } from 'react-toggle';
+
+/** Wrapper around react-toggle. */
+const Toggle: React.FC<ToggleProps> = ({ icons = false, ...rest }) => {
+  return (
+    <ReactToggle
+      icons={icons}
+      {...rest}
+    />
+  );
+};
+
+export default Toggle;
diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index f3254dbc4..b9f6f5661 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/app/soapbox/features/edit_profile/index.tsx
@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
-import Toggle from 'react-toggle';
 
 import { updateNotificationSettings } from 'soapbox/actions/accounts';
 import { patchMe } from 'soapbox/actions/me';
 import snackbar from 'soapbox/actions/snackbar';
 import List, { ListItem } from 'soapbox/components/list';
+import Toggle from 'soapbox/components/toggle';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
 import { normalizeAccount } from 'soapbox/normalizers';
 import resizeImage from 'soapbox/utils/resize_image';
diff --git a/app/soapbox/features/notifications/components/setting_toggle.js b/app/soapbox/features/notifications/components/setting_toggle.js
index d8cc5d556..e65ac968c 100644
--- a/app/soapbox/features/notifications/components/setting_toggle.js
+++ b/app/soapbox/features/notifications/components/setting_toggle.js
@@ -2,7 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import Toggle from 'react-toggle';
+
+import Toggle from 'soapbox/components/toggle';
 
 export default class SettingToggle extends ImmutablePureComponent {
 
@@ -26,7 +27,6 @@ export default class SettingToggle extends ImmutablePureComponent {
         id={id}
         checked={settings.getIn(settingPath)}
         onChange={this.onChange}
-        icons={false}
         onKeyDown={this.onKeyDown}
       />
     );
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index e734f1b87..a7bd29d58 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -1,12 +1,12 @@
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 import React, { useState, useEffect, useMemo } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
-import Toggle from 'react-toggle';
 
 import { updateConfig } from 'soapbox/actions/admin';
 import { uploadMedia } from 'soapbox/actions/media';
 import snackbar from 'soapbox/actions/snackbar';
 import List, { ListItem } from 'soapbox/components/list';
+import Toggle from 'soapbox/components/toggle';
 import {
   Column,
   CardHeader,

From 2275a4e3fadcbaf1eed035f9e6c621a92f1f773f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 6 May 2022 12:53:47 -0500
Subject: [PATCH 3/8] Toggle: improve styles (and on dark theme)

---
 app/styles/components/react-toggle.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/styles/components/react-toggle.scss b/app/styles/components/react-toggle.scss
index 7a75e696f..3f3ef49e4 100644
--- a/app/styles/components/react-toggle.scss
+++ b/app/styles/components/react-toggle.scss
@@ -28,7 +28,7 @@
 }
 
 .react-toggle-track {
-  @apply bg-gray-200 w-[50px] p-0 rounded-full transition-colors;
+  @apply bg-gray-300 dark:bg-slate-700 w-[50px] p-0 rounded-full transition-colors;
   height: var(--input-height);
 }
 

From 1609118e14247253fe156669d24afc36fd2661d1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 6 May 2022 13:03:55 -0500
Subject: [PATCH 4/8] SettingToggle: convert to TSX

---
 .../components/setting_toggle.js              | 35 -------------------
 .../components/setting_toggle.tsx             | 35 +++++++++++++++++++
 app/soapbox/features/preferences/index.tsx    |  2 +-
 3 files changed, 36 insertions(+), 36 deletions(-)
 delete mode 100644 app/soapbox/features/notifications/components/setting_toggle.js
 create mode 100644 app/soapbox/features/notifications/components/setting_toggle.tsx

diff --git a/app/soapbox/features/notifications/components/setting_toggle.js b/app/soapbox/features/notifications/components/setting_toggle.js
deleted file mode 100644
index e65ac968c..000000000
--- a/app/soapbox/features/notifications/components/setting_toggle.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import Toggle from 'soapbox/components/toggle';
-
-export default class SettingToggle extends ImmutablePureComponent {
-
-  static propTypes = {
-    id: PropTypes.string,
-    prefix: PropTypes.string,
-    settings: ImmutablePropTypes.map.isRequired,
-    settingPath: PropTypes.array.isRequired,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  onChange = ({ target }) => {
-    this.props.onChange(this.props.settingPath, target.checked);
-  }
-
-  render() {
-    const { id, settings, settingPath } = this.props;
-
-    return (
-      <Toggle
-        id={id}
-        checked={settings.getIn(settingPath)}
-        onChange={this.onChange}
-        onKeyDown={this.onKeyDown}
-      />
-    );
-  }
-
-}
diff --git a/app/soapbox/features/notifications/components/setting_toggle.tsx b/app/soapbox/features/notifications/components/setting_toggle.tsx
new file mode 100644
index 000000000..76959bf06
--- /dev/null
+++ b/app/soapbox/features/notifications/components/setting_toggle.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import Toggle from 'soapbox/components/toggle';
+
+import type { Map as ImmutableMap } from 'immutable';
+
+interface ISettingToggle {
+  /** Unique identifier for the Toggle. */
+  id?: string,
+  /** The full user settings map. */
+  settings: ImmutableMap<string, any>,
+  /** Array of key names leading into the setting map. */
+  settingPath: string[],
+  /** Callback when the setting is toggled. */
+  onChange: (settingPath: string[], checked: boolean) => void,
+
+}
+
+/** Stateful toggle to change user settings. */
+const SettingToggle: React.FC<ISettingToggle> = ({ id, settings, settingPath, onChange }) => {
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    onChange(settingPath, target.checked);
+  };
+
+  return (
+    <Toggle
+      id={id}
+      checked={!!settings.getIn(settingPath)}
+      onChange={handleChange}
+    />
+  );
+};
+
+export default SettingToggle;
diff --git a/app/soapbox/features/preferences/index.tsx b/app/soapbox/features/preferences/index.tsx
index 9f02734f7..ccbd23498 100644
--- a/app/soapbox/features/preferences/index.tsx
+++ b/app/soapbox/features/preferences/index.tsx
@@ -101,7 +101,7 @@ const Preferences = () => {
   //   dispatch(changeSetting(['defaultContentType'], event.target.value));
   // };
 
-  const onToggleChange = (key: string, checked: boolean) => {
+  const onToggleChange = (key: string[], checked: boolean) => {
     dispatch(changeSetting(key, checked, intl));
   };
 

From e301255bf9c4b85a380fa277f05c16c7bb61bf79 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 6 May 2022 13:24:08 -0500
Subject: [PATCH 5/8] AccountSearch: fix text being too huge

---
 app/soapbox/components/account_search.js | 2 +-
 app/styles/components/search.scss        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/account_search.js b/app/soapbox/components/account_search.js
index f9c64c31e..b2021ec34 100644
--- a/app/soapbox/components/account_search.js
+++ b/app/soapbox/components/account_search.js
@@ -64,7 +64,7 @@ class AccountSearch extends React.PureComponent {
         <label>
           <span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span>
           <AutosuggestAccountInput
-            className='search__input'
+            className='rounded-full'
             placeholder={intl.formatMessage(messages.placeholder)}
             value={value}
             onChange={this.handleChange}
diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss
index db0605185..28d15308c 100644
--- a/app/styles/components/search.scss
+++ b/app/styles/components/search.scss
@@ -24,7 +24,7 @@ input.search__input {
     display: inline-block;
     position: absolute;
     top: 50%;
-    right: 8px;
+    right: 16px;
     transform: translateY(-50%);
     z-index: 2;
     width: 18px;

From 66bc0029c410293f88f9676cd34275416913e601 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 6 May 2022 13:31:35 -0500
Subject: [PATCH 6/8] AccountSearch: convert to tsx

---
 app/soapbox/components/account_search.js  | 84 -----------------------
 app/soapbox/components/account_search.tsx | 78 +++++++++++++++++++++
 2 files changed, 78 insertions(+), 84 deletions(-)
 delete mode 100644 app/soapbox/components/account_search.js
 create mode 100644 app/soapbox/components/account_search.tsx

diff --git a/app/soapbox/components/account_search.js b/app/soapbox/components/account_search.js
deleted file mode 100644
index b2021ec34..000000000
--- a/app/soapbox/components/account_search.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_input';
-import Icon from 'soapbox/components/icon';
-
-const messages = defineMessages({
-  placeholder: { id: 'account_search.placeholder', defaultMessage: 'Search for an account' },
-});
-
-export default @injectIntl
-class AccountSearch extends React.PureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    onSelected: PropTypes.func.isRequired,
-  };
-
-  state = {
-    value: '',
-  }
-
-  isEmpty = () => {
-    const { value } = this.state;
-    return !(value.length > 0);
-  }
-
-  clearState = () => {
-    this.setState({ value: '' });
-  }
-
-  handleChange = ({ target }) => {
-    this.setState({ value: target.value });
-  }
-
-  handleSelected = accountId => {
-    this.clearState();
-    this.props.onSelected(accountId);
-  }
-
-  handleClear = e => {
-    e.preventDefault();
-
-    if (!this.isEmpty()) {
-      this.setState({ value: '' });
-    }
-  }
-
-  handleKeyDown = e => {
-    if (e.key === 'Escape') {
-      document.querySelector('.ui').parentElement.focus();
-    }
-  }
-
-  render() {
-    const { intl, onSelected, ...rest } = this.props;
-    const { value } = this.state;
-    const isEmpty = this.isEmpty();
-
-    return (
-      <div className='search search--account'>
-        <label>
-          <span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span>
-          <AutosuggestAccountInput
-            className='rounded-full'
-            placeholder={intl.formatMessage(messages.placeholder)}
-            value={value}
-            onChange={this.handleChange}
-            onSelected={this.handleSelected}
-            onKeyDown={this.handleKeyDown}
-            {...rest}
-          />
-        </label>
-        <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
-          <Icon src={require('@tabler/icons/icons/search.svg')} className={classNames('svg-icon--search', { active: isEmpty })} />
-          <Icon src={require('@tabler/icons/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: !isEmpty })} aria-label={intl.formatMessage(messages.placeholder)} />
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/components/account_search.tsx b/app/soapbox/components/account_search.tsx
new file mode 100644
index 000000000..961a4b2ef
--- /dev/null
+++ b/app/soapbox/components/account_search.tsx
@@ -0,0 +1,78 @@
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_input';
+import Icon from 'soapbox/components/icon';
+
+const messages = defineMessages({
+  placeholder: { id: 'account_search.placeholder', defaultMessage: 'Search for an account' },
+});
+
+interface IAccountSearch {
+  /** Callback when a searched account is chosen. */
+  onSelected: (accountId: string) => void,
+  /** Override the default placeholder of the input. */
+  placeholder?: string,
+}
+
+/** Input to search for accounts. */
+const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
+  const intl = useIntl();
+
+  const [value, setValue] = useState('');
+
+  const isEmpty = (): boolean => {
+    return !(value.length > 0);
+  };
+
+  const clearState = () => {
+    setValue('');
+  };
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    setValue(target.value);
+  };
+
+  const handleSelected = (accountId: string) => {
+    clearState();
+    onSelected(accountId);
+  };
+
+  const handleClear: React.MouseEventHandler = e => {
+    e.preventDefault();
+
+    if (!isEmpty()) {
+      setValue('');
+    }
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler = e => {
+    if (e.key === 'Escape') {
+      document.querySelector('.ui')?.parentElement?.focus();
+    }
+  };
+
+  return (
+    <div className='search search--account'>
+      <label>
+        <span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span>
+        <AutosuggestAccountInput
+          className='rounded-full'
+          placeholder={intl.formatMessage(messages.placeholder)}
+          value={value}
+          onChange={handleChange}
+          onSelected={handleSelected}
+          onKeyDown={handleKeyDown}
+          {...rest}
+        />
+      </label>
+      <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
+        <Icon src={require('@tabler/icons/icons/search.svg')} className={classNames('svg-icon--search', { active: isEmpty() })} />
+        <Icon src={require('@tabler/icons/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
+      </div>
+    </div>
+  );
+};
+
+export default AccountSearch;

From eca6154cb9203544586413539539741bc37e0487 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 6 May 2022 14:51:49 -0500
Subject: [PATCH 7/8] EditProfile: remove fixed comment

---
 app/soapbox/features/edit_profile/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index b9f6f5661..1b6cf7e62 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/app/soapbox/features/edit_profile/index.tsx
@@ -391,8 +391,6 @@ const EditProfile: React.FC = () => {
           </div>
         </div>
 
-        {/* HACK: wrap these checkboxes in a .simple_form container so they get styled (for now) */}
-        {/* Need a either move, replace, or refactor these checkboxes. */}
         <List>
           {features.followRequests && (
             <ListItem

From 1a4991c6f937eee05e91d88d779ecba0c7722290 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 6 May 2022 14:55:16 -0500
Subject: [PATCH 8/8] Move Toggle to components/ui

---
 app/soapbox/components/ui/index.ts                             | 1 +
 app/soapbox/components/{ => ui/toggle}/toggle.tsx              | 2 +-
 app/soapbox/features/edit_profile/index.tsx                    | 3 +--
 .../features/notifications/components/setting_toggle.tsx       | 2 +-
 app/soapbox/features/soapbox_config/index.tsx                  | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)
 rename app/soapbox/components/{ => ui/toggle}/toggle.tsx (81%)

diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts
index dd92354cf..9bbc4ad87 100644
--- a/app/soapbox/components/ui/index.ts
+++ b/app/soapbox/components/ui/index.ts
@@ -30,5 +30,6 @@ export { default as Stack } from './stack/stack';
 export { default as Tabs } from './tabs/tabs';
 export { default as Text } from './text/text';
 export { default as Textarea } from './textarea/textarea';
+export { default as Toggle } from './toggle/toggle';
 export { default as Tooltip } from './tooltip/tooltip';
 export { default as Widget } from './widget/widget';
diff --git a/app/soapbox/components/toggle.tsx b/app/soapbox/components/ui/toggle/toggle.tsx
similarity index 81%
rename from app/soapbox/components/toggle.tsx
rename to app/soapbox/components/ui/toggle/toggle.tsx
index 32b286efa..466a207f8 100644
--- a/app/soapbox/components/toggle.tsx
+++ b/app/soapbox/components/ui/toggle/toggle.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactToggle, { ToggleProps } from 'react-toggle';
 
-/** Wrapper around react-toggle. */
+/** A glorified checkbox. Wrapper around react-toggle. */
 const Toggle: React.FC<ToggleProps> = ({ icons = false, ...rest }) => {
   return (
     <ReactToggle
diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index 1b6cf7e62..a8af56390 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/app/soapbox/features/edit_profile/index.tsx
@@ -5,12 +5,11 @@ import { updateNotificationSettings } from 'soapbox/actions/accounts';
 import { patchMe } from 'soapbox/actions/me';
 import snackbar from 'soapbox/actions/snackbar';
 import List, { ListItem } from 'soapbox/components/list';
-import Toggle from 'soapbox/components/toggle';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
 import { normalizeAccount } from 'soapbox/normalizers';
 import resizeImage from 'soapbox/utils/resize_image';
 
-import { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack } from '../../components/ui';
+import { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack, Toggle } from '../../components/ui';
 import Streamfield, { StreamfieldComponent } from '../../components/ui/streamfield/streamfield';
 
 import ProfilePreview from './components/profile-preview';
diff --git a/app/soapbox/features/notifications/components/setting_toggle.tsx b/app/soapbox/features/notifications/components/setting_toggle.tsx
index 76959bf06..3cd9c65a2 100644
--- a/app/soapbox/features/notifications/components/setting_toggle.tsx
+++ b/app/soapbox/features/notifications/components/setting_toggle.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Toggle from 'soapbox/components/toggle';
+import { Toggle } from 'soapbox/components/ui';
 
 import type { Map as ImmutableMap } from 'immutable';
 
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index a7bd29d58..bd9977ea2 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -6,7 +6,6 @@ import { updateConfig } from 'soapbox/actions/admin';
 import { uploadMedia } from 'soapbox/actions/media';
 import snackbar from 'soapbox/actions/snackbar';
 import List, { ListItem } from 'soapbox/components/list';
-import Toggle from 'soapbox/components/toggle';
 import {
   Column,
   CardHeader,
@@ -17,6 +16,7 @@ import {
   Input,
   Textarea,
   Button,
+  Toggle,
 } from 'soapbox/components/ui';
 import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
 import ThemeSelector from 'soapbox/features/ui/components/theme-selector';