Styled Homepage

src/App.css

@@ -1,40 +0,0 @@
-#root {
-  width: 100%;
-  height: 100%;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.tsx

@@ -1,43 +1,65 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import './App.css'
 import Homepage from './pages/homepage/Homepage'
-import { MantineProvider } from '@mantine/core'
+import { MantineProvider, DEFAULT_THEME, createTheme, mergeMantineTheme } from '@mantine/core'
 import {
 	Route,
 	createBrowserRouter,
 	createRoutesFromElements,
 	RouterProvider,
-	Navigate,
 } from "react-router-dom";
 import Settings from './pages/settings/Settings';
+import { ModalsProvider } from '@mantine/modals';
+import { useLocalStorage } from '@mantine/hooks';
+import { useEffect, useState } from 'react';
+import { useQueryAPI } from './hooks/useAPI';
+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
 
 function App() {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        gcTime: 1000 * 60 * 60 * 24, // 24 hours
-        staleTime: 1000 * 60 * 1, // 1 min
-      },
-    },
+  
+  const { data, isFetched } = useQueryAPI({
+		endpoint: "api/themes",
+	});
+
+  const [themeName, setThemeName] = useLocalStorage<any>({
+		key: 'theme',
+		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);
+
+  useEffect(() => {
+    if(data && themeName) {
+      let temp = data.find((t: any) => t.name === themeName)
+      setCurrentTheme(temp);
+    }
+  }, [isFetched, themeName])
+
   const router = createBrowserRouter(
 		createRoutesFromElements(
 			<Route>
-				<Route path="/trigger" element={<Homepage />}></Route>
-				<Route path="/trigger/settings" element={<Settings />}></Route>
+				<Route path="/trigger" element={<Homepage theme={currentTheme} />} />
+				<Route path="/trigger/settings" element={<Settings theme={currentTheme}/>} />
 			</Route>,
 		),
 	);
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <MantineProvider theme={{
-        fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
-      }}>
-        <RouterProvider router={router} />
+      <MantineProvider theme={mantineTheme}>
+        <ThemeProvider theme={currentTheme}>
+          <ModalsProvider>
+              <RouterProvider router={router} />
+          </ModalsProvider>
+        </ThemeProvider>
       </MantineProvider>
-    </QueryClientProvider>
   )
 }
 

src/DataTable/DataTable.tsx

@@ -1,10 +1,5 @@
-import { ModalsProvider } from "@mantine/modals";
 import { MantineReactTable, useMantineReactTable } from "mantine-react-table"
 import { memo } from "react";
-// import '../dataTableStyles.css';
-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
 
 export function DataTableComponent({
     columns,
@@ -88,9 +83,7 @@ export function DataTableComponent({
 		// },
 	});
 	return (
-			<ModalsProvider>
 				<MantineReactTable table={table} />
-			</ModalsProvider>
 	);
 }
 

src/DataTable/columns/ApplicationColumns.tsx

@@ -1,4 +1,4 @@
-import { MRT_ColumnDef } from "mantine-react-table";
+import type { MRT_ColumnDef } from "mantine-react-table";
 import { useMemo } from "react";
 
 export default function ApplicationColumns() {
@@ -8,9 +8,8 @@ export default function ApplicationColumns() {
 				accessorFn: (row) => {
 					if (row.id) {
 						return `${row.id}`;
-					} else {
-						return "";
 					}
+						return "";
 				},
 				enableEditing: false,
 				id: "id",
@@ -27,9 +26,8 @@ export default function ApplicationColumns() {
 				accessorFn: (row) => {
 					if (row.name) {
 						return `${row.name}`;
-					} else {
-						return "";
 					}
+						return "";
 				},
 				id: "name",
 				header: "Name",
@@ -44,9 +42,8 @@ export default function ApplicationColumns() {
 				accessorFn: (row) => {
 					if (row.url) {
 						return `${row.url}`;
-					} else {
-						return "";
 					}
+						return "";
 				},
 				id: "url",
 				header: "Url",
@@ -61,9 +58,8 @@ export default function ApplicationColumns() {
 				accessorFn: (row) => {
 					if (row.icon) {
 						return `${row.icon}`;
-					} else {
-						return "";
 					}
+						return "";
 				},
 				id: "icon",
 				header: "Icon",
@@ -78,9 +74,8 @@ export default function ApplicationColumns() {
 				accessorFn: (row) => {
 					if (row.urlbase) {
 						return `${row.urlbase}`;
-					} else {
-						return "";
 					}
+						return "";
 				},
 				id: "urlbase",
 				header: "Base Url",
@@ -95,9 +90,8 @@ export default function ApplicationColumns() {
 				accessorFn: (row) => {
 					if (row.category) {
 						return `${row.category}`;
-					} else {
-						return "";
 					}
+						return "";
 				},
 				id: "category",
 				header: "Category",

src/DataTable/columns/BookmarkColumns.tsx

@@ -1,4 +1,4 @@
-import { MRT_ColumnDef } from "mantine-react-table";
+import type { MRT_ColumnDef } from "mantine-react-table";
 import { useMemo } from "react";
 
 export default function ApplicationColumns(groups: any, groupData: any) {
@@ -8,9 +8,8 @@ export default function ApplicationColumns(groups: any, groupData: any) {
 				accessorFn: (row) => {
 					if (row.id) {
 						return `${row.id}`;
-					} else {
-						return "";
 					}
+						return "";
 				},
 				enableEditing: false,
 				id: "id",
@@ -27,9 +26,8 @@ export default function ApplicationColumns(groups: any, groupData: any) {
 				accessorFn: (row) => {
 					if (row.name) {
 						return `${row.name}`;
-					} else {
-						return "";
 					}
+						return "";
 				},
 				id: "name",
 				header: "Name",
@@ -44,9 +42,8 @@ export default function ApplicationColumns(groups: any, groupData: any) {
 				accessorFn: (row) => {
 					if (row.url) {
 						return `${row.url}`;
-					} else {
-						return "";
 					}
+						return "";
 				},
 				id: "url",
 				header: "Url",
@@ -62,9 +59,8 @@ export default function ApplicationColumns(groups: any, groupData: any) {
 					const index: number = row.category;
 					if (index !== null && index !== undefined) {
 						return `${index}`;
-					} else {
-						return "N/A";
 					}
+						return "N/A";
 				},
 				id: "category",
 				header: "Category",

src/DataTable/columns/CategoryColumns.tsx

@@ -0,0 +1,67 @@
+import type { MRT_ColumnDef } from "mantine-react-table";
+import { useMemo } from "react";
+
+export default function CategoryColumns() {
+    const columns = useMemo<MRT_ColumnDef<any>[]>(
+		() => [
+			{
+				accessorFn: (row) => {
+					if (row.id) {
+						return `${row.id}`;
+					}
+						return "";
+				},
+				enableEditing: false,
+				id: "id",
+				header: "ID",
+				size: 50,
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+            {
+				accessorFn: (row) => {
+					if (row.category_name) {
+						return `${row.category_name}`;
+					}
+						return "";
+				},
+				id: "category_name",
+				header: "Name",
+				size: 50,
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+            {
+				accessorFn: (row) => {
+					if (row.category_index > -1) {
+						return `${row.category_index}`;
+					}
+						return "";
+				},
+				enableEditing: false,
+				id: "category_index",
+				header: "Index",
+				size: 50,
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+            {
+				accessorFn: (row) => {
+					if (row.column_filter) {
+						return `${row.column_filter}`;
+					}
+						return "";
+				},
+				id: "column_filter",
+				header: "Filter Name",
+				size: 50,
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+		],
+		[],
+	);
+
+    return columns;
+}
+

src/DataTable/columns/MessagesColumns.tsx

@@ -1,4 +1,4 @@
-import { MRT_ColumnDef } from "mantine-react-table";
+import type { MRT_ColumnDef } from "mantine-react-table";
 import { useMemo } from "react";
 
 export default function MessagesColumns() {
@@ -8,9 +8,8 @@ export default function MessagesColumns() {
 				accessorFn: (row) => {
 					if (row.id) {
 						return `${row.id}`;
-					} else {
-						return "";
 					}
+						return "";
 				},
 				enableEditing: false,
 				id: "id",
@@ -27,9 +26,8 @@ export default function MessagesColumns() {
 				accessorFn: (row) => {
 					if (row.message) {
 						return `${row.message}`;
-					} else {
-						return "";
 					}
+						return "";
 				},
 				id: "message",
 				header: "Message",
@@ -44,9 +42,8 @@ export default function MessagesColumns() {
 				accessorFn: (row) => {
 					if (row.easteregg) {
 						return `${row.easteregg}`;
-					} else {
-						return "";
 					}
+						return "";
 				},
 				id: "easteregg",
 				header: "Easter Egg?",

src/DataTable/columns/PersonalizationColumns.tsx

@@ -1,4 +1,4 @@
-import { MRT_ColumnDef } from "mantine-react-table";
+import type { MRT_ColumnDef } from "mantine-react-table";
 import { useMemo } from "react";
 
 export default function PersonalizationColumns() {
@@ -8,9 +8,8 @@ export default function PersonalizationColumns() {
                 accessorFn: (row: any) => {
                     if (row.firstname) {
                         return `${row.firstname}`;
-                    } else {
-                        return "";
                     }
+                        return "";
                 },
                 id: "firstname",
                 header: "First Name",
@@ -26,9 +25,8 @@ export default function PersonalizationColumns() {
                 accessorFn: (row: any) => {
                     if (row.lastname) {
                         return `${row.lastname}`;
-                    } else {
-                        return "";
                     }
+                        return "";
                 },
                 id: "lastname",
                 header: "Last Name",
@@ -43,9 +41,8 @@ export default function PersonalizationColumns() {
                 accessorFn: (row: any) => {
                     if (row.email) {
                         return `${row.email}`;
-                    } else {
-                        return "";
                     }
+                        return "";
                 },
                 id: "email",
                 header: "Email",

src/DataTable/columns/SearchProviderColumns.tsx

@@ -0,0 +1,63 @@
+import type { MRT_ColumnDef } from "mantine-react-table";
+import { useMemo } from "react";
+
+export default function SearchProviderColumns() {
+    const columns = useMemo<MRT_ColumnDef<any>[]>(
+		() => [
+			{
+				accessorFn: (row) => {
+					if (row.id) {
+						return `${row.id}`;
+					}
+						return "";
+				},
+				enableEditing: false,
+				id: "id",
+				header: "ID",
+				size: 50,
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.name) {
+						return `${row.name}`;
+					}
+						return "";
+				},
+				id: "name",
+				header: "Name",
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.url) {
+						return `${row.url}`;
+					}
+						return "";
+				},
+				id: "url",
+				header: "Url",
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.prefix) {
+						return `${row.prefix}`;
+					}
+						return "";
+				},
+				id: "prefix",
+				header: "Prefix",
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+		],
+		[],
+	);
+
+    return columns;
+}
+

src/components/ThemeProvider.tsx

@@ -0,0 +1,11 @@
+import { Box } from '@mantine/core';
+
+export default function ThemeProvider({ theme, children }: { theme: any, children: React.ReactNode }) {
+    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,
+    }}>{children}</Box>;
+}

src/index.css

@@ -1,78 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap');
-
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-#settings-container {
-  justify-content: left;
-}
-
-#settings-nav {
-  width: 25vw;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap');

src/main.tsx

@@ -1,10 +1,22 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
-import './index.css'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
+      staleTime: 1000 * 60 * 1, // 1 min
+    },
+  },
+});
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
+  
   <React.StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </React.StrictMode>,
 )

src/pages/homepage/Homepage.tsx

@@ -6,16 +6,14 @@ import Header from './components/Header';
 import Applications from './components/Applications';
 import Bookmarks from './components/Bookmarks';
 import SettingsButton from './components/SettingsButton';
-import { useAtom } from 'jotai';
-import { HomepageFilters } from '../../contexts/HomepageFilters';
 import { useEffect, useState } from 'react';
+import '../../index.css';
+import { useLocalStorage } from '@mantine/hooks';
 
-
-export default function Homepage() {
+export default function Homepage({theme}:any) {
 	const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' });
 	const [displayedGreeting, setDisplayedGreeting] = useState('');
-	const [homepageFilter, setHomepageFilter] = useAtom<any>(HomepageFilters);
-	
+	const [contentType, setContentType] = useLocalStorage<any>({ key: 'contenttype', defaultValue: 'All' });
 	function date() {
 		const currentDate = new Date();
 		const dateOptions: Intl.DateTimeFormatOptions = {
@@ -27,7 +25,6 @@ export default function Homepage() {
 		const date = currentDate.toLocaleDateString('en-GB', dateOptions);
 		return date;
 	}
-
 	function greet(list: any) {
 		const currentTime = new Date();
 		const greet = Math.floor(currentTime.getHours() / 6);
@@ -54,12 +51,12 @@ export default function Homepage() {
 	}, [isFetching]);
 
 	return (
-		<Stack className={stackClasses.containerStack}>
+		<Stack gap={0} className={stackClasses.containerStack} justify='center'>
 			<Search />
 			<Header date={date()} greet={displayedGreeting} />
-			<Applications />
-			<Bookmarks />
-			<SettingsButton />
+			<Applications contentType={contentType}/>
+			<Bookmarks contentType={contentType}/>
+			<SettingsButton theme={theme} contentType={contentType} setContentType={setContentType}/>
 		</Stack>
 	);
 }

src/pages/homepage/components/Applications.tsx

@@ -4,16 +4,14 @@ import {useQueryAPI} from '../../../hooks/useAPI';
 import texts from '../../../styles/Text.module.css';
 import AppItem from './AppItem';
 
-function Applications() {
+function Applications({contentType}: any) {
 	const { data, isFetching } = useQueryAPI({ endpoint: 'api/apps' });
 	const [applications, setApplications] = useState([]);
-	const contentType = localStorage.getItem('contenttype');
 	useEffect(() => {
 		if (!isFetching) {
 			setApplications(data);
 		}
 	}, [isFetching]);
-
 	return (
 		<Stack id='apps' style={{ gap: 0 }}>
 			<Text className={texts.sectionTitle} classNames={texts}>Applications</Text>

src/pages/homepage/components/Bookmarks.tsx

@@ -4,7 +4,7 @@ import {useQueryAPI} from '../../../hooks/useAPI';
 import texts from '../../../styles/Text.module.css';
 import LinkGroups from './LinkGroups';
 
-function Links() {
+function Links({contentType}: any) {
 	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
 		endpoint: 'api/links',
 	});
@@ -38,8 +38,8 @@ function Links() {
 					>
 						{categories.map((category: any) => {
 							if (
-								category.column_filter === localStorage.getItem('contenttype') ||
-								localStorage.getItem('contenttype') === 'All'
+								category.column_filter === contentType ||
+								contentType === 'All'
 							) {
 								return (
 									<LinkGroups

src/pages/homepage/components/Header.tsx

@@ -44,6 +44,7 @@ function Header({ greet, date }: any) {
 					float: 'right',
 					justifyContent: 'right',
 					width: 'auto',
+					gap: 0,
 				}}
 			>
 				<Text className={textClasses.dateTime} classNames={textClasses} style={{ width: 'max-content' }}>

src/pages/homepage/components/Search.tsx

@@ -53,10 +53,10 @@ export default function Search() {
 			}}
 		>
 			<TextInput
-				className={textInputClasses.keyword}
+				className={textInputClasses.search}
                 classNames={textInputClasses}
 				spellCheck='true'
-                label={providerLabel}
+                leftSection={providerLabel}
 				onChange={(item: any) => {
                     if(item.target.value.startsWith('/')) {
                         setProviderLabel(providers?.find((p: any) => p.prefix === item.target.value.split(' ')[0]).name);

src/pages/homepage/components/SettingsButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Menu, NavLink, Select, Stack } from '@mantine/core';
+import { Button, Menu, NavLink, Select } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { FiMenu, FiMonitor } from 'react-icons/fi';
 import {useQueryAPI} from '../../../hooks/useAPI';
@@ -6,25 +6,14 @@ import button from '../../../styles/Button.module.css';
 import menu from '../../../styles/Menu.module.css';
 import navLink from '../../../styles/NavLink.module.css';
 import selectClasses from '../../../styles/Select.module.css';
-import { useAtom } from 'jotai';
-import { HomepageFilters } from '../../../contexts/HomepageFilters';
 
-function SettingsButton() {
+function SettingsButton({contentType, setContentType, theme}: any) {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
 	const [categories, setCategories] = useState([{value: 'All', label: 'All'}]);
-	const [homepageFilter, setHomepageFilter] = useAtom<object>(HomepageFilters);
-	const classNames = {
-		root: navLink.root,
-		body: navLink.body,
-		section: navLink.section,
-		label: navLink.label,
-		description: navLink.description,
-		chevron: navLink.chevron,
-	};
 	
 	useEffect(() => {
 		if(data) {
-			let list: [any] = data.map((category: any) => {return {value: category.category, label: category.category}}) || [];
+			const list: [any] = data.map((category: any) => {return {value: category.category, label: category.category}}) || [];
 			list.unshift({value: 'All', label: 'All'});
 			setCategories(list);
 		}
@@ -39,18 +28,10 @@ function SettingsButton() {
 	}
 	return (
 		<Menu
-			withinPortal
+			withinPortal={false}
 			withArrow
 			shadow='md'
 			position='top'
-			classNames={{
-				dropdown: menu.dropdown
-			}}
-			styles={{
-				dropdown: {
-					backgroundColor: 'var(--color-background)',
-				},
-			}}
 		>
 			<Menu.Target>
 				<Button className={button.settingsButton} classNames={button}>
@@ -58,40 +39,36 @@ function SettingsButton() {
 				</Button>
 			</Menu.Target>
 			<Menu.Dropdown
-				style={{
-					position: 'absolute',
-				}}
+				className={menu.dropdown}
 			>
 				<NavLink
 					label='Settings'
 					component='a'
 					href='/trigger/settings'
-					classNames={classNames}
+					className={navLink.defaultNavLink}
+					classNames={navLink}
 				/>
-				<NavLink label='Quick Actions' classNames={classNames}>
+				<NavLink label='Quick Actions'
+					className={navLink.defaultNavLink}
+					classNames={navLink}>
 					<NavLink
 						label='Wake Dakota'
 						leftSection={<FiMonitor />}
 						onClick={() => runWakeCommand()}
-						classNames={classNames}
+						className={navLink.defaultNavLink}
+						classNames={navLink}
 					/>
 				</NavLink>
 				<Select
 					label='Homepage Filter'
 					data={categories ?? []}
-					defaultValue={localStorage.getItem('contenttype')}
+					defaultValue={contentType}
 					withCheckIcon={false}
 					onChange={(data: any) => {
-						localStorage.setItem('contenttype', data || 'All');
-						setHomepageFilter({value: data, label: data});
+						setContentType(data)
 					}}
-					className={selectClasses.filterSelect}
 					classNames={selectClasses}
-					styles={{
-						label: {
-							color: 'var(--color-text-pri)',
-						},
-					}}
+					comboboxProps={{ withinPortal: false }}
 				/>
 			</Menu.Dropdown>
 		</Menu>

src/pages/settings/Settings.tsx

@@ -6,31 +6,34 @@ import { actionIconClasses } 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";
 
-function Settings() {
+function Settings({theme}:any) {
 	return (
-        <Stack h={'100vh'} px={'2rem'}>
+        <Stack h={'100vh'} px={'2rem'} bg={'var(--color-background)'}>
             <Group gap={0} >
                 <ActionIcon className={actionIconClasses.backButton} classNames={actionIconClasses} component="a" href="/trigger"><FiArrowLeftCircle/></ActionIcon>
                 <h1>Settings</h1>
             </Group>
-            <Tabs keepMounted orientation="vertical" defaultValue={'personalization'} className={tabClasses.settingsTabs} classNames={tabClasses}>
+            <Tabs 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="bookmarksCategories">Bookmark Categories</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"><Personalization/></Tabs.Panel>
                 <Tabs.Panel value="messages"><Messages/></Tabs.Panel>
                 <Tabs.Panel value="applications"><Applications/></Tabs.Panel>
-                <Tabs.Panel value="bookmarksCategories">Bookmark Categories</Tabs.Panel>
                 <Tabs.Panel value="bookmarks"><Bookmarks/></Tabs.Panel>
-                <Tabs.Panel value="themes">Themes</Tabs.Panel>
-                <Tabs.Panel value="providers">Search Providers</Tabs.Panel>
+                <Tabs.Panel value="bookmarksCategories"><Categories/></Tabs.Panel>
+                <Tabs.Panel value="themes"><Themes/></Tabs.Panel>
+                <Tabs.Panel value="providers"><SearchProviders/></Tabs.Panel>
             </Tabs>
         </Stack>
 	);

src/pages/settings/components/Applications.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import { toast } from "react-toastify";
-import { MRT_TableOptions } from "mantine-react-table";
+import type { MRT_TableOptions } from "mantine-react-table";
 import ApplicationColumns from "../../../DataTable/columns/ApplicationColumns";
 import { Stack } from "@mantine/core";
 const ApplicationSettings = () => {

src/pages/settings/components/Bookmarks.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import { toast } from "react-toastify";
-import { MRT_TableOptions } from "mantine-react-table";
+import type { MRT_TableOptions } from "mantine-react-table";
 import { Stack } from "@mantine/core";
 import BookmarkColumns from "../../../DataTable/columns/BookmarkColumns";
 const BookmarkSettings = () => {
@@ -30,7 +30,7 @@ const BookmarkSettings = () => {
 
 	useEffect(() => {
 		if (groupDataisFetched) {
-			let groupList = groupData.map((category: any) => {
+			const groupList = groupData.map((category: any) => {
 				return category.category_name;
 			});
 			setGroups(groupList);

src/pages/settings/components/Categories.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import {useMutationAPI, 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 } from "@mantine/core";
+const CategorySettings = () => {
+    const endpoint = "api/categories";
+	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
+		endpoint: endpoint,
+	});
+	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>
+            <h2>Categories</h2>
+            <DataTable
+                tableName="Categories"
+                columns={CategoryColumns()}
+                tableData={categoryData}
+                isFetching={isFetching}
+                isLoading={isLoading}
+                onCreatingRowSave={handleCreateRow}
+                onEditingRowSave={handleEditRow}
+            />
+        </Stack>
+    )
+};
+export default CategorySettings;

src/pages/settings/components/Messages.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import { toast } from "react-toastify";
-import { MRT_TableOptions } from "mantine-react-table";
+import type { MRT_TableOptions } from "mantine-react-table";
 import MessagesColumns from "../../../DataTable/columns/MessagesColumns";
 import { Stack } from "@mantine/core";
 const MessageSettings = () => {

src/pages/settings/components/Personalization.tsx

@@ -3,7 +3,7 @@ import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import PersonalizationColumns from "../../../DataTable/columns/PersonalizationColumns";
 import { toast } from "react-toastify";
-import { MRT_TableOptions } from "mantine-react-table";
+import type { MRT_TableOptions } from "mantine-react-table";
 const PersonalizationSettings = () => {
     const endpoint = "api/personaldata";
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({

src/pages/settings/components/SearchProviders.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import {useMutationAPI, 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 } from "@mantine/core";
+const SearchProviderSettings = () => {
+    const endpoint = "api/providers";
+	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
+		endpoint: endpoint,
+	});
+	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>
+            <h2>Search Providers</h2>
+            <DataTable
+                tableName="Categories"
+                columns={SearchProviderColumns()}
+                tableData={providerData}
+                isFetching={isFetching}
+                isLoading={isLoading}
+                onCreatingRowSave={handleCreateRow}
+                onEditingRowSave={handleEditRow}
+            />
+        </Stack>
+    )
+};
+export default SearchProviderSettings;

src/pages/settings/components/Themes.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+import { useQueryAPI } from "../../../hooks/useAPI";
+import { ActionIcon, Button, ColorPicker, ColorSwatch, Group, Modal, SimpleGrid, Stack } from "@mantine/core";
+import AppItem from "../../homepage/components/AppItem";
+import { FiEdit } from "react-icons/fi";
+import { useDisclosure, useLocalStorage } from "@mantine/hooks";
+import '@mantine/core/styles/ModalBase.css';
+import '@mantine/core/styles/Modal.css';
+function ThemesSettings() {
+    const [opened, { open, close }] = useDisclosure(false);
+    const [value, setValue] = useLocalStorage<any>({ key: 'theme', defaultValue: {} });
+	const { data, isFetched } = useQueryAPI({
+		endpoint: "api/themes",
+	});
+	const [themesList, setThemesList] = useState([]);
+    const [selectedTheme, setSelectedTheme] = useState<any>({});
+	useEffect(() => {
+		if (isFetched) {
+			setThemesList(data);
+		}
+	}, [isFetched]);
+
+    const handleOpen = (theme: any) => {
+        setSelectedTheme(theme);
+        open();
+    }
+
+	return (
+        <>
+            <Modal.Root opened={opened} onClose={close}>
+                <Modal.Overlay />
+                <Modal.Content>
+                <Modal.Header>
+                    <Modal.Title>Edit Theme</Modal.Title>
+                    <Modal.CloseButton />
+                </Modal.Header>
+                    <Modal.Body>
+                        <Stack style={{ backgroundColor: selectedTheme.colorbackground, borderRadius: '10px' }}>
+                            <Group justify="center" style={{ color: selectedTheme.colortextpri }}>{selectedTheme.name}</Group>
+                            <AppItem
+								name={'Example App'}
+								url={'https://example.com'}
+								icon={'mdi:apps'}
+								category={'Default'}
+							/>
+                        </Stack>
+                    </Modal.Body>
+                </Modal.Content>
+            </Modal.Root>
+            <Stack h={'100%'} w={'100%'}>
+                <h2>Themes</h2>
+                <SimpleGrid cols={5}>
+                    {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">
+                                <Group className="theme-palette">
+                                    <ColorSwatch color={theme.colorbackground} />
+                                    <ColorSwatch color={theme.colorsearchbackground} />
+                                    <ColorSwatch color={theme.colortextpri} />
+                                    <ColorSwatch color={theme.colortextacc} />
+                                    <ColorSwatch color={theme.colorborder} />
+                                </Group>
+                                <ActionIcon
+                                    onClick={() => handleOpen(theme)}
+                                ><FiEdit/></ActionIcon>
+                            </Group>
+                        </Stack>
+                    ))}
+                </SimpleGrid>
+            </Stack>
+        </>
+	);
+}
+export default ThemesSettings;

src/styles/Button.module.css

@@ -12,6 +12,11 @@
         border-radius: 100%;
         border: solid 2px var(--color-text-pri);
         cursor: pointer;
+        
+    }
+    &:hover {
+        background-color: var(--color-background) !important;
+        color: var(--color-text-pri) !important;
     }
 }
 

src/styles/Menu.module.css

@@ -1,7 +1,9 @@
-.settingsButton {
-    .dropdown {
-        background-color: white;
-        border: solid 2px var(--color-border);
-        border-color: var(--color-border);
+.dropdown {
+    color: var(--color-text-pri);
+}
+.item {
+    &:hover {
+        background-color: var(--color-text-pri);
+        color: var(--color-background)
     }
 }

src/styles/NavLink.module.css

@@ -1,22 +1,22 @@
-.root {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-left: 0px;
-    padding-right: 0px;
-    border-radius: 4px;
-    color: var(--color-text-pri);
-    background-color: var(--color-background);
-    cursor: pointer;
-}
-
-.root:hover {
-    border-radius: 4px;
-    color: var(--color-background);
-    background-color: var(--color-text-acc);
-}
-
-.chevron {
-    width: 10px !important;
-    height: 10px !important;
+.defaultNavLink {
+    &.root {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-radius: 4px;
+        color: var(--color-text-pri);
+        background-color: var(--color-background);
+        cursor: pointer;
+    }
+    
+    &.root:hover {
+        border-radius: 4px;
+        color: var(--color-background);
+        background-color: var(--color-text-acc);
+    }
+    
+    &.chevron {
+        width: 10px !important;
+        height: 10px !important;
+    }
 }

src/styles/Select.module.css

@@ -1,5 +1,34 @@
-.filterSelect {
-    .section {
-        display: none;
+.label {
+    margin-bottom: 5px !important;
+    color: light-dark(var(--mantine-color-appGray-8), white) !important;
+    font-size: 14px !important;
+}
+.input {
+    border-color: light-dark(var(--mantine-color-appGray-2), white) !important;
+    background-color: var(--color-background);
+    color: var(--color-text-pri) !important;
+    &:focus {
+        border-color: var(--color-text-pri) !important;
+    }
+}
+
+.options {
+    .option {
+        color: var(--color-text-pri) !important;
+        font-size: 14px !important;
+        /* applies styles to selected item */
+        &[data-checked] {
+            background-color: var(--color-text-pri) !important;
+            &, &:hover {
+                background-color: var(--color-text-acc) !important;
+                color: white !important;
+            }
+        }
+
+        /* applies styles to hovered item (with mouse or keyboard) */
+        &:hover {
+            background-color: var(--color-text-acc) !important;
+            color: var(--color-text-pri) !important;
+        }
     }
 }

src/styles/Stack.module.css

@@ -8,8 +8,8 @@
 	justify-items: stretch;
 	margin-left: auto;
 	margin-right: auto;
-	margin-top: 2vh;
 	width: 75%;
+	height: auto;
 }
 
 .appItemBox {

src/styles/Text.module.css

@@ -5,7 +5,7 @@
         margin-right: .5em;
         padding: 0;
         text-align: left;
-        font-size: 4em;
+        font-size: 3.5em;
         font-weight: 400;
         width: max-content;
         color: var(--color-text-acc);
@@ -16,8 +16,7 @@
     &.root {
         display: flex;
         font-family: -apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important;	
-        font-size: 2em;
-        height: 30px;
+        font-size: 28px;
         margin: 0;
         padding: 0;
         margin-right: 1em;
@@ -44,9 +43,9 @@
 .appName {
     &.root {
         font-weight: 400;
-        font-size: 0.8em;
+        font-size: 11px;
         font-style: normal;
-        color: light-dark(blue, black);
+        color: var(--color-text-pri);
         font-family: 'Jost', sans-serif;
         margin: 0;
     }
@@ -54,7 +53,7 @@
 
 .appUrl {
     &.root {
-        font-size: 0.8em;
+        font-size: 11px;
         font-weight: 400;
         font-style: italic;
         text-transform: uppercase;
@@ -65,7 +64,7 @@
 
 .linkCategory {
     &.root {
-        font-size: 1.1em;
+        font-size: 14px;
         font-weight: 400;
         height: 10px;
         color: var(--color-text-acc);
@@ -78,7 +77,7 @@
 .linkItem {
     &.root {
         display: block;
-        font-size: 1em;
+        font-size: 14px;
         line-height: 2;
         color: var(--color-text-pri);
         &:hover {

src/styles/TextInput.module.css

@@ -1,69 +1,51 @@
-.keyword{
-	.input {
-		border: 0;
-		border-bottom: thin solid var(--color-border);
-		background-color: transparent;
-		color: var(--color-text-pri);
-		font-style: italic;
-		font-size: 0.8em;
-		height: 3.5em;
-		transition: all 0.4s ease;
-		width: 50%;
-		padding-left: 1em;
-		padding-right: 1em;
-		text-align: center;
-		&:focus {
-			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;
+.search{
+	&.root {
+		.wrapper {
+			display: flex;
+			justify-content: center;
+			.input {
+				border: 0;
+				border-bottom: thin solid var(--color-border);
+				background-color: transparent;
+				color: var(--color-text-pri);
+				font-style: italic;
+				font-size: 0.8em;
+				height: 3.5em;
+				transition: all 0.4s ease;
+				width: 50%;
+				padding-left: 1em;
+				padding-right: 1em;
+				text-align: center;
+			}
+			.section{
+				color: var(--color-border);
+				width: auto;
+				padding-left: .5rem;
+				display: none;
+			}
+		}
+		.wrapper:focus-within {
+			.input {
+				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;
+			}
+			.section{
+				color: var(--color-border);
+				width: auto;
+				padding-left: .5rem;
+				display: flex;
+			}
 		}
 	}
-	.label{
-		color: var(--color-border);
-		display: block;
-		position: relative;
-		font-style: normal;
-		font-weight: 200;
-		font-size: 1.2em;
-		letter-spacing: .2em;
-		opacity: 1;
-		padding-left: 1em;
-		padding-right: 1em;
-		text-align: center;
-		width: 100%;
-		top: 28%;
-	}
 }
-
-.keyword:placeholder-shown + .label{
-	visibility: hidden;
-	z-index: 1;
-	position: absolute;
-	text-align: center;
-}
-.keyword:focus:not(:placeholder-shown) + .label{
-	visibility: visible;
-	position: absolute;
-	z-index: 1;
-	opacity: 55%;
-	width: 100%;
-	top: 28%;
-	left: 0;
-	text-align: left;
-}
-.keyword:not(:placeholder-shown) + .label{
-	visibility: hidden;
-	z-index: 1;
-	position: absolute;
-	text-align: center;
-}