wrap icons in a div to ensure they're centred (#47136)

This commit is contained in:
Ashley Harrison 2022-04-01 11:27:46 +01:00 committed by GitHub
parent 7ae72e1195
commit 4958f932aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -135,10 +135,12 @@ function NavItem({
isActive={link === activeItem} isActive={link === activeItem}
> >
<div className={styles.savedItemsMenuItemWrapper}> <div className={styles.savedItemsMenuItemWrapper}>
{link.img && ( <div className={styles.iconContainer}>
<img src={link.img} alt={`${link.text} logo`} height="24" width="24" style={{ borderRadius: '50%' }} /> {link.icon && <Icon name={link.icon as IconName} size="xl" />}
)} {link.img && (
{link.icon && <Icon name={link.icon as IconName} size="xl" />} <img src={link.img} alt={`${link.text} logo`} height="24" width="24" style={{ borderRadius: '50%' }} />
)}
</div>
<span className={styles.linkText}>{link.text}</span> <span className={styles.linkText}>{link.text}</span>
</div> </div>
</NavBarItemWithoutMenu> </NavBarItemWithoutMenu>
@ -177,6 +179,9 @@ const getNavItemStyles = (theme: GrafanaTheme2) => ({
fullWidth: css({ fullWidth: css({
width: '100%', width: '100%',
}), }),
iconContainer: css({
placeContent: 'center',
}),
savedItemsMenuItemWrapper: css({ savedItemsMenuItemWrapper: css({
display: 'grid', display: 'grid',
gridAutoFlow: 'column', gridAutoFlow: 'column',