Adjust ThemePreview selected/custom styling slightly

Align icons with horizontal top bar
This commit is contained in:
schroda
2024-10-01 23:19:06 +02:00
parent 5715980c31
commit 996bb62888

View File

@@ -103,7 +103,7 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
maxHeight: '20px', maxHeight: '20px',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'flex-start',
}} }}
> >
<Box <Box
@@ -114,7 +114,13 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
borderRadius: 1, borderRadius: 1,
}} }}
/> />
<Stack sx={{ height: '100%', alignItems: 'center', gap: 1 }}> <Stack
sx={{
alignItems: 'center',
gap: 1,
mt: -0.25,
}}
>
{isSelected && ( {isSelected && (
<CheckCircleIcon <CheckCircleIcon
sx={{ sx={{
@@ -132,6 +138,7 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
}} }}
component="div" component="div"
size="small" size="small"
sx={{ mt: -0.5 }}
> >
<Tooltip title={t('global.button.delete')}> <Tooltip title={t('global.button.delete')}>
<DeleteIcon /> <DeleteIcon />