Add verified badge to Notes to Self
This commit is contained in:
parent
371c73377c
commit
c571305d8a
9 changed files with 40 additions and 19 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -195,6 +195,7 @@ export function ConversationHero({
|
|||
title={title}
|
||||
/>
|
||||
)}
|
||||
{isMe && (<span className="ContactModal__official-badge__large" />)}
|
||||
</h1>
|
||||
{about && !isMe && (
|
||||
<div className="module-about__container">
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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} />
|
||||
);
|
||||
|
|
|
@ -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 })}
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in a new issue