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

Adds hover and click effect to theme previews

Browse Source
This commit is contained in:
schroda
2024-09-05 12:18:17 +02:00
parent 3622028ba1
commit c60db10db1
1 changed files with 78 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/screens/settings/Appearance.tsx
View File

@@ -20,6 +20,8 @@ import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack'; import Stack from '@mui/material/Stack';
import { styled, ThemeProvider } from '@mui/material/styles'; import { styled, ThemeProvider } from '@mui/material/styles';
import CheckCircleIcon from '@mui/icons-material/CheckCircle'; import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
import { NavBarContext } from '@/components/context/NavbarContext.tsx'; import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { ThemeMode, ThemeModeContext } from '@/components/context/ThemeModeContext.tsx'; import { ThemeMode, ThemeModeContext } from '@/components/context/ThemeModeContext.tsx';
import { Select } from '@/components/atoms/Select.tsx'; import { Select } from '@/components/atoms/Select.tsx';
@@ -61,74 +63,91 @@ const ThemePreview = ({ theme }: { theme: AppTheme }) => {
}} }}
> >
<ThemeProvider theme={muiTheme}> <ThemeProvider theme={muiTheme}>
<Stack <Card
sx={{ sx={{
cursor: 'pointer',
backgroundColor: 'background.default',
width: '100%', width: '100%',
height: '225px', height: '225px',
outline: '4px solid', outline: '4px solid',
outlineColor: isSelected ? muiTheme.palette.primary.light : muiTheme.palette.background.paper, outlineColor: isSelected ? muiTheme.palette.primary.light : muiTheme.palette.background.paper,
borderRadius: 1, borderRadius: 1,
p: 0,
}} }}
onClick={() => setAppTheme(theme.id)}
> >
<Stack sx={{ height: '100%', gap: 2, p: 1 }}> <CardActionArea
<Stack sx={{ height: '100%', backgroundColor: 'background.default' }}
sx={{ onClick={() => setAppTheme(theme.id)}
maxHeight: '20px',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Box
sx={{ width: '65%', height: '20px', backgroundColor: 'primary.dark', borderRadius: 1 }}
/>
{isSelected && (
<CheckCircleIcon
sx={{ visibility: isSelected ? 'visible' : 'hidden', color: 'primary.light' }}
// color="primary"
/>
)}
</Stack>
<Stack
sx={{
flexDirection: 'row',
width: '55%',
height: '65%',
backgroundColor: 'background.paper',
borderRadius: 1,
p: 1,
}}
>
<ThemePreviewBage sx={{ backgroundColor: 'primary.main' }} />
<ThemePreviewBage sx={{ backgroundColor: 'secondary.main' }} />
</Stack>
</Stack>
<Stack
sx={{
height: '80px',
backgroundColor: muiTheme.palette.background.paper,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
gap: 1,
}}
> >
<Box <Stack sx={{ height: '100%' }}>
sx={{ width: '20px', height: '20px', borderRadius: '50%', backgroundColor: 'primary.main' }} <Stack sx={{ height: '100%', gap: 2, p: 1 }}>
/> <Stack
<Box sx={{
sx={{ maxHeight: '20px',
flexGrow: 0.75, flexDirection: 'row',
height: '20px', justifyContent: 'space-between',
borderRadius: 1, alignItems: 'center',
backgroundColor: 'primary.light', }}
}} >
/> <Box
</Stack> sx={{
</Stack> width: '65%',
height: '20px',
backgroundColor: 'primary.dark',
borderRadius: 1,
}}
/>
{isSelected && (
<CheckCircleIcon
sx={{
visibility: isSelected ? 'visible' : 'hidden',
color: 'primary.light',
}}
/>
)}
</Stack>
<Stack
sx={{
flexDirection: 'row',
width: '55%',
height: '65%',
backgroundColor: 'background.paper',
borderRadius: 1,
p: 1,
}}
>
<ThemePreviewBage sx={{ backgroundColor: 'primary.main' }} />
<ThemePreviewBage sx={{ backgroundColor: 'secondary.main' }} />
</Stack>
</Stack>
<Stack
sx={{
height: '80px',
backgroundColor: muiTheme.palette.background.paper,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
gap: 1,
}}
>
<Box
sx={{
width: '20px',
height: '20px',
borderRadius: '50%',
backgroundColor: 'primary.main',
}}
/>
<Box
sx={{
flexGrow: 0.75,
height: '20px',
borderRadius: 1,
backgroundColor: 'primary.light',
}}
/>
</Stack>
</Stack>
</CardActionArea>
</Card>
</ThemeProvider> </ThemeProvider>
<Typography>{getName()}</Typography> <Typography>{getName()}</Typography>
</Stack> </Stack>