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

6
src/pages/settings/components/Applications/Applications.tsx
View File

@@ -355,11 +355,7 @@ const ApplicationSettings = () => {
offset={isMobile ? -100 : 0}
>
<Popover.Target>
<Box
onClick={(e) => {
e.stopPropagation();
}}
>
<Box>
<AppItem
key={application.name}
name={application.name}

33
src/pages/settings/components/Theming/Themes/MiniAppItem.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { Box, Group } from '@mantine/core';
import { boxClasses } from 'styles';
import type { Theme } from 'types';
export function MiniAppItem({ cardTheme }: { cardTheme: Theme }) {
return (
<Box
className={boxClasses.appItemExampleText}
style={{
color: cardTheme.primaryColor,
}}
>
<Group gap={4}>
<Box
style={{
height: '4px',
width: '10px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
}}
/>
<Box
style={{
height: '4px',
width: '20px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
}}
/>
</Group>
</Box>
);
}

46
src/pages/settings/components/Theming/Themes/MiniGroupItem.tsx Normal file
View File

@@ -0,0 +1,46 @@
import { Box, Group, Stack } from '@mantine/core';
import { boxClasses } from 'styles';
import type { Theme } from 'types';
export function MiniGroupItem({ cardTheme }: { cardTheme: Theme }) {
return (
<Box className={boxClasses.bookmarkItemExampleText}>
<Group w={'100%'} justify='space-between'>
<Stack gap={4} align='start'>
<Box
style={{
height: '2px',
width: '25px',
backgroundColor: cardTheme.accentColor,
borderRadius: '4px',
}}
/>
<Box
style={{
height: '2px',
width: '33px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
}}
/>
<Box
style={{
height: '2px',
width: '38px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
}}
/>
<Box
style={{
height: '2px',
width: '28px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
}}
/>
</Stack>
</Group>
</Box>
);
}

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>

40
src/pages/settings/components/Theming/Themes/ThemeManagementPill.tsx
View File

@@ -14,7 +14,10 @@ export function ThemeManagementPill({
themePlaylists,
openModal,
hovered,
hoverPreview,
setHoverPreview,
transition,
setTransition,
}: {
allThemes: Theme[];
cardTheme: Theme;
@@ -22,7 +25,10 @@ export function ThemeManagementPill({
themePlaylists: ThemePlaylist[];
openModal: () => void;
hovered: boolean;
hoverPreview: boolean;
setHoverPreview: (hoverPreview: boolean) => void;
transition: boolean;
setTransition: (transition: boolean) => void;
}) {
const { currentTheme, currentThemePlaylist, handleThemeChange, theme } =
useCommonHooks();
@@ -161,7 +167,7 @@ export function ThemeManagementPill({
)}
</Stack>
<Stack
gap={0}
gap={4}
style={{
zIndex: 2,
padding: '.25rem',
@@ -179,10 +185,20 @@ export function ThemeManagementPill({
justify='center'
>
<ActionIcon
className={actionIconClasses.themeEditButton}
className={
cardTheme.randomEnabled
? actionIconClasses.themeEditButton
: actionIconClasses.themeEditButtonAnimated
}
classNames={actionIconClasses}
onMouseEnter={() => setHoverPreview(true)}
onMouseLeave={() => setHoverPreview(false)}
onMouseEnter={() => {
!cardTheme.randomEnabled && setHoverPreview(true);
setTransition(false);
}}
onMouseLeave={() => {
setHoverPreview(false);
!cardTheme.randomEnabled && setTransition(true);
}}
onClick={() => {
mutateAsync({
method: 'PATCH',
@@ -190,18 +206,26 @@ export function ThemeManagementPill({
body: { ...cardTheme, randomEnabled: !cardTheme.randomEnabled },
});
}}
mb={'.125rem'}
>
<FiPower
color={cardTheme.randomEnabled ? 'DarkOliveGreen' : '#33333388'}
style={{ strokeWidth: 4, filter: 'brightness(1.5)' }}
color={
cardTheme.randomEnabled
? 'DarkOliveGreen'
: !hoverPreview || transition
? '#33333388'
: 'DarkOliveGreen'
}
style={{
strokeWidth: 4,
filter: 'brightness(1.5)',
transition: 'all 0.2s ease',
}}
/>
</ActionIcon>
<ActionIcon
className={actionIconClasses.themeEditButton}
classNames={actionIconClasses}
onClick={() => handleOpen(cardTheme)}
mb={'.125rem'}
>
<FaPencil
style={{ padding: '.25rem', filter: 'brightness(1.5)' }}

2
src/pages/settings/components/Theming/Themes/index.ts
View File

@@ -1,3 +1,5 @@
export { MiniAppItem } from './MiniAppItem';
export { MiniGroupItem } from './MiniGroupItem';
export { ThemeCard } from './ThemeCard';
export { ThemeExampleApp } from './ThemeExampleApp';
export { ThemeManagementPill } from './ThemeManagementPill';