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

203
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,69 +132,96 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
</Stack> </Stack>
</Group> </Group>
</Button> </Button>
<Stack {currentTheme === 'random' && cardTheme.name === theme.name ? (
gap={0} <Group
style={{ gap={0}
padding: '4px',
paddingRight: '0px',
position: 'absolute',
right: 3,
backgroundColor: '#ffffff88',
borderTopLeftRadius: '10px',
borderBottomLeftRadius: '10px',
}}
align='center'
justify='center'
>
<ActionIcon
style={{ style={{
background: theme.randomEnabled zIndex: 300,
? 'rgba(255,255,255,1)' position: 'absolute',
: 'rgba(255,255,255,0.5)', right: 0,
border: `solid 1px ${theme.borderColor}`, backgroundColor: 'white',
borderRadius: '2%', borderRadius: '50%',
margin: '2px', padding: '8px',
color: 'black', margin: '4px',
}} border: 'solid 2px black',
styles={{
root: {
height: '10px',
width: '10px',
},
icon: {
height: '10px',
width: '10px',
fontSize: '24px',
margin: 0,
padding: 0,
},
}}
onClick={() => {
createTheme({
method: 'PATCH',
endpoint: 'api/themes',
body: { ...theme, randomEnabled: !theme.randomEnabled },
});
}} }}
> >
<FiCheck /> <FiShuffle
</ActionIcon> style={{
<ActionIcon fontSize: '2em',
className={actionIconClasses.editButton} fontWeight: 'bold',
classNames={actionIconClasses} color: 'black',
onClick={() => handleOpen(theme)} }}
mb={2} />
</Group>
) : (
<Stack
gap={0}
style={{
padding: '4px',
paddingRight: '0px',
position: 'absolute',
right: 3,
backgroundColor: '#ffffff88',
borderTopLeftRadius: '10px',
borderBottomLeftRadius: '10px',
}}
align='center'
justify='center'
display={
currentTheme === 'random' && cardTheme.name === theme.name ? 'none' : 'flex'
}
> >
<FiEdit color='green' /> <ActionIcon
</ActionIcon> style={{
<ActionIcon background: cardTheme.randomEnabled
className={actionIconClasses.editButton} ? 'rgba(255,255,255,1)'
classNames={actionIconClasses} : 'rgba(255,255,255,0.5)',
onClick={() => handleDeleteTheme(theme)} border: `solid 1px ${cardTheme.borderColor}`,
> borderRadius: '2%',
<FiTrash color='red' /> margin: '2px',
</ActionIcon> color: 'black',
</Stack> }}
styles={{
root: {
height: '10px',
width: '10px',
},
icon: {
height: '20px',
width: '20px',
fontSize: '24px',
margin: 0,
padding: 0,
},
}}
onClick={() => {
createTheme({
method: 'PATCH',
endpoint: 'api/themes',
body: { ...cardTheme, randomEnabled: !cardTheme.randomEnabled },
});
}}
>
{cardTheme.randomEnabled ? <FiCheck color='green' /> : <FiX color='red' />}
</ActionIcon>
<ActionIcon
className={actionIconClasses.editButton}
classNames={actionIconClasses}
onClick={() => handleOpen(cardTheme)}
mb={2}
>
<FiEdit color='green' />
</ActionIcon>
<ActionIcon
className={actionIconClasses.editButton}
classNames={actionIconClasses}
onClick={() => handleDeleteTheme(cardTheme)}
>
<FiTrash color='red' />
</ActionIcon>
</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>

52
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,
}} }}
/> />
)} )}
<ThemeCard <Box
theme={theme} style={{
handleOpen={handleOpen} zIndex:
handleDeleteTheme={handleDeleteTheme} currentTheme === 'random' && cardTheme.name === theme.name ? 200 : 0,
setValue={setValue} }}
createTheme={createTheme} >
/> <ThemeCard
theme={theme}
cardTheme={cardTheme}
currentTheme={currentTheme}
handleOpen={handleOpen}
handleDeleteTheme={handleDeleteTheme}
setValue={setValue}
createTheme={createTheme}
/>
</Box>
</Group> </Group>
))} ))}
</Group> </Group>