More styling

index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/gun.jpg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Pull the Trigger</title>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -5,7 +5,7 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
-		"build": "tsc && vite build",
+		"build": "vite build",
 		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
 		"preview": "vite preview"
 	},

src/App.tsx

@@ -20,6 +20,8 @@ import ThemeProvider from "./components/ThemeProvider";
 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 { appTheme } from "./contexts/theme";
+import { useAtom } from "jotai";
 
 function App() {
 	const { data, isFetched } = useQueryAPI({
@@ -31,46 +33,50 @@ function App() {
 		defaultValue: "blackboard",
 	});
 
-	const [currentTheme, setCurrentTheme] = useState<any>(undefined);
+	const [theme, setTheme] = useAtom(appTheme);
 
 	useEffect(() => {
 		if (data && themeName) {
 			const temp = data.find((t: any) => t.name === themeName);
-			setCurrentTheme(temp);
+			setTheme(temp);
 		}
 	}, [isFetched, themeName]);
 
 	const router = createBrowserRouter(
 		createRoutesFromElements(
 			<Route>
-				<Route path="/trigger" element={<Homepage theme={currentTheme} />} />
+				<Route path="/trigger" element={<Homepage theme={theme} />} />
 				<Route
 					path="/trigger/settings"
-					element={<Settings theme={currentTheme} />}
+					element={<Settings theme={theme} />}
 				/>
 			</Route>,
 		),
 	);
 
 	const overrides = createTheme({
-		white: currentTheme?.colorbackground,
+		white: theme?.colorbackground,
 		fontFamily:
 			"-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif",
 	});
 
 	const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
-
+	
 	return (
-		<MantineProvider theme={mantineTheme}>
-			{currentTheme && (
-				<ThemeProvider theme={currentTheme}>
-					<ModalsProvider>
+		<>
+		{theme && (
+				<MantineProvider theme={mantineTheme}>
+				<ThemeProvider theme={theme}>
+					<ModalsProvider >
 						<RouterProvider router={router} />
 					</ModalsProvider>
 				</ThemeProvider>
+				</MantineProvider>
 			)}
-		</MantineProvider>
+		</>
+			
+		
 	);
 }
 
-export default App;
+export default App;

src/DataTable/DataTable.tsx

@@ -6,11 +6,14 @@ import {
 } from "mantine-react-table";
 import { memo } from "react";
 import "../dataTableStyles.css";
-import { ActionIcon, Button, Flex, Text, Tooltip } from "@mantine/core";
+import { ActionIcon, Button, Flex, Text } 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";
+import { actionIconClasses, buttonClasses } from "../styles";
+import { appTheme } from "../contexts/theme";
+import { useAtom } from "jotai";
 
 export function DataTableComponent({
 	tableName,
@@ -27,10 +30,10 @@ export function DataTableComponent({
 	isLoading: boolean;
 	endpoint: string;
 }) {
-	const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
-	const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();
-	const { mutateAsync: deleteRow, isPending: isDeletingRow } = useMutationAPI();
-
+	const [theme, setTheme] = useAtom(appTheme);
+	const { mutateAsync: createRow } = useMutationAPI();
+	const { mutateAsync: editRow } = useMutationAPI();
+	const { mutateAsync: deleteRow } = useMutationAPI();
 	const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
 		values,
 		exitCreatingMode,
@@ -45,7 +48,7 @@ export function DataTableComponent({
 		editRow({ method: "PATCH", endpoint: endpoint, body: values });
 		table.setEditingRow(null);
 	};
-
+console.log(theme)
 	const openDeleteConfirmModal = (row: MRT_Row<any>) =>
 		modals.openConfirmModal({
 			title: "Are you sure you want to delete this user?",
@@ -55,7 +58,6 @@ export function DataTableComponent({
 			onConfirm: () =>
 				deleteRow({ method: "DELETE", endpoint: endpoint, body: row.original }),
 		});
-
 	const table = useMantineReactTable({
 		columns: columns,
 		data: tableData,
@@ -80,36 +82,25 @@ export function DataTableComponent({
 			showLoadingOverlay: isLoading,
 			isLoading: isLoading,
 		},
-		mantineTableHeadProps: {
-			style: {
-				color: "var(--color-text-pri)",
-			},
-		},
-		mantineTableBodyCellProps: {
-			style: {
-				color: "var(--color-text-pri)",
-				background: "var(--color-background)",
-				borderRight: "none",
-				borderLeft: "none",
-			},
-		},
+		mantinePaperProps: {className: 'root'},
 		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>
+				<ActionIcon className={actionIconClasses.editButton} classNames={actionIconClasses} onClick={() => table.setEditingRow(row)}>
+					<IconEdit />
+				</ActionIcon>
+				<ActionIcon color="red" onClick={() => openDeleteConfirmModal(row)}>
+					<IconTrash />
+				</ActionIcon>
 			</Flex>
 		),
+		mantineCreateRowModalProps: {
+			style: {
+				color: theme.colortextpri,
+			},
+		},
 		renderTopToolbarCustomActions: ({ table }) => {
 			return (
-				<Button onClick={() => table.setCreatingRow(true)}>
+				<Button className={buttonClasses.tableButton} classNames={buttonClasses} disabled={tableName === "Personalization"} onClick={() => table.setCreatingRow(true)}>
 					<FiPlus />
 				</Button>
 			);

src/contexts/theme.ts

@@ -0,0 +1,5 @@
+import { atom } from "jotai";
+
+const appTheme = atom<any>({});
+
+export { appTheme }

src/dataTableStyles.css

@@ -1,31 +1,31 @@
-.mrt-table-head-sort-button {
-	display: none;
+.root {
+	--mrt-base-background-color: var(--color-background);
+	--mrt-striped-row-background-color: var();
+	--mrt-row-hover-background-color: var();
+	--mrt-striped-row-hover-background-color: var();
+	--mrt-selected-row-background-color: var();
+	--mrt-selected-row-hover-background-color: var();
+	--mrt-pinned-row-background-color: var();
+	--mrt-pinned-row-hover-background-color: var();
+	--mrt-pinned-column-background-color: var();
+	--mrt-dragging-hovered-border-color: var();
+	--mrt-dragging-drag-border-color: var();
+	--mrt-resize-column-border-color: var();
 	color: var(--color-text-pri) !important;
 }
 
-.mrt-table-head-sort-button[data-sorted='asc'] {
-	display: flex;
-	min-height: 12px !important;
-	min-width: 12px !important;
-	max-width: 16px;
-	max-height: 16px;
-
-	& > * > .tabler-icon-arrows-sort {
-		height: 12px !important;
-		width: 12px !important;
-		color: light-dark(--mantine-primary-color-6, --mantine-color-appGray-5);
-	}
+.mrt-table-head-sort-button {
+	color: var(--color-text-pri) !important;
 }
-.mrt-table-head-sort-button[data-sorted='desc'] {
-	display: flex;
-	min-height: 12px !important;
-	min-width: 12px !important;
-	max-width: 16px;
-	max-height: 16px;
 
-	& > * > .tabler-icon-arrows-sort {
-		height: 12px !important;
-		width: 12px !important;
-		color: light-dark(--mantine-primary-color-6, --mantine-color-appGray-5);
-	}
+.mantine-Input-input {
+	color: var(--color-text-pri) !important;
 }
+
+.mantine-Select-input {
+	color: var(--color-text-pri) !important;
+}
+
+.mantine-Select-option {
+	color: var(--color-text-pri) !important;
+}

src/index.css

@@ -1 +1,12 @@
-@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap');
+
+.mrt-edit-action-buttons {
+	.mantine-Button-root[data-variant="subtle"] {
+		color: var(--color-text-pri) !important;
+		background-color: var(--color-text-pri) !important;
+	}
+	.mantine-Button-root[data-variant="filled"] {
+		color: var(--color-text-pri) !important;
+		background-color: var(--color-text-pri) !important;
+	}
+}

src/pages/homepage/components/Search.tsx

@@ -10,12 +10,19 @@ export default function Search() {
 	const [providerURL, setProviderURL] = useState(
 		"https://www.google.com/search?q=",
 	);
+	const [value, setValue] = useState("");
 
 	const handleKeyPress = (item: any) => {
-		const option =
+		let option = ''
+		let subtext = ''
+		if (item.target.value.startsWith("/")) {
+			option =
 			item.target.value.substr(1, item.target.value.indexOf(" ") - 1) ||
 			item.target.value.substr(1);
-		const subtext = item.target.value.substr(2 + option.length);
+			subtext = item.target.value.substr(2 + option.length);
+		} else {
+			subtext = item.target.value;
+		}
 		if (item.key === "Enter") {
 			if (item.target.value.startsWith("/")) {
 				open(`${providerURL}${subtext}`, "_self");
@@ -63,25 +70,25 @@ export default function Search() {
 				classNames={textInputClasses}
 				spellCheck="true"
 				leftSection={providerLabel}
+				value={value}
+				data-active={value !== ''}
 				onChange={(item: any) => {
+					setValue(item.currentTarget.value)
 					if (item.target.value.startsWith("/")) {
-						setProviderLabel(
-							providers?.find(
-								(p: any) => p.prefix === item.target.value.split(" ")[0],
-							).name,
-						);
-						setProviderURL(
-							providers?.find(
-								(p: any) => p.prefix === item.target.value.split(" ")[0],
-							).url,
-						);
+						const provider = providers?.find(
+							(p: any) => p.prefix === item.target.value.split(" ")[0],
+						)
+						setProviderLabel(provider?.name || "Invalid Search");
+						setProviderURL(provider?.url);
 					} else {
 						setProviderLabel("Google Search");
 						setProviderURL("https://www.google.com/search?q=");
 					}
 				}}
 				onKeyUp={(item: any) => {
-					handleKeyPress(item);
+					if(providerLabel !== "Invalid Search"){
+						handleKeyPress(item);
+					}
 				}}
 			/>
 		</Stack>

src/pages/settings/components/Themes.tsx

@@ -7,10 +7,8 @@ import {
 	ColorPicker,
 	ColorSwatch,
 	Divider,
-	Grid,
 	Group,
 	Modal,
-	SimpleGrid,
 	Stack,
 	Text,
 	TextInput,
@@ -19,7 +17,7 @@ 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 { actionIconClasses, buttonClasses, modalClasses, textClasses } from "../../../styles";
 import ThemeModalContent from "./ThemeModalContent";
 import { modals } from "@mantine/modals";
 function ThemesSettings({ theme }: any) {
@@ -84,13 +82,6 @@ function ThemesSettings({ theme }: any) {
 		<>
 			<Modal.Root
 				size={"50%"}
-				style={{
-					"--color-text-pri": theme.colortextpri,
-					"--color-text-acc": theme.colortextacc,
-					"--color-background": theme.colorbackground,
-					"--color-border": theme.colorborder,
-					"--color-search-background": theme.colorsearchbackground,
-				}}
 				className={modalClasses.editThemeModal}
 				classNames={modalClasses}
 				opened={opened}
@@ -281,6 +272,8 @@ function ThemesSettings({ theme }: any) {
 						Themes
 					</Text>
 					<Button
+						className={buttonClasses.tableButton}
+						classNames={buttonClasses}
 						onClick={() => {
 							setSelectedTheme({
 								id: undefined,

src/styles/Button.module.css

@@ -32,4 +32,22 @@
         border-radius: 1em;
         height: 3.5rem;
     }
+}
+
+.tableButton {
+    &.root {
+        &.loader{
+            display: none;
+        }
+        width: 2rem;
+        height: 2rem;
+        padding: 0px;
+        margin: 0px;
+        background-color: var(--color-text-pri);
+        color: var(--color-text-acc);
+    }
+    &:hover {
+        background-color: var(--color-text-acc) !important;
+        color: var(--color-text-pri) !important;
+    }
 }

src/styles/Tabs.module.css

@@ -5,9 +5,16 @@
     }
     .tab {
         color: var(--color-text-pri);
+        border-color: var(--color-text-acc);
         &:hover {
             color: var(--color-background);
             background-color: var(--color-text-acc);
         }
+        &[data-active=true]{
+            border-color: var(--color-text-pri);
+        }
+    }
+    .list::before {
+        border-color: var(--color-text-acc);
     }
 }

src/styles/TextInput.module.css

@@ -49,5 +49,20 @@
 				opacity: 1;
 			}
 		}
+		.input[data-active="true"]{
+			background-color: var(--color-search-background);
+			border-color: var(--color-border);
+			outline: none;
+			color: var(--color-text-acc);
+			font-style: normal;
+			font-weight: 500;
+			font-size: 1.2em;
+			letter-spacing: .2em;
+			width:100%;
+			border-top-left-radius: .25em;
+			border-top-right-radius: .25em;
+			border-bottom-left-radius: .25em;
+			border-bottom-right-radius: .25em;
+		}
 	}
 }