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

Theme changes

Browse Source
This commit is contained in:
Sean Edmunds
2025-04-28 15:59:56 -05:00
parent 19b793fbf9
commit 416c8611ec
53 changed files with 392 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx
View File

@@ -10,8 +10,8 @@ function BookmarkSettingsItem({ bookmark }: { bookmark: Bookmark }) {
style={{
cursor: 'pointer',
borderRadius: '4px',
color: 'var(--color-text-acc)',
backgroundColor: 'var(--color-search-background)',
color: 'var(--mantine-color-accent-0)',
backgroundColor: 'var(--mantine-color-search-0)',
padding: '8px',
}}
onMouseEnter={() => setHover(true)}
@@ -25,7 +25,7 @@ function BookmarkSettingsItem({ bookmark }: { bookmark: Bookmark }) {
style={{
position: 'absolute',
right: 24,
color: 'var(--color-text-acc)',
color: 'var(--mantine-color-accent-0)',
}}
>
<FiEdit />

18
src/pages/settings/components/Bookmarks/Bookmarks.tsx
View File

@@ -28,7 +28,7 @@ const BookmarkSettings = () => {
const [groups, setGroups] = useState<BookmarkGroup[]>([]);
const [newGroup, setNewGroup] = useState<BookmarkGroup>(defaultGroup);
const [groupList, setGroupList] = useState<BookmarkGroup[]>([]);
const { theme, isMobile, reorder } = useCommonHooks();
const { isMobile, reorder } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [searchValue, setSearchValue] = useState('');
const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
@@ -227,14 +227,14 @@ const BookmarkSettings = () => {
<Card
w={'400px'}
style={{
backgroundColor: theme.searchColor,
border: '1px solid var(--color-border)',
backgroundColor: 'var(--mantine-color-search-0)',
border: '1px solid var(--mantine-color-border-0)',
borderRadius: '8px',
}}
>
<Group gap={0} align='center' justify='space-between'>
<Stack gap={0}>
<Text c={theme.accentColor} fz={14}>
<Text c={'var(--mantine-color-accent-0)'} fz={14}>
Name
</Text>
<Text
@@ -242,15 +242,15 @@ const BookmarkSettings = () => {
style={{
borderRadius: '4px',
paddingLeft: '8px',
color: theme.primaryColor,
backgroundColor: theme.searchColor,
color: 'var(--mantine-color-primary-0)',
backgroundColor: 'var(--mantine-color-search-0)',
}}
>
{group.categoryName}
</Text>
</Stack>
<Stack gap={0}>
<Text c={theme.accentColor} fz={14}>
<Text c={'var(--mantine-color-accent-0)'} fz={14}>
Filter Name
</Text>
<Text
@@ -258,8 +258,8 @@ const BookmarkSettings = () => {
style={{
borderRadius: '4px',
paddingLeft: '8px',
color: theme.primaryColor,
backgroundColor: theme.searchColor,
color: 'var(--mantine-color-primary-0)',
backgroundColor: 'var(--mantine-color-search-0)',
}}
>
{group.filterName}

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

@@ -11,7 +11,7 @@ function DebouncedBookmarkItem({
bookmarkItem,
setIsOpen,
}: { bookmarkItem: Bookmark; setIsOpen: (isOpen: boolean) => void }) {
const { theme, handleDelete } = useCommonHooks();
const { handleDelete } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -50,8 +50,8 @@ function DebouncedBookmarkItem({
padding: '8px',
margin: '8px',
borderRadius: '10px',
backgroundColor: 'var(--color-text-acc)',
color: 'var(--color-background)',
backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-background-0)',
}}
>{`"${bookmark.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
@@ -60,8 +60,8 @@ function DebouncedBookmarkItem({
title='Delete Bookmark'
/>
<Tooltip
color={theme.primaryColor}
bd={`solid 1px ${theme.borderColor}`}
color={'var(--mantine-color-primary-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'}
>
<ActionIcon

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

@@ -33,7 +33,7 @@ function DebouncedGroupSettingsItem({
bookmarks,
searchTerm,
}: { bookmarkGroup: BookmarkGroup; bookmarks: Bookmark[]; searchTerm: string }) {
const { theme, isMobile, handleDelete, reorder } = useCommonHooks();
const { isMobile, handleDelete, reorder } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const [popoverOpened, setPopoverOpened] = useState(false);
const { mutateAsync } = useMutationAPI();
@@ -113,8 +113,8 @@ function DebouncedGroupSettingsItem({
padding: '8px',
margin: '8px',
borderRadius: '10px',
backgroundColor: 'var(--color-text-acc)',
color: 'var(--color-background)',
backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-background-0)',
}}
>{`"${group.categoryName}"`}</Text>
<Text style={{ fontWeight: 'bold', textTransform: 'uppercase' }}>
@@ -124,14 +124,18 @@ function DebouncedGroupSettingsItem({
</Stack>
}
/>
<Card.Section p={16} bg={theme.searchColor} c={theme.backgroundColor}>
<Card.Section
p={16}
bg={'var(--mantine-color-search-0)'}
c={'var(--mantine-color-background-0)'}
>
<Stack gap={0}>
<Group gap={0} align='center' justify='space-between'>
<TextInput
label={'Name'}
labelProps={{
style: {
color: theme.primaryColor,
color: 'var(--mantine-color-primary-0)',
},
}}
w={isMobile ? undefined : '58%'}
@@ -149,7 +153,7 @@ function DebouncedGroupSettingsItem({
label={'Filter Name'}
labelProps={{
style: {
color: theme.primaryColor,
color: 'var(--mantine-color-primary-0)',
},
}}
w={isMobile ? undefined : '28%'}
@@ -164,8 +168,8 @@ function DebouncedGroupSettingsItem({
}}
/>
<Tooltip
color={theme.primaryColor}
bd={`solid 1px ${theme.borderColor}`}
color={'var(--mantine-color-primary-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'}
>
<ActionIcon
@@ -186,7 +190,7 @@ function DebouncedGroupSettingsItem({
width: '30px',
height: '30px',
borderRadius: '100%',
backgroundColor: theme.accentColor,
backgroundColor: 'var(--mantine-color-accent-0)',
position: 'absolute',
top: isMobile ? 164 : 78,
right: 18,
@@ -247,17 +251,7 @@ function DebouncedGroupSettingsItem({
<BookmarkSettingsItem bookmark={bookmark} />
</Box>
</Popover.Target>
<Popover.Dropdown
w={isMobile ? '100%' : undefined}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<DebouncedBookmarkItem
bookmarkItem={bookmark}
setIsOpen={setIsOpen}
@@ -275,7 +269,11 @@ function DebouncedGroupSettingsItem({
</DragDropContext>
</Stack>
</Card.Section>
<Card.Section p={8} bg={theme.searchColor} c={theme.backgroundColor}>
<Card.Section
p={8}
bg={'var(--mantine-color-search-0)'}
c={'var(--mantine-color-background-0)'}
>
<Group align='center' justify='center'>
<Popover
withArrow
@@ -302,17 +300,7 @@ function DebouncedGroupSettingsItem({
<FiPlus /> Bookmark
</Button>
</Popover.Target>
<Popover.Dropdown
w={isMobile ? '100%' : undefined}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Stack w={'100%'} display={'flex'} pos={'relative'}>
<Group w={'100%'} justify='center'>
@@ -320,7 +308,7 @@ function DebouncedGroupSettingsItem({
label={'Name'}
labelProps={{
style: {
color: theme.primaryColor,
color: 'var(--mantine-color-primary-0)',
},
}}
className={textInputClasses.settingsItem}
@@ -337,7 +325,7 @@ function DebouncedGroupSettingsItem({
label={'Category'}
labelProps={{
style: {
color: theme.primaryColor,
color: 'var(--mantine-color-primary-0)',
},
}}
className={textInputClasses.settingsItem}
@@ -358,7 +346,7 @@ function DebouncedGroupSettingsItem({
label={'URL'}
labelProps={{
style: {
color: theme.primaryColor,
color: 'var(--mantine-color-primary-0)',
},
}}
className={textInputClasses.settingsItem}