From 0906da980691fb302abe21ce4c7b07bc0283042c Mon Sep 17 00:00:00 2001 From: Jamie <113370520+jamiebuilds-signal@users.noreply.github.com> Date: Fri, 17 Oct 2025 12:43:08 -0700 Subject: [PATCH] Migrate all preferences buttons to axo button --- stylesheets/components/Preferences.scss | 279 +----------------- .../components/PreferencesDonations.scss | 13 - stylesheets/components/ProfileEditor.scss | 9 - ts/axo/AxoButton.dom.stories.tsx | 46 ++- ts/axo/AxoButton.dom.tsx | 100 ++++++- ts/components/AvatarModalButtons.dom.tsx | 19 +- ts/components/Preferences.dom.tsx | 78 +++-- ts/components/PreferencesBackups.dom.tsx | 18 +- ts/components/PreferencesDonateFlow.dom.tsx | 18 +- ts/components/PreferencesDonations.dom.tsx | 21 +- ts/components/PreferencesInternal.dom.tsx | 76 ++--- ts/components/PreferencesLocalBackups.dom.tsx | 78 ++--- ts/components/ProfileEditor.dom.tsx | 31 +- ts/components/SpinnerV2.dom.tsx | 21 ++ ts/components/UsernameEditor.dom.tsx | 27 +- .../PreferencesEditChatFoldersPage.dom.tsx | 16 +- ts/test-mock/pnp/username_test.node.ts | 2 +- .../notification_profiles_test.node.ts | 4 +- 18 files changed, 371 insertions(+), 485 deletions(-) diff --git a/stylesheets/components/Preferences.scss b/stylesheets/components/Preferences.scss index 2b12e57c79..707ba0189a 100644 --- a/stylesheets/components/Preferences.scss +++ b/stylesheets/components/Preferences.scss @@ -819,10 +819,6 @@ $secondary-text-color: light-dark( } } -.Preferences--BackupsAuthButton[disabled] { - cursor: auto; -} - .Preferences--BackupsRow { padding-block: 8px; margin-block-start: 8px; @@ -915,6 +911,7 @@ $secondary-text-color: light-dark( } .Preferences--LocalBackupsSetupScreenPane-top { + flex-grow: 0; min-height: 154px; } @@ -923,25 +920,6 @@ $secondary-text-color: light-dark( width: 100%; } -.Preferences--LocalBackupsSetupScreenCopyButton { - @include mixins.font-body-small; - padding-inline: 15px 21px; - font-weight: 500; - vertical-align: text-top; - - &::before { - content: ''; - display: inline-block; - height: 16px; - width: 16px; - margin-inline-end: 6px; - @include mixins.color-svg( - '../images/icons/v3/copy/copy-compact.svg', - variables.$color-black - ); - } -} - .Preferences--LocalBackupsSetupScreenPane-footer { flex-direction: row; flex-grow: 0; @@ -958,30 +936,14 @@ $secondary-text-color: light-dark( justify-content: right; } -.Preferences--LocalBackupsSetupScreenFooterSeeKeyButton { - @include mixins.font-body-1-bold; - padding-block: 0; - padding-inline: 0; - background: none; - border: none; - outline: none; - color: variables.$color-ultramarine; - - @include mixins.keyboard-mode { - &:focus { - outline: 2px solid variables.$color-ultramarine; - } - } -} - -.Preferences--LocalBackupsSetupScreenFooterButton { - padding-inline: 34px; -} - .Preferences--LocalBackupsSetupScreenBody { @include mixins.font-body-1; margin-block: 8px; color: $secondary-text-color; + + a { + text-decoration: none; + } } .Preferences--LocalBackupsSetupScreenBody--folder { @@ -1082,237 +1044,6 @@ $secondary-text-color: light-dark( color: $secondary-text-color; } -.Preferences--LocalBackupsConfirmKeyModalButton { - padding-inline: 32px; -} - -.Preferences--LocalBackupsConfirmKeyModal .module-Modal__button-footer { - justify-content: center; -} - -.Preferences__BackupsIcon { - @include mixins.light-theme { - @include mixins.color-svg( - '../images/icons/v3/signal_backups/signal_backups.svg', - variables.$color-gray-75 - ); - } - @include mixins.dark-theme { - @include mixins.color-svg( - '../images/icons/v3/signal_backups/signal_backups.svg', - variables.$color-gray-15 - ); - } -} - -.Preferences__LocalBackupsIcon { - @include mixins.light-theme { - @include mixins.color-svg( - '../images/icons/v3/device/device-laptop.svg', - variables.$color-gray-75 - ); - } - @include mixins.dark-theme { - @include mixins.color-svg( - '../images/icons/v3/device/device-laptop.svg', - variables.$color-gray-15 - ); - } -} - -.Preferences--LocalBackupsSetupScreen { - display: flex; - flex-direction: column; - text-align: center; -} - -.Preferences--LocalBackupsSetupScreenHeader { - @include mixins.font-title-2; - margin-block: 8px; -} - -.Preferences--LocalBackupsSetupScreenPane { - display: flex; - flex-direction: column; - flex-grow: 1; -} - -.Preferences--LocalBackupsSetupScreenPane-top { - flex-grow: 0; - min-height: 154px; -} - -.Preferences--LocalBackupsSetupScreenPaneContent { - display: block; - width: 100%; -} - -.Preferences--LocalBackupsSetupScreenCopyButton { - @include mixins.font-body-small; - padding-inline: 15px 21px; - font-weight: 500; - vertical-align: text-top; - - &::before { - content: ''; - display: inline-block; - height: 16px; - width: 16px; - margin-inline-end: 6px; - @include mixins.color-svg( - '../images/icons/v3/copy/copy-compact.svg', - variables.$color-black - ); - } -} - -.Preferences--LocalBackupsSetupScreenPane-footer { - flex-direction: row; - flex-grow: 0; - flex-shrink: 1; -} - -.Preferences--LocalBackupsSetupScreenFooterSection { - display: flex; - flex-grow: 1; -} - -.Preferences--LocalBackupsSetupScreenFooterSection-right { - justify-content: right; -} - -.Preferences--LocalBackupsSetupScreenFooterSeeKeyButton { - @include mixins.font-body-1-bold; - padding-block: 0; - padding-inline: 0; - background: none; - border: none; - outline: none; - color: variables.$color-ultramarine; - - @include mixins.keyboard-mode { - &:focus { - outline: 2px solid variables.$color-ultramarine; - } - } -} - -.Preferences--LocalBackupsSetupScreenFooterButton { - padding-inline: 34px; -} - -.Preferences--LocalBackupsSetupScreenBody { - @include mixins.font-body-1; - margin-block: 8px; - color: $secondary-text-color; -} - -.Preferences--LocalBackupsSetupScreenBody a { - text-decoration: none; -} - -.Preferences--LocalBackupsSetupScreenBody--folder { - margin-block-end: 57px; -} - -.Preferences--LocalBackupsBackupKey { - width: 274px; - height: 201px; - padding-block: 28px; - padding-inline: 36px; - margin-block: 28px 20px; - background: variables.$color-gray-02; - border-radius: 12px; - border-width: 0; - outline: none; - color: variables.$color-gray-90; - font-family: variables.$monospace; - font-size: 16px; - font-weight: 400; - line-height: 36.128px; - letter-spacing: 0.624px; - overflow: hidden; - resize: none; - word-break: break-all; - text-transform: uppercase; - - &::placeholder { - color: variables.$color-gray-45; - text-transform: none; - } -} - -.Preferences--LocalBackupsSetupIcon { - display: inline-flex; - width: 64px; - height: 64px; - border-radius: 64px; - background: variables.$color-ultramarine-pale; - align-items: center; - justify-content: center; - - &::before { - height: 38px; - width: 38px; - content: ''; - } -} - -.Preferences--LocalBackupsSetupIcon-folder { - margin-block-start: 60px; - margin-block-end: 12px; - - &::before { - @include mixins.color-svg( - '../images/icons/v3/folder/folder.svg', - variables.$color-ultramarine-logo - ); - } -} - -.Preferences--LocalBackupsSetupIcon-key { - &::before { - @include mixins.color-svg( - '../images/icons/v3/key/key.svg', - variables.$color-ultramarine-logo - ); - } -} - -.Preferences--LocalBackupsSetupIcon-lock { - &::before { - @include mixins.color-svg( - '../images/icons/v3/lock/lock.svg', - variables.$color-ultramarine-logo - ); - } -} - -.Preferences--LocalBackupsConfirmKeyModal { - padding-block: 36px 20px; - padding-inline: 32px; - text-align: center; -} - -.Preferences--LocalBackupsConfirmKeyModal__body { - padding: 0; -} - -.Preferences--LocalBackupsConfirmKeyModalTitle { - @include mixins.font-title-medium; - margin-block: 12px; -} - -.Preferences--LocalBackupsConfirmKeyModalBody { - @include mixins.font-body-1; - margin-block: 8px 32px; - color: $secondary-text-color; -} - -.Preferences--LocalBackupsConfirmKeyModalButton { - padding-inline: 32px; -} - .Preferences--LocalBackupsConfirmKeyModal .module-Modal__button-footer { justify-content: center; } diff --git a/stylesheets/components/PreferencesDonations.scss b/stylesheets/components/PreferencesDonations.scss index 5f58d3c7a5..5a2daf6940 100644 --- a/stylesheets/components/PreferencesDonations.scss +++ b/stylesheets/components/PreferencesDonations.scss @@ -42,10 +42,6 @@ } } - &__donate-button { - margin-block-end: 32px; - } - &__separator { width: 100%; height: 0.5px; @@ -466,15 +462,6 @@ } } -.PreferencesDonations__PrimaryButton { - @include mixins.font-body-2; - padding-block: 5px; - padding-inline: 12px; - font-weight: 400; - border: 0.5px solid variables.$color-black-alpha-16; - border-radius: 6px; -} - .PreferencesDonations__badge-list { width: 100%; margin-block: 4px 8px; diff --git a/stylesheets/components/ProfileEditor.scss b/stylesheets/components/ProfileEditor.scss index 22b1b1bb53..1ef219429e 100644 --- a/stylesheets/components/ProfileEditor.scss +++ b/stylesheets/components/ProfileEditor.scss @@ -392,12 +392,3 @@ justify-content: center; margin-block-end: 16px; } - -.ProfileEditor__EditPhoto { - @include mixins.font-subtitle; - - padding-block: 5px; - padding-inline: 10px; - border-radius: 14px; - font-weight: 600; -} diff --git a/ts/axo/AxoButton.dom.stories.tsx b/ts/axo/AxoButton.dom.stories.tsx index dac838028b..d98f57e500 100644 --- a/ts/axo/AxoButton.dom.stories.tsx +++ b/ts/axo/AxoButton.dom.stories.tsx @@ -1,6 +1,6 @@ // Copyright 2025 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only -import React from 'react'; +import React, { useState } from 'react'; import type { Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { @@ -9,6 +9,7 @@ import { AxoButton, } from './AxoButton.dom.js'; import { tw } from './tw.dom.js'; +import { AxoSwitch } from './AxoSwitch.dom.js'; export default { title: 'Axo/AxoButton', @@ -89,3 +90,46 @@ export function Basic(): JSX.Element { ); } + +export function Spinner(): JSX.Element { + const sizes = _getAllAxoButtonSizes(); + const variants = _getAllAxoButtonVariants(); + + const [loading, setLoading] = useState(true); + + function handleClick() { + setLoading(true); + } + + return ( + <> +
+ + Loading +
+
+ {sizes.map(size => { + return ( +
+ {variants.map(variant => { + return ( + + Save + + ); + })} +
+ ); + })} +
+ + ); +} diff --git a/ts/axo/AxoButton.dom.tsx b/ts/axo/AxoButton.dom.tsx index 9c218cf8af..da36bc3f1a 100644 --- a/ts/axo/AxoButton.dom.tsx +++ b/ts/axo/AxoButton.dom.tsx @@ -6,11 +6,13 @@ import type { TailwindStyles } from './tw.dom.js'; import { tw } from './tw.dom.js'; import { AxoSymbol } from './AxoSymbol.dom.js'; import { assert } from './_internal/assert.dom.js'; +import type { SpinnerVariant } from '../components/SpinnerV2.dom.js'; +import { SpinnerV2 } from '../components/SpinnerV2.dom.js'; const Namespace = 'AxoButton'; const baseAxoButtonStyles = tw( - 'flex items-center-safe justify-center-safe gap-1 truncate rounded-full select-none', + 'relative inline-flex items-center-safe justify-center-safe rounded-full select-none', 'outline-0 outline-border-focused focused:outline-[2.5px]', 'forced-colors:border' ); @@ -126,9 +128,9 @@ const AxoButtonVariants = { }; const AxoButtonSizes = { - large: tw('px-4 py-2 type-body-medium font-medium'), - medium: tw('px-3 py-1.5 type-body-medium font-medium'), - small: tw('px-2 py-1 type-body-small font-medium'), + large: tw('min-w-16 px-4 py-2 type-body-medium font-medium'), + medium: tw('min-w-14 px-3 py-1.5 type-body-medium font-medium'), + small: tw('min-w-12 px-2 py-1 type-body-small font-medium'), } as const satisfies Record; type BaseButtonAttrs = Omit< @@ -147,21 +149,82 @@ export function _getAllAxoButtonSizes(): ReadonlyArray { return Object.keys(AxoButtonSizes) as Array; } +const AxoButtonSpinnerVariants: Record = { + primary: 'axo-button-spinner-on-color', + secondary: 'axo-button-spinner-secondary', + affirmative: 'axo-button-spinner-on-color', + destructive: 'axo-button-spinner-on-color', + 'subtle-primary': 'axo-button-spinner-primary', + 'subtle-affirmative': 'axo-button-spinner-affirmative', + 'subtle-destructive': 'axo-button-spinner-destructive', + 'floating-primary': 'axo-button-spinner-primary', + 'floating-secondary': 'axo-button-spinner-secondary', + 'floating-affirmative': 'axo-button-spinner-affirmative', + 'floating-destructive': 'axo-button-spinner-destructive', + 'borderless-primary': 'axo-button-spinner-primary', + 'borderless-secondary': 'axo-button-spinner-secondary', + 'borderless-affirmative': 'axo-button-spinner-affirmative', + 'borderless-destructive': 'axo-button-spinner-destructive', +}; + +const AxoButtonSpinnerSizes: Record< + AxoButtonSize, + { size: number; strokeWidth: number } +> = { + large: { size: 20, strokeWidth: 2 }, + medium: { size: 20, strokeWidth: 2 }, + small: { size: 16, strokeWidth: 1.5 }, +}; + +type ExperimentalButtonSpinnerProps = Readonly<{ + buttonVariant: AxoButtonVariant; + buttonSize: AxoButtonSize; + 'aria-label': string; +}>; + +function ExperimentalButtonSpinner( + props: ExperimentalButtonSpinnerProps +): JSX.Element { + const variant = AxoButtonSpinnerVariants[props.buttonVariant]; + const sizeConfig = AxoButtonSpinnerSizes[props.buttonSize]; + return ( + + + + ); +} + export namespace AxoButton { export type Variant = AxoButtonVariant; export type Size = AxoButtonSize; + export type RootProps = BaseButtonAttrs & Readonly<{ variant: AxoButtonVariant; size: AxoButtonSize; symbol?: AxoSymbol.InlineGlyphName; arrow?: boolean; + experimentalSpinner?: { 'aria-label': string } | null; children: ReactNode; }>; export const Root: FC = memo( forwardRef((props, ref: ForwardedRef) => { - const { variant, size, symbol, arrow, children, ...rest } = props; + const { + variant, + size, + symbol, + arrow, + experimentalSpinner, + children, + ...rest + } = props; const variantStyles = assert( AxoButtonVariants[variant], `${Namespace}: Invalid variant ${variant}` @@ -170,6 +233,7 @@ export namespace AxoButton { AxoButtonSizes[size], `${Namespace}: Invalid size ${size}` ); + return ( ); diff --git a/ts/components/AvatarModalButtons.dom.tsx b/ts/components/AvatarModalButtons.dom.tsx index 0b728d7608..4def9a0c07 100644 --- a/ts/components/AvatarModalButtons.dom.tsx +++ b/ts/components/AvatarModalButtons.dom.tsx @@ -2,11 +2,10 @@ // SPDX-License-Identifier: AGPL-3.0-only import React, { useState } from 'react'; - -import { Button, ButtonVariant } from './Button.dom.js'; import { ConfirmDiscardDialog } from './ConfirmDiscardDialog.dom.js'; import type { LocalizerType } from '../types/Util.std.js'; import { Modal } from './Modal.dom.js'; +import { AxoButton } from '../axo/AxoButton.dom.js'; export type PropsType = { hasChanges: boolean; @@ -27,7 +26,9 @@ export function AvatarModalButtons({ return ( - - + {confirmDiscardAction && ( - - + } > @@ -1210,7 +1209,7 @@ export function Preferences({ } right={ { setSettingsLocation({ @@ -1254,12 +1253,13 @@ export function Preferences({ } right={
- + {i18n('icu:syncNow')} +
} /> @@ -1558,11 +1553,9 @@ export function Preferences({ } right={ - + } /> @@ -1610,12 +1603,13 @@ export function Preferences({ 'Preferences__one-third-flow--align-right' )} > - + @@ -1767,20 +1761,21 @@ export function Preferences({ )} > {hasStoriesDisabled ? ( - + ) : ( - + )} @@ -1807,12 +1802,13 @@ export function Preferences({ 'Preferences__one-third-flow--align-right' )} > - + diff --git a/ts/components/PreferencesBackups.dom.tsx b/ts/components/PreferencesBackups.dom.tsx index a9e5ccd0fd..47369d8d6a 100644 --- a/ts/components/PreferencesBackups.dom.tsx +++ b/ts/components/PreferencesBackups.dom.tsx @@ -16,7 +16,7 @@ import { LightIconLabel, SettingsRow, } from './PreferencesUtil.dom.js'; -import { Button, ButtonVariant } from './Button.dom.js'; +import { ButtonVariant } from './Button.dom.js'; import type { SettingsLocation } from '../types/Nav.std.js'; import { SettingsPage } from '../types/Nav.std.js'; import { I18n } from './I18n.dom.js'; @@ -27,6 +27,7 @@ import type { PromptOSAuthResultType, } from '../util/os/promptOSAuthMain.main.js'; import { ConfirmationDialog } from './ConfirmationDialog.dom.js'; +import { AxoButton } from '../axo/AxoButton.dom.js'; import { BackupLevel } from '../services/backups/types.std.js'; import { BackupsDetailsPage, @@ -230,14 +231,15 @@ export function PreferencesBackups({ 'Preferences__one-third-flow--align-right' )} > - + @@ -273,8 +275,9 @@ export function PreferencesBackups({ 'Preferences__one-third-flow--align-right' )} > - + diff --git a/ts/components/PreferencesDonateFlow.dom.tsx b/ts/components/PreferencesDonateFlow.dom.tsx index 51f1b941d8..6662ea79ef 100644 --- a/ts/components/PreferencesDonateFlow.dom.tsx +++ b/ts/components/PreferencesDonateFlow.dom.tsx @@ -13,7 +13,6 @@ import React, { import classNames from 'classnames'; import type { LocalizerType } from '../types/Util.std.js'; import { useConfirmDiscard } from '../hooks/useConfirmDiscard.dom.js'; -import { Button, ButtonVariant } from './Button.dom.js'; import { donationStateSchema, ONE_TIME_DONATION_CONFIG_ID, @@ -70,6 +69,7 @@ import { DonationsOfflineTooltip } from './conversation/DonationsOfflineTooltip. import { DonateInputAmount } from './preferences/donations/DonateInputAmount.dom.js'; import { Tooltip, TooltipPlacement } from './Tooltip.dom.js'; import { offsetDistanceModifier } from '../util/popperUtil.std.js'; +import { AxoButton } from '../axo/AxoButton.dom.js'; const SUPPORT_URL = 'https://support.signal.org/hc/requests/new?desktop'; @@ -516,14 +516,14 @@ function AmountPicker({ } const continueButton = ( - + ); let continueButtonWithTooltip: JSX.Element | undefined; @@ -759,16 +759,16 @@ function CardForm({ }, [handleDonateClicked, isDonateDisabled]); const donateButton = ( - + ); return ( diff --git a/ts/components/PreferencesDonations.dom.tsx b/ts/components/PreferencesDonations.dom.tsx index d116a76b87..d855d72a10 100644 --- a/ts/components/PreferencesDonations.dom.tsx +++ b/ts/components/PreferencesDonations.dom.tsx @@ -55,6 +55,8 @@ import type { AvatarUpdateOptionsType } from '../types/Avatar.std.js'; import { drop } from '../util/drop.std.js'; import { DonationsOfflineTooltip } from './conversation/DonationsOfflineTooltip.dom.js'; import { getInProgressDonation } from '../util/donations.dom.js'; +import { AxoButton } from '../axo/AxoButton.dom.js'; +import { tw } from '../axo/tw.dom.js'; const { groupBy, sortBy } = lodash; @@ -234,15 +236,16 @@ function DonationsHome({ const hasReceipts = donationReceipts.length > 0; const donateButton = ( - + + + {i18n('icu:PreferencesDonations__donate-button')} + + ); return ( diff --git a/ts/components/PreferencesInternal.dom.tsx b/ts/components/PreferencesInternal.dom.tsx index 8c99f1928f..3ab0097636 100644 --- a/ts/components/PreferencesInternal.dom.tsx +++ b/ts/components/PreferencesInternal.dom.tsx @@ -12,8 +12,6 @@ import { formatFileSize } from '../util/formatFileSize.std.js'; import { SECOND } from '../util/durations/index.std.js'; import type { ValidationResultType as BackupValidationResultType } from '../services/backups/index.preload.js'; import { SettingsRow, FlowingSettingsControl } from './PreferencesUtil.dom.js'; -import { Button, ButtonVariant } from './Button.dom.js'; -import { Spinner } from './Spinner.dom.js'; import type { MessageCountBySchemaVersionType } from '../sql/Interface.std.js'; import type { MessageAttributesType } from '../model-types.d.ts'; import type { DonationReceipt } from '../types/Donations.std.js'; @@ -21,6 +19,7 @@ import { createLogger } from '../logging/log.std.js'; import { isStagingServer } from '../util/isStagingServer.dom.js'; import { getHumanDonationAmount } from '../util/currency.dom.js'; import { AutoSizeTextArea } from './AutoSizeTextArea.dom.js'; +import { AxoButton } from '../axo/AxoButton.dom.js'; const log = createLogger('PreferencesInternal'); @@ -240,17 +239,19 @@ export function PreferencesInternal({ 'Preferences__one-third-flow--align-right' )} > - + {i18n('icu:Preferences__internal__validate-backup')} + @@ -274,17 +275,17 @@ export function PreferencesInternal({ 'Preferences__one-third-flow--align-right' )} > - + {i18n('icu:Preferences__internal__export-local-backup')} + @@ -306,8 +307,9 @@ export function PreferencesInternal({ 'Preferences__one-third-flow--align-right' )} > - + @@ -400,12 +402,13 @@ export function PreferencesInternal({ 'Preferences__one-third-flow--align-right' )} > - + @@ -450,17 +453,19 @@ export function PreferencesInternal({ {receipt.id.substring(0, 8)}... - + Download + ))} @@ -486,12 +491,13 @@ export function PreferencesInternal({ placeholder="SELECT * FROM items" moduleClassName="Preferences__ReadonlySqlPlayground__Textarea" /> - + {readOnlySqlResults != null && ( - + @@ -153,9 +155,13 @@ export function PreferencesLocalBackups({ 'Preferences__one-third-flow--align-right' )} > - + @@ -226,9 +231,13 @@ function LocalBackupsSetupFolderPicker({
{i18n('icu:Preferences--local-backups-setup-folder-description')}
- + ); @@ -295,23 +304,23 @@ function LocalBackupsBackupKeyViewer({ ); if (step === 'view') { footerRight = ( - + ); } else { footerRight = ( - + ); } } else { @@ -320,23 +329,23 @@ function LocalBackupsBackupKeyViewer({ 'icu:Preferences--local-backups-confirm-backup-key-description' ); footerLeft = ( - + ); footerRight = ( - + ); } @@ -348,14 +357,15 @@ function LocalBackupsBackupKeyViewer({ modalName="CallingAdhocCallInfo.UnknownContactInfo" moduleClassName="Preferences--LocalBackupsConfirmKeyModal" modalFooter={ - + } onClose={() => setStep('confirm')} padded={false} @@ -391,14 +401,14 @@ function LocalBackupsBackupKeyViewer({ {isStepViewOrReference && (
- +
)} diff --git a/ts/components/ProfileEditor.dom.tsx b/ts/components/ProfileEditor.dom.tsx index fe10704af8..76ca1e2f44 100644 --- a/ts/components/ProfileEditor.dom.tsx +++ b/ts/components/ProfileEditor.dom.tsx @@ -15,7 +15,7 @@ import type { MutableRefObject } from 'react'; import { AvatarColors } from '../types/Colors.std.js'; import { AvatarEditor } from './AvatarEditor.dom.js'; import { AvatarPreview } from './AvatarPreview.dom.js'; -import { Button, ButtonVariant } from './Button.dom.js'; +import { ButtonVariant } from './Button.dom.js'; import { Input } from './Input.dom.js'; import { PanelRow } from './conversation/conversation-details/PanelRow.dom.js'; import { UsernameEditState } from '../state/ducks/usernameEnums.std.js'; @@ -68,6 +68,7 @@ import type { ShowToastAction } from '../state/ducks/toast.preload.js'; import type { EmojiParentKey, EmojiVariantKey } from './fun/data/emojis.std.js'; import type { FunEmojiSelection } from './fun/panels/FunPanelEmojis.dom.js'; import { useConfirmDiscard } from '../hooks/useConfirmDiscard.dom.js'; +import { AxoButton } from '../axo/AxoButton.dom.js'; type ProfileEditorData = { firstName: string; @@ -407,10 +408,12 @@ export function ProfileEditor({ value={stagedProfile.familyName} />
- - +
); @@ -513,10 +516,12 @@ export function ProfileEditor({ })}
- - +
); @@ -714,15 +719,15 @@ export function ProfileEditor({ }} />
- +
; export type SpinnerVariant = keyof typeof SpinnerVariants; @@ -81,6 +101,7 @@ export function SpinnerV2({ return ( diff --git a/ts/components/UsernameEditor.dom.tsx b/ts/components/UsernameEditor.dom.tsx index 634f05a805..f8b44a9b84 100644 --- a/ts/components/UsernameEditor.dom.tsx +++ b/ts/components/UsernameEditor.dom.tsx @@ -26,7 +26,6 @@ import { } from '../state/ducks/usernameEnums.std.js'; import type { ReserveUsernameOptionsType } from '../state/ducks/username.preload.js'; import type { ShowToastAction } from '../state/ducks/toast.preload.js'; - import { AutoSizeInput } from './AutoSizeInput.dom.js'; import { ConfirmationDialog } from './ConfirmationDialog.dom.js'; import { Input } from './Input.dom.js'; @@ -34,6 +33,7 @@ import { Spinner } from './Spinner.dom.js'; import { Modal } from './Modal.dom.js'; import { Button, ButtonVariant } from './Button.dom.js'; import { useConfirmDiscard } from '../hooks/useConfirmDiscard.dom.js'; +import { AxoButton } from '../axo/AxoButton.dom.js'; const { noop } = lodash; @@ -382,20 +382,25 @@ export function UsernameEditor({
- - + + + {i18n('icu:save')} +
{confirmDiscardModal} diff --git a/ts/components/preferences/chatFolders/PreferencesEditChatFoldersPage.dom.tsx b/ts/components/preferences/chatFolders/PreferencesEditChatFoldersPage.dom.tsx index 675f5fdcad..012082d06e 100644 --- a/ts/components/preferences/chatFolders/PreferencesEditChatFoldersPage.dom.tsx +++ b/ts/components/preferences/chatFolders/PreferencesEditChatFoldersPage.dom.tsx @@ -8,7 +8,6 @@ import type { PreferredBadgeSelectorType } from '../../../state/selectors/badges import type { LocalizerType } from '../../../types/I18N.std.js'; import type { ThemeType } from '../../../types/Util.std.js'; import { Input } from '../../Input.dom.js'; -import { Button, ButtonVariant } from '../../Button.dom.js'; import { ConfirmationDialog } from '../../ConfirmationDialog.dom.js'; import type { ChatFolderSelection } from '../PreferencesSelectChatsDialog.dom.js'; import { SettingsControl, SettingsRow } from '../../PreferencesUtil.dom.js'; @@ -47,6 +46,7 @@ import { ItemContent, ItemTitle, } from './PreferencesChatFolderItems.dom.js'; +import { AxoButton } from '../../../axo/AxoButton.dom.js'; export type PreferencesEditChatFolderPageProps = Readonly<{ i18n: LocalizerType; @@ -550,19 +550,21 @@ export function PreferencesEditChatFolderPage( title={i18n('icu:Preferences__EditChatFolderPage__Title')} actions={ <> - - + } /> diff --git a/ts/test-mock/pnp/username_test.node.ts b/ts/test-mock/pnp/username_test.node.ts index f5d04aa59a..90aff37d96 100644 --- a/ts/test-mock/pnp/username_test.node.ts +++ b/ts/test-mock/pnp/username_test.node.ts @@ -214,7 +214,7 @@ describe('pnp/username', function (this: Mocha.Suite) { debug('saving username'); let state = await phone.expectStorageState('consistency check'); - await profileEditor.locator('.module-Button >> "Save"').click(); + await profileEditor.getByRole('button', { name: 'Save' }).click(); debug('checking the username is saved'); { diff --git a/ts/test-mock/storage/notification_profiles_test.node.ts b/ts/test-mock/storage/notification_profiles_test.node.ts index 8029158a3d..f6579a2db0 100644 --- a/ts/test-mock/storage/notification_profiles_test.node.ts +++ b/ts/test-mock/storage/notification_profiles_test.node.ts @@ -72,7 +72,7 @@ describe('storage service/notification profiles', function (this: Mocha.Suite) { const profileName = 'NewProfile'; debug('Starting Notification Profiles onboarding'); - await window.getByTestId('OnboardNotificationProfiles').click(); + await window.getByRole('button', { name: 'Set up' }).click(); debug('Dismiss onboarding dialog'); await window.getByRole('button', { name: 'Continue' }).click(); @@ -207,7 +207,7 @@ describe('storage service/notification profiles', function (this: Mocha.Suite) { await window.getByRole('button', { name: 'Notifications' }).click(); debug('Open Notification Profiles list page'); - await window.getByTestId('OnboardNotificationProfiles').click(); + await window.getByRole('button', { name: 'Set up' }).click(); debug('Dismiss onboarding dialog'); await window.getByRole('button', { name: 'Continue' }).click();