diff --git a/src/components/activity-notifications/SubscribeProfileDialog.tsx b/src/components/activity-notifications/SubscribeProfileDialog.tsx index c6499ac15c..334faf8839 100644 --- a/src/components/activity-notifications/SubscribeProfileDialog.tsx +++ b/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 {useTheme, web} from '#/alf' +import {isWeb} from '#/platform/detection' +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' @@ -85,9 +85,18 @@ function DialogInner({ color: hasAny ? 'primary' : 'negative', } } else { - return { - label: _(msg`Cancel`), - color: 'secondary', + // 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, _]) @@ -130,36 +139,47 @@ function DialogInner({ + style={[ + a.flex_1, + a.py_xs, + platform({ + native: [a.justify_between], + web: [a.flex_row_reverse, a.gap_sm], + }), + ]}> + style={[t.atoms.text, a.font_normal, a.text_md, a.flex_1]}> Posts - + + style={[ + a.flex_1, + a.py_xs, + platform({ + native: [a.justify_between], + web: [a.flex_row_reverse, a.gap_sm], + }), + ]}> + style={[t.atoms.text, a.font_normal, a.text_md, a.flex_1]}> Replies - + - {/* don't show cancel button on web */} - {(isNative || buttonProps.color !== 'secondary') && ( - - )} +