Styling adjustments to timeline notifications

This commit is contained in:
Evan Hahn 2021-09-07 14:55:03 -05:00 committed by GitHub
parent 4bed918cf8
commit 7f34bedd87
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 437 additions and 360 deletions

View file

@ -1,9 +1,10 @@
// Copyright 2020 Signal Messenger, LLC
// Copyright 2020-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import { Button, ButtonSize, ButtonVariant } from '../Button';
import { SystemMessage } from './SystemMessage';
import { LocalizerType } from '../../types/Util';
import { ConversationType } from '../../state/ducks/conversations';
import { Intl } from '../Intl';
@ -35,40 +36,42 @@ export function GroupV1Migration(props: PropsType): React.ReactElement {
}, [setShowingDialog]);
return (
<div className="SystemMessage SystemMessage--multiline">
<div className="SystemMessage__line">
<div className="SystemMessage__icon SystemMessage__icon--group" />
<div>
<div>{i18n('GroupV1--Migration--was-upgraded')}</div>
<div>
{areWeInvited ? (
i18n('GroupV1--Migration--invited--you')
) : (
<>
{renderUsers(
invitedMembers,
i18n,
'GroupV1--Migration--invited'
)}
{renderUsers(
droppedMembers,
i18n,
'GroupV1--Migration--removed'
)}
</>
)}
</div>
</div>
</div>
<div className="SystemMessage__line">
<Button
onClick={showDialog}
size={ButtonSize.Small}
variant={ButtonVariant.SystemMessage}
>
{i18n('GroupV1--Migration--learn-more')}
</Button>
</div>
<>
<SystemMessage
icon="group"
contents={
<>
<p>{i18n('GroupV1--Migration--was-upgraded')}</p>
<p>
{areWeInvited ? (
i18n('GroupV1--Migration--invited--you')
) : (
<>
{renderUsers(
invitedMembers,
i18n,
'GroupV1--Migration--invited'
)}
{renderUsers(
droppedMembers,
i18n,
'GroupV1--Migration--removed'
)}
</>
)}
</p>
</>
}
button={
<Button
onClick={showDialog}
size={ButtonSize.Small}
variant={ButtonVariant.SystemMessage}
>
{i18n('GroupV1--Migration--learn-more')}
</Button>
}
/>
{showingDialog ? (
<GroupV1MigrationDialog
areWeInvited={areWeInvited}
@ -82,7 +85,7 @@ export function GroupV1Migration(props: PropsType): React.ReactElement {
onClose={dismissDialog}
/>
) : null}
</div>
</>
);
}
@ -95,23 +98,17 @@ function renderUsers(
return null;
}
const className = 'module-group-v1-migration--text';
if (members.length === 1) {
return (
<div className={className}>
<p>
<Intl
i18n={i18n}
id={`${keyPrefix}--one`}
components={[<ContactName title={members[0].title} i18n={i18n} />]}
/>
</div>
</p>
);
}
return (
<div className={className}>
{i18n(`${keyPrefix}--many`, [members.length.toString()])}
</div>
);
return <p>{i18n(`${keyPrefix}--many`, [members.length.toString()])}</p>;
}