diff options
| -rw-r--r-- | app/javascript/mastodon/features/account/components/header.js | 4 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/components.scss | 25 |
2 files changed, 22 insertions, 7 deletions
diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index e39f0158e..8d3b3c5e6 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -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> diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index f60ad6050..f1622dbb5 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -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); + + &: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; + } - .verified a { - color: $valid-value-color; + a { + color: $valid-value-color; + } } } } |