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

33
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,18 +63,21 @@ 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,
}} }}
>
<CardActionArea
sx={{ height: '100%', backgroundColor: 'background.default' }}
onClick={() => setAppTheme(theme.id)} onClick={() => setAppTheme(theme.id)}
> >
<Stack sx={{ height: '100%' }}>
<Stack sx={{ height: '100%', gap: 2, p: 1 }}> <Stack sx={{ height: '100%', gap: 2, p: 1 }}>
<Stack <Stack
sx={{ sx={{
@@ -83,12 +88,19 @@ const ThemePreview = ({ theme }: { theme: AppTheme }) => {
}} }}
> >
<Box <Box
sx={{ width: '65%', height: '20px', backgroundColor: 'primary.dark', borderRadius: 1 }} sx={{
width: '65%',
height: '20px',
backgroundColor: 'primary.dark',
borderRadius: 1,
}}
/> />
{isSelected && ( {isSelected && (
<CheckCircleIcon <CheckCircleIcon
sx={{ visibility: isSelected ? 'visible' : 'hidden', color: 'primary.light' }} sx={{
// color="primary" visibility: isSelected ? 'visible' : 'hidden',
color: 'primary.light',
}}
/> />
)} )}
</Stack> </Stack>
@@ -117,7 +129,12 @@ const ThemePreview = ({ theme }: { theme: AppTheme }) => {
}} }}
> >
<Box <Box
sx={{ width: '20px', height: '20px', borderRadius: '50%', backgroundColor: 'primary.main' }} sx={{
width: '20px',
height: '20px',
borderRadius: '50%',
backgroundColor: 'primary.main',
}}
/> />
<Box <Box
sx={{ sx={{
@@ -129,6 +146,8 @@ const ThemePreview = ({ theme }: { theme: AppTheme }) => {
/> />
</Stack> </Stack>
</Stack> </Stack>
</CardActionArea>
</Card>
</ThemeProvider> </ThemeProvider>
<Typography>{getName()}</Typography> <Typography>{getName()}</Typography>
</Stack> </Stack>