Bugfixes & UI updates
This commit is contained in:
Sean Edmunds
@@ -3,8 +3,6 @@
|
||||
|
||||
- Image uploads for backgrounds
|
||||
|
||||
- Update PATCH on links to translate from name to ID of category
|
||||
|
||||
- Create actions section
|
||||
|
||||
- Fix all query/setState problems
|
||||
@@ -12,7 +10,6 @@
|
||||
- Remove the following
|
||||
* hardcoded base url (trigger)
|
||||
* hardcoded mariadb password
|
||||
* hardcoded name in greetings
|
||||
|
||||
- Add /? help popup from search
|
||||
|
||||
|
||||
71
package-lock.json
generated
71
package-lock.json
generated
@@ -17,7 +17,7 @@
|
||||
"@mantine/modals": "^7.12.1",
|
||||
"@tabler/icons-react": "^3.12.0",
|
||||
"@tanstack/react-query": "^5.51.23",
|
||||
"@tanstack/react-query-devtools": "^4.36.1",
|
||||
"@tanstack/react-query-devtools": "^5.0.0-alpha.91",
|
||||
"@tanstack/react-query-persist-client": "^5.51.23",
|
||||
"clsx": "^2.1.1",
|
||||
"dayjs": "^1.11.12",
|
||||
@@ -1534,6 +1534,15 @@
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/query-devtools": {
|
||||
"version": "5.0.0-alpha.89",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.0.0-alpha.89.tgz",
|
||||
"integrity": "sha512-/D7D2xq+vW1qkz/AJyD44ACsHLNtDC5/tRqozhIlpu/OOEM1RkjMiHv2IAJmWgJJ1cWm80qA5UXT4dropkUyMw==",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/query-persist-client-core": {
|
||||
"version": "5.51.21",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.51.21.tgz",
|
||||
@@ -1562,22 +1571,20 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query-devtools": {
|
||||
"version": "4.36.1",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-4.36.1.tgz",
|
||||
"integrity": "sha512-WYku83CKP3OevnYSG8Y/QO9g0rT75v1om5IvcWUwiUZJ4LanYGLVCZ8TdFG5jfsq4Ej/lu2wwDAULEUnRIMBSw==",
|
||||
"version": "5.0.0-alpha.91",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.0.0-alpha.91.tgz",
|
||||
"integrity": "sha512-nFsLJowDDuvVRX8j6iEyBZaOcD2hwHDQhbn1GnkHpZqg3EuroVIi7lKZNpzcDyKLa7a8pZTdmMbZ6Ki51JnP7w==",
|
||||
"dependencies": {
|
||||
"@tanstack/match-sorter-utils": "^8.7.0",
|
||||
"superjson": "^1.10.0",
|
||||
"use-sync-external-store": "^1.2.0"
|
||||
"@tanstack/query-devtools": "5.0.0-alpha.89"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tanstack/react-query": "^4.36.1",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
"@tanstack/react-query": "5.0.0-alpha.91",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query-persist-client": {
|
||||
@@ -2170,20 +2177,6 @@
|
||||
"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/copy-anything": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
|
||||
"integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
|
||||
"dependencies": {
|
||||
"is-what": "^4.1.8"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.13"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/mesqueeb"
|
||||
}
|
||||
},
|
||||
"node_modules/cosmiconfig": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
|
||||
@@ -3025,17 +3018,6 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/is-what": {
|
||||
"version": "4.1.16",
|
||||
"resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
|
||||
"integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
|
||||
"engines": {
|
||||
"node": ">=12.13"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/mesqueeb"
|
||||
}
|
||||
},
|
||||
"node_modules/isexe": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
||||
@@ -3976,17 +3958,6 @@
|
||||
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
|
||||
"integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
|
||||
},
|
||||
"node_modules/superjson": {
|
||||
"version": "1.13.3",
|
||||
"resolved": "https://registry.npmjs.org/superjson/-/superjson-1.13.3.tgz",
|
||||
"integrity": "sha512-mJiVjfd2vokfDxsQPOwJ/PtanO87LhpYY88ubI5dUB1Ab58Txbyje3+jpm+/83R/fevaq/107NNhtYBLuoTrFg==",
|
||||
"dependencies": {
|
||||
"copy-anything": "^3.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
@@ -4219,14 +4190,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
|
||||
"integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "5.4.0",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.0.tgz",
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
"@mantine/modals": "^7.12.1",
|
||||
"@tabler/icons-react": "^3.12.0",
|
||||
"@tanstack/react-query": "^5.51.23",
|
||||
"@tanstack/react-query-devtools": "^4.36.1",
|
||||
"@tanstack/react-query-devtools": "^5.0.0-alpha.91",
|
||||
"@tanstack/react-query-persist-client": "^5.51.23",
|
||||
"clsx": "^2.1.1",
|
||||
"dayjs": "^1.11.12",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -100,7 +100,7 @@ export function DataTableComponent({
|
||||
),
|
||||
mantineCreateRowModalProps: {
|
||||
style: {
|
||||
color: theme.primary,
|
||||
color: theme.primaryColor,
|
||||
},
|
||||
},
|
||||
renderTopToolbarCustomActions: ({ table }) => {
|
||||
|
||||
@@ -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})`,
|
||||
}}
|
||||
|
||||
@@ -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();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -22,7 +22,10 @@ function Links({ contentType }: any) {
|
||||
}, [linksIsFetched, groupsIsFetched]);
|
||||
return (
|
||||
<>
|
||||
{groupsIsFetched && linksIsFetched && categories?.length > 0 && (
|
||||
{groupsIsFetched &&
|
||||
linksIsFetched &&
|
||||
categories?.length > 0 &&
|
||||
contentType.length > 0 && (
|
||||
<Stack id='links' style={{ gap: 0 }}>
|
||||
<Text className={texts.sectionTitle} classNames={texts}>
|
||||
Bookmarks
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@ const ApplicationSettings = () => {
|
||||
if (isFetched) {
|
||||
setApplicationData(data);
|
||||
}
|
||||
});
|
||||
}, [data, isFetching]);
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
|
||||
@@ -12,10 +12,10 @@ const CategorySettings = () => {
|
||||
const [categoryData, setCategoryData] = useState<any>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isFetched) {
|
||||
if (data && isFetched) {
|
||||
setCategoryData(data);
|
||||
}
|
||||
});
|
||||
}, [data, isFetched]);
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
|
||||
@@ -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'
|
||||
>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -1,27 +1,50 @@
|
||||
.editThemeModal {
|
||||
.header {
|
||||
color: white;
|
||||
.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 {
|
||||
&.root {
|
||||
.content {
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
color: light-dark(var(--mantine-primary-color-6), white);
|
||||
background-color: white;
|
||||
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;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -40,6 +40,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
&.root {
|
||||
color: var(--color-text-pri);
|
||||
}
|
||||
}
|
||||
|
||||
.appName {
|
||||
&.root {
|
||||
font-weight: 400;
|
||||
|
||||
Reference in New Issue
Block a user