Remove duplicative Toggle component (#3028)

fix: Tidy some styling and spacing issues in settings

app/scenes/CollectionPermissions/components/CollectionGroupMemberListItem.tsx

@@ -54,7 +54,6 @@ const CollectionGroupMemberListItem = ({
             labelHidden
             nude
           />
-          <Spacer />
           <CollectionGroupMemberMenu
             onMembers={openMembersModal}
             onRemove={onRemove}
@@ -65,14 +64,12 @@ const CollectionGroupMemberListItem = ({
   );
 };
 
-const Spacer = styled.div`
-  width: 8px;
-`;
-
 const Select = styled(InputSelect)`
   margin: 0;
   font-size: 14px;
   border-color: transparent;
+  box-shadow: none;
+  color: ${(props) => props.theme.textSecondary};
 
   select {
     margin: 0;

app/scenes/CollectionPermissions/components/MemberListItem.tsx

@@ -14,11 +14,11 @@ import MemberMenu from "~/menus/MemberMenu";
 
 type Props = {
   user: User;
-  membership?: Membership | null | undefined;
+  membership?: Membership | undefined;
   canEdit: boolean;
-  onAdd?: () => any;
-  onRemove?: () => any;
-  onUpdate?: (permission: string) => any;
+  onAdd?: () => void;
+  onRemove?: () => void;
+  onUpdate?: (permission: string) => void;
 };
 
 const MemberListItem = ({
@@ -62,7 +62,7 @@ const MemberListItem = ({
       }
       image={<Avatar src={user.avatarUrl} size={32} />}
       actions={
-        <Flex align="center">
+        <Flex align="center" gap={8}>
           {onUpdate && (
             <Select
               label={t("Permissions")}
@@ -77,7 +77,6 @@ const MemberListItem = ({
           )}
           {canEdit && (
             <>
-              <Spacer />
               {onRemove && <MemberMenu onRemove={onRemove} />}
               {onAdd && (
                 <Button onClick={onAdd} neutral>
@@ -92,14 +91,12 @@ const MemberListItem = ({
   );
 };
 
-const Spacer = styled.div`
-  width: 8px;
-`;
-
 const Select = styled(InputSelect)`
   margin: 0;
   font-size: 14px;
   border-color: transparent;
+  box-shadow: none;
+  color: ${(props) => props.theme.textSecondary};
 
   select {
     margin: 0;

app/scenes/CollectionPermissions/components/UserListItem.tsx

@@ -11,7 +11,7 @@ import Time from "~/components/Time";
 type Props = {
   user: User;
   canEdit: boolean;
-  onAdd: () => any;
+  onAdd: () => void;
 };
 
 const UserListItem = ({ user, onAdd, canEdit }: Props) => {

app/scenes/CollectionPermissions/index.tsx

@@ -203,10 +203,9 @@ function CollectionPermissions({ collection }: Props) {
       <InputSelectPermission
         onChange={handleChangePermission}
         value={collection.permission || ""}
-        short
         nude
       />
-      <PermissionExplainer>
+      <PermissionExplainer small>
         {!collection.permission && (
           <Trans
             defaults="The <em>{{ collectionName }}</em> collection is private. Team members have no access to it by default."
@@ -248,20 +247,21 @@ function CollectionPermissions({ collection }: Props) {
         onChange={handleSharingChange}
         checked={sharing && teamSharingEnabled}
         disabled={!teamSharingEnabled}
+        note={
+          teamSharingEnabled ? (
+            <Trans>
+              When enabled, documents can be shared publicly on the internet.
+            </Trans>
+          ) : (
+            <Trans>
+              Public sharing is currently disabled in the team security
+              settings.
+            </Trans>
+          )
+        }
       />
-      <HelpText>
-        {teamSharingEnabled ? (
-          <Trans>
-            When enabled, documents can be shared publicly on the internet.
-          </Trans>
-        ) : (
-          <Trans>
-            Public sharing is currently disabled in the team security settings.
-          </Trans>
-        )}
-      </HelpText>
       <Labeled label={t("Additional access")}>
-        <Actions>
+        <Actions gap={8}>
           <Button
             type="button"
             onClick={handleAddGroupModalOpen}
@@ -269,7 +269,7 @@ function CollectionPermissions({ collection }: Props) {
             neutral
           >
             {t("Add groups")}
-          </Button>{" "}
+          </Button>
           <Button
             type="button"
             onClick={handleAddMemberModalOpen}
@@ -358,7 +358,7 @@ const PermissionExplainer = styled(HelpText)`
   margin-bottom: 24px;
 `;
 
-const Actions = styled.div`
+const Actions = styled(Flex)`
   margin-bottom: 12px;
 `;