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/Details.tsx

@@ -14,6 +14,7 @@ import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 import ImageInput from "./components/ImageInput";
+import SettingRow from "./components/SettingRow";
 
 function Details() {
   const { auth } = useStores();
@@ -89,60 +90,87 @@ function Details() {
     setDefaultCollectionId(defaultCollectionId);
   }, []);
 
-  const isValid = form.current && form.current.checkValidity();
+  const isValid = form.current?.checkValidity();
 
   return (
     <Scene title={t("Details")} icon={<TeamIcon color="currentColor" />}>
       <Heading>{t("Details")}</Heading>
       <Text type="secondary">
         <Trans>
-          These details affect the way that your Outline appears to everyone on
-          the team.
+          These settings affect the way that your knowledge base appears to
+          everyone on the team.
         </Trans>
       </Text>
 
-      <ImageInput
-        label={t("Logo")}
-        onSuccess={handleAvatarUpload}
-        onError={handleAvatarError}
-        src={avatarUrl}
-        borderRadius={0}
-      />
-
       <form onSubmit={handleSubmit} ref={form}>
-        <Input
+        <SettingRow
+          label={t("Logo")}
+          name="avatarUrl"
+          description={t(
+            "The logo is displayed at the top left of the application."
+          )}
+        >
+          <ImageInput
+            onSuccess={handleAvatarUpload}
+            onError={handleAvatarError}
+            src={avatarUrl}
+            borderRadius={0}
+          />
+        </SettingRow>
+        <SettingRow
           label={t("Name")}
           name="name"
-          autoComplete="organization"
-          value={name}
-          onChange={handleNameChange}
-          required
-          short
-        />
-        {env.SUBDOMAINS_ENABLED && (
-          <>
-            <Input
-              label={t("Subdomain")}
-              name="subdomain"
-              value={subdomain || ""}
-              onChange={handleSubdomainChange}
-              autoComplete="off"
-              minLength={4}
-              maxLength={32}
-              short
-            />
-            {subdomain && (
+          description={t(
+            "The team name, usually the same as your company name."
+          )}
+        >
+          <Input
+            id="name"
+            autoComplete="organization"
+            value={name}
+            onChange={handleNameChange}
+            required
+          />
+        </SettingRow>
+        <SettingRow
+          visible={env.SUBDOMAINS_ENABLED && env.DEPLOYMENT === "hosted"}
+          label={t("Subdomain")}
+          name="subdomain"
+          description={
+            subdomain ? (
               <Text type="secondary" size="small">
                 <Trans>Your knowledge base will be accessible at</Trans>{" "}
                 <strong>{subdomain}.getoutline.com</strong>
               </Text>
-            )}
-          </>
-        )}
-        <DefaultCollectionInputSelect
-          onSelectCollection={onSelectCollection}
-          defaultCollectionId={defaultCollectionId}
-        />
+            ) : (
+              t("Choose a subdomain to enable a login page just for your team.")
+            )
+          }
+        >
+          <Input
+            id="subdomain"
+            value={subdomain || ""}
+            onChange={handleSubdomainChange}
+            autoComplete="off"
+            minLength={4}
+            maxLength={32}
+          />
+        </SettingRow>
+        <SettingRow
+          border={false}
+          label={t("Start view")}
+          name="defaultCollectionId"
+          description={t(
+            "This is the screen that team members will first see when they sign in."
+          )}
+        >
+          <DefaultCollectionInputSelect
+            id="defaultCollectionId"
+            onSelectCollection={onSelectCollection}
+            defaultCollectionId={defaultCollectionId}
+          />
+        </SettingRow>
+
         <Button type="submit" disabled={auth.isSaving || !isValid}>
           {auth.isSaving ? `${t("Saving")}…` : t("Save")}
         </Button>