[Glitch] Removes React Toggle library

Port bc09d3c5f2e48895d686f550a21af6c8155f2485 to glitch-soc

Co-authored-by: diondiondion <mail@diondiondion.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/form_fields/toggle.module.css

@@ -1,3 +1,13 @@
+.wrapper {
+  --diameter: 20px;
+  --padding: 2px;
+  --transition: 0.2s ease-in-out;
+
+  display: inline-block;
+  position: relative;
+  height: calc(var(--diameter) + var(--padding) * 2);
+}
+
 .input {
   position: absolute;
   opacity: 0;
@@ -9,10 +19,6 @@
 }
 
 .toggle {
-  --diameter: 20px;
-  --padding: 2px;
-  --transition: 0.2s ease-in-out;
-
   display: inline-flex;
   align-items: center;
   border-radius: 9999px;
@@ -68,8 +74,3 @@
 :global([dir='rtl']) .input:checked + .toggle::before {
   transform: translateX(calc(-1 * (var(--diameter) - (var(--padding) * 2))));
 }
-
-.wrapper {
-  display: inline-block;
-  position: relative;
-}

app/javascript/flavours/glitch/components/form_fields/toggle_field.tsx

@@ -31,20 +31,17 @@ ToggleField.displayName = 'ToggleField';
 
 export const Toggle = forwardRef<HTMLInputElement, Props>(
   ({ className, size, ...otherProps }, ref) => (
-    <span className={classes.wrapper}>
+    <span
+      className={classes.wrapper}
+      style={{ '--diameter': size ? `${size}px` : undefined } as CSSProperties}
+    >
       <input
         {...otherProps}
         type='checkbox'
         className={classes.input}
         ref={ref}
       />
-      <span
+      <span className={classNames(classes.toggle, className)} hidden />
-        className={classNames(classes.toggle, className)}
-        style={
-          { '--diameter': size ? `${size}px` : undefined } as CSSProperties
-        }
-        hidden
-      />
     </span>
   ),
 );

app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.jsx

@@ -7,10 +7,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import { NonceProvider } from 'react-select';
 import AsyncSelect from 'react-select/async';
-import Toggle from 'react-toggle';
-
-import { maxFeedHashtags } from 'flavours/glitch/initial_state';
 
+import { maxFeedHashtags } from '@/flavours/glitch/initial_state';
+import { Toggle } from '@/flavours/glitch/components/form_fields/toggle_field';
 import { injectIntl } from '@/flavours/glitch/components/intl';
 
 import SettingToggle from '../../notifications/components/setting_toggle';

app/javascript/flavours/glitch/features/lists/new.tsx

@@ -7,8 +7,6 @@ import { useParams, useHistory, Link } from 'react-router-dom';
 
 import { isFulfilled } from '@reduxjs/toolkit';
 
-import Toggle from 'react-toggle';
-
 import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import { fetchList } from 'flavours/glitch/actions/lists';
@@ -23,6 +21,7 @@ import { ColumnHeader } from 'flavours/glitch/components/column_header';
 import {
   SelectField,
   TextInputField,
+  Toggle,
 } from 'flavours/glitch/components/form_fields';
 import { Icon } from 'flavours/glitch/components/icon';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';

app/javascript/flavours/glitch/features/notifications/components/checkbox_with_label.tsx

@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react';
 import { useCallback } from 'react';
 
-import Toggle from 'react-toggle';
+import { Toggle } from '@/flavours/glitch/components/form_fields/toggle_field';
 
 interface Props {
   checked: boolean;

app/javascript/flavours/glitch/features/notifications/components/setting_toggle.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import Toggle from 'react-toggle';
+import { Toggle } from '@/flavours/glitch/components/form_fields/toggle_field';
 
 export default class SettingToggle extends PureComponent {
 
@@ -27,7 +27,7 @@ export default class SettingToggle extends PureComponent {
 
     return (
       <div className='setting-toggle'>
-        <Toggle disabled={disabled} id={id} checked={settings.getIn(settingPath, defaultValue)} onChange={this.onChange} onKeyDown={this.onKeyDown} />
+        <Toggle disabled={disabled} id={id} checked={settings.getIn(settingPath, defaultValue)} onChange={this.onChange} onKeyDown={this.onKeyDown} size={16} />
         <label htmlFor={id} className='setting-toggle__label'>{label}</label>
       </div>
     );

app/javascript/flavours/glitch/features/onboarding/profile.tsx

@@ -6,8 +6,6 @@ import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import { useHistory } from 'react-router-dom';
 
-import Toggle from 'react-toggle';
-
 import AddPhotoAlternateIcon from '@/material-icons/400-24px/add_photo_alternate.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
 import PersonIcon from '@/material-icons/400-24px/person.svg?react';
@@ -19,6 +17,7 @@ import { ColumnHeader } from 'flavours/glitch/components/column_header';
 import {
   TextAreaField,
   TextInputField,
+  Toggle,
 } from 'flavours/glitch/components/form_fields';
 import { Icon } from 'flavours/glitch/components/icon';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';

app/javascript/flavours/glitch/features/report/comment.tsx

@@ -6,8 +6,7 @@ import type { Map } from 'immutable';
 import { OrderedSet } from 'immutable';
 import { shallowEqual } from 'react-redux';
 
-import Toggle from 'react-toggle';
+import { Toggle } from '@/flavours/glitch/components/form_fields/toggle_field';
-
 import { fetchAccount } from 'flavours/glitch/actions/accounts';
 import { Button } from 'flavours/glitch/components/button';
 import type { Status } from 'flavours/glitch/models/status';