bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SidebarMenu: update X icon, caret, and plus

Browse source
This commit is contained in:
Alex Gleason 2021-09-22 00:16:05 -05:00
parent c869eeb003
commit 43a6e26a36
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 18 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/components/icon_button.js
View file

@ -135,7 +135,7 @@ export default class IconButton extends React.PureComponent {
tabIndex={tabIndex}
disabled={disabled}
>
<div style={style}>
<div style={src ? {} : style}>
{emoji
? <div className='icon-button__emoji' dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
: <Icon id={icon} src={src} fixedWidth aria-hidden='true' />}

6
app/soapbox/components/sidebar_menu.js
View file

@ -171,7 +171,7 @@ class SidebarMenu extends ImmutablePureComponent {
<div className='sidebar-menu__content'>
<div className='sidebar-menu-profile'>
<IconButton title='close' onClick={this.handleClose} icon='times' className='sidebar-menu__close' />
<IconButton title='close' onClick={this.handleClose} src={require('@tabler/icons/icons/x.svg')} className='sidebar-menu__close' />
<div className='sidebar-menu-profile__avatar'>
<Link to={`/@${acct}`} title={acct} onClick={this.handleClose}>
<Avatar account={account} />
@ -179,7 +179,7 @@ class SidebarMenu extends ImmutablePureComponent {
</div>
<a href='#' className='sidebar-menu-profile__name' onClick={this.handleSwitcherClick}>
<DisplayName account={account} />
<Icon id={switcher ? 'caret-up' : 'caret-down'} />
<Icon src={switcher ? require('@tabler/icons/icons/caret-up.svg') : require('@tabler/icons/icons/caret-down.svg')} className='sidebar-menu-profile__caret' />
</a>
</div>
@ -187,7 +187,7 @@ class SidebarMenu extends ImmutablePureComponent {
{otherAccounts.map(account => this.renderAccount(account))}
<NavLink className='sidebar-menu-item' to='/auth/sign_in' onClick={this.handleClose}>
<Icon id='plus' />
<Icon src={require('@tabler/icons/icons/plus.svg')} />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.add_account)}</span>
</NavLink>
</div>}

25
app/styles/components/sidebar-menu.scss
View file

@ -84,16 +84,16 @@
.sidebar-menu__close {
position: absolute;
top: 22px;
top: 16px;
right: 18px;
i.fa {
font-size: 20px;
}
.svg-icon {
width: 20px;
height: 20px;
width: 32px;
height: 32px;
svg {
stroke-width: 1px;
}
}
}
@ -122,11 +122,14 @@
margin-top: 2px;
color: var(--primary-text-color--faint);
}
}
i.fa-caret-up,
i.fa-caret-down {
margin-left: auto;
padding-left: 10px;
&__caret {
margin-left: auto;
padding-left: 10px;
svg {
stroke-width: 1px;
}
}
}