Remove duplicative Toggle component (#3028)

fix: Tidy some styling and spacing issues in settings

app/scenes/Settings/Features.tsx

@@ -6,7 +6,7 @@ import { useTranslation, Trans } from "react-i18next";
 import Heading from "~/components/Heading";
 import HelpText from "~/components/HelpText";
 import Scene from "~/components/Scene";
-import Toggle from "~/components/Toggle";
+import Switch from "~/components/Switch";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
@@ -44,7 +44,7 @@ function Features() {
           the experience for all team members.
         </Trans>
       </HelpText>
-      <Toggle
+      <Switch
         label={t("Collaborative editing")}
         name="collaborativeEditing"
         checked={data.collaborativeEditing}

app/scenes/Settings/Profile.tsx

@@ -97,7 +97,6 @@ const Profile = () => {
           required
           short
         />
-        <br />
         <InputSelect
           label={t("Language")}
           options={languageOptions}

app/scenes/Settings/Security.tsx

@@ -8,7 +8,7 @@ import Heading from "~/components/Heading";
 import HelpText from "~/components/HelpText";
 import InputSelect from "~/components/InputSelect";
 import Scene from "~/components/Scene";
-import Toggle from "~/components/Toggle";
+import Switch from "~/components/Switch";
 import env from "~/env";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
@@ -69,7 +69,7 @@ function Security() {
         </Trans>
       </HelpText>
 
-      <Toggle
+      <Switch
         label={t("Allow email authentication")}
         name="guestSignin"
         checked={data.guestSignin}
@@ -81,7 +81,7 @@ function Security() {
         }
         disabled={!env.EMAIL_ENABLED}
       />
-      <Toggle
+      <Switch
         label={t("Public document sharing")}
         name="sharing"
         checked={data.sharing}
@@ -90,7 +90,7 @@ function Security() {
           "When enabled, documents can be shared publicly on the internet by any team member"
         )}
       />
-      <Toggle
+      <Switch
         label={t("Rich service embeds")}
         name="documentEmbeds"
         checked={data.documentEmbeds}

app/scenes/Settings/components/NotificationListItem.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import NotificationSetting from "~/models/NotificationSetting";
-import Toggle from "~/components/Toggle";
+import Switch from "~/components/Switch";
 
 type Props = {
   setting?: NotificationSetting;
@@ -20,7 +20,7 @@ const NotificationListItem = ({
   description,
 }: Props) => {
   return (
-    <Toggle
+    <Switch
       label={title}
       name={event}
       checked={!!setting}

app/scenes/Settings/components/SlackListItem.tsx

@@ -13,7 +13,7 @@ import Flex from "~/components/Flex";
 import HelpText from "~/components/HelpText";
 import ListItem from "~/components/List/Item";
 import Popover from "~/components/Popover";
-import Toggle from "~/components/Toggle";
+import Switch from "~/components/Switch";
 import useToasts from "~/hooks/useToasts";
 
 type Props = {
@@ -82,13 +82,13 @@ function SlackListItem({ integration, collection }: Props) {
             <Events>
               <h3>{t("Notifications")}</h3>
               <HelpText>{t("These events should be posted to Slack")}</HelpText>
-              <Toggle
+              <Switch
                 label={t("Document published")}
                 name="documents.publish"
                 checked={integration.events.includes("documents.publish")}
                 onChange={handleChange}
               />
-              <Toggle
+              <Switch
                 label={t("Document updated")}
                 name="documents.update"
                 checked={integration.events.includes("documents.update")}