me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix design of verified links in web UI (#19709)

Browse source
This commit is contained in:
Eugen Rochko 2022-11-04 02:28:00 +01:00 committed by GitHub
parent 7e4afba7c6
commit 27f63cba4e
2 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/mastodon/features/account/components/header.js
View file

@ -337,10 +337,10 @@ class Header extends ImmutablePureComponent {
</dl>
{fields.map((pair, i) => (
<dl key={i}>
<dl key={i} className={classNames({ verified: pair.get('verified_at') })}>
<dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' />
<dd className={`${pair.get('verified_at') ? 'verified' : ''} translate`} title={pair.get('value_plain')}>
<dd className='translate' title={pair.get('value_plain')}>
{pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
</dd>
</dl>

25
app/javascript/styles/mastodon/components.scss
View file

@ -7143,12 +7143,27 @@ noscript {
color: lighten($ui-highlight-color, 8%);
}
dl:first-child .verified {
border-radius: 0 4px 0 0;
}
.verified {
border: 1px solid rgba($valid-value-color, 0.5);
.verified a {
color: $valid-value-color;
&:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
&:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
dt,
dd {
color: $valid-value-color;
}
a {
color: $valid-value-color;
}
}
}
}