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

267
src/pages/settings/components/ThemeModal.tsx Normal file
View File

@@ -0,0 +1,267 @@
import {
Button,
Card,
ColorPicker,
ColorSwatch,
Divider,
Group,
Image,
Modal,
OptionalPortal,
Select,
Stack,
Text,
TextInput,
} from '@mantine/core';
import { FiSave, FiX } from 'react-icons/fi';
import { modalClasses, selectClasses, textClasses } from 'styles';
import ThemeModalContent from './ThemeModalContent';
function ThemeModal({
opened,
handleClose,
selectedTheme,
setSelectedTheme,
theme,
setColorId,
colorId,
setColorValue,
openPicker,
backgroundList,
pickerOpen,
colorValue,
closePicker,
handleSaveTheme,
}: any) {
return (
<Modal.Root
size={'50%'}
className={modalClasses.editThemeModal}
classNames={modalClasses}
opened={opened}
onClose={handleClose}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundImage ? 'gray' : theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url("${theme.backgroundImage}")`,
}}
>
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>Edit Theme</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body p={'2rem'}>
<ThemeModalContent selectedTheme={selectedTheme} />
<Divider color='black' my='sm' />
<TextInput
label='Theme Name'
value={selectedTheme.name}
onChange={(e) => setSelectedTheme({ ...selectedTheme, name: e.target.value })}
styles={{
label: {
color: theme.primaryColor,
},
}}
/>
<Divider color='black' my='sm' />
<Group w={'100%'} h={'100%'} gap={0}>
<Stack w={'50%'}>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Primary Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('primaryColor');
openPicker();
setColorValue(selectedTheme.primaryColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.primaryColor}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Accent Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('accentColor');
openPicker();
setColorValue(selectedTheme.accentColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.accentColor}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Background Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('background');
openPicker();
setColorValue(selectedTheme.backgroundColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.backgroundColor}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Border Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('borderColor');
openPicker();
setColorValue(selectedTheme.borderColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.borderColor}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Search Background Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('searchBackground');
openPicker();
setColorValue(selectedTheme.searchColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.searchColor}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group justify='space-between'>
<OptionalPortal withinPortal={false}>
<Select
data={backgroundList}
className={selectClasses.select}
classNames={selectClasses}
label='Background Image'
value={selectedTheme.backgroundImage}
renderOption={(value) => {
return (
<Group h={'100%'} w={'100%'} justify='space-between'>
{value.option.value}
{value.option.value && value.option.value !== 'None' && (
<Image
h={'28px'}
w={'50px'}
src={`/backgrounds/${value.option.value}`}
/>
)}
</Group>
);
}}
onChange={(value) =>
setSelectedTheme({
...selectedTheme,
backgroundImage: value,
})
}
/>
</OptionalPortal>
</Group>
</Stack>
<Stack h={'100%'} w={'50%'} align='center' justify='center'>
{pickerOpen ? (
<>
<ColorPicker value={colorValue} onChange={setColorValue} />
<Group w={'75%'} justify='space-between'>
<TextInput
w={'50%'}
value={colorValue}
onChange={(e) => setColorValue(e.target.value)}
/>
<Group>
<Button
color={'green'}
onClick={() => {
switch (colorId) {
case 'primaryColor':
setSelectedTheme({
...selectedTheme,
primaryColor: colorValue,
});
break;
case 'accentColor':
setSelectedTheme({
...selectedTheme,
accentColor: colorValue,
});
break;
case 'background':
setSelectedTheme({
...selectedTheme,
backgroundColor: colorValue,
});
break;
case 'borderColor':
setSelectedTheme({
...selectedTheme,
borderColor: colorValue,
});
break;
case 'searchBackground':
setSelectedTheme({
...selectedTheme,
searchColor: colorValue,
});
break;
}
closePicker();
}}
>
<FiSave />
</Button>
<Button color={'red'} onClick={closePicker}>
<FiX />
</Button>
</Group>
</Group>
</>
) : (
<Card bg={'#0002'} h={'100%'} w={'90%'} style={{ alignItems: 'center' }}>
<Text className={textClasses.label} classNames={textClasses}>
Pick a swatch to edit the color.
</Text>
</Card>
)}
</Stack>
</Group>
<Divider color='black' my='sm' />
<Group>
<Button color={'green'} onClick={handleSaveTheme}>
Save
</Button>
<Button color={'red'} onClick={close}>
Cancel
</Button>
</Group>
</Modal.Body>
</Modal.Content>
</Modal.Root>
);
}
export default ThemeModal;