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