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

Theme updates

Browse Source
This commit is contained in:
Sean Edmunds
2024-12-31 11:50:52 -06:00
parent 2174b1d7be
commit 11b625712b
3 changed files with 536 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/pages/settings/components/ThemeCard.tsx Normal file
View File

@@ -0,0 +1,194 @@
import { ActionIcon, Box, Button, Group, Stack, Text } from '@mantine/core';
import { FiCheck, FiEdit, FiTrash } from 'react-icons/fi';
import { actionIconClasses } from 'styles';
function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme }: any) {
return (
<Group gap={0} align='center' justify='center' display={'grid'} pos={'relative'}>
<Text
style={{
position: 'absolute',
top: -10,
left: 6,
paddingRight: 4,
paddingLeft: 4,
backgroundColor: theme.borderColor,
borderRadius: '4px',
color: theme.primaryColor,
zIndex: 3,
}}
>
{theme.name}
</Text>
<Button
w={'300px'}
h={'125px'}
style={{
background: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), no-repeat center url(/backgrounds/${theme.backgroundImage})`,
backgroundSize: 'cover',
backgroundColor: theme.backgroundColor,
border: `solid ${theme.borderColor}`,
color: theme.primaryColor,
}}
data-theme={theme.name}
onClick={() => {
setValue(theme.name);
}}
>
<Group
style={{ zIndex: 2 }}
w={'100%'}
gap={0}
display={'flex'}
align='center'
justify='center'
>
<Stack align='center'>
<Box
style={{
height: '10px',
width: '100px',
backgroundColor: theme.searchColor,
borderRadius: '4px',
borderBottom: `solid 1px ${theme.borderColor}`,
}}
/>
<Group justify='space-between'>
<Box
style={{
height: '8px',
width: '100px',
backgroundColor: theme.accentColor,
borderRadius: '4px',
}}
/>
<Box
style={{
height: '8px',
width: '50px',
backgroundColor: theme.primaryColor,
borderRadius: '4px',
}}
/>
</Group>
<Group w={'100%'}>
<Box
style={{
height: '5px',
width: '40px',
backgroundColor: theme.primaryColor,
borderRadius: '4px',
}}
/>
</Group>
<Group w={'100%'}>
<Box
style={{
height: '10px',
width: '40px',
borderRadius: '4px',
backdropFilter: 'blur(10px) brightness(1.5)',
fontSize: '6px',
justifyContent: 'center',
alignContent: 'center',
}}
>
lorem ipsum
</Box>
<Box
style={{
height: '10px',
width: '40px',
borderRadius: '4px',
backdropFilter: 'blur(10px) brightness(1.5)',
fontSize: '6px',
justifyContent: 'center',
alignContent: 'center',
}}
>
lorem ipsum
</Box>
<Box
style={{
height: '10px',
width: '40px',
borderRadius: '4px',
backdropFilter: 'blur(10px) brightness(1.5)',
fontSize: '6px',
justifyContent: 'center',
alignContent: 'center',
}}
>
lorem ipsum
</Box>
</Group>
</Stack>
</Group>
</Button>
<Stack
gap={0}
style={{
padding: '4px',
paddingRight: '0px',
position: 'absolute',
right: 3,
backgroundColor: '#ffffff66',
borderTopLeftRadius: '10px',
borderBottomLeftRadius: '10px',
}}
align='center'
justify='center'
>
<ActionIcon
style={{
background: theme.randomEnabled
? 'rgba(255,255,255,1)'
: 'rgba(255,255,255,0.5)',
border: `solid 1px ${theme.borderColor}`,
borderRadius: '2%',
margin: '2px',
color: '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 />
</ActionIcon>
<ActionIcon
className={actionIconClasses.editButton}
classNames={actionIconClasses}
onClick={() => handleOpen(theme)}
>
<FiEdit />
</ActionIcon>
<ActionIcon
className={actionIconClasses.editButton}
classNames={actionIconClasses}
onClick={() => handleDeleteTheme(theme)}
>
<FiTrash color='red' />
</ActionIcon>
</Stack>
</Group>
);
}
export default ThemeCard;