diff --git a/_locales/en/messages.json b/_locales/en/messages.json index c8bb31a2e9..19a982b006 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -6122,6 +6122,10 @@ "messageformat": "Donate to Signal", "description": "In the badge dialog. This button is shown under sustainer badges, taking users to some instructions" }, + "icu:BadgeDialog__name-supports-signal": { + "messageformat": "{name} supports Signal", + "description": "Title of the badge dialog, which is shown when clicking on a person's Signal sustainer badge." + }, "icu:BadgeSustainerInstructions__header": { "messageformat": "Donate to Signal", "description": "In the instructions for becoming a sustainer. The heading." diff --git a/stylesheets/components/BadgeDialog.scss b/stylesheets/components/BadgeDialog.scss index d743e04389..7c4d173770 100644 --- a/stylesheets/components/BadgeDialog.scss +++ b/stylesheets/components/BadgeDialog.scss @@ -102,13 +102,12 @@ flex-direction: column; align-items: center; text-align: center; - padding-block: 24px; + padding-block-end: 16px; padding-inline: 10px; } &__name { - @include mixins.font-title-2; - @include fixed-height(3.5em); + @include mixins.font-title-medium; align-items: center; display: flex; justify-content: center; @@ -118,8 +117,7 @@ &__description { @include mixins.font-body-1; - @include fixed-height(5.5em); - margin-bottom: 12px; + margin-bottom: 22px; } &__instructions-button { diff --git a/ts/components/BadgeDialog.dom.tsx b/ts/components/BadgeDialog.dom.tsx index a85afa0f55..532f87a54b 100644 --- a/ts/components/BadgeDialog.dom.tsx +++ b/ts/components/BadgeDialog.dom.tsx @@ -2,17 +2,14 @@ // SPDX-License-Identifier: AGPL-3.0-only import { useEffect, useState, type JSX } from 'react'; -import classNames from 'classnames'; - import { strictAssert } from '../util/assert.std.ts'; import type { LocalizerType } from '../types/Util.std.ts'; import type { BadgeType } from '../badges/types.std.ts'; -import { BadgeCategory } from '../badges/BadgeCategory.std.ts'; import { Modal } from './Modal.dom.tsx'; -import { Button, ButtonSize } from './Button.dom.tsx'; import { BadgeDescription } from './BadgeDescription.dom.tsx'; import { BadgeImage } from './BadgeImage.dom.tsx'; import { BadgeCarouselIndex } from './BadgeCarouselIndex.dom.tsx'; +import { AxoButton } from '../axo/AxoButton.dom.tsx'; export type PropsType = Readonly<{ areWeASubscriber: boolean; @@ -93,8 +90,14 @@ function BadgeDialogWithBadges({ type="button" />