Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2026-04-02 08:13:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update megaphone design

Browse Source 
Co-authored-by: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
This commit is contained in:
automated-signal
2026-02-18 11:21:06 -06:00
committed by GitHub
parent 28f12dbe39
commit 3ee9f935f0
2 changed files with 52 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ts/components/RemoteMegaphone.dom.stories.tsx
View File

@@ -61,6 +61,18 @@ export function LongText(args: PropsType): React.JSX.Element {
);
}
export function LongButtons(args: PropsType): React.JSX.Element {
return (
<RemoteMegaphone
{...args}
title="Donate Today"
body="As a nonprofit, Signal needs your support. As a nonprofit, Signal needs your support. As a nonprofit, Signal needs your support. As a nonprofit, Signal needs your support."
primaryCtaText="Donate Donate Donate Donate"
secondaryCtaText="Remind me later Remind me later"
/>
);
}
export function NarrowSidebar(args: PropsType): React.JSX.Element {
return <RemoteMegaphone {...args} isFullSize={false} />;
}

71
ts/components/RemoteMegaphone.dom.tsx
View File

@@ -34,23 +34,24 @@ export function RemoteMegaphone({
// We need to provide this to <Tooltip> to render correctly
const wrapperClassName = tw(
'@container flex flex-col',
'max-w-[500px] rounded-lg border-1 border-border-primary p-3',
isFullSize ? 'pe-2 pb-1.5' : 'size-[76px]',
'bg-elevated-background-primary dark:bg-elevated-background-tertiary'
'max-w-[500px] curved-3xl p-3',
'bg-elevated-background-primary dark:bg-elevated-background-tertiary',
'shadow-elevation-1',
isFullSize ? '' : 'size-[76px]'
);
const image: React.JSX.Element = (
<div
className={tw(
'size-[48px] shrink-0',
isFullSize ? 'size-[64px]' : 'm-auto'
isFullSize ? 'size-[56px]' : 'm-auto'
)}
>
<img
alt=""
className={tw('object-cover')}
src={imagePath}
width={64}
height={64}
width={56}
height={56}
draggable={false}
/>
</div>
@@ -66,41 +67,49 @@ export function RemoteMegaphone({
<div className={tw('flex items-start gap-3')}>
{image}
<div className={tw('w-full')}>
<h2 className={tw('mt-[3px] type-body-large font-semibold')}>
<h2
className={tw(
'mt-[2px] type-body-medium font-semibold text-label-primary select-none'
)}
>
{title}
</h2>
<p
className={tw(
'mt-[1px] mb-2 type-body-medium text-label-secondary'
'mt-[2px] type-body-small text-label-secondary select-none'
)}
>
{body}
</p>
</div>
</div>
<div className={tw('flex justify-end')}>
{secondaryCtaId && (
<AxoButton.Root
size="md"
variant="borderless-primary"
onClick={() =>
onInteractWithMegaphone(remoteMegaphoneId, secondaryCtaId)
}
>
{secondaryCtaText}
</AxoButton.Root>
)}
{primaryCtaId && (
<AxoButton.Root
size="md"
variant="borderless-primary"
onClick={() =>
onInteractWithMegaphone(remoteMegaphoneId, primaryCtaId)
}
>
{primaryCtaText}
</AxoButton.Root>
)}
<div className={tw('mt-3 flex justify-end')}>
<div className={tw('flex flex-wrap-reverse gap-1.5')}>
{secondaryCtaId && (
<AxoButton.Root
size="md"
variant="secondary"
onClick={() =>
onInteractWithMegaphone(remoteMegaphoneId, secondaryCtaId)
}
width="grow"
>
{secondaryCtaText}
</AxoButton.Root>
)}
{primaryCtaId && (
<AxoButton.Root
size="md"
variant="primary"
onClick={() =>
onInteractWithMegaphone(remoteMegaphoneId, primaryCtaId)
}
width="grow"
>
{primaryCtaText}
</AxoButton.Root>
)}
</div>
</div>
</div>
);