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] 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,