Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: align list items on mode switch (#7229)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-05-31 13:40:35 +02:00 committed by GitHub
parent 80ba3647a6
commit 5eadce061c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/component/layout/MainLayout/NavigationSidebar/ListItems.tsx
View File

@ -28,6 +28,15 @@ const CappedText = styled(Typography)({
maxWidth: '160px', maxWidth: '160px',
}); });
const StyledListItemIcon = styled(ListItemIcon)(({ theme }) => ({
minWidth: theme.spacing(4),
margin: theme.spacing(0.25, 0),
}));
const StyledListItemText = styled(ListItemText)(({ theme }) => ({
margin: 0,
}));
export const FullListItem: FC<{ export const FullListItem: FC<{
href: string; href: string;
text: string; text: string;
@ -44,12 +53,10 @@ export const FullListItem: FC<{
sx={listItemButtonStyle} sx={listItemButtonStyle}
selected={selected} selected={selected}
> >
<ListItemIcon sx={(theme) => ({ minWidth: theme.spacing(4) })}> <StyledListItemIcon>{children}</StyledListItemIcon>
{children} <StyledListItemText>
</ListItemIcon>
<ListItemText>
<CappedText>{text}</CappedText> <CappedText>{text}</CappedText>
</ListItemText> </StyledListItemText>
{badge} {badge}
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
@ -70,10 +77,8 @@ export const ExternalFullListItem: FC<{ href: string; text: string }> = ({
rel='noopener noreferrer' rel='noopener noreferrer'
target='_blank' target='_blank'
> >
<ListItemIcon sx={(theme) => ({ minWidth: theme.spacing(4) })}> <StyledListItemIcon>{children}</StyledListItemIcon>
{children} <StyledListItemText primary={text} />
</ListItemIcon>
<ListItemText primary={text} />
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
); );
@ -83,12 +88,10 @@ export const SignOutItem = () => {
<form method='POST' action={`${basePath}/logout`}> <form method='POST' action={`${basePath}/logout`}>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemButton dense={true} component='button' type='submit'> <ListItemButton dense={true} component='button' type='submit'>
<ListItemIcon <StyledListItemIcon>
sx={(theme) => ({ minWidth: theme.spacing(4) })}
>
<SignOutIcon /> <SignOutIcon />
</ListItemIcon> </StyledListItemIcon>
<ListItemText primary='Sign out' /> <StyledListItemText primary='Sign out' />
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
</form> </form>
@ -111,11 +114,7 @@ export const MiniListItem: FC<{
selected={selected} selected={selected}
> >
<Tooltip title={text} placement='right'> <Tooltip title={text} placement='right'>
<ListItemIcon <StyledListItemIcon>{children}</StyledListItemIcon>
sx={(theme) => ({ minWidth: theme.spacing(4) })}
>
{children}
</ListItemIcon>
</Tooltip> </Tooltip>
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>