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

Theming working

Browse Source
This commit is contained in:
Sean Edmunds
2024-08-16 15:38:30 -05:00
parent a37ab84f65
commit 44d2405a1d
13 changed files with 4712 additions and 4496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8587
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -19,8 +19,11 @@
"@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-persist-client": "^5.51.23",
"clsx": "^2.1.1",
"dayjs": "^1.11.12",
"idb-keyval": "^6.2.1",
"jotai": "^2.9.3",
"mantine-react-table": "^2.0.0-beta.6",
"react": "^18.3.1",

18
src/App.tsx
View File

@@ -31,15 +31,7 @@ function App() {
defaultValue: "blackboard",
});
const [currentTheme, setCurrentTheme] = useState<any>({});
const overrides = createTheme({
white: currentTheme.colorbackground,
fontFamily:
"-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif",
});
const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
const [currentTheme, setCurrentTheme] = useState<any>(undefined);
useEffect(() => {
if (data && themeName) {
@@ -60,6 +52,14 @@ function App() {
),
);
const overrides = createTheme({
white: currentTheme?.colorbackground,
fontFamily:
"-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif",
});
const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
return (
<MantineProvider theme={mantineTheme}>
{currentTheme && (

79
src/DataTable/DataTable.tsx
View File

@@ -1,15 +1,61 @@
import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
import {
MantineReactTable,
MRT_Row,
MRT_TableOptions,
useMantineReactTable,
} from "mantine-react-table";
import { memo } from "react";
import "../dataTableStyles.css";
import { ActionIcon, Button, Flex, Text, Tooltip } from "@mantine/core";
import { FiPlus } from "react-icons/fi";
import { IconEdit, IconTrash } from "@tabler/icons-react";
import { useMutationAPI } from "../hooks/useAPI";
import { modals } from "@mantine/modals";
export function DataTableComponent({
tableName,
columns,
tableData,
isFetching,
isLoading,
onCreatingRowSave,
onEditingRowSave,
}: any) {
endpoint,
}: {
tableName: string;
columns: any;
tableData: any;
isFetching: boolean;
isLoading: boolean;
endpoint: string;
}) {
const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();
const { mutateAsync: deleteRow, isPending: isDeletingRow } = useMutationAPI();
const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
values,
exitCreatingMode,
}) => {
createRow({ method: "POST", endpoint: endpoint, body: values });
exitCreatingMode();
};
const handleEditRow: MRT_TableOptions<any>["onEditingRowSave"] = async ({
values,
table,
}) => {
editRow({ method: "PATCH", endpoint: endpoint, body: values });
table.setEditingRow(null);
};
const openDeleteConfirmModal = (row: MRT_Row<any>) =>
modals.openConfirmModal({
title: "Are you sure you want to delete this user?",
children: <Text>Are you sure?</Text>,
labels: { confirm: "Delete", cancel: "Cancel" },
confirmProps: { color: "red" },
onConfirm: () =>
deleteRow({ method: "DELETE", endpoint: endpoint, body: row.original }),
});
const table = useMantineReactTable({
columns: columns,
data: tableData,
@@ -21,8 +67,8 @@ export function DataTableComponent({
editDisplayMode: "row",
enableBottomToolbar: false,
enableToolbarInternalActions: false,
onCreatingRowSave: onCreatingRowSave,
onEditingRowSave: onEditingRowSave,
onCreatingRowSave: handleCreateRow,
onEditingRowSave: handleEditRow,
getRowId: (row: any) => row.id,
initialState: {
showProgressBars: isFetching,
@@ -47,6 +93,27 @@ export function DataTableComponent({
borderLeft: "none",
},
},
renderRowActions: ({ row, table }) => (
<Flex gap="md">
<Tooltip label="Edit">
<ActionIcon onClick={() => table.setEditingRow(row)}>
<IconEdit />
</ActionIcon>
</Tooltip>
<Tooltip label="Delete">
<ActionIcon color="red" onClick={() => openDeleteConfirmModal(row)}>
<IconTrash />
</ActionIcon>
</Tooltip>
</Flex>
),
renderTopToolbarCustomActions: ({ table }) => {
return (
<Button onClick={() => table.setCreatingRow(true)}>
<FiPlus />
</Button>
);
},
});
return <MantineReactTable table={table} />;
}

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

@@ -49,6 +49,7 @@ export default function Search() {
return (
<Stack
style={{
height: "100px",
backgroundColor: "transparent",
textAlign: "center",
position: "relative",

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

@@ -1,11 +1,10 @@
import { useEffect, useState } from "react";
import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
import { useQueryAPI } from "../../../hooks/useAPI";
import { DataTable } from "../../../DataTable/DataTable";
import { toast } from "react-toastify";
import type { MRT_TableOptions } from "mantine-react-table";
import ApplicationColumns from "../../../DataTable/columns/ApplicationColumns";
import { Stack, Text } from "@mantine/core";
import { textClasses } from "../../../styles";
const ApplicationSettings = () => {
const endpoint = "api/apps";
const { data, isFetching, isLoading, isFetched } = useQueryAPI({
@@ -13,34 +12,12 @@ const ApplicationSettings = () => {
});
const [applicationData, setApplicationData] = useState<any>([]);
const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();
useEffect(() => {
if (isFetched) {
setApplicationData(data);
}
});
const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
values,
exitCreatingMode,
}) => {
createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
toast.success("Application created successfully");
});
exitCreatingMode();
};
const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
values,
table,
}) => {
editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
toast.success("Application updated successfully");
});
table.setEditingRow(null);
};
return (
<Stack>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -52,8 +29,7 @@ const ApplicationSettings = () => {
tableData={applicationData}
isFetching={isFetching}
isLoading={isLoading}
onCreatingRowSave={handleCreateRow}
onEditingRowSave={handleEditRow}
endpoint={endpoint}
/>
</Stack>
);

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

@@ -1,8 +1,6 @@
import { useEffect, useState } from "react";
import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
import { useQueryAPI } from "../../../hooks/useAPI";
import { DataTable } from "../../../DataTable/DataTable";
import { toast } from "react-toastify";
import type { MRT_TableOptions } from "mantine-react-table";
import { Stack, Text } from "@mantine/core";
import BookmarkColumns from "../../../DataTable/columns/BookmarkColumns";
import { textClasses } from "../../../styles";
@@ -20,8 +18,6 @@ const BookmarkSettings = () => {
const [bookmarkData, setBookmarkData] = useState<any>([]);
const [groups, setGroups] = useState([]);
const [fullyFetched, setFullyFetched] = useState(false);
const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();
useEffect(() => {
if (isFetched) {
@@ -39,25 +35,6 @@ const BookmarkSettings = () => {
}
}, [groupDataisFetched]);
const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
values,
exitCreatingMode,
}) => {
createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
toast.success("Application created successfully");
});
exitCreatingMode();
};
const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
values,
table,
}) => {
editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
toast.success("Application updated successfully");
});
table.setEditingRow(null);
};
return (
<Stack>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -69,8 +46,7 @@ const BookmarkSettings = () => {
tableData={bookmarkData}
isFetching={isFetching}
isLoading={isLoading}
onCreatingRowSave={handleCreateRow}
onEditingRowSave={handleEditRow}
endpoint={endpoint}
/>
</Stack>
);

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

@@ -1,8 +1,6 @@
import { useEffect, useState } from "react";
import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
import { useQueryAPI } from "../../../hooks/useAPI";
import { DataTable } from "../../../DataTable/DataTable";
import { toast } from "react-toastify";
import type { MRT_TableOptions } from "mantine-react-table";
import CategoryColumns from "../../../DataTable/columns/CategoryColumns";
import { Stack, Text } from "@mantine/core";
import { textClasses } from "../../../styles";
@@ -13,34 +11,12 @@ const CategorySettings = () => {
});
const [categoryData, setCategoryData] = useState<any>([]);
const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();
useEffect(() => {
if (isFetched) {
setCategoryData(data);
}
});
const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
values,
exitCreatingMode,
}) => {
createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
toast.success("Category created successfully");
});
exitCreatingMode();
};
const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
values,
table,
}) => {
editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
toast.success("Category updated successfully");
});
table.setEditingRow(null);
};
return (
<Stack>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -52,8 +28,7 @@ const CategorySettings = () => {
tableData={categoryData}
isFetching={isFetching}
isLoading={isLoading}
onCreatingRowSave={handleCreateRow}
onEditingRowSave={handleEditRow}
endpoint={endpoint}
/>
</Stack>
);

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

@@ -1,8 +1,6 @@
import { useEffect, useState } from "react";
import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
import { useQueryAPI } from "../../../hooks/useAPI";
import { DataTable } from "../../../DataTable/DataTable";
import { toast } from "react-toastify";
import type { MRT_TableOptions } from "mantine-react-table";
import MessagesColumns from "../../../DataTable/columns/MessagesColumns";
import { Stack, Text } from "@mantine/core";
import { textClasses } from "../../../styles";
@@ -13,34 +11,12 @@ const MessageSettings = () => {
});
const [messageData, setMessageData] = useState<any>([]);
const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();
useEffect(() => {
if (isFetched) {
setMessageData(data);
}
});
const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
values,
exitCreatingMode,
}) => {
createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
toast.success("Message created successfully");
});
exitCreatingMode();
};
const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
values,
table,
}) => {
editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
toast.success("Message updated successfully");
});
table.setEditingRow(null);
};
return (
<Stack>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -52,8 +28,7 @@ const MessageSettings = () => {
tableData={messageData}
isFetching={isFetching}
isLoading={isLoading}
onCreatingRowSave={handleCreateRow}
onEditingRowSave={handleEditRow}
endpoint={endpoint}
/>
</Stack>
);

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

@@ -1,9 +1,7 @@
import { useEffect, useState } from "react";
import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
import { useQueryAPI } from "../../../hooks/useAPI";
import { DataTable } from "../../../DataTable/DataTable";
import PersonalizationColumns from "../../../DataTable/columns/PersonalizationColumns";
import { toast } from "react-toastify";
import type { MRT_TableOptions } from "mantine-react-table";
import { textClasses } from "../../../styles";
import { Text } from "@mantine/core";
const PersonalizationSettings = () => {
@@ -13,34 +11,12 @@ const PersonalizationSettings = () => {
});
const [personalData, setPersonalData] = useState<any>([]);
const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();
useEffect(() => {
if (isFetched) {
setPersonalData(data);
}
});
const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
values,
exitCreatingMode,
}) => {
createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
toast.success("Personalization created successfully");
});
exitCreatingMode();
};
const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
values,
table,
}) => {
editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
toast.success("Personalization updated successfully");
});
table.setEditingRow(null);
};
return (
<>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -52,8 +28,7 @@ const PersonalizationSettings = () => {
tableData={personalData}
isFetching={isFetching}
isLoading={isLoading}
onCreatingRowSave={handleCreateRow}
onEditingRowSave={handleEditRow}
endpoint={endpoint}
/>
</>
);

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

@@ -1,8 +1,6 @@
import { useEffect, useState } from "react";
import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
import { useQueryAPI } from "../../../hooks/useAPI";
import { DataTable } from "../../../DataTable/DataTable";
import { toast } from "react-toastify";
import type { MRT_TableOptions } from "mantine-react-table";
import SearchProviderColumns from "../../../DataTable/columns/SearchProviderColumns";
import { Stack, Text } from "@mantine/core";
import { textClasses } from "../../../styles";
@@ -13,34 +11,12 @@ const SearchProviderSettings = () => {
});
const [providerData, setProviderData] = useState<any>([]);
const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();
useEffect(() => {
if (isFetched) {
setProviderData(data);
}
});
const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
values,
exitCreatingMode,
}) => {
createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
toast.success("Search provider created successfully");
});
exitCreatingMode();
};
const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
values,
table,
}) => {
editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
toast.success("Search provider updated successfully");
});
table.setEditingRow(null);
};
return (
<Stack>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -52,8 +28,7 @@ const SearchProviderSettings = () => {
tableData={providerData}
isFetching={isFetching}
isLoading={isLoading}
onCreatingRowSave={handleCreateRow}
onEditingRowSave={handleEditRow}
endpoint={endpoint}
/>
</Stack>
);

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

@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
import { useQueryAPI } from "../../../hooks/useAPI";
import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
import {
ActionIcon,
Button,
@@ -7,22 +7,27 @@ import {
ColorPicker,
ColorSwatch,
Divider,
Grid,
Group,
Modal,
SimpleGrid,
Stack,
Text,
TextInput,
} from "@mantine/core";
import { FiEdit } from "react-icons/fi";
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, modalClasses, textClasses } from "../../../styles";
import ThemeModalContent from "./ThemeModalContent";
import { modals } from "@mantine/modals";
function ThemesSettings({ theme }: any) {
const [opened, { open, close }] = useDisclosure(false);
const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
const [colorValue, onChange] = 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",
defaultValue: {},
@@ -32,6 +37,10 @@ function ThemesSettings({ theme }: any) {
});
const [themesList, setThemesList] = useState([]);
const [selectedTheme, setSelectedTheme] = useState<any>({});
const { mutateAsync: createTheme, isPending: isCreatingTheme } =
useMutationAPI();
const { mutateAsync: deleteTheme, isPending: isDeletingTheme } =
useMutationAPI();
useEffect(() => {
if (isFetched) {
setThemesList(data);
@@ -43,10 +52,33 @@ function ThemesSettings({ theme }: any) {
open();
};
const handleClose = () => {
close();
closePicker();
};
const handleClose = () => {
close();
closePicker();
};
const handleSaveTheme = () => {
createTheme({
method: selectedTheme.id === undefined ? "POST" : "PATCH",
endpoint: "api/themes",
body: selectedTheme,
});
close();
};
const openDeleteConfirmModal = (theme: any) =>
modals.openConfirmModal({
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 }),
});
const handleDeleteTheme = (theme: any) => {
openDeleteConfirmModal(theme);
close();
};
return (
<>
@@ -72,87 +104,247 @@ function ThemesSettings({ theme }: any) {
</Modal.Header>
<Modal.Body p={"2rem"}>
<ThemeModalContent selectedTheme={selectedTheme} />
<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={openPicker} radius={"sm"} w={"100px"} color={selectedTheme.colortextpri} />
</Group>
<Group c={'black'} justify="space-between">
<Text>Accent Color</Text>
<ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colortextacc} />
</Group>
<Group c={'black'} justify="space-between">
<Text>Background Color</Text>
<ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colorbackground} />
</Group>
<Group c={'black'} justify="space-between">
<Text>Border Color</Text>
<ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colorborder} />
</Group>
<Group c={'black'} justify="space-between">
<Text>Search Background Color</Text>
<ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colorsearchbackground} />
</Group>
</Stack>
<Stack h={"100%"} w={'50%'} align="center" justify="center">
{pickerOpen ? (
<>
<ColorPicker value={colorValue} onChange={onChange}/>
<Group><Text c={'black'}>{colorValue}</Text><Button onClick={() => {setSelectedTheme({ ...selectedTheme, colorbackground: colorValue }); closePicker();}} c={'white'} bg={'forestgreen'}>Save</Button></Group>
</>
) : (
<Card bg={'#0002'} h={"100%"} w={"90%"}>
<Text c="black">
Pick a swatch to edit the color.
</Text>
</Card>
)}
</Stack>
</Group>
<Divider color="black" my="sm" />
<TextInput
label="Theme Name"
value={selectedTheme.name}
onChange={(e) =>
setSelectedTheme({ ...selectedTheme, name: e.target.value })
}
styles={{
label: {
color: "black",
},
input: {
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">
<Text>Primary Color</Text>
<ColorSwatch
onClick={() => {
setColorId("primary");
openPicker();
setColorValue(selectedTheme.colortextpri);
}}
radius={"sm"}
w={"100px"}
color={selectedTheme.colortextpri}
style={{ cursor: "pointer" }}
/>
</Group>
<Group c={"black"} justify="space-between">
<Text>Accent Color</Text>
<ColorSwatch
onClick={() => {
setColorId("accent");
openPicker();
setColorValue(selectedTheme.colortextacc);
}}
radius={"sm"}
w={"100px"}
color={selectedTheme.colortextacc}
style={{ cursor: "pointer" }}
/>
</Group>
<Group c={"black"} justify="space-between">
<Text>Background Color</Text>
<ColorSwatch
onClick={() => {
setColorId("background");
openPicker();
setColorValue(selectedTheme.colorbackground);
}}
radius={"sm"}
w={"100px"}
color={selectedTheme.colorbackground}
style={{ cursor: "pointer" }}
/>
</Group>
<Group c={"black"} justify="space-between">
<Text>Border Color</Text>
<ColorSwatch
onClick={() => {
setColorId("border");
openPicker();
setColorValue(selectedTheme.colorborder);
}}
radius={"sm"}
w={"100px"}
color={selectedTheme.colorborder}
style={{ cursor: "pointer" }}
/>
</Group>
<Group c={"black"} justify="space-between">
<Text>Search Background Color</Text>
<ColorSwatch
onClick={() => {
setColorId("searchbackground");
openPicker();
setColorValue(selectedTheme.colorsearchbackground);
}}
radius={"sm"}
w={"100px"}
color={selectedTheme.colorsearchbackground}
style={{ cursor: "pointer" }}
/>
</Group>
</Stack>
<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>
<Button
color={"green"}
onClick={() => {
switch (colorId) {
case "primary":
setSelectedTheme({
...selectedTheme,
colortextpri: colorValue,
});
break;
case "accent":
setSelectedTheme({
...selectedTheme,
colortextacc: colorValue,
});
break;
case "background":
setSelectedTheme({
...selectedTheme,
colorbackground: colorValue,
});
break;
case "border":
setSelectedTheme({
...selectedTheme,
colorborder: colorValue,
});
break;
case "searchbackground":
setSelectedTheme({
...selectedTheme,
colorsearchbackground: colorValue,
});
break;
}
closePicker();
}}
>
<FiSave />
</Button>
<Button color={"red"} onClick={closePicker}>
<FiX />
</Button>
</Group>
</Group>
</>
) : (
<Card
bg={"#0002"}
h={"100%"}
w={"90%"}
style={{ alignItems: "center" }}
>
<Text c="black">Pick a swatch to edit the color.</Text>
</Card>
)}
</Stack>
</Group>
<Divider color="black" my="sm" />
<Group>
<Button color={"green"} onClick={handleSaveTheme}>
Save
</Button>
<Button color={"red"} onClick={close}>
Cancel
</Button>
</Group>
</Modal.Body>
</Modal.Content>
</Modal.Root>
<Stack h={"100%"} w={"100%"}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
Themes
</Text>
<SimpleGrid cols={5}>
<Group>
<Text
className={textClasses.settingsSubTitle}
classNames={textClasses}
>
Themes
</Text>
<Button
onClick={() => {
setSelectedTheme({
id: undefined,
name: "default",
imagebackground: "none",
colorbackground: "#EEEEEE",
colorsearchbackground: "#00000033",
colortextpri: "#222222",
colortextacc: "#5c5c5c",
colorborder: "#5c5c5c",
});
open();
}}
>
<FiPlus />
</Button>
</Group>
<Group justify="center">
{themesList.map((theme: any) => (
<Stack key={theme.name}>
<Button
style={{
backgroundColor: theme.colorbackground,
border: `solid ${theme.colorborder}`,
color: theme.colortextpri,
}}
data-theme={theme.name}
onClick={() => {
setValue(theme.name);
}}
>
{theme.name}
</Button>
<Group justify="space-between">
<Stack key={theme.name} w={"300px"}>
<Group gap={0} justify="space-between">
<Button
w={"100%"}
h={"75px"}
style={{
backgroundColor: theme.colorbackground,
border: `solid ${theme.colorborder}`,
color: theme.colortextpri,
}}
data-theme={theme.name}
onClick={() => {
setValue(theme.name);
}}
>
{theme.name}
</Button>
</Group>
<Group justify="space-between" gap={0}>
<Group className="theme-palette">
<ActionIcon
className={actionIconClasses.editButton}
classNames={actionIconClasses}
onClick={() => handleOpen(theme)}
>
<FiEdit />
</ActionIcon>
<ColorSwatch color={theme.colorbackground} />
<ColorSwatch color={theme.colorsearchbackground} />
<ColorSwatch color={theme.colortextpri} />
<ColorSwatch color={theme.colortextacc} />
<ColorSwatch color={theme.colorborder} />
<ActionIcon
className={actionIconClasses.editButton}
classNames={actionIconClasses}
onClick={() => handleDeleteTheme(theme)}
>
<FiTrash color="red" />
</ActionIcon>
</Group>
<ActionIcon
className={actionIconClasses.editButton}
classNames={actionIconClasses}
onClick={() => handleOpen(theme)}
>
<FiEdit />
</ActionIcon>
</Group>
</Stack>
))}
</SimpleGrid>
</Group>
</Stack>
</>
);

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

@@ -18,10 +18,11 @@
text-align: center;
}
.section{
transition: opacity 0.1s 0s ease;
color: var(--color-border);
width: auto;
padding-left: .5rem;
display: none;
opacity: 0;
}
}
.wrapper:focus-within {
@@ -41,10 +42,11 @@
border-bottom-right-radius: .25em;
}
.section{
transition: opacity 0.4s 0.4s ease;
color: var(--color-border);
width: auto;
padding-left: .5rem;
display: flex;
opacity: 1;
}
}
}