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

Working empty version

Browse Source
This commit is contained in:
Sean Edmunds
2024-08-28 17:06:37 -05:00
parent 7990f164d6
commit 18db0c17ff
18 changed files with 198 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -52,7 +52,7 @@ function App() {
);
const overrides = createTheme({
white: theme?.colorbackground,
white: theme?.backgroundColor,
fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
});

4
src/DataTable/DataTable.tsx
View File

@@ -22,6 +22,7 @@ export function DataTableComponent({
isFetching,
isLoading,
endpoint,
grouping,
}: {
tableName: string;
columns: any;
@@ -29,6 +30,7 @@ export function DataTableComponent({
isFetching: boolean;
isLoading: boolean;
endpoint: string;
grouping?: string;
}) {
const [theme, setTheme] = useAtom(appTheme);
const { mutateAsync: createRow } = useMutationAPI();
@@ -98,7 +100,7 @@ export function DataTableComponent({
),
mantineCreateRowModalProps: {
style: {
color: theme.colortextpri,
color: theme.primary,
},
},
renderTopToolbarCustomActions: ({ table }) => {

38
src/DataTable/columns/ApplicationColumns.tsx
View File

@@ -15,10 +15,6 @@ export default function ApplicationColumns() {
id: 'id',
header: 'ID',
size: 50,
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'id',
id: `${cell.getValue()}-id`,
}),
Cell: ({ renderedCellValue, row }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
@@ -31,10 +27,6 @@ export default function ApplicationColumns() {
},
id: 'name',
header: 'Name',
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'name',
id: `${cell.getValue()}-name`,
}),
Cell: ({ renderedCellValue, row }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
@@ -47,10 +39,6 @@ export default function ApplicationColumns() {
},
id: 'url',
header: 'Url',
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'url',
id: `${cell.getValue()}-url`,
}),
Cell: ({ renderedCellValue, row }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
@@ -63,42 +51,30 @@ export default function ApplicationColumns() {
},
id: 'icon',
header: 'Icon',
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'icon',
id: `${cell.getValue()}-icon`,
}),
Cell: ({ renderedCellValue, row }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.urlbase) {
return `${row.urlbase}`;
if (row.baseUrl) {
return `${row.baseUrl}`;
}
return '';
},
id: 'urlbase',
id: 'baseUrl',
header: 'Base Url',
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'urlbase',
id: `${cell.getValue()}-urlbase`,
}),
Cell: ({ renderedCellValue, row }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.category) {
return `${row.category}`;
if (row.filterName) {
return `${row.filterName}`;
}
return '';
},
id: 'category',
header: 'Category',
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'category',
id: `${cell.getValue()}-category`,
}),
id: 'filterName',
header: 'Filter Name',
Cell: ({ renderedCellValue, row }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},

28
src/DataTable/columns/BookmarkColumns.tsx
View File

@@ -1,7 +1,7 @@
import type { MRT_ColumnDef } from 'mantine-react-table';
import { useMemo } from 'react';
export default function ApplicationColumns(groups: any, groupData: any) {
export default function ApplicationColumns(groups: any) {
const columns = useMemo<MRT_ColumnDef<any>[]>(
() => [
{
@@ -15,10 +15,6 @@ export default function ApplicationColumns(groups: any, groupData: any) {
id: 'id',
header: 'ID',
size: 50,
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'id',
id: `${cell.getValue()}-id`,
}),
Cell: ({ renderedCellValue, row }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
@@ -31,10 +27,6 @@ export default function ApplicationColumns(groups: any, groupData: any) {
},
id: 'name',
header: 'Name',
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'name',
id: `${cell.getValue()}-name`,
}),
Cell: ({ renderedCellValue, row }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
@@ -47,31 +39,21 @@ export default function ApplicationColumns(groups: any, groupData: any) {
},
id: 'url',
header: 'Url',
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'url',
id: `${cell.getValue()}-url`,
}),
Cell: ({ renderedCellValue, row }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
const index: number = row.category;
if (index !== null && index !== undefined) {
return `${index}`;
if (row.category) {
return `${row.category}`;
}
return 'N/A';
return '';
},
id: 'category',
header: 'Category',
editVariant: 'select',
mantineEditSelectProps: { data: groups },
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'category',
id: `${cell.getValue()}-category`,
}),
Cell: ({ renderedCellValue, row }) =>
groupData[row?.original.category].category_name,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
],

18
src/DataTable/columns/CategoryColumns.tsx
View File

@@ -20,12 +20,12 @@ export default function CategoryColumns() {
},
{
accessorFn: (row) => {
if (row.category_name) {
return `${row.category_name}`;
if (row.categoryName) {
return `${row.categoryName}`;
}
return '';
},
id: 'category_name',
id: 'categoryName',
header: 'Name',
size: 50,
Cell: ({ renderedCellValue, row }) => renderedCellValue,
@@ -33,13 +33,13 @@ export default function CategoryColumns() {
},
{
accessorFn: (row) => {
if (row.category_index > -1) {
return `${row.category_index}`;
if (row.categoryIndex > -1) {
return `${row.categoryIndex}`;
}
return '';
},
enableEditing: false,
id: 'category_index',
id: 'categoryIndex',
header: 'Index',
size: 50,
Cell: ({ renderedCellValue, row }) => renderedCellValue,
@@ -47,12 +47,12 @@ export default function CategoryColumns() {
},
{
accessorFn: (row) => {
if (row.column_filter) {
return `${row.column_filter}`;
if (row.filterName) {
return `${row.filterName}`;
}
return '';
},
id: 'column_filter',
id: 'filterName',
header: 'Filter Name',
size: 50,
Cell: ({ renderedCellValue, row }) => renderedCellValue,

24
src/DataTable/columns/MessagesColumns.tsx
View File

@@ -15,10 +15,6 @@ export default function MessagesColumns() {
id: 'id',
header: 'ID',
size: 50,
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'id',
id: `${cell.getValue()}-id`,
}),
Cell: ({ renderedCellValue, row }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
@@ -31,26 +27,6 @@ export default function MessagesColumns() {
},
id: 'message',
header: 'Message',
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'message',
id: `${cell.getValue()}-message`,
}),
Cell: ({ renderedCellValue, row }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.easteregg) {
return `${row.easteregg}`;
}
return '';
},
id: 'easteregg',
header: 'Easter Egg?',
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'easteregg',
id: `${cell.getValue()}-easteregg`,
}),
Cell: ({ renderedCellValue, row }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},

24
src/DataTable/columns/PersonalizationColumns.tsx
View File

@@ -6,34 +6,26 @@ export default function PersonalizationColumns() {
() => [
{
accessorFn: (row: any) => {
if (row.firstname) {
return `${row.firstname}`;
if (row.firstName) {
return `${row.firstName}`;
}
return '';
},
id: 'firstname',
id: 'firstName',
header: 'First Name',
size: 50,
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'firstname',
id: `${cell.getValue()}-firstname`,
}),
Cell: ({ renderedCellValue, row }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row: any) => {
if (row.lastname) {
return `${row.lastname}`;
if (row.lastName) {
return `${row.lastName}`;
}
return '';
},
id: 'lastname',
id: 'lastName',
header: 'Last Name',
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'lastname',
id: `${cell.getValue()}-lastname`,
}),
Cell: ({ renderedCellValue, row }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
@@ -46,10 +38,6 @@ export default function PersonalizationColumns() {
},
id: 'email',
header: 'Email',
mantineCopyButtonProps: ({ cell, row }) => ({
className: 'email',
id: `${cell.getValue()}-email`,
}),
Cell: ({ renderedCellValue, row }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},

12
src/components/ThemeProvider.tsx
View File

@@ -7,12 +7,12 @@ export default function ThemeProvider({
return (
<Box
style={{
'--color-text-pri': theme.colortextpri,
'--color-text-acc': theme.colortextacc,
'--color-background': theme.colorbackground,
'--color-border': theme.colorborder,
'--color-search-background': theme.colorsearchbackground,
'--image-background': `url(${theme.imagebackground})`,
'--color-text-pri': theme.primary,
'--color-text-acc': theme.accent,
'--color-background': theme.backgroundColor,
'--color-border': theme.border,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
>
{children}

30
src/pages/homepage/Homepage.tsx
View File

@@ -13,9 +13,13 @@ import { useLocalStorage } from '@mantine/hooks';
export default function Homepage({ theme }: any) {
const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' });
const [displayedGreeting, setDisplayedGreeting] = useState('');
const [contentType, setContentType] = useLocalStorage<any>({
key: 'contenttype',
defaultValue: 'All',
const [appFilter, setAppFilter] = useLocalStorage<[any]>({
key: 'appFilter',
defaultValue: ['All'],
});
const [bookmarkFilter, setBookmarkFilter] = useLocalStorage<[any]>({
key: 'bookmarkFilter',
defaultValue: ['All'],
});
function date() {
const currentDate = new Date();
@@ -33,18 +37,18 @@ export default function Homepage({ theme }: any) {
const greet = Math.floor(currentTime.getHours() / 6);
const easterEggChance = Math.floor(Math.random() * 100);
let timeBased: any = [];
let easterEggs: any = [];
let customGreetings: any = [];
for (const l of list) {
if (l.easteregg === 'N') {
if (l.customGreeting === 0) {
timeBased = timeBased.concat(l);
} else {
easterEggs = easterEggs.concat(l);
customGreetings = customGreetings.concat(l);
}
}
if (easterEggChance > 10 || easterEggs.length === 0) {
if (easterEggChance > 10 || customGreetings.length === 0) {
return timeBased[greet].message;
}
return easterEggs[Math.floor(Math.random() * easterEggs.length)].message;
return customGreetings[Math.floor(Math.random() * customGreetings.length)].message;
}
useEffect(() => {
@@ -57,12 +61,14 @@ export default function Homepage({ theme }: any) {
<Stack gap={0} className={stackClasses.containerStack} justify='center'>
<Search />
<Header date={date()} greet={displayedGreeting} />
<Applications contentType={contentType} />
<Bookmarks contentType={contentType} />
<Applications contentType={appFilter} />
<Bookmarks contentType={bookmarkFilter} />
<SettingsButton
theme={theme}
contentType={contentType}
setContentType={setContentType}
setAppFilter={setAppFilter}
appFilter={appFilter}
setBookmarkFilter={setBookmarkFilter}
bookmarkFilter={bookmarkFilter}
/>
</Stack>
);

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

@@ -13,6 +13,8 @@ function Applications({ contentType }: any) {
}
}, [isFetching]);
return (
<>
{applications.length > 0 && (
<Stack id='apps' style={{ gap: 0 }}>
<Text className={texts.sectionTitle} classNames={texts}>
Applications
@@ -31,20 +33,25 @@ function Applications({ contentType }: any) {
paddingBottom: 'var(--module-spacing)',
}}
>
{applications?.map((item: any) => {
if (item.category === contentType || contentType === 'All')
{applications?.map((application: any) => {
if (
contentType.includes(application.filterName) ||
contentType.includes('All')
)
return (
<AppItem
key={item.name}
name={item.name}
url={item.url}
icon={item.icon}
category={item.category}
key={application.name}
name={application.name}
url={application.url}
icon={application.icon}
category={application.category}
/>
);
})}
</Stack>
</Stack>
)}
</>
);
}

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

@@ -20,7 +20,6 @@ function Links({ contentType }: any) {
setCategories(groupData);
}
}, [linksIsFetched, groupsIsFetched]);
return (
<>
{groupsIsFetched && linksIsFetched && categories?.length > 0 && (
@@ -39,13 +38,16 @@ function Links({ contentType }: any) {
}}
>
{categories.map((category: any) => {
if (category.column_filter === contentType || contentType === 'All') {
if (
contentType.includes(category.filterName) ||
contentType.includes('All')
) {
return (
<LinkGroups
key={category.id}
category={category.category_name}
category={category.categoryName}
links={bookmarks.filter(
(bookmark: any) => bookmark.category === category.category_index,
(bookmark: any) => bookmark.category === category.categoryName,
)}
/>
);

2
src/pages/homepage/components/MessageInfo.jsx
View File

@@ -22,7 +22,7 @@ function MessageInfo() {
group={index + 1}
index={greeting.index}
greeting={greeting.message}
easterEgg={greeting.easteregg}
easterEgg={greeting.customGreeting}
/>
))}
</div>

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

@@ -63,6 +63,7 @@ export default function Search() {
}}
>
<TextInput
autoFocus
className={textInputClasses.search}
classNames={textInputClasses}
spellCheck='true'

31
src/pages/homepage/components/SettingsButton.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Menu, NavLink, Select } from '@mantine/core';
import { Button, Menu, MultiSelect, NavLink } from '@mantine/core';
import { useEffect, useState } from 'react';
import { FiMenu, FiMonitor } from 'react-icons/fi';
import { useQueryAPI } from '../../../hooks/useAPI';
@@ -7,7 +7,13 @@ import menu from '../../../styles/Menu.module.css';
import navLink from '../../../styles/NavLink.module.css';
import selectClasses from '../../../styles/Select.module.css';
function SettingsButton({ contentType, setContentType, theme }: any) {
function SettingsButton({
appFilter,
setAppFilter,
bookmarkFilter,
setBookmarkFilter,
theme,
}: any) {
const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
@@ -15,7 +21,7 @@ function SettingsButton({ contentType, setContentType, theme }: any) {
if (data) {
const list: [any] =
data.map((category: any) => {
return { value: category.category, label: category.category };
return { value: category.filterName, label: category.filterName };
}) || [];
list.unshift({ value: 'All', label: 'All' });
setCategories(list);
@@ -57,13 +63,24 @@ function SettingsButton({ contentType, setContentType, theme }: any) {
classNames={navLink}
/>
</NavLink>
<Select
label='Homepage Filter'
<MultiSelect
label='App Filter'
data={categories ?? []}
defaultValue={contentType}
defaultValue={appFilter}
withCheckIcon={false}
onChange={(data: any) => {
setContentType(data);
setAppFilter(data);
}}
classNames={selectClasses}
comboboxProps={{ withinPortal: false }}
/>
<MultiSelect
label='Bookmark Filter'
data={categories ?? []}
defaultValue={bookmarkFilter}
withCheckIcon={false}
onChange={(data: any) => {
setBookmarkFilter(data);
}}
classNames={selectClasses}
comboboxProps={{ withinPortal: false }}

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

@@ -11,9 +11,9 @@ const BookmarkSettings = () => {
});
const {
data: groupData,
isFetching: groupDataisFetching,
isLoading: groupDataisLoading,
isFetched: groupDataisFetched,
isFetching: groupDataIsFetching,
isLoading: groupDataIsLoading,
isFetched: groupDataIsFetched,
} = useQueryAPI({ endpoint: 'api/categories' });
const [bookmarkData, setBookmarkData] = useState<any>([]);
const [groups, setGroups] = useState([]);
@@ -26,15 +26,14 @@ const BookmarkSettings = () => {
});
useEffect(() => {
if (groupDataisFetched) {
const groupList = groupData.map((category: any) => {
return category.category_name;
if (groupData) {
const groupList = groupData?.map((category: any) => {
return category.categoryName;
});
setGroups(groupList);
setFullyFetched(true);
}
}, [groupDataisFetched]);
}, [groupData]);
return (
<Stack>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -42,11 +41,12 @@ const BookmarkSettings = () => {
</Text>
<DataTable
tableName='Applications'
columns={BookmarkColumns(groups, groupData)}
columns={BookmarkColumns(groups)}
tableData={bookmarkData}
isFetching={isFetching}
isLoading={isLoading}
endpoint={endpoint}
grouping='category'
/>
</Stack>
);

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

@@ -5,7 +5,7 @@ import PersonalizationColumns from '../../../DataTable/columns/PersonalizationCo
import { useQueryAPI } from '../../../hooks/useAPI';
import { textClasses } from '../../../styles';
const PersonalizationSettings = () => {
const endpoint = 'api/personaldata';
const endpoint = 'api/personalData';
const { data, isFetching, isLoading, isFetched } = useQueryAPI({
endpoint: endpoint,
});

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

@@ -22,7 +22,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
}}
>
<Icon
style={{ color: previewTheme.theme.colortextpri }}
style={{ color: previewTheme.theme.primary }}
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.colortextpri,
color: previewTheme.theme.primary,
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.colortextacc,
color: previewTheme.theme.accent,
fontFamily:
'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
margin: 0,
@@ -73,14 +73,14 @@ export default function ThemeModalContent({ selectedTheme }: any) {
<Stack
style={{
width: '100%',
backgroundColor: selectedTheme.colorbackground,
backgroundColor: selectedTheme.backgroundColor,
borderRadius: '10px',
}}
>
<Group
justify='center'
style={{
color: selectedTheme.colortextpri,
color: selectedTheme.primary,
paddingTop: '1rem',
}}
>
@@ -97,14 +97,14 @@ export default function ThemeModalContent({ selectedTheme }: any) {
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
color: selectedTheme.colortextpri,
color: selectedTheme.primary,
}}
>
Applications
</Text>
<Stack
style={{
background: selectedTheme.colorbackground,
background: selectedTheme.backgroundColor,
gap: '.25rem',
backgroundSize: 'cover',
borderBottom: '0px solid',
@@ -134,7 +134,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
color: selectedTheme.colortextpri,
color: selectedTheme.primary,
}}
>
Bookmarks
@@ -166,7 +166,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
fontWeight: 400,
height: '10px',
width: 'auto',
color: selectedTheme.colortextacc,
color: selectedTheme.accent,
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
@@ -179,7 +179,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
display: 'block',
fontSize: '14px',
lineHeight: 2,
color: selectedTheme.colortextpri,
color: selectedTheme.primary,
}}
component='a'
>
@@ -190,7 +190,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
display: 'block',
fontSize: '14px',
lineHeight: 2,
color: selectedTheme.colortextpri,
color: selectedTheme.primary,
}}
component='a'
>
@@ -213,7 +213,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
fontWeight: 400,
height: '10px',
width: 'auto',
color: selectedTheme.colortextacc,
color: selectedTheme.accent,
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
@@ -226,7 +226,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
display: 'block',
fontSize: '14px',
lineHeight: 2,
color: selectedTheme.colortextpri,
color: selectedTheme.primary,
}}
component='a'
>
@@ -237,7 +237,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
display: 'block',
fontSize: '14px',
lineHeight: 2,
color: selectedTheme.colortextpri,
color: selectedTheme.primary,
}}
component='a'
>

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

@@ -123,11 +123,11 @@ function ThemesSettings({ theme }: any) {
onClick={() => {
setColorId('primary');
openPicker();
setColorValue(selectedTheme.colortextpri);
setColorValue(selectedTheme.primary);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.colortextpri}
color={selectedTheme.primary}
style={{ cursor: 'pointer' }}
/>
</Group>
@@ -137,11 +137,11 @@ function ThemesSettings({ theme }: any) {
onClick={() => {
setColorId('accent');
openPicker();
setColorValue(selectedTheme.colortextacc);
setColorValue(selectedTheme.accent);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.colortextacc}
color={selectedTheme.accent}
style={{ cursor: 'pointer' }}
/>
</Group>
@@ -151,11 +151,11 @@ function ThemesSettings({ theme }: any) {
onClick={() => {
setColorId('background');
openPicker();
setColorValue(selectedTheme.colorbackground);
setColorValue(selectedTheme.backgroundColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.colorbackground}
color={selectedTheme.backgroundColor}
style={{ cursor: 'pointer' }}
/>
</Group>
@@ -165,11 +165,11 @@ function ThemesSettings({ theme }: any) {
onClick={() => {
setColorId('border');
openPicker();
setColorValue(selectedTheme.colorborder);
setColorValue(selectedTheme.border);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.colorborder}
color={selectedTheme.border}
style={{ cursor: 'pointer' }}
/>
</Group>
@@ -179,20 +179,23 @@ function ThemesSettings({ theme }: any) {
onClick={() => {
setColorId('searchbackground');
openPicker();
setColorValue(selectedTheme.colorsearchbackground);
setColorValue(selectedTheme.searchColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.colorsearchbackground}
color={selectedTheme.searchColor}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group c={'black'} justify='space-between'>
<TextInput
label='Background Image Path'
value={selectedTheme.imagebackground}
value={selectedTheme.backgroundImage}
onChange={(e) =>
setSelectedTheme({ ...selectedTheme, imagebackground: e.target.value })
setSelectedTheme({
...selectedTheme,
backgroundImage: e.target.value,
})
}
styles={{
label: {
@@ -220,31 +223,31 @@ function ThemesSettings({ theme }: any) {
case 'primary':
setSelectedTheme({
...selectedTheme,
colortextpri: colorValue,
primary: colorValue,
});
break;
case 'accent':
setSelectedTheme({
...selectedTheme,
colortextacc: colorValue,
accent: colorValue,
});
break;
case 'background':
setSelectedTheme({
...selectedTheme,
colorbackground: colorValue,
backgroundColor: colorValue,
});
break;
case 'border':
setSelectedTheme({
...selectedTheme,
colorborder: colorValue,
border: colorValue,
});
break;
case 'searchbackground':
setSelectedTheme({
...selectedTheme,
colorsearchbackground: colorValue,
searchColor: colorValue,
});
break;
}
@@ -295,12 +298,12 @@ function ThemesSettings({ theme }: any) {
setSelectedTheme({
id: undefined,
name: 'default',
imagebackground: 'none',
colorbackground: '#EEEEEE',
colorsearchbackground: '#00000033',
colortextpri: '#222222',
colortextacc: '#5c5c5c',
colorborder: '#5c5c5c',
backgroundImage: 'none',
backgroundColor: '#EEEEEE',
searchColor: '#00000033',
primary: '#222222',
accent: '#5c5c5c',
border: '#5c5c5c',
});
open();
}}
@@ -316,9 +319,9 @@ function ThemesSettings({ theme }: any) {
w={'100%'}
h={'75px'}
style={{
backgroundColor: theme.colorbackground,
border: `solid ${theme.colorborder}`,
color: theme.colortextpri,
backgroundColor: theme.backgroundColor,
border: `solid ${theme.border}`,
color: theme.primary,
}}
data-theme={theme.name}
onClick={() => {
@@ -337,11 +340,11 @@ function ThemesSettings({ theme }: any) {
>
<FiEdit />
</ActionIcon>
<ColorSwatch color={theme.colorbackground} />
<ColorSwatch color={theme.colorsearchbackground} />
<ColorSwatch color={theme.colortextpri} />
<ColorSwatch color={theme.colortextacc} />
<ColorSwatch color={theme.colorborder} />
<ColorSwatch color={theme.backgroundColor} />
<ColorSwatch color={theme.searchColor} />
<ColorSwatch color={theme.primary} />
<ColorSwatch color={theme.accent} />
<ColorSwatch color={theme.border} />
<ActionIcon
className={actionIconClasses.editButton}