Remove duplicative Toggle component (#3028)

fix: Tidy some styling and spacing issues in settings

app/scenes/Invite.tsx

@@ -19,9 +19,11 @@ import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 
 const MAX_INVITES = 20;
+
 type Props = {
   onSubmit: () => void;
 };
+
 type InviteRequest = {
   email: string;
   name: string;
@@ -55,6 +57,7 @@ function Invite({ onSubmit }: Props) {
   const { t } = useTranslation();
   const predictedDomain = user.email.split("@")[1];
   const can = policies.abilities(team.id);
+
   const handleSubmit = React.useCallback(
     async (ev: React.SyntheticEvent) => {
       ev.preventDefault();
@@ -76,6 +79,7 @@ function Invite({ onSubmit }: Props) {
     },
     [onSubmit, showToast, invites, t, users]
   );
+
   const handleChange = React.useCallback((ev, index) => {
     setInvites((prevInvites) => {
       const newInvites = [...prevInvites];
@@ -83,6 +87,7 @@ function Invite({ onSubmit }: Props) {
       return newInvites;
     });
   }, []);
+
   const handleAdd = React.useCallback(() => {
     if (invites.length >= MAX_INVITES) {
       showToast(
@@ -105,6 +110,7 @@ function Invite({ onSubmit }: Props) {
       return newInvites;
     });
   }, [showToast, invites, t]);
+
   const handleRemove = React.useCallback(
     (ev: React.SyntheticEvent, index: number) => {
       ev.preventDefault();
@@ -116,12 +122,14 @@ function Invite({ onSubmit }: Props) {
     },
     []
   );
+
   const handleCopy = React.useCallback(() => {
     setLinkCopied(true);
     showToast(t("Share link copied"), {
       type: "success",
     });
   }, [showToast, t]);
+
   const handleRoleChange = React.useCallback((role: Role, index: number) => {
     setInvites((prevInvites) => {
       const newInvites = [...prevInvites];
@@ -129,6 +137,7 @@ function Invite({ onSubmit }: Props) {
       return newInvites;
     });
   }, []);
+
   return (
     <form onSubmit={handleSubmit}>
       {team.guestSignin ? (
@@ -180,9 +189,6 @@ function Invite({ onSubmit }: Props) {
               </Button>
             </CopyToClipboard>
           </Flex>
-          <p>
-            <hr />
-          </p>
         </CopyBlock>
       )}
       {invites.map((invite, index) => (
@@ -253,6 +259,9 @@ function Invite({ onSubmit }: Props) {
 const CopyBlock = styled("div")`
   margin: 2em 0;
   font-size: 14px;
+  background: ${(props) => props.theme.secondaryBackground};
+  border-radius: 8px;
+  padding: 16px 16px 8px;
 `;
 
 const Remove = styled("div")`