Make whole username clickable in UsernameLinkModalBody

This commit is contained in:
Fedor Indutny 2024-02-07 07:10:06 -08:00 committed by GitHub
parent 2dd2de4d0f
commit 317138d545
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 18 deletions

View file

@ -71,8 +71,6 @@
&__username {
display: flex;
flex-direction: row;
gap: 4px;
justify-content: center;
margin-block: 12px 2px;
@ -85,20 +83,26 @@
text-align: center;
}
&__copy {
&__copy__button {
display: flex;
flex-direction: row;
gap: 4px;
i {
flex-shrink: 0;
margin-top: 2px;
display: inline-block;
width: 16px;
height: 16px;
@include color-svg(
'../images/icons/v3/copy/copy.svg',
var(--text-color)
);
}
@include button-reset;
@include button-focus-outline;
flex-shrink: 0;
margin-top: 2px;
display: inline-block;
width: 16px;
height: 16px;
@include color-svg(
'../images/icons/v3/copy/copy.svg',
var(--text-color)
);
}
}
}

View file

@ -808,15 +808,21 @@ export function UsernameLinkModalBody({
>
<div className={`${CLASS}__card__qr`}>{linkImage}</div>
<div className={`${CLASS}__card__username`}>
{!showColors && (
{showColors ? (
<div className={`${CLASS}__card__username__text`}>{username}</div>
) : (
<button
className={classnames(`${CLASS}__card__username__copy`)}
className={`${CLASS}__card__username__copy__button`}
type="button"
onClick={onCopyUsername}
aria-label={i18n('icu:UsernameLinkModalBody__copy')}
/>
>
<i />
<div className={`${CLASS}__card__username__text`}>
{username}
</div>
</button>
)}
<div className={`${CLASS}__card__username__text`}>{username}</div>
</div>
</div>