Table updates

src/components/DataTable/DataTable.tsx

@@ -66,28 +66,58 @@ export function DataTableComponent({
 		editDisplayMode: 'row',
 		enableBottomToolbar: false,
 		enableToolbarInternalActions: false,
+		positionGlobalFilter: 'right',
 		onCreatingRowSave: handleCreateRow,
 		onEditingRowSave: handleEditRow,
 		getRowId: (row: any) => row.id,
 		initialState: {
-			showProgressBars: isFetching,
 			showLoadingOverlay: isLoading,
 			isLoading: isLoading,
 		},
 		state: {
-			showProgressBars: isFetching,
-			showLoadingOverlay: isLoading,
+			showLoadingOverlay: isFetching,
 			isLoading: isLoading,
+			columnVisibility: { id: false, categoryIndex: false },
+			showGlobalFilter: tableName !== 'Personalization',
 		},
+		mantineSearchTextInputProps: {},
 		mantinePaperProps: {
 			className: 'root',
 			style: {
-				height: '75vh',
-				overflow: 'scroll',
+				border: 'none',
+				boxShadow: 'none',
+			},
+		},
+		mantineTableContainerProps: {
+			style: {
+				maxHeight: '700px',
+				borderRadius: '20px',
+				backgroundColor: theme.searchColor,
+				backdropFilter: theme.backgroundImage === 'none' ? undefined : 'blur(20px)',
+				fontSize: '18px',
+			},
+		},
+		mantineTableHeadProps: {
+			style: {
+				fontSize: '18px',
+				backgroundColor: theme.primaryColor,
+				color: theme.accentColor,
+				opacity: 1,
+			},
+		},
+		mantineTableBodyRowProps: {
+			style: {
+				borderBottom: 'none',
+			},
+		},
+		displayColumnDefOptions: {
+			'mrt-row-actions': {
+				header: '',
+				minSize: 40,
 			},
 		},
 		renderRowActions: ({ row, table }) => (
-			<Flex gap='md'>
+			<Flex gap='xs'>
 				<ActionIcon
 					className={actionIconClasses.editButton}
 					classNames={actionIconClasses}

src/dataTableStyles.css

@@ -1,16 +1,16 @@
 .root {
-	--mrt-base-background-color: var(--color-background);
-	--mrt-striped-row-background-color: var(--color-background);
-	--mrt-row-hover-background-color: var(--color-background);
-	--mrt-striped-row-hover-background-color: var(--color-background);
-	--mrt-selected-row-background-color: var(--color-text-pri);
-	--mrt-selected-row-hover-background-color: var(--color-background);
-	--mrt-pinned-row-background-color: var(--color-background);
-	--mrt-pinned-row-hover-background-color: var(--color-background);
-	--mrt-pinned-column-background-color: var(--color-background);
-	--mrt-dragging-hovered-border-color: var(--color-background);
-	--mrt-dragging-drag-border-color: var(--color-background);
-	--mrt-resize-column-border-color: var(--color-background);
+	--mrt-base-background-color: transparent;
+	--mrt-striped-row-background-color: transparent;
+	--mrt-row-hover-background-color: transparent;
+	--mrt-striped-row-hover-background-color: transparent;
+	--mrt-selected-row-background-color: transparent;
+	--mrt-selected-row-hover-background-color: transparent;
+	--mrt-pinned-row-background-color: transparent;
+	--mrt-pinned-row-hover-background-color: transparent;
+	--mrt-pinned-column-background-color: transparent;
+	--mrt-dragging-hovered-border-color: transparent;
+	--mrt-dragging-drag-border-color: transparent;
+	--mrt-resize-column-border-color: transparent;
 	color: var(--color-text-pri) !important;
 }
 
@@ -29,4 +29,4 @@
 .mantine-Select-options {
 	color: black !important;
 	background-color: white !important;
-}
+}

src/hooks/useAPI.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCommonHooks } from 'hooks';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 const url = `${import.meta.env.PROD ? import.meta.env.VITE_DOMAIN_PROD : import.meta.env.VITE_DOMAIN_DEV}/${import.meta.env.VITE_BASE_URL}`;
 
@@ -34,6 +34,7 @@ export function useQueryAPI({ endpoint }: { endpoint: string }) {
 
 export function useMutationAPI() {
 	const { notify } = useCommonHooks();
+	const [message, setMessage] = useState('');
 	const callEndpoint = async (
 		method: string,
 		endpoint: string,
@@ -52,7 +53,8 @@ export function useMutationAPI() {
 			},
 			body: JSON.stringify(body),
 		};
-		notify('Sending...');
+		setMessage('Sending...');
+		notify(message);
 		const response = await fetch(`${url}/${endpoint}`, options);
 		if (!response.ok) {
 			notify('Error!');
@@ -91,7 +93,7 @@ export function useMutationAPI() {
 
 			throw new Error(errorResponse);
 		}
-		notify('Success!');
+		setMessage('Success!');
 		return await response.json();
 	};
 

src/pages/homepage/Homepage.tsx

@@ -61,7 +61,7 @@ export function Homepage() {
 	useEffect(() => {
 		if (messages) {
 			setDisplayedGreeting(() => {
-				if (Math.floor(Math.random() * 100) < 10 || messages.length === 0) {
+				if (Math.floor(Math.random() * 100) > 10 || messages.length === 0) {
 					switch (Math.floor(new Date().getHours() / 6)) {
 						case 0:
 							return `Good night, ${personal[0].firstName}!`;

src/pages/settings/components/Themes.tsx

@@ -93,6 +93,7 @@ function ThemesSettings() {
 							Themes
 						</Text>
 						<Button
+							mb={'-1.5em'}
 							className={buttonClasses.tableButton}
 							classNames={buttonClasses}
 							onClick={() => {

src/styles/Menu.module.css

@@ -1,6 +1,7 @@
 .dropdown {
     color: var(--color-text-pri);
     width: 500px !important;
+    border-color: var(--color-text-pri) !important;
 }
 .item {
     &:hover {

src/styles/Text.module.css

@@ -97,7 +97,6 @@
         font-size: 32px;
         font-weight: bold;
         padding-top: 1.5rem;
-        padding-bottom: 1.5rem;
         color: var(--color-text-pri);
     }
 }
@@ -107,7 +106,6 @@
         font-size: 24px;
         font-weight: bold;
         padding-top: 1.5rem;
-        padding-bottom: 1.5rem;
         color: var(--color-text-pri);
     }
 }