Fix some icon-related styling issues

This commit is contained in:
Claire 2024-01-15 21:05:54 +01:00
parent 4fcb372776
commit 6e4d5b4736
3 changed files with 17 additions and 9 deletions

View File

@ -30,7 +30,8 @@ class ActionBar extends PureComponent {
return ( return (
<div> <div>
<div className='account__disclaimer'> <div className='account__disclaimer'>
<Icon id='info-circle' icon={InfoIcon} /> <FormattedMessage <Icon id='info-circle' icon={InfoIcon} />
<FormattedMessage
id='account.suspended_disclaimer_full' id='account.suspended_disclaimer_full'
defaultMessage='This user has been suspended by a moderator.' defaultMessage='This user has been suspended by a moderator.'
/> />
@ -44,14 +45,17 @@ class ActionBar extends PureComponent {
if (account.get('acct') !== account.get('username')) { if (account.get('acct') !== account.get('username')) {
extraInfo = ( extraInfo = (
<div className='account__disclaimer'> <div className='account__disclaimer'>
<Icon id='info-circle' icon={InfoIcon} /> <FormattedMessage <Icon id='info-circle' icon={InfoIcon} />
id='account.disclaimer_full' <div>
defaultMessage="Information below may reflect the user's profile incompletely." <FormattedMessage
/> id='account.disclaimer_full'
{' '} defaultMessage="Information below may reflect the user's profile incompletely."
<a target='_blank' rel='noopener' href={account.get('url')}> />
<FormattedMessage id='account.view_full_profile' defaultMessage='View full profile' /> {' '}
</a> <a target='_blank' rel='noopener' href={account.get('url')}>
<FormattedMessage id='account.view_full_profile' defaultMessage='View full profile' />
</a>
</div>
</div> </div>
); );
} }

View File

@ -161,6 +161,7 @@
padding: 10px; padding: 10px;
gap: 5px; gap: 5px;
color: $dark-text-color; color: $dark-text-color;
align-items: center;
strong { strong {
font-weight: 500; font-weight: 500;

View File

@ -148,6 +148,7 @@
line-height: inherit; line-height: inherit;
cursor: pointer; cursor: pointer;
vertical-align: top; vertical-align: top;
align-items: center;
&:hover { &:hover {
background: lighten($ui-base-color, 33%); background: lighten($ui-base-color, 33%);
@ -160,6 +161,8 @@
border-inline-start: 1px solid currentColor; border-inline-start: 1px solid currentColor;
padding: 0; padding: 0;
padding-inline-start: 4px; padding-inline-start: 4px;
width: 16px;
height: 16px;
} }
} }