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

Updates to styles

Browse Source
This commit is contained in:
Sean Edmunds
2025-03-12 13:40:39 -05:00
parent ef7cdfda20
commit 38c5148988
5 changed files with 253 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -53,6 +53,7 @@ function ThemeCard({
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundColor: cardTheme.backgroundColor, backgroundColor: cardTheme.backgroundColor,
border: `solid ${cardTheme.borderColor}`, border: `solid ${cardTheme.borderColor}`,
filter: cardTheme.randomEnabled === 0 ? 'saturate(0)' : undefined,
}} }}
onClick={() => { onClick={() => {
setCurrentTheme(cardTheme.name); setCurrentTheme(cardTheme.name);

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

@@ -1,20 +1,20 @@
import { import {
Button, Button,
Card,
ColorPicker, ColorPicker,
ColorSwatch, ColorSwatch,
Divider, Divider,
Group, Group,
Image,
Modal, Modal,
Select, ScrollArea,
Stack, Stack,
Text, Text,
TextInput, TextInput,
UnstyledButton,
} from '@mantine/core'; } from '@mantine/core';
import { useCommonHooks } from 'hooks'; import { useCommonHooks } from 'hooks';
import { useEffect, useRef, useState } from 'react';
import { FiSave, FiX } from 'react-icons/fi'; import { FiSave, FiX } from 'react-icons/fi';
import { modalClasses, selectClasses, textClasses, textInputClasses } from 'styles'; import { modalClasses, textClasses, textInputClasses } from 'styles';
import ThemeModalContent from './ThemeModalContent'; import ThemeModalContent from './ThemeModalContent';
function ThemeModal({ function ThemeModal({
@@ -33,6 +33,37 @@ function ThemeModal({
handleSaveTheme, handleSaveTheme,
}: any) { }: any) {
const { theme } = useCommonHooks(); const { theme } = useCommonHooks();
const viewportRef = useRef<HTMLDivElement>(null);
const [query, setQuery] = useState('');
const [hovered, setHovered] = useState(-1);
const filtered = backgroundList.filter((item: any) =>
item.toLowerCase().includes(query.toLowerCase()),
);
const items = filtered.map((item: any, index: any) => (
<UnstyledButton
data-list-item
key={item}
display='block'
bg={index === hovered ? 'red' : undefined}
p={50}
w={'90%'}
onClick={() =>
setSelectedTheme({
...selectedTheme,
backgroundImage: item,
})
}
>
{item}
</UnstyledButton>
));
useEffect(() => {
if (selectedTheme) {
setQuery(selectedTheme?.backgroundImage || '');
}
}, [selectedTheme]);
return ( return (
<Modal.Root <Modal.Root
size={'50%'} size={'50%'}
@@ -51,245 +82,239 @@ function ThemeModal({
> >
<Modal.Overlay /> <Modal.Overlay />
<Modal.Content> <Modal.Content>
<Modal.Header> <Modal.Header style={{ justifyContent: 'center' }}>
<Modal.Title>Edit Theme</Modal.Title> <Group pos={'absolute'}>
<Text>Name:</Text>
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
value={selectedTheme.name}
onChange={(e) =>
setSelectedTheme({ ...selectedTheme, name: e.target.value })
}
styles={{
label: {
color: theme.primaryColor,
},
input: {
color: theme.primaryColor,
border: 'none',
},
}}
/>
</Group>
<Modal.CloseButton /> <Modal.CloseButton />
</Modal.Header> </Modal.Header>
<Modal.Body p={'2rem'}> <Modal.Body p={'2rem'}>
<ThemeModalContent selectedTheme={selectedTheme} /> <ThemeModalContent selectedTheme={selectedTheme} />
<Divider color='black' my='sm' /> <Divider color='black' my='sm' />
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
label='Theme Name'
value={selectedTheme.name}
onChange={(e) => setSelectedTheme({ ...selectedTheme, name: e.target.value })}
styles={{
label: {
color: theme.primaryColor,
},
input: {
color: theme.primaryColor,
border: 'none',
},
}}
/>
<Divider color='black' my='sm' />
<Group w={'100%'} h={'100%'} gap={0}> <Group w={'100%'} h={'100%'} gap={0}>
<Stack w={'50%'}> <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',
border: `2px dashed ${theme.primaryColor}`,
}}
/>
</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',
border: `2px dashed ${theme.primaryColor}`,
}}
/>
</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',
border: `2px dashed ${theme.primaryColor}`,
}}
/>
</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',
border: `2px dashed ${theme.primaryColor}`,
}}
/>
</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',
border: `2px dashed ${theme.primaryColor}`,
}}
/>
</Group>
<Group justify='space-between'>
<Select
w={'100%'}
data={backgroundList}
classNames={{
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
label='Background Image'
value={
selectedTheme.backgroundImage === 'none'
? 'None'
: selectedTheme.backgroundImage
}
renderOption={(value) => {
return (
<Group
h={'50px'}
w={'100%'}
justify='space-between'
style={{
color: theme.primaryColor,
backgroundColor: theme.backgroundColor,
fontSize: '18px',
}}
>
{value.option.value}
{value.option.value && value.option.value !== 'None' && (
<Image
h={'50px'}
w={'90px'}
src={`/backgrounds/${value.option.value}`}
/>
)}
</Group>
);
}}
onChange={(value) =>
setSelectedTheme({
...selectedTheme,
backgroundImage: value,
})
}
/>
</Group>
</Stack>
<Stack h={'100%'} w={'50%'} align='center' justify='center'>
{pickerOpen ? ( {pickerOpen ? (
<> <Group justify='center'>
<ColorPicker value={colorValue} onChange={setColorValue} /> <ColorPicker
<Group w={'75%'} justify='space-between'> value={colorValue}
onChange={setColorValue}
format='hexa'
w={'90%'}
/>
<Group justify='center'>
<TextInput <TextInput
className={textInputClasses.default} className={textInputClasses.default}
classNames={textInputClasses} classNames={textInputClasses}
w={'100%'} w={'55%'}
value={colorValue} value={colorValue}
onChange={(e) => setColorValue(e.target.value)} onChange={(e) => setColorValue(e.target.value)}
/> />
<Group w={'100%'} align='center' justify='center'> <Button
<Button color={'green'}
color={'green'} onClick={() => {
onClick={() => { switch (colorId) {
switch (colorId) { case 'primaryColor':
case 'primaryColor': setSelectedTheme({
setSelectedTheme({ ...selectedTheme,
...selectedTheme, primaryColor: colorValue,
primaryColor: colorValue, });
}); break;
break; case 'accentColor':
case 'accentColor': setSelectedTheme({
setSelectedTheme({ ...selectedTheme,
...selectedTheme, accentColor: colorValue,
accentColor: colorValue, });
}); break;
break; case 'background':
case 'background': setSelectedTheme({
setSelectedTheme({ ...selectedTheme,
...selectedTheme, backgroundColor: colorValue,
backgroundColor: colorValue, });
}); break;
break; case 'borderColor':
case 'borderColor': setSelectedTheme({
setSelectedTheme({ ...selectedTheme,
...selectedTheme, borderColor: colorValue,
borderColor: colorValue, });
}); break;
break; case 'searchBackground':
case 'searchBackground': setSelectedTheme({
setSelectedTheme({ ...selectedTheme,
...selectedTheme, searchColor: colorValue,
searchColor: colorValue, });
}); break;
break; }
} closePicker();
closePicker(); }}
}} >
> <FiSave />
<FiSave /> </Button>
</Button> <Button color={'red'} onClick={closePicker}>
<Button color={'red'} onClick={closePicker}> <FiX />
<FiX /> </Button>
</Button> <Group w={'100%'} align='center' justify='center' />
</Group>
</Group> </Group>
</> </Group>
) : ( ) : (
<Card bg={'#0002'} h={'100%'} w={'90%'} style={{ alignItems: 'center' }}> <Stack h={256} justify='center'>
<Text className={textClasses.label} classNames={textClasses}> <Group justify='space-between'>
Pick a swatch to edit the color. <Text className={textClasses.label} classNames={textClasses}>
</Text> Primary Color
</Card> </Text>
<ColorSwatch
onClick={() => {
setColorId('primaryColor');
openPicker();
setColorValue(selectedTheme.primaryColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.primaryColor}
style={{
cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`,
}}
/>
</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',
border: `2px dashed ${theme.primaryColor}`,
}}
/>
</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',
border: `2px dashed ${theme.primaryColor}`,
}}
/>
</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',
border: `2px dashed ${theme.primaryColor}`,
}}
/>
</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',
border: `2px dashed ${theme.primaryColor}`,
}}
/>
</Group>
</Stack>
)} )}
</Stack> </Stack>
<Stack h={'100%'} w={'50%'} align='center' justify='center'>
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
value={query}
onChange={(event) => {
setQuery(event.currentTarget.value);
setHovered(-1);
}}
onKeyDown={(event) => {
if (event.key === 'ArrowDown') {
event.preventDefault();
setHovered((current) => {
const nextIndex =
current + 1 >= filtered.length ? current : current + 1;
viewportRef.current
?.querySelectorAll('[data-list-item]')
?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
return nextIndex;
});
}
if (event.key === 'ArrowUp') {
event.preventDefault();
setHovered((current) => {
const nextIndex = current - 1 < 0 ? current : current - 1;
viewportRef.current
?.querySelectorAll('[data-list-item]')
?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
return nextIndex;
});
}
}}
/>
<ScrollArea viewportRef={viewportRef} h={150} w={'100%'}>
<Stack gap={0} align='center'>
{items}
</Stack>
</ScrollArea>
</Stack>
</Group> </Group>
<Divider color='black' my='sm' /> <Divider color='black' my='sm' />
<Group mt={'2rem'}> <Group pos={'absolute'} bottom={8}>
<Button <Button
color={'green'} color={'green'}
styles={{ label: { color: 'black' } }} styles={{ label: { color: 'black' } }}

2
src/styles/ActionIcon.module.css
View File

@@ -87,4 +87,4 @@
color: var(--color-text-pri) !important; color: var(--color-text-pri) !important;
} }
} }
} }

2
src/styles/Select.module.css
View File

@@ -144,4 +144,4 @@
padding-left: .5rem; padding-left: .5rem;
opacity: 1; opacity: 1;
} }
} }

5
src/styles/Stack.module.css
View File

@@ -25,7 +25,6 @@
text-transform: uppercase; text-transform: uppercase;
} }
.appItemBox rect { .appItemBox rect {
border-radius: 6px; border-radius: 6px;
stroke-dasharray: 260; stroke-dasharray: 260;
@@ -41,10 +40,10 @@
@keyframes svgAnimation { @keyframes svgAnimation {
from { from {
stroke-dashoffset: 0; stroke-dashoffset: 0;
} }
to { to {
stroke-dashoffset: 1000; stroke-dashoffset: 1000;
} }
} }