Make whole username clickable in UsernameLinkModalBody
This commit is contained in:
parent
2dd2de4d0f
commit
317138d545
2 changed files with 28 additions and 18 deletions
|
@ -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)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue