feat: Improve settings layout (#3234)

* Setup, and security settings

* Settings -> Details

* Settings -> Notifications

* Profile

* lint

* fix: Flash of loading on members screen

* align language input

* feat: Move share links management to sortable table

* Add account menu to sidebar on settings page

* Aesthetic tweaks, light borders between settings and slight column offset

app/scenes/Settings/Security.tsx

@@ -13,6 +13,7 @@ import env from "~/env";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
+import SettingRow from "./components/SettingRow";
 
 function Security() {
   const { auth } = useStores();
@@ -25,10 +26,6 @@ function Security() {
     guestSignin: team.guestSignin,
     defaultUserRole: team.defaultUserRole,
   });
-  const notes = {
-    member: t("New user accounts will be given member permissions by default"),
-    viewer: t("New user accounts will be given viewer permissions by default"),
-  };
 
   const showSuccessMessage = React.useMemo(
     () =>
@@ -42,7 +39,7 @@ function Security() {
 
   const handleChange = React.useCallback(
     async (ev: React.ChangeEvent<HTMLInputElement>) => {
-      const newData = { ...data, [ev.target.name]: ev.target.checked };
+      const newData = { ...data, [ev.target.id]: ev.target.checked };
       setData(newData);
       await auth.updateTeam(newData);
       showSuccessMessage();
@@ -59,9 +56,7 @@ function Security() {
 
   return (
     <Scene title={t("Security")} icon={<PadlockIcon color="currentColor" />}>
-      <Heading>
-        <Trans>Security</Trans>
-      </Heading>
+      <Heading>{t("Security")}</Heading>
       <Text type="secondary">
         <Trans>
           Settings that impact the access, security, and content of your
@@ -69,54 +64,70 @@ function Security() {
         </Trans>
       </Text>
 
-      <Switch
+      <SettingRow
         label={t("Allow email authentication")}
         name="guestSignin"
-        checked={data.guestSignin}
-        onChange={handleChange}
-        note={
+        description={
           env.EMAIL_ENABLED
             ? t("When enabled, users can sign-in using their email address")
             : t("The server must have SMTP configured to enable this setting")
         }
-        disabled={!env.EMAIL_ENABLED}
-      />
-      <Switch
+      >
+        <Switch
+          id="guestSignin"
+          checked={data.guestSignin}
+          onChange={handleChange}
+          disabled={!env.EMAIL_ENABLED}
+        />
+      </SettingRow>
+      <SettingRow
         label={t("Public document sharing")}
         name="sharing"
-        checked={data.sharing}
-        onChange={handleChange}
-        note={t(
+        description={t(
           "When enabled, documents can be shared publicly on the internet by any team member"
         )}
-      />
-      <Switch
+      >
+        <Switch id="sharing" checked={data.sharing} onChange={handleChange} />
+      </SettingRow>
+      <SettingRow
         label={t("Rich service embeds")}
         name="documentEmbeds"
-        checked={data.documentEmbeds}
-        onChange={handleChange}
-        note={t(
+        description={t(
           "Links to supported services are shown as rich embeds within your documents"
         )}
-      />
-      <InputSelect
-        value={data.defaultUserRole}
-        label="Default role"
-        options={[
-          {
-            label: t("Member"),
-            value: "member",
-          },
-          {
-            label: t("Viewer"),
-            value: "viewer",
-          },
-        ]}
-        onChange={handleDefaultRoleChange}
-        ariaLabel={t("Default role")}
-        note={notes[data.defaultUserRole]}
-        short
-      />
+      >
+        <Switch
+          id="documentEmbeds"
+          checked={data.documentEmbeds}
+          onChange={handleChange}
+        />
+      </SettingRow>
+
+      <SettingRow
+        label={t("Default role")}
+        name="defaultUserRole"
+        description={t(
+          "The default user role for new accounts. Changing this setting does not affect existing user accounts."
+        )}
+      >
+        <InputSelect
+          id="defaultUserRole"
+          value={data.defaultUserRole}
+          options={[
+            {
+              label: t("Member"),
+              value: "member",
+            },
+            {
+              label: t("Viewer"),
+              value: "viewer",
+            },
+          ]}
+          onChange={handleDefaultRoleChange}
+          ariaLabel={t("Default role")}
+          short
+        />
+      </SettingRow>
     </Scene>
   );
 }