tweak web styles

src/components/activity-notifications/SubscribeProfileDialog.tsx

@@ -5,8 +5,8 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
-import {isNative} from '#/platform/detection'
+import {isWeb} from '#/platform/detection'
-import {useTheme, web} from '#/alf'
+import {platform, useTheme, web} from '#/alf'
 import {atoms as a} from '#/alf'
 import {Button, type ButtonProps, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -84,12 +84,21 @@ function DialogInner({
         label: _(msg`Save changes`),
         color: hasAny ? 'primary' : 'negative',
       }
+    } else {
+      // on web, a disabled save button feels more natural than a massive close button
+      if (isWeb) {
+        return {
+          label: _(msg`Save changes`),
+          color: 'secondary',
+          disabled: true,
+        }
       } else {
         return {
           label: _(msg`Cancel`),
           color: 'secondary',
         }
       }
+    }
   }, [state, _])
 
   const name = createSanitizedDisplayName(profile, false)
@@ -130,28 +139,40 @@ function DialogInner({
             <Toggle.Item
               label={_(msg`Posts`)}
               name="posts"
-              style={[a.justify_between, a.py_xs]}>
+              style={[
+                a.flex_1,
+                a.py_xs,
+                platform({
+                  native: [a.justify_between],
+                  web: [a.flex_row_reverse, a.gap_sm],
+                }),
+              ]}>
               <Toggle.LabelText
-                style={[t.atoms.text, a.font_normal, a.text_md]}>
+                style={[t.atoms.text, a.font_normal, a.text_md, a.flex_1]}>
                 <Trans>Posts</Trans>
               </Toggle.LabelText>
-              <Toggle.Platform />
+              <Toggle.Switch />
             </Toggle.Item>
             <Toggle.Item
               label={_(msg`Replies`)}
               name="replies"
-              style={[a.justify_between, a.py_xs]}>
+              style={[
+                a.flex_1,
+                a.py_xs,
+                platform({
+                  native: [a.justify_between],
+                  web: [a.flex_row_reverse, a.gap_sm],
+                }),
+              ]}>
               <Toggle.LabelText
-                style={[t.atoms.text, a.font_normal, a.text_md]}>
+                style={[t.atoms.text, a.font_normal, a.text_md, a.flex_1]}>
                 <Trans>Replies</Trans>
               </Toggle.LabelText>
-              <Toggle.Platform />
+              <Toggle.Switch />
             </Toggle.Item>
           </View>
         </Toggle.Group>
 
-        {/* don't show cancel button on web */}
-        {(isNative || buttonProps.color !== 'secondary') && (
         <Button
           {...buttonProps}
           size="large"
@@ -159,7 +180,6 @@ function DialogInner({
           onPress={() => control.close()}>
           <ButtonText>{buttonProps.label}</ButtonText>
         </Button>
-        )}
       </View>
 
       <Dialog.Close />