diff --git a/stylesheets/components/BadgeDialog.scss b/stylesheets/components/BadgeDialog.scss index ce21d21250..d743e04389 100644 --- a/stylesheets/components/BadgeDialog.scss +++ b/stylesheets/components/BadgeDialog.scss @@ -98,6 +98,9 @@ &__main { flex-grow: 1; + display: flex; + flex-direction: column; + align-items: center; text-align: center; padding-block: 24px; padding-inline: 10px; diff --git a/stylesheets/components/BadgeSustainerInstructionsDialog.scss b/stylesheets/components/BadgeSustainerInstructionsDialog.scss deleted file mode 100644 index 8afc1e903b..0000000000 --- a/stylesheets/components/BadgeSustainerInstructionsDialog.scss +++ /dev/null @@ -1,55 +0,0 @@ -// Copyright 2021 Signal Messenger, LLC -// SPDX-License-Identifier: AGPL-3.0-only - -@use '../mixins'; - -.BadgeSustainerInstructionsDialog { - user-select: none; - - &__width-container { - max-width: 420px; - } - - &__header { - @include mixins.font-title-2; - text-align: center; - } - - &__subheader { - @include mixins.font-body-1; - font-weight: normal; - text-align: center; - } - - &__instructions { - @include mixins.font-body-2; - padding: 0; - list-style-type: decimal; - list-style-position: inside; - - &::before { - background-size: contain; - content: ''; - display: block; - height: 160px; - margin-block: 24px; - margin-inline: auto; - width: 146px; - - @include mixins.light-theme { - background-image: url('../images/mobile-settings-light.svg'); - } - @include mixins.dark-theme { - background-image: url('../images/mobile-settings-dark.svg'); - } - } - - > li { - margin-top: 1em; - - &:first-child { - margin-top: 0; - } - } - } -} diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index 57d423b832..b43dd2bb03 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -39,7 +39,6 @@ $is-storybook: false !default; @use 'components/BackupMediaDownloadProgressSettings.scss'; @use 'components/BadgeCarouselIndex.scss'; @use 'components/BadgeDialog.scss'; -@use 'components/BadgeSustainerInstructionsDialog.scss'; @use 'components/BetterAvatarBubble.scss'; @use 'components/Button.scss'; @use 'components/CallsTab.scss'; diff --git a/stylesheets/tailwind-config.css b/stylesheets/tailwind-config.css index 53f7f840bc..a22f228cd7 100644 --- a/stylesheets/tailwind-config.css +++ b/stylesheets/tailwind-config.css @@ -134,7 +134,7 @@ --color-legacy-signal-conversation-bg: light-dark(#F6F7FF, #2F3240); --color-legacy-official-chat-badge-bg: light-dark(--alpha(#4655FF / 12%), --alpha(#4952F8 / 40%)); --color-legacy-official-chat-badge-text: light-dark(#030FFC, #C2C5FE); - --color-legacy-signal-chat-message-bg: light-dark(#9294BC, #444664); + --color-legacy-signal-chat-message-bg: light-dark(#8889B4, #444664); --color-legacy-warning-badge: light-dark(#C84118, #EB977D); } diff --git a/ts/components/BadgeDialog.dom.stories.tsx b/ts/components/BadgeDialog.dom.stories.tsx index 9c1d39a79e..5bb76cbe1a 100644 --- a/ts/components/BadgeDialog.dom.stories.tsx +++ b/ts/components/BadgeDialog.dom.stories.tsx @@ -27,6 +27,7 @@ const defaultProps: ComponentProps = { firstName: 'Alice', i18n, onClose: action('onClose'), + onDonate: action('onDonate'), title: 'Alice Levine', }; diff --git a/ts/components/BadgeDialog.dom.tsx b/ts/components/BadgeDialog.dom.tsx index 4874fc5ca2..186d69a59a 100644 --- a/ts/components/BadgeDialog.dom.tsx +++ b/ts/components/BadgeDialog.dom.tsx @@ -13,44 +13,28 @@ 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 { BadgeSustainerInstructionsDialog } from './BadgeSustainerInstructionsDialog.dom.tsx'; export type PropsType = Readonly<{ areWeASubscriber: boolean; badges: ReadonlyArray; firstName?: string; i18n: LocalizerType; - onClose: () => unknown; + onClose: () => void; + onDonate: () => void; title: string; }>; export function BadgeDialog(props: PropsType): null | React.JSX.Element { - const { badges, i18n, onClose } = props; - - const [isShowingInstructions, setIsShowingInstructions] = useState(false); + const { badges, onClose } = props; const hasBadges = badges.length > 0; useEffect(() => { - if (!hasBadges && !isShowingInstructions) { + if (!hasBadges) { onClose(); } - }, [hasBadges, isShowingInstructions, onClose]); + }, [hasBadges, onClose]); - if (isShowingInstructions) { - return ( - setIsShowingInstructions(false)} - /> - ); - } - - return hasBadges ? ( - setIsShowingInstructions(true)} - /> - ) : null; + return hasBadges ? : null; } function BadgeDialogWithBadges({ @@ -59,9 +43,9 @@ function BadgeDialogWithBadges({ firstName, i18n, onClose, - onShowInstructions, + onDonate, title, -}: PropsType & { onShowInstructions: () => unknown }): React.JSX.Element { +}: PropsType): React.JSX.Element { const firstBadge = badges[0]; strictAssert( firstBadge, @@ -125,7 +109,7 @@ function BadgeDialogWithBadges({ currentBadge.category !== BadgeCategory.Donor && 'BadgeDialog__instructions-button--hidden' )} - onClick={onShowInstructions} + onClick={onDonate} size={ButtonSize.Large} > {i18n('icu:BadgeDialog__become-a-sustainer-button')} diff --git a/ts/components/BadgeSustainerInstructionsDialog.dom.tsx b/ts/components/BadgeSustainerInstructionsDialog.dom.tsx deleted file mode 100644 index f7f89172ea..0000000000 --- a/ts/components/BadgeSustainerInstructionsDialog.dom.tsx +++ /dev/null @@ -1,34 +0,0 @@ -// Copyright 2021 Signal Messenger, LLC -// SPDX-License-Identifier: AGPL-3.0-only - -import type { ReactElement } from 'react'; -import React from 'react'; -import type { LocalizerType } from '../types/Util.std.ts'; -import { Modal } from './Modal.dom.tsx'; - -export function BadgeSustainerInstructionsDialog({ - i18n, - onClose, -}: Readonly<{ i18n: LocalizerType; onClose: () => unknown }>): ReactElement { - return ( - -

- {i18n('icu:BadgeSustainerInstructions__header')} -

-

- {i18n('icu:BadgeSustainerInstructions__subheader')} -

-
    -
  1. {i18n('icu:BadgeSustainerInstructions__instructions__1')}
    2. -
  2. {i18n('icu:BadgeSustainerInstructions__instructions__2')}
    3. -
  3. {i18n('icu:BadgeSustainerInstructions__instructions__3')}
    4. -
- - ); -} diff --git a/ts/components/conversation/ContactModal.dom.tsx b/ts/components/conversation/ContactModal.dom.tsx index 4b8abfb70a..7e1d81cca5 100644 --- a/ts/components/conversation/ContactModal.dom.tsx +++ b/ts/components/conversation/ContactModal.dom.tsx @@ -71,6 +71,7 @@ type PropsActionType = { blockClientFromCall: (payload: RemoveClientType) => void; blockConversation: (id: string) => void; hideContactModal: () => void; + onNavigateToDonate: () => void; onOpenEditNicknameAndNoteModal: () => void; onOutgoingAudioCallInConversation: (conversationId: string) => unknown; onOutgoingVideoCallInConversation: (conversationId: string) => unknown; @@ -127,6 +128,7 @@ export function ContactModal({ isMuted, isRemoteMuteVisible, isRemoveFromCallVisible, + onNavigateToDonate, onOpenEditNicknameAndNoteModal, onOutgoingAudioCallInConversation, onOutgoingVideoCallInConversation, @@ -682,6 +684,7 @@ export function ContactModal({ firstName={contact.firstName} i18n={i18n} onClose={() => setView(ContactModalView.Default)} + onDonate={onNavigateToDonate} title={contact.title} /> ); diff --git a/ts/components/conversation/OfficialChatInlineBadge.dom.tsx b/ts/components/conversation/OfficialChatInlineBadge.dom.tsx index 0e1fd46e4e..054f74ebfc 100644 --- a/ts/components/conversation/OfficialChatInlineBadge.dom.tsx +++ b/ts/components/conversation/OfficialChatInlineBadge.dom.tsx @@ -9,10 +9,12 @@ export function OfficialChatInlineBadge(): JSX.Element { return ( diff --git a/ts/components/conversation/conversation-details/ConversationDetails.dom.stories.tsx b/ts/components/conversation/conversation-details/ConversationDetails.dom.stories.tsx index 52da7154b9..ed67f7ce24 100644 --- a/ts/components/conversation/conversation-details/ConversationDetails.dom.stories.tsx +++ b/ts/components/conversation/conversation-details/ConversationDetails.dom.stories.tsx @@ -105,6 +105,7 @@ const createProps = ( memberColors, maxGroupSize: 1001, maxRecommendedGroupSize: 151, + onNavigateToDonate: action('onNavigateToDonate'), pendingApprovalMemberships: times(8, () => ({ member: getDefaultConversation(), })), diff --git a/ts/components/conversation/conversation-details/ConversationDetails.dom.tsx b/ts/components/conversation/conversation-details/ConversationDetails.dom.tsx index 23a6d1050d..cd8153ec64 100644 --- a/ts/components/conversation/conversation-details/ConversationDetails.dom.tsx +++ b/ts/components/conversation/conversation-details/ConversationDetails.dom.tsx @@ -64,7 +64,6 @@ import { InAnotherCallTooltip, getTooltipContent, } from '../InAnotherCallTooltip.dom.tsx'; -import { BadgeSustainerInstructionsDialog } from '../../BadgeSustainerInstructionsDialog.dom.tsx'; import type { ContactModalStateType } from '../../../types/globalModals.std.ts'; import type { ShowToastAction } from '../../../state/ducks/toast.preload.ts'; import { ToastType } from '../../../types/Toast.dom.tsx'; @@ -72,7 +71,6 @@ import type { ContactNameColorType } from '../../../types/Colors.std.ts'; enum ModalState { AddingGroupMembers, - BecomeSustainer, ConfirmDeleteNicknameAndNote, EditingGroupDescription, EditingGroupTitle, @@ -138,6 +136,7 @@ type ActionProps = { onConversationDeleteMessages: () => void; onConversationUnarchive: () => void; onDeleteNicknameAndNote: () => void; + onNavigateToDonate: () => void; onOpenEditNicknameAndNoteModal: () => void; onOutgoingAudioCallInConversation: (conversationId: string) => unknown; onOutgoingVideoCallInConversation: (conversationId: string) => unknown; @@ -206,6 +205,7 @@ export function ConversationDetails({ onConversationDeleteMessages, onConversationUnarchive, onDeleteNicknameAndNote, + onNavigateToDonate, onOpenEditNicknameAndNoteModal, onOutgoingAudioCallInConversation, onOutgoingVideoCallInConversation, @@ -270,11 +270,6 @@ export function ConversationDetails({ case ModalState.NothingOpen: modalNode = undefined; break; - case ModalState.BecomeSustainer: - modalNode = ( - - ); - break; case ModalState.EditingGroupDescription: case ModalState.EditingGroupTitle: modalNode = ( @@ -431,6 +426,7 @@ export function ConversationDetails({ isGroup={isGroup} isSignalConversation={isSignalConversation} membersCount={conversation.membersCount ?? null} + onNavigateToDonate={onNavigateToDonate} pendingAvatarDownload={pendingAvatarDownload ?? false} startAvatarDownload={startAvatarDownload} startEditing={(isGroupTitle: boolean) => { @@ -486,6 +482,15 @@ export function ConversationDetails({