ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust theme preview components styling

Browse Source
This commit is contained in:
schroda
2024-09-06 23:29:40 +02:00
parent 81fe710531
commit f0701ff03a
3 changed files with 48 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/screens/settings/appearance/theme/CreateThemeButton.tsx
View File

@@ -23,7 +23,11 @@ export const CreateThemeButton = () => {
<> <>
<Stack sx={{ alignItems: 'center', gap: 1 }}> <Stack sx={{ alignItems: 'center', gap: 1 }}>
<Button <Button
sx={{ minWidth: '150px', height: '225px', m: 1, mb: 0 }} sx={{
minWidth: '150px',
maxWidth: '150px',
height: '225px',
}}
variant="contained" variant="contained"
size="large" size="large"
{...bindTrigger(popupState)} {...bindTrigger(popupState)}

2
src/screens/settings/appearance/theme/ThemeList.tsx
View File

@@ -60,7 +60,7 @@ export const ThemeList = () => {
} }
return ( return (
<Stack sx={{ flexDirection: 'row', flexWrap: 'no-wrap', overflowX: 'auto', gap: 1, mx: 1 }}> <Stack sx={{ flexDirection: 'row', flexWrap: 'no-wrap', overflowX: 'auto', gap: 1, mx: 2 }}>
<CreateThemeButton /> <CreateThemeButton />
{allThemes.map((theme) => ( {allThemes.map((theme) => (
<ThemePreview <ThemePreview

65
src/screens/settings/appearance/theme/ThemePreview.tsx
View File

@@ -25,10 +25,9 @@ import { AppTheme } from '@/lib/ui/AppThemes.ts';
import { createTheme } from '@/theme.ts'; import { createTheme } from '@/theme.ts';
import { ThemeCreationDialog } from '@/screens/settings/appearance/theme/CreateThemeDialog.tsx'; import { ThemeCreationDialog } from '@/screens/settings/appearance/theme/CreateThemeDialog.tsx';
const ThemePreviewBadge = styled(Box)(({ theme }) => ({ const ThemePreviewBadge = styled(Box)(() => ({
width: '15px', width: '15px',
height: '20px', height: '20px',
borderRadius: theme.shape.borderRadius,
})); }));
export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: () => void }) => { export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: () => void }) => {
@@ -47,13 +46,11 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
<> <>
<Stack <Stack
sx={{ sx={{
m: 1,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
minWidth: '150px', minWidth: '150px',
maxWidth: '150px', maxWidth: '150px',
gap: 1, gap: 1,
position: 'relative',
}} }}
> >
<ThemeProvider theme={muiTheme}> <ThemeProvider theme={muiTheme}>
@@ -61,20 +58,34 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
sx={{ sx={{
width: '100%', width: '100%',
height: '225px', height: '225px',
outline: '4px solid', position: 'relative',
outlineColor: isSelected
? muiTheme.palette.primary.light
: muiTheme.palette.background.paper,
borderRadius: 1,
p: 0,
}} }}
> >
<Box
sx={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
border: '4px solid',
borderColor: isSelected
? muiTheme.palette.primary.light
: muiTheme.palette.background.paper,
zIndex: 1,
pointerEvents: 'none',
borderRadius: 1,
}}
/>
<CardActionArea <CardActionArea
sx={{ height: '100%', backgroundColor: 'background.default' }} sx={{
height: '100%',
backgroundColor: 'background.default',
}}
onClick={() => setAppTheme(theme.id)} onClick={() => setAppTheme(theme.id)}
> >
<Stack sx={{ height: '100%' }}> <Stack sx={{ height: '100%', m: 0 }}>
<Stack sx={{ height: '100%', gap: 2, p: 1 }}> <Stack sx={{ height: '100%', gap: 2, p: 2 }}>
<Stack <Stack
sx={{ sx={{
maxHeight: '20px', maxHeight: '20px',
@@ -132,28 +143,36 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
)} )}
</Stack> </Stack>
</Stack> </Stack>
<Stack <Box
sx={{ sx={{
flexDirection: 'row',
width: '55%', width: '55%',
height: '65%', height: '65%',
backgroundColor: 'background.paper', backgroundColor: 'background.paper',
borderRadius: 1,
p: 1, p: 1,
borderRadius: 1,
}} }}
> >
<ThemePreviewBadge sx={{ backgroundColor: 'primary.main' }} /> <Stack
<ThemePreviewBadge sx={{ backgroundColor: 'secondary.main' }} /> sx={{
</Stack> width: 'max-content',
flexDirection: 'row',
overflow: 'hidden',
borderRadius: 1,
}}
>
<ThemePreviewBadge sx={{ backgroundColor: 'primary.main' }} />
<ThemePreviewBadge sx={{ backgroundColor: 'secondary.main' }} />
</Stack>
</Box>
</Stack> </Stack>
<Stack <Stack
sx={{ sx={{
height: '80px', height: '25%',
backgroundColor: muiTheme.palette.background.paper, backgroundColor: muiTheme.palette.background.paper,
justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
flexDirection: 'row', flexDirection: 'row',
gap: 1, gap: 2,
p: 2,
}} }}
> >
<Box <Box
@@ -166,7 +185,7 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
/> />
<Box <Box
sx={{ sx={{
flexGrow: 0.75, flexGrow: 1,
height: '20px', height: '20px',
borderRadius: 1, borderRadius: 1,
backgroundColor: 'primary.light', backgroundColor: 'primary.light',