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

Updates to theme styles

Browse Source
This commit is contained in:
Sean Edmunds
2025-01-02 10:36:26 -06:00
parent aa0661d574
commit 6899d7c7f0
3 changed files with 152 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/pages/settings/components/ThemeCard.tsx
View File

@@ -1,8 +1,16 @@
import { ActionIcon, Box, Button, Group, Stack, Text } from '@mantine/core'; import { ActionIcon, Box, Button, Group, Stack, Text } from '@mantine/core';
import { FiCheck, FiEdit, FiTrash } from 'react-icons/fi'; import { FiCheck, FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
import { actionIconClasses } from 'styles'; import { actionIconClasses } from 'styles';
function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme }: any) { function ThemeCard({
handleOpen,
handleDeleteTheme,
theme,
cardTheme,
currentTheme,
setValue,
createTheme,
}: any) {
return ( return (
<Group gap={0} align='center' justify='center' display={'grid'} pos={'relative'}> <Group gap={0} align='center' justify='center' display={'grid'} pos={'relative'}>
<Text <Text
@@ -12,47 +20,41 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
left: 6, left: 6,
paddingRight: 4, paddingRight: 4,
paddingLeft: 4, paddingLeft: 4,
backgroundColor: theme.borderColor, backgroundColor: cardTheme.borderColor,
borderRadius: '4px', borderRadius: '4px',
color: color:
theme.borderColor === theme.primaryColor cardTheme.borderColor === cardTheme.primaryColor
? theme.accentColor ? cardTheme.accentColor
: theme.primaryColor, : cardTheme.primaryColor,
zIndex: 3, zIndex: 3,
}} }}
> >
{theme.name} {cardTheme.name}
</Text> </Text>
<Button <Button
w={'300px'} w={'300px'}
h={'125px'} h={'125px'}
disabled={currentTheme === 'random'}
style={{ style={{
background: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), no-repeat center url(/backgrounds/${theme.backgroundImage})`, background: `linear-gradient(${cardTheme.backgroundColor}33, ${cardTheme.backgroundColor}33), no-repeat center url(/backgrounds/${cardTheme.backgroundImage})`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundColor: theme.backgroundColor, backgroundColor: cardTheme.backgroundColor,
border: `solid ${theme.borderColor}`, border: `solid ${cardTheme.borderColor}`,
}} }}
data-theme={theme.name} data-cardTheme={cardTheme.name}
onClick={() => { onClick={() => {
setValue(theme.name); setValue(cardTheme.name);
}} }}
> >
<Group <Group w={'100%'} gap={0} display={'flex'} align='center' justify='center'>
style={{ zIndex: 2 }}
w={'100%'}
gap={0}
display={'flex'}
align='center'
justify='center'
>
<Stack align='center'> <Stack align='center'>
<Box <Box
style={{ style={{
height: '10px', height: '10px',
width: '100px', width: '100px',
backgroundColor: theme.searchColor, backgroundColor: cardTheme.searchColor,
borderRadius: '4px', borderRadius: '4px',
borderBottom: `solid 1px ${theme.borderColor}`, borderBottom: `solid 1px ${cardTheme.borderColor}`,
}} }}
/> />
<Group justify='space-between'> <Group justify='space-between'>
@@ -60,7 +62,7 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
style={{ style={{
height: '8px', height: '8px',
width: '100px', width: '100px',
backgroundColor: theme.accentColor, backgroundColor: cardTheme.accentColor,
borderRadius: '4px', borderRadius: '4px',
}} }}
/> />
@@ -68,7 +70,7 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
style={{ style={{
height: '8px', height: '8px',
width: '50px', width: '50px',
backgroundColor: theme.primaryColor, backgroundColor: cardTheme.primaryColor,
borderRadius: '4px', borderRadius: '4px',
}} }}
/> />
@@ -78,7 +80,7 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
style={{ style={{
height: '5px', height: '5px',
width: '40px', width: '40px',
backgroundColor: theme.primaryColor, backgroundColor: cardTheme.primaryColor,
borderRadius: '4px', borderRadius: '4px',
}} }}
/> />
@@ -93,7 +95,7 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
fontSize: '6px', fontSize: '6px',
justifyContent: 'center', justifyContent: 'center',
alignContent: 'center', alignContent: 'center',
color: theme.primaryColor, color: cardTheme.primaryColor,
}} }}
> >
lorem ipsum lorem ipsum
@@ -107,7 +109,7 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
fontSize: '6px', fontSize: '6px',
justifyContent: 'center', justifyContent: 'center',
alignContent: 'center', alignContent: 'center',
color: theme.primaryColor, color: cardTheme.primaryColor,
}} }}
> >
lorem ipsum lorem ipsum
@@ -121,7 +123,7 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
fontSize: '6px', fontSize: '6px',
justifyContent: 'center', justifyContent: 'center',
alignContent: 'center', alignContent: 'center',
color: theme.primaryColor, color: cardTheme.primaryColor,
}} }}
> >
lorem ipsum lorem ipsum
@@ -130,6 +132,29 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
</Stack> </Stack>
</Group> </Group>
</Button> </Button>
{currentTheme === 'random' && cardTheme.name === theme.name ? (
<Group
gap={0}
style={{
zIndex: 300,
position: 'absolute',
right: 0,
backgroundColor: 'white',
borderRadius: '50%',
padding: '8px',
margin: '4px',
border: 'solid 2px black',
}}
>
<FiShuffle
style={{
fontSize: '2em',
fontWeight: 'bold',
color: 'black',
}}
/>
</Group>
) : (
<Stack <Stack
gap={0} gap={0}
style={{ style={{
@@ -143,13 +168,16 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
}} }}
align='center' align='center'
justify='center' justify='center'
display={
currentTheme === 'random' && cardTheme.name === theme.name ? 'none' : 'flex'
}
> >
<ActionIcon <ActionIcon
style={{ style={{
background: theme.randomEnabled background: cardTheme.randomEnabled
? 'rgba(255,255,255,1)' ? 'rgba(255,255,255,1)'
: 'rgba(255,255,255,0.5)', : 'rgba(255,255,255,0.5)',
border: `solid 1px ${theme.borderColor}`, border: `solid 1px ${cardTheme.borderColor}`,
borderRadius: '2%', borderRadius: '2%',
margin: '2px', margin: '2px',
color: 'black', color: 'black',
@@ -160,8 +188,8 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
width: '10px', width: '10px',
}, },
icon: { icon: {
height: '10px', height: '20px',
width: '10px', width: '20px',
fontSize: '24px', fontSize: '24px',
margin: 0, margin: 0,
padding: 0, padding: 0,
@@ -171,16 +199,16 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
createTheme({ createTheme({
method: 'PATCH', method: 'PATCH',
endpoint: 'api/themes', endpoint: 'api/themes',
body: { ...theme, randomEnabled: !theme.randomEnabled }, body: { ...cardTheme, randomEnabled: !cardTheme.randomEnabled },
}); });
}} }}
> >
<FiCheck /> {cardTheme.randomEnabled ? <FiCheck color='green' /> : <FiX color='red' />}
</ActionIcon> </ActionIcon>
<ActionIcon <ActionIcon
className={actionIconClasses.editButton} className={actionIconClasses.editButton}
classNames={actionIconClasses} classNames={actionIconClasses}
onClick={() => handleOpen(theme)} onClick={() => handleOpen(cardTheme)}
mb={2} mb={2}
> >
<FiEdit color='green' /> <FiEdit color='green' />
@@ -188,11 +216,12 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
<ActionIcon <ActionIcon
className={actionIconClasses.editButton} className={actionIconClasses.editButton}
classNames={actionIconClasses} classNames={actionIconClasses}
onClick={() => handleDeleteTheme(theme)} onClick={() => handleDeleteTheme(cardTheme)}
> >
<FiTrash color='red' /> <FiTrash color='red' />
</ActionIcon> </ActionIcon>
</Stack> </Stack>
)}
</Group> </Group>
); );
} }

2
src/pages/settings/components/ThemeModal.tsx
View File

@@ -254,7 +254,7 @@ function ThemeModal({
<Button color={'green'} onClick={handleSaveTheme}> <Button color={'green'} onClick={handleSaveTheme}>
Save Save
</Button> </Button>
<Button color={'red'} onClick={close}> <Button color={'red'} onClick={handleClose}>
Cancel Cancel
</Button> </Button>
</Group> </Group>

38
src/pages/settings/components/Themes.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Group, Stack, Switch, Text } from '@mantine/core'; import { Box, Button, Group, Overlay, Stack, Switch, Text } from '@mantine/core';
import { useDisclosure, useLocalStorage } from '@mantine/hooks'; import { useDisclosure, useLocalStorage } from '@mantine/hooks';
import { useMutationAPI, useQueryAPI } from 'hooks'; import { useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@@ -74,7 +74,6 @@ function ThemesSettings({ theme }: any) {
openDeleteConfirmModal(theme); openDeleteConfirmModal(theme);
close(); close();
}; };
return ( return (
<> <>
<ThemeModal <ThemeModal
@@ -129,10 +128,20 @@ function ThemesSettings({ theme }: any) {
color={theme.primaryColor} color={theme.primaryColor}
/> />
</Group> </Group>
<Group justify='center'> <Group justify='center' pos={'relative'}>
{themesList.map((theme: any) => ( <Overlay
<Group key={theme.name} pos={'relative'}> display={currentTheme === 'random' ? 'flex' : 'none'}
{theme.name === currentTheme && ( blur={5}
style={{
borderRadius: '10px',
marginTop: '-15px',
marginBottom: '-10px',
}}
pos={'absolute'}
/>
{themesList.map((cardTheme: any) => (
<Group key={cardTheme.name} pos={'relative'}>
{cardTheme.name === currentTheme && (
<FiChevronRight <FiChevronRight
style={{ style={{
position: 'absolute', position: 'absolute',
@@ -141,21 +150,30 @@ function ThemesSettings({ theme }: any) {
fontSize: '2em', fontSize: '2em',
fontWeight: 'bold', fontWeight: 'bold',
borderRadius: '50%', borderRadius: '50%',
backgroundColor: theme.borderColor, backgroundColor: cardTheme.borderColor,
color: color:
theme.borderColor === theme.primaryColor cardTheme.borderColor === cardTheme.primaryColor
? theme.accentColor ? cardTheme.accentColor
: theme.primaryColor, : cardTheme.primaryColor,
}} }}
/> />
)} )}
<Box
style={{
zIndex:
currentTheme === 'random' && cardTheme.name === theme.name ? 200 : 0,
}}
>
<ThemeCard <ThemeCard
theme={theme} theme={theme}
cardTheme={cardTheme}
currentTheme={currentTheme}
handleOpen={handleOpen} handleOpen={handleOpen}
handleDeleteTheme={handleDeleteTheme} handleDeleteTheme={handleDeleteTheme}
setValue={setValue} setValue={setValue}
createTheme={createTheme} createTheme={createTheme}
/> />
</Box>
</Group> </Group>
))} ))}
</Group> </Group>