ar
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

rebase/4.0.0rc2^2
Eugen Rochko 2022-11-04 02:28:00 +01:00 committed by GitHub
parent 7c8e2b9859
commit 5825402ed5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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> </dl>
{fields.map((pair, i) => ( {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' /> <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') }} /> {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> </dd>
</dl> </dl>

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

@ -7143,12 +7143,27 @@ noscript {
color: lighten($ui-highlight-color, 8%); color: lighten($ui-highlight-color, 8%);
} }
dl:first-child .verified { .verified {
border-radius: 0 4px 0 0; border: 1px solid rgba($valid-value-color, 0.5);
}
.verified a { &:first-child {
color: $valid-value-color; 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;
}
} }
} }
} }