smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Style updates/design changes

Browse Source
This commit is contained in:
Sean Edmunds
2025-07-18 14:57:15 -05:00
parent 5e5a077ec3
commit 9265bdd5d7
10 changed files with 255 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/pages/settings/components/Theming/Themes/ThemeCard.tsx
View File

@@ -7,9 +7,8 @@ import {
} from '@mantine/hooks';
import { DeleteItemModal } from 'components';
import { useCommonHooks } from 'hooks';
import { boxClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import { ThemeManagementPill } from '.';
import { MiniAppItem, MiniGroupItem, ThemeManagementPill } from '.';
export function ThemeCard({
cardTheme,
@@ -28,6 +27,8 @@ export function ThemeCard({
const { currentTheme, setCurrentTheme, setCurrentThemePlaylist, handleDelete } =
useCommonHooks();
const [hoverPreview, setHoverPreview] = useDebouncedState(false, 1000);
const [transition, setTransition] = useDebouncedState(false, 200);
return (
<Group
gap={0}
@@ -99,7 +100,10 @@ export function ThemeCard({
themePlaylists={themePlaylists}
openModal={openModal}
hovered={hovered}
hoverPreview={hoverPreview}
setHoverPreview={setHoverPreview}
transition={transition}
setTransition={setTransition}
/>
</Group>
<Button
@@ -123,20 +127,30 @@ export function ThemeCard({
backgroundPosition: 'center',
border: `solid ${cardTheme.borderColor}`,
filter:
cardTheme.randomEnabled === 0 && !hoverPreview ? 'saturate(0)' : undefined,
transition: 'all .2s ease',
(cardTheme.randomEnabled === 0 && !hoverPreview) || transition
? 'saturate(0)'
: undefined,
transition: 'all .25s ease',
}}
onClick={() => {
setCurrentTheme(cardTheme.name);
setCurrentThemePlaylist('All');
}}
>
{hovered && currentTheme !== 'random' && <Overlay opacity={0.5} zIndex={1} />}
{hovered && currentTheme !== 'random' && (
<Overlay
style={{
opacity: !hoverPreview || transition ? 0.5 : 0,
transition: 'all .25s ease',
}}
zIndex={1}
/>
)}
<Group w={'100%'} gap={0} display={'flex'} align='center' justify='center'>
<Stack align='center'>
<Stack align='center' gap={12}>
<Box
style={{
height: '10px',
height: '8px',
width: '100px',
backgroundColor: cardTheme.searchColor,
borderRadius: '4px',
@@ -161,41 +175,37 @@ export function ThemeCard({
}}
/>
</Group>
<Group w={'100%'}>
<Group w={'100%'} mb={-4}>
<Box
style={{
height: '.25rem',
height: '2px',
width: '40px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
}}
/>
</Group>
<Group w={'100%'}>
<Group w={'100%'} gap={10} justify='space-between'>
<MiniAppItem cardTheme={cardTheme} />
<MiniAppItem cardTheme={cardTheme} />
<MiniAppItem cardTheme={cardTheme} />
<MiniAppItem cardTheme={cardTheme} />
</Group>
<Group w={'100%'} mb={-4}>
<Box
className={boxClasses.appItemExampleText}
style={{
color: cardTheme.primaryColor,
height: '2px',
width: '32px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
}}
>
lorem ipsum
</Box>
<Box
className={boxClasses.appItemExampleText}
style={{
color: cardTheme.primaryColor,
}}
>
lorem ipsum
</Box>
<Box
className={boxClasses.appItemExampleText}
style={{
color: cardTheme.primaryColor,
}}
>
lorem ipsum
</Box>
/>
</Group>
<Group w={'100%'} gap={10} justify='space-between'>
<MiniGroupItem cardTheme={cardTheme} />
<MiniGroupItem cardTheme={cardTheme} />
<MiniGroupItem cardTheme={cardTheme} />
<MiniGroupItem cardTheme={cardTheme} />
</Group>
</Stack>
</Group>