Add verified badge to Notes to Self

This commit is contained in:
hackerbirds 2023-03-02 07:57:35 +01:00 committed by Jamie Kyle
parent 371c73377c
commit c571305d8a
9 changed files with 40 additions and 19 deletions

View file

@ -143,4 +143,23 @@
);
}
}
&__official-badge {
background: url('../images/icons/v2/official-20.svg') no-repeat center;
display: inline-block;
height: 18px;
margin-left: 4px;
margin-bottom: -4px;
width: 18px;
}
&__official-badge__large {
background: url('../images/icons/v2/official-20.svg') no-repeat center;
display: inline-block;
height: 18px;
margin-left: 9px;
margin-bottom: -2px;
width: 18px;
scale: 1.3;
}
}

View file

@ -180,12 +180,4 @@
width: 12px;
@include color-svg('../images/icons/v2/chevron-right-20.svg', $color-white);
}
&__signal-official {
background: url('../images/icons/v2/official-20.svg') no-repeat center;
display: inline-block;
height: 16px;
margin-left: 6px;
width: 16px;
}
}

View file

@ -12,6 +12,7 @@ export type PropsType = {
contactNameColor?: ContactNameColorType;
firstName?: string;
isSignalConversation?: boolean;
isMe?: boolean;
module?: string;
preferFirstName?: boolean;
title: string;
@ -21,6 +22,7 @@ export function ContactName({
contactNameColor,
firstName,
isSignalConversation,
isMe,
module,
preferFirstName,
title,
@ -43,8 +45,8 @@ export function ContactName({
dir="auto"
>
<Emojify text={text} />
{isSignalConversation && (
<span className="StoryListItem__signal-official" />
{(isSignalConversation || isMe) && (
<span className="ContactModal__official-badge" />
)}
</span>
);

View file

@ -177,6 +177,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
return (
<div className="module-ConversationHeader__header__info__title">
{i18n('noteToSelf')}
<span className="ContactModal__official-badge" />
</div>
);
}

View file

@ -195,6 +195,7 @@ export function ConversationHero({
title={title}
/>
)}
{isMe && (<span className="ContactModal__official-badge__large" />)}
</h1>
{about && !isMe && (
<div className="module-about__container">

View file

@ -107,6 +107,7 @@ export function ConversationDetailsHeader({
<div>
<div className={bem('title')}>
<Emojify text={isMe ? i18n('noteToSelf') : conversation.title} />
{isMe && (<span className="ContactModal__official-badge__large" />)}
</div>
</div>
);

View file

@ -76,9 +76,10 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
const disabled = Boolean(disabledReason);
const headerName = isMe ? (
<span className={HEADER_CONTACT_NAME_CLASS_NAME}>
{i18n('noteToSelf')}
</span>
<ContactName module={HEADER_CONTACT_NAME_CLASS_NAME}
title={i18n('noteToSelf')}
isMe={isMe}
/>
) : (
<ContactName module={HEADER_CONTACT_NAME_CLASS_NAME} title={title} />
);

View file

@ -68,9 +68,11 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
uuid,
}) {
const headerName = isMe ? (
<span className={HEADER_CONTACT_NAME_CLASS_NAME}>
{i18n('noteToSelf')}
</span>
<ContactName
isMe={isMe}
module={HEADER_CONTACT_NAME_CLASS_NAME}
title={i18n('noteToSelf')}
/>
) : (
<ContactName
isSignalConversation={isSignalConversation({ id, uuid })}

View file

@ -106,9 +106,11 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
const headerName = (
<>
{isMe ? (
<span className={HEADER_CONTACT_NAME_CLASS_NAME}>
{i18n('noteToSelf')}
</span>
<ContactName
module={HEADER_CONTACT_NAME_CLASS_NAME}
isMe={isMe}
title={i18n('noteToSelf')}
/>
) : (
<ContactName
module={HEADER_CONTACT_NAME_CLASS_NAME}