From d0fbc881e70ab1b8cada8de202e1800b087049b8 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 31 Mar 2023 11:52:19 -0500 Subject: [PATCH] Remove react-toggle --- .../report/components/status-check-box.tsx | 4 +- .../compose-event-modal.tsx | 5 +- .../modals/edit-federation-modal.tsx | 8 +- .../ui/components/modals/mute-modal.tsx | 5 +- .../report-modal/steps/other-actions-step.tsx | 5 +- app/styles/application.scss | 1 - app/styles/components/react-toggle.scss | 96 ------------------- package.json | 2 - yarn.lock | 14 --- 9 files changed, 6 insertions(+), 134 deletions(-) delete mode 100644 app/styles/components/react-toggle.scss diff --git a/app/soapbox/features/report/components/status-check-box.tsx b/app/soapbox/features/report/components/status-check-box.tsx index 9bb20dc774..78e3cbe793 100644 --- a/app/soapbox/features/report/components/status-check-box.tsx +++ b/app/soapbox/features/report/components/status-check-box.tsx @@ -1,9 +1,9 @@ import noop from 'lodash/noop'; import React from 'react'; -import Toggle from 'react-toggle'; import { toggleStatusReport } from 'soapbox/actions/reports'; import StatusContent from 'soapbox/components/status-content'; +import { Toggle } from 'soapbox/components/ui'; import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; import Bundle from '../../ui/components/bundle'; @@ -88,7 +88,7 @@ const StatusCheckBox: React.FC = ({ id, disabled }) => {
- +
); diff --git a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx index 5aa862c285..bb5d7659ee 100644 --- a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx +++ b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; -import Toggle from 'react-toggle'; import { changeEditEventApprovalRequired, @@ -22,7 +21,7 @@ import { closeModal, openModal } from 'soapbox/actions/modals'; import { ADDRESS_ICONS } from 'soapbox/components/autosuggest-location'; import LocationSearch from 'soapbox/components/location-search'; import { checkEventComposeContent } from 'soapbox/components/modal-root'; -import { Button, Form, FormGroup, HStack, Icon, IconButton, Input, Modal, Spinner, Stack, Tabs, Text, Textarea } from 'soapbox/components/ui'; +import { Button, Form, FormGroup, HStack, Icon, IconButton, Input, Modal, Spinner, Stack, Tabs, Text, Textarea, Toggle } from 'soapbox/components/ui'; import AccountContainer from 'soapbox/containers/account-container'; import { isCurrentOrFutureDate } from 'soapbox/features/compose/components/schedule-form'; import BundleContainer from 'soapbox/features/ui/containers/bundle-container'; @@ -273,7 +272,6 @@ const ComposeEventModal: React.FC = ({ onClose }) => { @@ -302,7 +300,6 @@ const ComposeEventModal: React.FC = ({ onClose }) => { {!id && ( diff --git a/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx b/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx index 59930e380c..a8851420f5 100644 --- a/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx +++ b/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx @@ -1,11 +1,10 @@ import { Map as ImmutableMap } from 'immutable'; import React, { useState, useEffect, useCallback } from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; -import Toggle from 'react-toggle'; import { updateMrf } from 'soapbox/actions/mrf'; import List, { ListItem } from 'soapbox/components/list'; -import { Modal } from 'soapbox/components/ui'; +import { Modal, Toggle } from 'soapbox/components/ui'; import { useAppSelector, useAppDispatch } from 'soapbox/hooks'; import { makeGetRemoteInstance } from 'soapbox/selectors'; import toast from 'soapbox/toast'; @@ -86,7 +85,6 @@ const EditFederationModal: React.FC = ({ host, onClose }) @@ -95,7 +93,6 @@ const EditFederationModal: React.FC = ({ host, onClose }) @@ -105,7 +102,6 @@ const EditFederationModal: React.FC = ({ host, onClose }) @@ -115,7 +111,6 @@ const EditFederationModal: React.FC = ({ host, onClose }) @@ -125,7 +120,6 @@ const EditFederationModal: React.FC = ({ host, onClose }) diff --git a/app/soapbox/features/ui/components/modals/mute-modal.tsx b/app/soapbox/features/ui/components/modals/mute-modal.tsx index 44ba725fed..5c8dd603ed 100644 --- a/app/soapbox/features/ui/components/modals/mute-modal.tsx +++ b/app/soapbox/features/ui/components/modals/mute-modal.tsx @@ -1,11 +1,10 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; -import Toggle from 'react-toggle'; import { muteAccount } from 'soapbox/actions/accounts'; import { closeModal } from 'soapbox/actions/modals'; import { toggleHideNotifications, changeMuteDuration } from 'soapbox/actions/mutes'; -import { Modal, HStack, Stack, Text } from 'soapbox/components/ui'; +import { Modal, HStack, Stack, Text, Toggle } from 'soapbox/components/ui'; import DurationSelector from 'soapbox/features/compose/components/polls/duration-selector'; import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks'; import { makeGetAccount } from 'soapbox/selectors'; @@ -74,7 +73,6 @@ const MuteModal = () => { @@ -90,7 +88,6 @@ const MuteModal = () => { diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx index 8f58c4b35f..55e4356039 100644 --- a/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx +++ b/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx @@ -1,11 +1,10 @@ import { OrderedSet } from 'immutable'; import React, { useEffect, useState } from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; -import Toggle from 'react-toggle'; import { changeReportBlock, changeReportForward } from 'soapbox/actions/reports'; import { fetchRules } from 'soapbox/actions/rules'; -import { Button, FormGroup, HStack, Stack, Text } from 'soapbox/components/ui'; +import { Button, FormGroup, HStack, Stack, Text, Toggle } from 'soapbox/components/ui'; import StatusCheckBox from 'soapbox/features/report/components/status-check-box'; import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks'; import { isRemote, getDomain } from 'soapbox/utils/accounts'; @@ -101,7 +100,6 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => { @@ -119,7 +117,6 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => { diff --git a/app/styles/application.scss b/app/styles/application.scss index d54785550f..f0a17c975f 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -21,7 +21,6 @@ @import 'components/display-name'; @import 'components/columns'; @import 'components/search'; -@import 'components/react-toggle'; @import 'components/video-player'; @import 'components/audio-player'; @import 'components/crypto-donate'; diff --git a/app/styles/components/react-toggle.scss b/app/styles/components/react-toggle.scss deleted file mode 100644 index a56db522a0..0000000000 --- a/app/styles/components/react-toggle.scss +++ /dev/null @@ -1,96 +0,0 @@ -.react-toggle { - display: inline-block; - position: relative; - cursor: pointer; - background-color: transparent; - border: 0; - padding: 0; - user-select: none; - -webkit-tap-highlight-color: #0000; - -webkit-tap-highlight-color: transparent; - - &:focus-within .react-toggle-track { - @apply ring-2 ring-offset-2 ring-primary-500; - } -} - -.react-toggle-screenreader-only { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.react-toggle--disabled { - cursor: not-allowed; - opacity: 0.5; - transition: opacity 0.25s; -} - -.react-toggle-track { - @apply bg-gray-500 dark:bg-gray-700 h-[30px] w-[50px] p-0 rounded-full transition-colors; -} - -.react-toggle--checked .react-toggle-track { - @apply bg-primary-600 dark:bg-accent-blue; -} - -.react-toggle-track-check { - position: absolute; - width: 14px; - height: 10px; - top: 0; - bottom: 0; - margin-top: auto; - margin-bottom: auto; - line-height: 0; - left: 8px; - opacity: 0; - transition: opacity 0.25s ease; -} - -.react-toggle--checked .react-toggle-track-check { - opacity: 1; - transition: opacity 0.25s ease; -} - -.react-toggle-track-x { - position: absolute; - width: 10px; - height: 10px; - top: 0; - bottom: 0; - margin-top: auto; - margin-bottom: auto; - line-height: 0; - right: 10px; - opacity: 1; - transition: opacity 0.25s ease; -} - -.react-toggle--checked .react-toggle-track-x { - opacity: 0; -} - -.react-toggle-thumb { - position: absolute; - top: 1px; - left: 1px; - width: 28px; - height: 28px; - border: 1px solid #fff; - border-radius: 50%; - background-color: #fff; - box-sizing: border-box; - transition: all 0.25s ease; - transition-property: border-color, left; -} - -.react-toggle--checked .react-toggle-thumb { - @apply border-primary-600 dark:border-accent-blue; - left: 21px; -} diff --git a/package.json b/package.json index 079f2173fe..f1d6bf54ed 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,6 @@ "@types/react-router-dom": "^5.3.3", "@types/react-sparklines": "^1.7.2", "@types/react-swipeable-views": "^0.13.1", - "@types/react-toggle": "^4.0.3", "@types/redux-mock-store": "^1.0.3", "@types/seedrandom": "^3.0.2", "@types/semver": "^7.3.9", @@ -165,7 +164,6 @@ "react-sticky-box": "^2.0.0", "react-swipeable-views": "^0.14.0", "react-textarea-autosize": "^8.3.4", - "react-toggle": "^4.1.2", "react-virtuoso": "^4.0.8", "redux": "^4.1.1", "redux-immutable": "^4.0.0", diff --git a/yarn.lock b/yarn.lock index 12eb37b1cc..4b51ca0555 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4497,13 +4497,6 @@ dependencies: "@types/react" "*" -"@types/react-toggle@^4.0.3": - version "4.0.3" - resolved "https://registry.yarnpkg.com/@types/react-toggle/-/react-toggle-4.0.3.tgz#8db98ac8d2c5e8c03c2d3a42027555c1cd2289da" - integrity sha512-57QdMWeeQdRjM2/p+udgYerxUbSkmeUIW18kwUttcci6GHkgxoqCsDZfRtsCsAHcvvM5VBQdtDUEgLWo2e87mA== - dependencies: - "@types/react" "*" - "@types/react@*", "@types/react@17", "@types/react@^18.0.26": version "18.0.26" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917" @@ -14819,13 +14812,6 @@ react-textarea-autosize@^8.3.4: use-composed-ref "^1.3.0" use-latest "^1.2.1" -react-toggle@^4.1.2: - version "4.1.2" - resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-4.1.2.tgz#b00500832f925ad524356d909821821ae39f6c52" - integrity sha512-4Ohw31TuYQdhWfA6qlKafeXx3IOH7t4ZHhmRdwsm1fQREwOBGxJT+I22sgHqR/w8JRdk+AeMCJXPImEFSrNXow== - dependencies: - classnames "^2.2.5" - react-transition-group@^2.2.1: version "2.9.0" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"