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

Linted

Browse Source
This commit is contained in:
Sean Edmunds
2024-08-20 16:28:46 -05:00
parent 8152d3fe73
commit 7990f164d6
39 changed files with 824 additions and 772 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/pages/settings/Settings.tsx
View File

@@ -1,24 +1,24 @@
import { ActionIcon, Group, Stack, Tabs, Text } from "@mantine/core";
import tabClasses from "../../styles/Tabs.module.css";
import Personalization from "./components/Personalization";
import { FiArrowLeftCircle } from "react-icons/fi";
import { actionIconClasses, textClasses } from "../../styles";
import Messages from "./components/Messages";
import Applications from "./components/Applications";
import Bookmarks from "./components/Bookmarks";
import Categories from "./components/Categories";
import SearchProviders from "./components/SearchProviders";
import Themes from "./components/Themes";
import { ActionIcon, Group, Stack, Tabs, Text } from '@mantine/core';
import { FiArrowLeftCircle } from 'react-icons/fi';
import { actionIconClasses, textClasses } from '../../styles';
import tabClasses from '../../styles/Tabs.module.css';
import Applications from './components/Applications';
import Bookmarks from './components/Bookmarks';
import Categories from './components/Categories';
import Messages from './components/Messages';
import Personalization from './components/Personalization';
import SearchProviders from './components/SearchProviders';
import Themes from './components/Themes';
function Settings({ theme }: any) {
return (
<Stack h={"100vh"} px={"2rem"} bg={"var(--color-background)"}>
<Stack h={'100vh'} px={'2rem'} bg={'var(--color-background)'}>
<Group gap={0}>
<ActionIcon
className={actionIconClasses.backButton}
classNames={actionIconClasses}
component="a"
href="/trigger"
component='a'
href='/trigger'
>
<FiArrowLeftCircle />
</ActionIcon>
@@ -27,39 +27,39 @@ function Settings({ theme }: any) {
</Text>
</Group>
<Tabs
orientation="vertical"
defaultValue={"personalization"}
orientation='vertical'
defaultValue={'personalization'}
className={tabClasses.settingsTabs}
classNames={tabClasses}
>
<Tabs.List>
<Tabs.Tab value="personalization">Personal Info</Tabs.Tab>
<Tabs.Tab value="messages">Messages</Tabs.Tab>
<Tabs.Tab value="applications">Applications</Tabs.Tab>
<Tabs.Tab value="bookmarks">Bookmarks</Tabs.Tab>
<Tabs.Tab value="bookmarksCategories">Categories</Tabs.Tab>
<Tabs.Tab value="themes">Themes</Tabs.Tab>
<Tabs.Tab value="providers">Search Providers</Tabs.Tab>
<Tabs.Tab value='personalization'>Personal Info</Tabs.Tab>
<Tabs.Tab value='messages'>Messages</Tabs.Tab>
<Tabs.Tab value='applications'>Applications</Tabs.Tab>
<Tabs.Tab value='bookmarks'>Bookmarks</Tabs.Tab>
<Tabs.Tab value='bookmarksCategories'>Categories</Tabs.Tab>
<Tabs.Tab value='themes'>Themes</Tabs.Tab>
<Tabs.Tab value='providers'>Search Providers</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="personalization">
<Tabs.Panel value='personalization'>
<Personalization />
</Tabs.Panel>
<Tabs.Panel value="messages">
<Tabs.Panel value='messages'>
<Messages />
</Tabs.Panel>
<Tabs.Panel value="applications">
<Tabs.Panel value='applications'>
<Applications />
</Tabs.Panel>
<Tabs.Panel value="bookmarks">
<Tabs.Panel value='bookmarks'>
<Bookmarks />
</Tabs.Panel>
<Tabs.Panel value="bookmarksCategories">
<Tabs.Panel value='bookmarksCategories'>
<Categories />
</Tabs.Panel>
<Tabs.Panel value="themes">
<Tabs.Panel value='themes'>
<Themes theme={theme} />
</Tabs.Panel>
<Tabs.Panel value="providers">
<Tabs.Panel value='providers'>
<SearchProviders />
</Tabs.Panel>
</Tabs>

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

@@ -1,12 +1,12 @@
import { useEffect, useState } from "react";
import { useQueryAPI } from "../../../hooks/useAPI";
import { DataTable } from "../../../DataTable/DataTable";
import ApplicationColumns from "../../../DataTable/columns/ApplicationColumns";
import { Stack, Text } from "@mantine/core";
import { textClasses } from "../../../styles";
import { Stack, Text } from '@mantine/core';
import { useEffect, useState } from 'react';
import { DataTable } from '../../../DataTable/DataTable';
import ApplicationColumns from '../../../DataTable/columns/ApplicationColumns';
import { useQueryAPI } from '../../../hooks/useAPI';
import { textClasses } from '../../../styles';
const ApplicationSettings = () => {
const endpoint = "api/apps";
const endpoint = 'api/apps';
const { data, isFetching, isLoading, isFetched } = useQueryAPI({
endpoint: endpoint,
});
@@ -24,7 +24,7 @@ const ApplicationSettings = () => {
Applications
</Text>
<DataTable
tableName="Applications"
tableName='Applications'
columns={ApplicationColumns()}
tableData={applicationData}
isFetching={isFetching}

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

@@ -1,11 +1,11 @@
import { useEffect, useState } from "react";
import { useQueryAPI } from "../../../hooks/useAPI";
import { DataTable } from "../../../DataTable/DataTable";
import { Stack, Text } from "@mantine/core";
import BookmarkColumns from "../../../DataTable/columns/BookmarkColumns";
import { textClasses } from "../../../styles";
import { Stack, Text } from '@mantine/core';
import { useEffect, useState } from 'react';
import { DataTable } from '../../../DataTable/DataTable';
import BookmarkColumns from '../../../DataTable/columns/BookmarkColumns';
import { useQueryAPI } from '../../../hooks/useAPI';
import { textClasses } from '../../../styles';
const BookmarkSettings = () => {
const endpoint = "api/links";
const endpoint = 'api/links';
const { data, isFetching, isLoading, isFetched } = useQueryAPI({
endpoint: endpoint,
});
@@ -14,7 +14,7 @@ const BookmarkSettings = () => {
isFetching: groupDataisFetching,
isLoading: groupDataisLoading,
isFetched: groupDataisFetched,
} = useQueryAPI({ endpoint: "api/categories" });
} = useQueryAPI({ endpoint: 'api/categories' });
const [bookmarkData, setBookmarkData] = useState<any>([]);
const [groups, setGroups] = useState([]);
const [fullyFetched, setFullyFetched] = useState(false);
@@ -41,7 +41,7 @@ const BookmarkSettings = () => {
Bookmarks
</Text>
<DataTable
tableName="Applications"
tableName='Applications'
columns={BookmarkColumns(groups, groupData)}
tableData={bookmarkData}
isFetching={isFetching}

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

@@ -1,11 +1,11 @@
import { useEffect, useState } from "react";
import { useQueryAPI } from "../../../hooks/useAPI";
import { DataTable } from "../../../DataTable/DataTable";
import CategoryColumns from "../../../DataTable/columns/CategoryColumns";
import { Stack, Text } from "@mantine/core";
import { textClasses } from "../../../styles";
import { Stack, Text } from '@mantine/core';
import { useEffect, useState } from 'react';
import { DataTable } from '../../../DataTable/DataTable';
import CategoryColumns from '../../../DataTable/columns/CategoryColumns';
import { useQueryAPI } from '../../../hooks/useAPI';
import { textClasses } from '../../../styles';
const CategorySettings = () => {
const endpoint = "api/categories";
const endpoint = 'api/categories';
const { data, isFetching, isLoading, isFetched } = useQueryAPI({
endpoint: endpoint,
});
@@ -23,7 +23,7 @@ const CategorySettings = () => {
Categories
</Text>
<DataTable
tableName="Categories"
tableName='Categories'
columns={CategoryColumns()}
tableData={categoryData}
isFetching={isFetching}

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

@@ -1,11 +1,11 @@
import { useEffect, useState } from "react";
import { useQueryAPI } from "../../../hooks/useAPI";
import { DataTable } from "../../../DataTable/DataTable";
import MessagesColumns from "../../../DataTable/columns/MessagesColumns";
import { Stack, Text } from "@mantine/core";
import { textClasses } from "../../../styles";
import { Stack, Text } from '@mantine/core';
import { useEffect, useState } from 'react';
import { DataTable } from '../../../DataTable/DataTable';
import MessagesColumns from '../../../DataTable/columns/MessagesColumns';
import { useQueryAPI } from '../../../hooks/useAPI';
import { textClasses } from '../../../styles';
const MessageSettings = () => {
const endpoint = "api/messages";
const endpoint = 'api/messages';
const { data, isFetching, isLoading, isFetched } = useQueryAPI({
endpoint: endpoint,
});
@@ -23,7 +23,7 @@ const MessageSettings = () => {
Messages
</Text>
<DataTable
tableName="Messages"
tableName='Messages'
columns={MessagesColumns()}
tableData={messageData}
isFetching={isFetching}

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

@@ -1,11 +1,11 @@
import { useEffect, useState } from "react";
import { useQueryAPI } from "../../../hooks/useAPI";
import { DataTable } from "../../../DataTable/DataTable";
import PersonalizationColumns from "../../../DataTable/columns/PersonalizationColumns";
import { textClasses } from "../../../styles";
import { Text } from "@mantine/core";
import { Text } from '@mantine/core';
import { useEffect, useState } from 'react';
import { DataTable } from '../../../DataTable/DataTable';
import PersonalizationColumns from '../../../DataTable/columns/PersonalizationColumns';
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,
});
@@ -23,7 +23,7 @@ const PersonalizationSettings = () => {
Personalization
</Text>
<DataTable
tableName="Personalization"
tableName='Personalization'
columns={PersonalizationColumns()}
tableData={personalData}
isFetching={isFetching}

16
src/pages/settings/components/SearchProviders.tsx
View File

@@ -1,11 +1,11 @@
import { useEffect, useState } from "react";
import { useQueryAPI } from "../../../hooks/useAPI";
import { DataTable } from "../../../DataTable/DataTable";
import SearchProviderColumns from "../../../DataTable/columns/SearchProviderColumns";
import { Stack, Text } from "@mantine/core";
import { textClasses } from "../../../styles";
import { Stack, Text } from '@mantine/core';
import { useEffect, useState } from 'react';
import { DataTable } from '../../../DataTable/DataTable';
import SearchProviderColumns from '../../../DataTable/columns/SearchProviderColumns';
import { useQueryAPI } from '../../../hooks/useAPI';
import { textClasses } from '../../../styles';
const SearchProviderSettings = () => {
const endpoint = "api/providers";
const endpoint = 'api/providers';
const { data, isFetching, isLoading, isFetched } = useQueryAPI({
endpoint: endpoint,
});
@@ -23,7 +23,7 @@ const SearchProviderSettings = () => {
Search Providers
</Text>
<DataTable
tableName="Categories"
tableName='Categories'
columns={SearchProviderColumns()}
tableData={providerData}
isFetching={isFetching}

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

@@ -1,40 +1,40 @@
import { Icon } from "@iconify/react/dist/iconify.js";
import { Stack, Group, Text, Box } from "@mantine/core";
import { useState } from "react";
import { stackClasses } from "../../../styles";
import { Icon } from '@iconify/react/dist/iconify.js';
import { Box, Group, Stack, Text } from '@mantine/core';
import { useState } from 'react';
import { stackClasses } from '../../../styles';
export default function ThemeModalContent({ selectedTheme }: any) {
const ExampleApp = (previewTheme: any) => {
const [textDecoration, setTextDecoration] = useState<string>("none");
const [textDecoration, setTextDecoration] = useState<string>('none');
return (
<Box
component="a"
onMouseOver={() => setTextDecoration("underline")}
onMouseOut={() => setTextDecoration("none")}
component='a'
onMouseOver={() => setTextDecoration('underline')}
onMouseOut={() => setTextDecoration('none')}
className={stackClasses.appItemBox}
>
<Stack
style={{
height: "64px",
marginRight: "1em",
marginLeft: "1em",
paddingTop: "15px",
height: '64px',
marginRight: '1em',
marginLeft: '1em',
paddingTop: '15px',
}}
>
<Icon
style={{ color: previewTheme.theme.colortextpri }}
icon={`mdi:check`}
icon={'mdi:check'}
height={32}
width={32}
/>
</Stack>
<Stack
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
flex: 1,
overflow: "hidden",
overflow: 'hidden',
gap: 0,
}}
>
@@ -42,28 +42,28 @@ export default function ThemeModalContent({ selectedTheme }: any) {
style={{
fontWeight: 400,
fontSize: 11,
fontStyle: "normal",
fontStyle: 'normal',
color: previewTheme.theme.colortextpri,
fontFamily:
"-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important",
'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
margin: 0,
}}
>
{"Example App"}
{'Example App'}
</Text>
<Text
style={{
fontWeight: 400,
fontSize: 11,
fontStyle: "italic",
fontStyle: 'italic',
color: previewTheme.theme.colortextacc,
fontFamily:
"-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important",
'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
margin: 0,
textDecoration: textDecoration,
}}
>
{"https://www.example.com"}
{'https://www.example.com'}
</Text>
</Stack>
</Box>
@@ -72,31 +72,31 @@ export default function ThemeModalContent({ selectedTheme }: any) {
return (
<Stack
style={{
width: "100%",
width: '100%',
backgroundColor: selectedTheme.colorbackground,
borderRadius: "10px",
borderRadius: '10px',
}}
>
<Group
justify="center"
justify='center'
style={{
color: selectedTheme.colortextpri,
paddingTop: "1rem",
paddingTop: '1rem',
}}
>
{selectedTheme.name}
</Group>
<Text
pl={"1.5rem"}
pl={'1.5rem'}
style={{
textDecoration: "underline",
fontSize: "20px",
textDecoration: 'underline',
fontSize: '20px',
fontWeight: 200,
fontStyle: "italic",
height: "10px",
textTransform: "uppercase",
marginTop: "20px",
marginBottom: "20px",
fontStyle: 'italic',
height: '10px',
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
color: selectedTheme.colortextpri,
}}
>
@@ -105,18 +105,18 @@ export default function ThemeModalContent({ selectedTheme }: any) {
<Stack
style={{
background: selectedTheme.colorbackground,
gap: ".25rem",
backgroundSize: "cover",
borderBottom: "0px solid",
display: "grid",
gridColumnGap: "5px",
gridRowGap: "5px",
gridTemplateColumns: "1fr 1fr 1fr",
gridTemplateRows: "64px",
padding: "1rem",
paddingTop: "0rem",
justifyContent: "center",
alignContent: "center",
gap: '.25rem',
backgroundSize: 'cover',
borderBottom: '0px solid',
display: 'grid',
gridColumnGap: '5px',
gridRowGap: '5px',
gridTemplateColumns: '1fr 1fr 1fr',
gridTemplateRows: '64px',
padding: '1rem',
paddingTop: '0rem',
justifyContent: 'center',
alignContent: 'center',
}}
>
<ExampleApp theme={selectedTheme} />
@@ -124,16 +124,16 @@ export default function ThemeModalContent({ selectedTheme }: any) {
<ExampleApp theme={selectedTheme} />
</Stack>
<Text
pl={"1.5rem"}
pl={'1.5rem'}
style={{
textDecoration: "underline",
fontSize: "20px",
textDecoration: 'underline',
fontSize: '20px',
fontWeight: 200,
fontStyle: "italic",
height: "10px",
textTransform: "uppercase",
marginTop: "20px",
marginBottom: "20px",
fontStyle: 'italic',
height: '10px',
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
color: selectedTheme.colortextpri,
}}
>
@@ -141,107 +141,107 @@ export default function ThemeModalContent({ selectedTheme }: any) {
</Text>
<Stack
style={{
display: "flex",
flexDirection: "row",
flexWrap: "nowrap",
gridColumnGap: "20px",
gridRowGap: "0px",
gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr",
gridTemplateRows: "auto",
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
gridColumnGap: '20px',
gridRowGap: '0px',
gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
gridTemplateRows: 'auto',
}}
>
<Stack
style={{
width: "100%",
marginBottom: "0em",
display: "block",
lineHeight: "1.5rem",
padding: "1rem",
paddingTop: "0rem",
width: '100%',
marginBottom: '0em',
display: 'block',
lineHeight: '1.5rem',
padding: '1rem',
paddingTop: '0rem',
}}
>
<Text
style={{
fontSize: "14px",
fontSize: '14px',
fontWeight: 400,
height: "10px",
width: "auto",
height: '10px',
width: 'auto',
color: selectedTheme.colortextacc,
textTransform: "uppercase",
marginTop: "20px",
marginBottom: "20px",
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
}}
>
Example Category
</Text>
<Text
style={{
display: "block",
fontSize: "14px",
display: 'block',
fontSize: '14px',
lineHeight: 2,
color: selectedTheme.colortextpri,
}}
component="a"
component='a'
>
{"Link 1"}
{'Link 1'}
</Text>
<Text
style={{
display: "block",
fontSize: "14px",
display: 'block',
fontSize: '14px',
lineHeight: 2,
color: selectedTheme.colortextpri,
}}
component="a"
component='a'
>
{"Link 2"}
{'Link 2'}
</Text>
</Stack>
<Stack
style={{
width: "100%",
marginBottom: "0em",
display: "block",
lineHeight: "1.5rem",
padding: "1rem",
paddingTop: "0rem",
width: '100%',
marginBottom: '0em',
display: 'block',
lineHeight: '1.5rem',
padding: '1rem',
paddingTop: '0rem',
}}
>
<Text
style={{
fontSize: "14px",
fontSize: '14px',
fontWeight: 400,
height: "10px",
width: "auto",
height: '10px',
width: 'auto',
color: selectedTheme.colortextacc,
textTransform: "uppercase",
marginTop: "20px",
marginBottom: "20px",
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
}}
>
Example Category
</Text>
<Text
style={{
display: "block",
fontSize: "14px",
display: 'block',
fontSize: '14px',
lineHeight: 2,
color: selectedTheme.colortextpri,
}}
component="a"
component='a'
>
{"Link 1"}
{'Link 1'}
</Text>
<Text
style={{
display: "block",
fontSize: "14px",
display: 'block',
fontSize: '14px',
lineHeight: 2,
color: selectedTheme.colortextpri,
}}
component="a"
component='a'
>
{"Link 2"}
{'Link 2'}
</Text>
</Stack>
</Stack>

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

@@ -1,5 +1,3 @@
import { useEffect, useState } from "react";
import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
import {
ActionIcon,
Button,
@@ -12,33 +10,37 @@ import {
Stack,
Text,
TextInput,
} from "@mantine/core";
import { FiEdit, FiPlus, FiSave, FiTrash, FiX } from "react-icons/fi";
import { useDisclosure, useLocalStorage } from "@mantine/hooks";
import "@mantine/core/styles/ModalBase.css";
import "@mantine/core/styles/Modal.css";
import { actionIconClasses, buttonClasses, modalClasses, textClasses } from "../../../styles";
import ThemeModalContent from "./ThemeModalContent";
import { modals } from "@mantine/modals";
} from '@mantine/core';
import { useDisclosure, useLocalStorage } from '@mantine/hooks';
import { useEffect, useState } from 'react';
import { FiEdit, FiPlus, FiSave, FiTrash, FiX } from 'react-icons/fi';
import { useMutationAPI, useQueryAPI } from '../../../hooks/useAPI';
import '@mantine/core/styles/ModalBase.css';
import '@mantine/core/styles/Modal.css';
import { modals } from '@mantine/modals';
import {
actionIconClasses,
buttonClasses,
modalClasses,
textClasses,
} from '../../../styles';
import ThemeModalContent from './ThemeModalContent';
function ThemesSettings({ theme }: any) {
const [opened, { open, close }] = useDisclosure(false);
const [pickerOpen, { open: openPicker, close: closePicker }] =
useDisclosure(false);
const [colorId, setColorId] = useState<string>("");
const [colorValue, setColorValue] = useState("#000000");
const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
const [colorId, setColorId] = useState<string>('');
const [colorValue, setColorValue] = useState('#000000');
const [value, setValue] = useLocalStorage<any>({
key: "theme",
key: 'theme',
defaultValue: {},
});
const { data, isFetched } = useQueryAPI({
endpoint: "api/themes",
endpoint: 'api/themes',
});
const [themesList, setThemesList] = useState([]);
const [selectedTheme, setSelectedTheme] = useState<any>({});
const { mutateAsync: createTheme, isPending: isCreatingTheme } =
useMutationAPI();
const { mutateAsync: deleteTheme, isPending: isDeletingTheme } =
useMutationAPI();
const { mutateAsync: createTheme, isPending: isCreatingTheme } = useMutationAPI();
const { mutateAsync: deleteTheme, isPending: isDeletingTheme } = useMutationAPI();
useEffect(() => {
if (isFetched) {
setThemesList(data);
@@ -57,8 +59,8 @@ function ThemesSettings({ theme }: any) {
const handleSaveTheme = () => {
createTheme({
method: selectedTheme.id === undefined ? "POST" : "PATCH",
endpoint: "api/themes",
method: selectedTheme.id === undefined ? 'POST' : 'PATCH',
endpoint: 'api/themes',
body: selectedTheme,
});
close();
@@ -66,11 +68,11 @@ function ThemesSettings({ theme }: any) {
const openDeleteConfirmModal = (theme: any) =>
modals.openConfirmModal({
title: "Are you sure you want to delete this theme?",
labels: { confirm: "Delete", cancel: "Cancel" },
confirmProps: { color: "red" },
title: 'Are you sure you want to delete this theme?',
labels: { confirm: 'Delete', cancel: 'Cancel' },
confirmProps: { color: 'red' },
onConfirm: () =>
deleteTheme({ method: "DELETE", endpoint: "api/themes", body: theme }),
deleteTheme({ method: 'DELETE', endpoint: 'api/themes', body: theme }),
});
const handleDeleteTheme = (theme: any) => {
@@ -81,7 +83,7 @@ function ThemesSettings({ theme }: any) {
return (
<>
<Modal.Root
size={"50%"}
size={'50%'}
className={modalClasses.editThemeModal}
classNames={modalClasses}
opened={opened}
@@ -93,135 +95,153 @@ function ThemesSettings({ theme }: any) {
<Modal.Title>Edit Theme</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body p={"2rem"}>
<Modal.Body p={'2rem'}>
<ThemeModalContent selectedTheme={selectedTheme} />
<Divider color="black" my="sm" />
<Divider color='black' my='sm' />
<TextInput
label="Theme Name"
label='Theme Name'
value={selectedTheme.name}
onChange={(e) =>
setSelectedTheme({ ...selectedTheme, name: e.target.value })
}
styles={{
label: {
color: "black",
color: 'black',
},
input: {
color: "black",
backgroundColor: "white",
color: 'black',
backgroundColor: 'white',
},
}}
/>
<Divider color="black" my="sm" />
<Group w={"100%"} h={"100%"} gap={0}>
<Stack w={"50%"}>
<Group c={"black"} justify="space-between">
<Divider color='black' my='sm' />
<Group w={'100%'} h={'100%'} gap={0}>
<Stack w={'50%'}>
<Group c={'black'} justify='space-between'>
<Text>Primary Color</Text>
<ColorSwatch
onClick={() => {
setColorId("primary");
setColorId('primary');
openPicker();
setColorValue(selectedTheme.colortextpri);
}}
radius={"sm"}
w={"100px"}
radius={'sm'}
w={'100px'}
color={selectedTheme.colortextpri}
style={{ cursor: "pointer" }}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group c={"black"} justify="space-between">
<Group c={'black'} justify='space-between'>
<Text>Accent Color</Text>
<ColorSwatch
onClick={() => {
setColorId("accent");
setColorId('accent');
openPicker();
setColorValue(selectedTheme.colortextacc);
}}
radius={"sm"}
w={"100px"}
radius={'sm'}
w={'100px'}
color={selectedTheme.colortextacc}
style={{ cursor: "pointer" }}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group c={"black"} justify="space-between">
<Group c={'black'} justify='space-between'>
<Text>Background Color</Text>
<ColorSwatch
onClick={() => {
setColorId("background");
setColorId('background');
openPicker();
setColorValue(selectedTheme.colorbackground);
}}
radius={"sm"}
w={"100px"}
radius={'sm'}
w={'100px'}
color={selectedTheme.colorbackground}
style={{ cursor: "pointer" }}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group c={"black"} justify="space-between">
<Group c={'black'} justify='space-between'>
<Text>Border Color</Text>
<ColorSwatch
onClick={() => {
setColorId("border");
setColorId('border');
openPicker();
setColorValue(selectedTheme.colorborder);
}}
radius={"sm"}
w={"100px"}
radius={'sm'}
w={'100px'}
color={selectedTheme.colorborder}
style={{ cursor: "pointer" }}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group c={"black"} justify="space-between">
<Group c={'black'} justify='space-between'>
<Text>Search Background Color</Text>
<ColorSwatch
onClick={() => {
setColorId("searchbackground");
setColorId('searchbackground');
openPicker();
setColorValue(selectedTheme.colorsearchbackground);
}}
radius={"sm"}
w={"100px"}
radius={'sm'}
w={'100px'}
color={selectedTheme.colorsearchbackground}
style={{ cursor: "pointer" }}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group c={'black'} justify='space-between'>
<TextInput
label='Background Image Path'
value={selectedTheme.imagebackground}
onChange={(e) =>
setSelectedTheme({ ...selectedTheme, imagebackground: e.target.value })
}
styles={{
label: {
color: 'black',
},
input: {
color: 'black',
backgroundColor: 'white',
},
}}
/>
</Group>
</Stack>
<Stack h={"100%"} w={"50%"} align="center" justify="center">
<Stack h={'100%'} w={'50%'} align='center' justify='center'>
{pickerOpen ? (
<>
<ColorPicker value={colorValue} onChange={setColorValue} />
<Group w={"75%"} justify="space-between">
<Text c={"black"}>{colorValue}</Text>
<Group w={'75%'} justify='space-between'>
<Text c={'black'}>{colorValue}</Text>
<Group>
<Button
color={"green"}
color={'green'}
onClick={() => {
switch (colorId) {
case "primary":
case 'primary':
setSelectedTheme({
...selectedTheme,
colortextpri: colorValue,
});
break;
case "accent":
case 'accent':
setSelectedTheme({
...selectedTheme,
colortextacc: colorValue,
});
break;
case "background":
case 'background':
setSelectedTheme({
...selectedTheme,
colorbackground: colorValue,
});
break;
case "border":
case 'border':
setSelectedTheme({
...selectedTheme,
colorborder: colorValue,
});
break;
case "searchbackground":
case 'searchbackground':
setSelectedTheme({
...selectedTheme,
colorsearchbackground: colorValue,
@@ -233,7 +253,7 @@ function ThemesSettings({ theme }: any) {
>
<FiSave />
</Button>
<Button color={"red"} onClick={closePicker}>
<Button color={'red'} onClick={closePicker}>
<FiX />
</Button>
</Group>
@@ -241,34 +261,31 @@ function ThemesSettings({ theme }: any) {
</>
) : (
<Card
bg={"#0002"}
h={"100%"}
w={"90%"}
style={{ alignItems: "center" }}
bg={'#0002'}
h={'100%'}
w={'90%'}
style={{ alignItems: 'center' }}
>
<Text c="black">Pick a swatch to edit the color.</Text>
<Text c='black'>Pick a swatch to edit the color.</Text>
</Card>
)}
</Stack>
</Group>
<Divider color="black" my="sm" />
<Divider color='black' my='sm' />
<Group>
<Button color={"green"} onClick={handleSaveTheme}>
<Button color={'green'} onClick={handleSaveTheme}>
Save
</Button>
<Button color={"red"} onClick={close}>
<Button color={'red'} onClick={close}>
Cancel
</Button>
</Group>
</Modal.Body>
</Modal.Content>
</Modal.Root>
<Stack h={"100%"} w={"100%"}>
<Stack h={'100%'} w={'100%'}>
<Group>
<Text
className={textClasses.settingsSubTitle}
classNames={textClasses}
>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
Themes
</Text>
<Button
@@ -277,13 +294,13 @@ function ThemesSettings({ theme }: any) {
onClick={() => {
setSelectedTheme({
id: undefined,
name: "default",
imagebackground: "none",
colorbackground: "#EEEEEE",
colorsearchbackground: "#00000033",
colortextpri: "#222222",
colortextacc: "#5c5c5c",
colorborder: "#5c5c5c",
name: 'default',
imagebackground: 'none',
colorbackground: '#EEEEEE',
colorsearchbackground: '#00000033',
colortextpri: '#222222',
colortextacc: '#5c5c5c',
colorborder: '#5c5c5c',
});
open();
}}
@@ -291,13 +308,13 @@ function ThemesSettings({ theme }: any) {
<FiPlus />
</Button>
</Group>
<Group justify="center">
<Group justify='center'>
{themesList.map((theme: any) => (
<Stack key={theme.name} w={"300px"}>
<Group gap={0} justify="space-between">
<Stack key={theme.name} w={'300px'}>
<Group gap={0} justify='space-between'>
<Button
w={"100%"}
h={"75px"}
w={'100%'}
h={'75px'}
style={{
backgroundColor: theme.colorbackground,
border: `solid ${theme.colorborder}`,
@@ -311,8 +328,8 @@ function ThemesSettings({ theme }: any) {
{theme.name}
</Button>
</Group>
<Group justify="space-between" gap={0}>
<Group className="theme-palette">
<Group justify='space-between' gap={0}>
<Group className='theme-palette'>
<ActionIcon
className={actionIconClasses.editButton}
classNames={actionIconClasses}
@@ -331,7 +348,7 @@ function ThemesSettings({ theme }: any) {
classNames={actionIconClasses}
onClick={() => handleDeleteTheme(theme)}
>
<FiTrash color="red" />
<FiTrash color='red' />
</ActionIcon>
</Group>
</Group>