Make various settings interfaces more consistent

src/app/features/common-settings/cosmetics/Cosmetics.tsx

@@ -156,34 +156,44 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                   variant="SurfaceVariant"
                   direction="Column"
                   gap="400"
-                  style={{ padding: '16px' }}
                 >
-                  <Box direction="Column" gap="200">
-                    <Box direction="Column">
-                      <Text size="T300">/color [hex]</Text>
-                      <Text size="T200" priority="300">
-                        Set room-specific name color. (e.g. /color #ff00ff)
-                      </Text>
-                    </Box>
-                    <Box direction="Column">
-                      <Text size="T300">/font [name]</Text>
-                      <Text size="T200" priority="300">
-                        Set room-specific name font. (e.g. /font monospace)
-                      </Text>
-                    </Box>
-                    <Box direction="Column">
-                      <Text size="T300">/pronoun [pronouns]</Text>
-                      <Text size="T200" priority="300">
-                        Set room-specific pronoun set. (e.g. /pronoun &quot;they\them, it\its&quot;)
-                      </Text>
-                    </Box>
-                    <Box direction="Column">
-                      <Text size="T300">/gcolor | /gfont | /gpronoun</Text>
-                      <Text size="T200" priority="300">
-                        Apply colors/fonts/pronouns to the entire space.
-                      </Text>
-                    </Box>
-                  </Box>
+                  <SettingTile
+                    title="/color [hex]"
+                    description="Set room-specific name color. (e.g. /color #ff00ff)"
+                  />
+                </SequenceCard>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="/font [name]"
+                    description="Set room-specific name font. (e.g. /font monospace)"
+                  />
+                </SequenceCard>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="/pronoun [pronouns]"
+                    description='Set room-specific pronoun set. (e.g. /pronoun "they\them, it\its")'
+                  />
+                </SequenceCard>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="/gcolor | /gfont | /gpronoun"
+                    description="Apply colors/fonts/pronouns to the entire space."
+                  />
                 </SequenceCard>
               </Box>
             </Box>

src/app/features/settings/about/About.tsx

@@ -67,7 +67,7 @@ export function About({ requestClose }: AboutProps) {
                     </Button>
                     <Button
                       as="a"
-                      href="https://github.com/7w1/sable"
+                      href="https://github.com/7w1/sable/pulls"
                       rel="noreferrer noopener"
                       target="_blank"
                       variant="Critical"

src/app/features/settings/account/Profile.tsx

@@ -100,11 +100,7 @@ function ProfileAvatar({ profile, userId }: ProfileProps) {
 
   return (
     <SettingTile
-      title={
-        <Text as="span" size="L400">
-          Avatar
-        </Text>
-      }
+      title="Avatar"
       after={
         <Avatar size="500" radii="300">
           <UserAvatar
@@ -280,13 +276,7 @@ function ProfileBanner({ profile, userId }: ProfileProps) {
   const previewUrl = isRemoving ? undefined : imageFileURL || stagedUrl || bannerUrl;
 
   return (
-    <SettingTile
-      title={
-        <Text as="span" size="L400">
-          Profile Banner
-        </Text>
-      }
-    >
+    <SettingTile title="Banner">
       <Box direction="Column" gap="300" grow="Yes">
         <Box
           style={{
@@ -432,13 +422,7 @@ function ProfileDisplayName({ profile, userId }: ProfileProps) {
 
   const hasChanges = displayName !== defaultDisplayName;
   return (
-    <SettingTile
-      title={
-        <Text as="span" size="L400">
-          Display Name
-        </Text>
-      }
-    >
+    <SettingTile title="Display Name">
       <Box direction="Column" grow="Yes" gap="100">
         <Box
           as="form"
@@ -635,7 +619,21 @@ export function Profile() {
           gap="400"
         >
           <ProfileBanner userId={userId} profile={profile} />
+        </SequenceCard>
+        <SequenceCard
+          className={SequenceCardStyle}
+          variant="SurfaceVariant"
+          direction="Column"
+          gap="400"
+        >
           <ProfileAvatar userId={userId} profile={profile} />
+        </SequenceCard>
+        <SequenceCard
+          className={SequenceCardStyle}
+          variant="SurfaceVariant"
+          direction="Column"
+          gap="400"
+        >
           <ProfileDisplayName userId={userId} profile={profile} />
         </SequenceCard>
       </Box>

src/app/features/settings/developer-tools/SyncDiagnostics.tsx

@@ -171,6 +171,7 @@ export function SyncDiagnostics() {
                   size="300"
                   variant="Secondary"
                   fill="Soft"
+                  outlined
                   radii="300"
                   before={<Icon src={expandSliding ? Icons.ChevronTop : Icons.ChevronBottom} />}
                   onClick={() => setExpandSliding((v) => !v)}

src/app/features/settings/general/General.tsx

@@ -804,7 +804,9 @@ function Sync() {
 
   return (
     <Box direction="Column" gap="100">
-      <Text size="L400">Sync</Text>
+      <Text size="L400" style={{ opacity: serverSlidingEnabled ? 1 : 0.5 }}>
+        Sync
+      </Text>
       <SequenceCard
         className={SequenceCardStyle}
         variant="SurfaceVariant"

src/app/features/settings/notifications/DeregisterPushNotifications.tsx

@@ -112,35 +112,34 @@ export function DeregisterAllPushersSetting() {
       )}
 
       <SettingTile
-        title="Reset all push notifications"
+        title="Reset All Push Notifications"
         description={
-          <div>
-            <Text>
-              This will remove push notifications from all your sessions/devices. You will need to
-              re-enable them on each device individually.
-            </Text>
-            {deregisterState.status === AsyncStatus.Error && (
-              <Text as="span" style={{ color: color.Critical.Main }} size="T200">
-                <br />
-                Failed to deregister devices. Please try again.
-              </Text>
-            )}
-            {deregisterState.status === AsyncStatus.Success && (
-              <Text as="span" style={{ color: color.Success.Main }} size="T200">
-                <br />
-                Successfully deregistered all devices.
-              </Text>
-            )}
-          </div>
+          <>
+            This will remove push notifications from all your sessions/devices.
+            <br />
+            You will need to re-enable them on each device individually.
+          </>
         }
         after={
-          <Button size="300" radii="300" onClick={handleOpenConfirmDialog}>
-            <Text size="B300" style={{ color: color.Critical.Main }}>
-              Reset All
-            </Text>
+          <Button size="300" radii="300" variant="Critical" onClick={handleOpenConfirmDialog}>
+            <Text size="B300">Reset All</Text>
           </Button>
         }
-      />
+      >
+        {/* FIXME: these two things below, even before my changes, don't really seem to ever appear? */}
+        {deregisterState.status === AsyncStatus.Error && (
+          <Text as="span" style={{ color: color.Critical.Main }} size="T200">
+            <br />
+            Failed to deregister devices. Please try again.
+          </Text>
+        )}
+        {deregisterState.status === AsyncStatus.Success && (
+          <Text as="span" style={{ color: color.Success.Main }} size="T200">
+            <br />
+            Successfully deregistered all devices.
+          </Text>
+        )}
+      </SettingTile>
     </>
   );
 }