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

Style updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-10-14 16:17:10 -05:00
parent 982c0aca80
commit c8d4922ca4
10 changed files with 179 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ManagementPill.tsx
View File

@@ -16,9 +16,6 @@ export function ManagementPill({
return (
<Group
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
width: 'fit-content',
backgroundColor:
'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',

28
src/pages/settings/components/Applications/DebouncedApplication.tsx
View File

@@ -1,4 +1,5 @@
import {
Box,
Card,
type ComboboxItem,
type ComboboxLikeRenderOptionInput,
@@ -68,16 +69,25 @@ function DebouncedApplication({
</Stack>
}
/>
<ManagementPill
enabled={app.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...app,
enabled: event.target.checked ? 1 : 0,
});
<Box
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
}}
openModal={openModal}
/>
>
<ManagementPill
enabled={app.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...app,
enabled: event.target.checked ? 1 : 0,
});
}}
openModal={openModal}
/>
</Box>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<TextInput
label={'Name'}

29
src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
View File

@@ -1,4 +1,4 @@
import { Card, Group, Select, Stack, Text, TextInput } from '@mantine/core';
import { Box, Card, Group, Select, Stack, Text, TextInput } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { DeleteItemModal, ManagementPill } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
@@ -72,16 +72,25 @@ function DebouncedBookmarkItem({
}
title='Delete Bookmark'
/>
<ManagementPill
enabled={bookmark.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...bookmark,
enabled: event.target.checked ? 1 : 0,
});
<Box
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
}}
openModal={openModal}
/>
>
<ManagementPill
enabled={bookmark.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...bookmark,
enabled: event.target.checked ? 1 : 0,
});
}}
openModal={openModal}
/>
</Box>
<Group
justify='space-between'
pos={'relative'}

26
src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
View File

@@ -212,16 +212,24 @@ function DebouncedGroupSettingsItem({
top: '-3.25rem',
}}
>
<ManagementPill
enabled={group.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...group,
enabled: event.target.checked ? 1 : 0,
});
<Box
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
}}
openModal={openModal}
/>
>
<ManagementPill
enabled={group.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...group,
enabled: event.target.checked ? 1 : 0,
});
}}
openModal={openModal}
/>
</Box>
</Group>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId={`${bookmarkGroup.id}`}>

29
src/pages/settings/components/Messages/DebouncedMessage.tsx
View File

@@ -1,4 +1,4 @@
import { Card, Stack, Text, TextInput } from '@mantine/core';
import { Box, Card, Stack, Text, TextInput } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { DeleteItemModal, ManagementPill } from 'components';
import { useCommonHooks } from 'hooks';
@@ -39,16 +39,25 @@ function DebouncedMessage({
</Stack>
}
/>
<ManagementPill
enabled={message.customGreeting}
onChange={() => {
setMessage({
...message,
customGreeting: message.customGreeting === 1 ? 0 : 1,
});
<Box
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
}}
openModal={openModal}
/>
>
<ManagementPill
enabled={message.customGreeting}
onChange={() => {
setMessage({
...message,
customGreeting: message.customGreeting === 1 ? 0 : 1,
});
}}
openModal={openModal}
/>
</Box>
<TextInput
label={label}
disabled={message.customGreeting === 0}

102
src/pages/settings/components/Messages/Messages.tsx
View File

@@ -1,4 +1,5 @@
import { Button, Grid, GridCol, Group, Stack, TextInput } from '@mantine/core';
import { isNotEmpty, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
@@ -12,11 +13,17 @@ const MessageSettings = () => {
const { data: messageData, isFetched: isMessagesFetched } = useQueryAPI({
endpoint: endpoint,
});
const form = useForm({
initialValues: {
message: '',
},
validate: {
message: isNotEmpty('Message is required'),
},
});
const { isMobile, theme } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [messages, setMessages] = useState<Message[]>([]);
const [newMessage, setNewMessage] = useState('');
const [newMessageError, setNewMessageError] = useState<string>('');
const [message, setMessage] = useState({});
const [debounced] = useDebouncedValue(message, 1000);
const [searchValue, setSearchValue] = useState('');
@@ -25,9 +32,8 @@ const MessageSettings = () => {
const [isLoading, setIsLoading] = useState(false);
const handleClose = () => {
setNewMessage('');
setNewMessageError('');
closeModal();
form.reset();
};
useEffect(() => {
@@ -78,51 +84,49 @@ const MessageSettings = () => {
handleClose={handleClose}
title={'Add a new message'}
body={
<Stack gap={0} align='center'>
<TextInput
label='Message text'
autoFocus={!isMobile}
w={'75%'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
onChange={(event) => {
setNewMessage(event.target.value);
}}
error={newMessageError}
styles={
theme.textShadowsEnabled
? {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
: undefined
}
/>
<Group mt={'1rem'}>
<Button
color={'green'}
onClick={() => {
if (newMessage) {
mutateAsync({
method: 'POST',
endpoint: endpoint,
body: { message: newMessage },
}).then(handleClose);
} else {
setNewMessageError('Please enter a message');
}
}}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={handleClose}
>
Cancel
</Button>
</Group>
</Stack>
<form
onSubmit={form.onSubmit((values) => {
mutateAsync({
method: 'POST',
endpoint: endpoint,
body: { message: values.message },
});
handleClose();
})}
>
<Stack gap={0} align='center'>
<TextInput
autoFocus={!isMobile}
key={form.key('message')}
{...form.getInputProps('message')}
label={'Message'}
placeholder='eg. Hello, World!'
w={'45%'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
withAsterisk
styles={
theme.textShadowsEnabled
? {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
: undefined
}
/>
<Group mt={'1rem'}>
<Button type='submit' color={'green'}>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={handleClose}
>
Cancel
</Button>
</Group>
</Stack>
</form>
}
/>
<Stack

31
src/pages/settings/components/Search/DebouncedSearchProvider.tsx
View File

@@ -1,4 +1,4 @@
import { Card, Group, Stack, Text, TextInput } from '@mantine/core';
import { Box, Card, Group, Stack, Text, TextInput } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { DeleteItemModal, ManagementPill } from 'components';
import { useCommonHooks, useMutationAPI } from 'hooks';
@@ -60,17 +60,26 @@ function DebouncedSearchProvider({
</Stack>
}
/>
<ManagementPill
enabled={provider.default}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...provider,
default: event.target.checked ? 1 : 0,
});
<Box
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
}}
openModal={openModal}
label={['Non-Default', 'Default']}
/>
>
<ManagementPill
enabled={provider.default}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...provider,
default: event.target.checked ? 1 : 0,
});
}}
openModal={openModal}
label={['Non-Default', 'Default']}
/>
</Box>
<Stack w={'100%'} align='center'>
<Group w={'100%'} justify='center'>
<TextInput