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

Bugfixes & UI updates

Browse Source
This commit is contained in:
Sean Edmunds
2024-08-29 12:45:25 -05:00
parent 9a3cbbd0e2
commit e9ccd0906c
16 changed files with 249 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.tsx
View File

@@ -20,6 +20,7 @@ import Settings from './pages/settings/Settings';
import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //import MRT styles
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { useAtom } from 'jotai';
import { appTheme } from './contexts/theme';
@@ -34,7 +35,6 @@ function App() {
});
const [theme, setTheme] = useAtom(appTheme);
useEffect(() => {
if (data && themeName) {
const temp = data.find((t: any) => t.name === themeName);
@@ -64,6 +64,7 @@ function App() {
<ThemeProvider theme={theme}>
<ModalsProvider>
<RouterProvider router={router} />
<ReactQueryDevtools initialIsOpen={false} />
</ModalsProvider>
</ThemeProvider>
</MantineProvider>

2
src/DataTable/DataTable.tsx
View File

@@ -100,7 +100,7 @@ export function DataTableComponent({
),
mantineCreateRowModalProps: {
style: {
color: theme.primary,
color: theme.primaryColor,
},
},
renderTopToolbarCustomActions: ({ table }) => {

6
src/components/ThemeProvider.tsx
View File

@@ -7,10 +7,10 @@ export default function ThemeProvider({
return (
<Box
style={{
'--color-text-pri': theme.primary,
'--color-text-acc': theme.accent,
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.border,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}

23
src/hooks/useAPI.ts
View File

@@ -106,24 +106,13 @@ export function useMutationAPI() {
}: {
method: string;
endpoint: string;
body?: object | undefined | null;
body: object | undefined | null;
}) => callEndpoint(method, endpoint, body),
onMutate: () => {},
onSuccess: (data, variables) => {
queryClient.invalidateQueries({ queryKey: ['GET', variables.endpoint] });
if (variables.endpoint.includes('/')) {
if ((variables.endpoint.match(/\//g) || []).length > 2) {
const GetEndpoint = variables.endpoint.split('/');
const Endpoint = `${GetEndpoint[1]}/${GetEndpoint[2]}`;
queryClient.invalidateQueries({ queryKey: ['GET', `/${Endpoint}`] });
} else {
const GetEndpoint = variables.endpoint.split('/')[1];
queryClient.invalidateQueries({
queryKey: ['GET', `/${GetEndpoint}`],
});
}
}
onMutate: () => {
queryClient.invalidateQueries();
},
onSuccess: () => {
queryClient.invalidateQueries();
},
});
}

2
src/pages/homepage/components/Applications.tsx
View File

@@ -14,7 +14,7 @@ function Applications({ contentType }: any) {
}, [isFetching]);
return (
<>
{applications.length > 0 && (
{applications.length > 0 && contentType.length > 0 && (
<Stack id='apps' style={{ gap: 0 }}>
<Text className={texts.sectionTitle} classNames={texts}>
Applications

69
src/pages/homepage/components/Bookmarks.tsx
View File

@@ -22,40 +22,43 @@ function Links({ contentType }: any) {
}, [linksIsFetched, groupsIsFetched]);
return (
<>
{groupsIsFetched && linksIsFetched && categories?.length > 0 && (
<Stack id='links' style={{ gap: 0 }}>
<Text className={texts.sectionTitle} classNames={texts}>
Bookmarks
</Text>
<Stack
style={{
display: 'grid',
flexWrap: 'nowrap',
gridColumnGap: '20px',
gridRowGap: '0px',
gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
gridTemplateRows: 'auto',
}}
>
{categories.map((category: any) => {
if (
contentType.includes(category.filterName) ||
contentType.includes('All')
) {
return (
<LinkGroups
key={category.id}
category={category.categoryName}
links={bookmarks.filter(
(bookmark: any) => bookmark.category === category.categoryName,
)}
/>
);
}
})}
{groupsIsFetched &&
linksIsFetched &&
categories?.length > 0 &&
contentType.length > 0 && (
<Stack id='links' style={{ gap: 0 }}>
<Text className={texts.sectionTitle} classNames={texts}>
Bookmarks
</Text>
<Stack
style={{
display: 'grid',
flexWrap: 'nowrap',
gridColumnGap: '20px',
gridRowGap: '0px',
gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
gridTemplateRows: 'auto',
}}
>
{categories.map((category: any) => {
if (
contentType.includes(category.filterName) ||
contentType.includes('All')
) {
return (
<LinkGroups
key={category.id}
category={category.categoryName}
links={bookmarks.filter(
(bookmark: any) => bookmark.category === category.categoryName,
)}
/>
);
}
})}
</Stack>
</Stack>
</Stack>
)}
)}
</>
);
}

61
src/pages/homepage/components/Search.tsx
View File

@@ -1,15 +1,18 @@
import { Stack, TextInput } from '@mantine/core';
import { Divider, Group, Modal, Stack, Text, TextInput } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useAtom } from 'jotai';
import { useState } from 'react';
import { appTheme } from '../../../contexts/theme';
import { useQueryAPI } from '../../../hooks';
import { textInputClasses } from '../../../styles';
import { modalClasses, textInputClasses } from '../../../styles';
export default function Search() {
const { data: providers } = useQueryAPI({ endpoint: 'api/providers' });
const [opened, { open: openModal, close: closeModal }] = useDisclosure(false);
const [providerLabel, setProviderLabel] = useState('Google Search');
const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
const [value, setValue] = useState('');
const [theme, setTheme] = useAtom(appTheme);
const handleKeyPress = (item: any) => {
let option = '';
let subtext = '';
@@ -22,7 +25,9 @@ export default function Search() {
subtext = item.target.value;
}
if (item.key === 'Enter') {
if (item.target.value.startsWith('/')) {
if (providerLabel === 'Show help') {
openModal();
} else if (item.target.value.startsWith('/')) {
open(`${providerURL}${subtext}`, '_self');
} else if (validURL(item.target.value)) {
if (containsProtocol(item.target.value)) window.location = item.target.value;
@@ -72,7 +77,9 @@ export default function Search() {
data-active={value !== ''}
onChange={(item: any) => {
setValue(item.currentTarget.value);
if (item.target.value.startsWith('/')) {
if (item.target.value === '/?') {
setProviderLabel('Show help');
} else if (item.target.value.startsWith('/')) {
const provider = providers?.find(
(p: any) => p.prefix === item.target.value.split(' ')[0],
);
@@ -89,6 +96,48 @@ export default function Search() {
}
}}
/>
<Modal.Root
size={'50%'}
className={modalClasses.helpModal}
classNames={modalClasses}
opened={opened}
onClose={() => {
closeModal();
setValue('');
setProviderLabel('Google Search');
setProviderURL('https://www.google.com/search?q=');
}}
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})`,
}}
closeOnEscape
closeOnClickOutside
>
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>Help info</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body pb={'2rem'}>
<Stack gap={0} w={'100%'} align='center'>
<h3 style={{ padding: 0, margin: 0 }}>Search Providers</h3>
<Divider py={8} w={'65%'} color={theme.accentColor} />
{providers?.map((provider: any) => (
<Group key={provider.prefix} gap={0} w={'50%'} justify='space-between'>
<Text>{provider.prefix}</Text>
<Text>{provider.name}</Text>
</Group>
))}
</Stack>
</Modal.Body>
</Modal.Content>
</Modal.Root>
</Stack>
);
}

2
src/pages/settings/components/Applications.tsx
View File

@@ -16,7 +16,7 @@ const ApplicationSettings = () => {
if (isFetched) {
setApplicationData(data);
}
});
}, [data, isFetching]);
return (
<Stack>

4
src/pages/settings/components/Categories.tsx
View File

@@ -12,10 +12,10 @@ const CategorySettings = () => {
const [categoryData, setCategoryData] = useState<any>([]);
useEffect(() => {
if (isFetched) {
if (data && isFetched) {
setCategoryData(data);
}
});
}, [data, isFetched]);
return (
<Stack>

25
src/pages/settings/components/ThemeModalContent.tsx
View File

@@ -22,7 +22,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
}}
>
<Icon
style={{ color: previewTheme.theme.primary }}
style={{ color: previewTheme.theme.primaryColor }}
icon={'mdi:check'}
height={32}
width={32}
@@ -43,7 +43,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
fontWeight: 400,
fontSize: 11,
fontStyle: 'normal',
color: previewTheme.theme.primary,
color: previewTheme.theme.primaryColor,
fontFamily:
'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
margin: 0,
@@ -56,7 +56,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
fontWeight: 400,
fontSize: 11,
fontStyle: 'italic',
color: previewTheme.theme.accent,
color: previewTheme.theme.accentColor,
fontFamily:
'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
margin: 0,
@@ -75,12 +75,13 @@ export default function ThemeModalContent({ selectedTheme }: any) {
width: '100%',
backgroundColor: selectedTheme.backgroundColor,
borderRadius: '10px',
border: '2px solid',
}}
>
<Group
justify='center'
style={{
color: selectedTheme.primary,
color: selectedTheme.primaryColor,
paddingTop: '1rem',
}}
>
@@ -97,7 +98,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
color: selectedTheme.primary,
color: selectedTheme.primaryColor,
}}
>
Applications
@@ -134,7 +135,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
color: selectedTheme.primary,
color: selectedTheme.primaryColor,
}}
>
Bookmarks
@@ -166,7 +167,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
fontWeight: 400,
height: '10px',
width: 'auto',
color: selectedTheme.accent,
color: selectedTheme.accentColor,
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
@@ -179,7 +180,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
display: 'block',
fontSize: '14px',
lineHeight: 2,
color: selectedTheme.primary,
color: selectedTheme.primaryColor,
}}
component='a'
>
@@ -190,7 +191,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
display: 'block',
fontSize: '14px',
lineHeight: 2,
color: selectedTheme.primary,
color: selectedTheme.primaryColor,
}}
component='a'
>
@@ -213,7 +214,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
fontWeight: 400,
height: '10px',
width: 'auto',
color: selectedTheme.accent,
color: selectedTheme.accentColor,
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
@@ -226,7 +227,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
display: 'block',
fontSize: '14px',
lineHeight: 2,
color: selectedTheme.primary,
color: selectedTheme.primaryColor,
}}
component='a'
>
@@ -237,7 +238,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
display: 'block',
fontSize: '14px',
lineHeight: 2,
color: selectedTheme.primary,
color: selectedTheme.primaryColor,
}}
component='a'
>

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

@@ -32,7 +32,7 @@ function ThemesSettings({ theme }: any) {
const [colorValue, setColorValue] = useState('#000000');
const [value, setValue] = useLocalStorage<any>({
key: 'theme',
defaultValue: {},
defaultValue: 'blackboard',
});
const { data, isFetched } = useQueryAPI({
endpoint: 'api/themes',
@@ -88,6 +88,14 @@ function ThemesSettings({ theme }: any) {
classNames={modalClasses}
opened={opened}
onClose={handleClose}
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})`,
}}
>
<Modal.Overlay />
<Modal.Content>
@@ -106,11 +114,7 @@ function ThemesSettings({ theme }: any) {
}
styles={{
label: {
color: 'black',
},
input: {
color: 'black',
backgroundColor: 'white',
color: theme.primaryColor,
},
}}
/>
@@ -118,35 +122,41 @@ function ThemesSettings({ theme }: any) {
<Group w={'100%'} h={'100%'} gap={0}>
<Stack w={'50%'}>
<Group c={'black'} justify='space-between'>
<Text>Primary Color</Text>
<Text className={textClasses.label} classNames={textClasses}>
Primary Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('primary');
setColorId('primaryColor');
openPicker();
setColorValue(selectedTheme.primary);
setColorValue(selectedTheme.primaryColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.primary}
color={selectedTheme.primaryColor}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group c={'black'} justify='space-between'>
<Text>Accent Color</Text>
<Text className={textClasses.label} classNames={textClasses}>
Accent Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('accent');
setColorId('accentColor');
openPicker();
setColorValue(selectedTheme.accent);
setColorValue(selectedTheme.accentColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.accent}
color={selectedTheme.accentColor}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group c={'black'} justify='space-between'>
<Text>Background Color</Text>
<Text className={textClasses.label} classNames={textClasses}>
Background Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('background');
@@ -160,24 +170,28 @@ function ThemesSettings({ theme }: any) {
/>
</Group>
<Group c={'black'} justify='space-between'>
<Text>Border Color</Text>
<Text className={textClasses.label} classNames={textClasses}>
Border Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('border');
setColorId('borderColor');
openPicker();
setColorValue(selectedTheme.border);
setColorValue(selectedTheme.borderColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.border}
color={selectedTheme.borderColor}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group c={'black'} justify='space-between'>
<Text>Search Background Color</Text>
<Text className={textClasses.label} classNames={textClasses}>
Search Background Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('searchbackground');
setColorId('searchBackground');
openPicker();
setColorValue(selectedTheme.searchColor);
}}
@@ -199,11 +213,7 @@ function ThemesSettings({ theme }: any) {
}
styles={{
label: {
color: 'black',
},
input: {
color: 'black',
backgroundColor: 'white',
color: theme.primaryColor,
},
}}
/>
@@ -214,22 +224,26 @@ function ThemesSettings({ theme }: any) {
<>
<ColorPicker value={colorValue} onChange={setColorValue} />
<Group w={'75%'} justify='space-between'>
<Text c={'black'}>{colorValue}</Text>
<TextInput
w={'50%'}
value={colorValue}
onChange={(e) => setColorValue(e.target.value)}
/>
<Group>
<Button
color={'green'}
onClick={() => {
switch (colorId) {
case 'primary':
case 'primaryColor':
setSelectedTheme({
...selectedTheme,
primary: colorValue,
primaryColor: colorValue,
});
break;
case 'accent':
case 'accentColor':
setSelectedTheme({
...selectedTheme,
accent: colorValue,
accentColor: colorValue,
});
break;
case 'background':
@@ -238,13 +252,13 @@ function ThemesSettings({ theme }: any) {
backgroundColor: colorValue,
});
break;
case 'border':
case 'borderColor':
setSelectedTheme({
...selectedTheme,
border: colorValue,
borderColor: colorValue,
});
break;
case 'searchbackground':
case 'searchBackground':
setSelectedTheme({
...selectedTheme,
searchColor: colorValue,
@@ -269,7 +283,9 @@ function ThemesSettings({ theme }: any) {
w={'90%'}
style={{ alignItems: 'center' }}
>
<Text c='black'>Pick a swatch to edit the color.</Text>
<Text className={textClasses.label} classNames={textClasses}>
Pick a swatch to edit the color.
</Text>
</Card>
)}
</Stack>
@@ -301,9 +317,9 @@ function ThemesSettings({ theme }: any) {
backgroundImage: 'none',
backgroundColor: '#EEEEEE',
searchColor: '#00000033',
primary: '#222222',
accent: '#5c5c5c',
border: '#5c5c5c',
primaryColor: '#222222',
accentColor: '#5c5c5c',
borderColor: '#5c5c5c',
});
open();
}}
@@ -320,8 +336,8 @@ function ThemesSettings({ theme }: any) {
h={'75px'}
style={{
backgroundColor: theme.backgroundColor,
border: `solid ${theme.border}`,
color: theme.primary,
border: `solid ${theme.borderColor}`,
color: theme.primaryColor,
}}
data-theme={theme.name}
onClick={() => {
@@ -342,9 +358,9 @@ function ThemesSettings({ theme }: any) {
</ActionIcon>
<ColorSwatch color={theme.backgroundColor} />
<ColorSwatch color={theme.searchColor} />
<ColorSwatch color={theme.primary} />
<ColorSwatch color={theme.accent} />
<ColorSwatch color={theme.border} />
<ColorSwatch color={theme.primaryColor} />
<ColorSwatch color={theme.accentColor} />
<ColorSwatch color={theme.borderColor} />
<ActionIcon
className={actionIconClasses.editButton}

69
src/styles/Modal.module.css
View File

@@ -1,27 +1,50 @@
.helpModal {
&.root {
.content {
color: var(--color-text-pri);
background-color: var(--color-background);
.header {
.close {
color: white;
background-color: var(--mantine-color-red-6);
max-width: 20px!important;
max-height: 20px!important;
&:hover {
color: var(--mantine-color-red-1);
background-color: var(--mantine-color-red-4);
}
}
}
}
}
}
.editThemeModal {
.header {
color: white;
background-color: var(--color-background);
}
.content {
justify-content: center;
align-content: center;
color: light-dark(var(--mantine-primary-color-6), white);
background-color: white;
}
.body {
display: flex;
flex-direction: column;
align-items: center;
}
.close {
color: var(--mantine-color-appRed-3);
background-color: var(--mantine-color-appRed-1);
max-width: 20px!important;
max-height: 20px!important;
&:hover {
color: var(--mantine-color-appRed-1);
background-color: var(--mantine-color-appRed-3);
&.root {
.content {
justify-content: center;
align-content: center;
color: var(--color-text-pri);
background-color: var(--color-background);
.header {
color: white;
background-color: var(--color-text-acc);
.close {
color: white;
background-color: var(--mantine-color-red-6);
max-width: 20px!important;
max-height: 20px!important;
&:hover {
color: var(--mantine-color-red-1);
background-color: var(--mantine-color-red-4);
}
}
}
.body {
display: flex;
flex-direction: column;
align-items: center;
}
}
}
}

6
src/styles/Text.module.css
View File

@@ -40,6 +40,12 @@
}
}
.label {
&.root {
color: var(--color-text-pri);
}
}
.appName {
&.root {
font-weight: 400;