Fix localization of badge dialog text

_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."

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 {

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"
         />
         <div className="BadgeDialog__main">
-          <BadgeImage badge={currentBadge} size={160} />
-          <div className="BadgeDialog__name">{currentBadge.name}</div>
+          <BadgeImage badge={currentBadge} size={96} />
+          <div className="BadgeDialog__name">
+            {firstName
+              ? i18n('icu:BadgeDialog__name-supports-signal', {
+                  name: firstName,
+                })
+              : currentBadge.name}
+          </div>
           <div className="BadgeDialog__description">
             <BadgeDescription
               firstName={firstName}
@@ -103,17 +106,9 @@ function BadgeDialogWithBadges({
             />
           </div>
           {!areWeASubscriber && (
-            <Button
-              className={classNames(
-                'BadgeDialog__instructions-button',
-                currentBadge.category !== BadgeCategory.Donor &&
-                  'BadgeDialog__instructions-button--hidden'
-              )}
-              onClick={onDonate}
-              size={ButtonSize.Large}
-            >
+            <AxoButton.Root size="lg" variant="primary" onClick={onDonate}>
               {i18n('icu:BadgeDialog__become-a-sustainer-button')}
-            </Button>
+            </AxoButton.Root>
           )}
           <BadgeCarouselIndex
             currentIndex={currentBadgeIndex}

ts/textsecure/WebAPI.preload.ts

@@ -195,6 +195,10 @@ function getContentType(response: Response) {
   return null;
 }
 
+function getLocaleHeaders(): Record<'Accept-Language', string> {
+  return { 'Accept-Language': window.SignalContext.getI18nLocale() };
+}
+
 type FetchHeaderListType = { [name: string]: string };
 type HTTPCodeType = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
 
@@ -2430,6 +2434,7 @@ export async function getProfile(
   const { profileKeyVersion, profileKeyCredentialRequest } = options;
 
   return (await _ajax({
+    headers: getLocaleHeaders(),
     host: 'chatService',
     call: 'profile',
     httpType: 'GET',
@@ -2557,6 +2562,7 @@ export async function getProfileUnauth(
   }
 
   return (await _ajax({
+    headers: getLocaleHeaders(),
     host: 'chatService',
     call: 'profile',
     httpType: 'GET',
@@ -2627,6 +2633,7 @@ export async function downloadOnboardingStories(
 
 export async function getSubscriptionConfiguration(): Promise<SubscriptionConfigurationResultType> {
   return _ajax({
+    headers: getLocaleHeaders(),
     host: 'chatService',
     call: 'subscriptionConfiguration',
     httpType: 'GET',