Refactored common hooks to reduce api calls

src/App.tsx

@@ -60,7 +60,6 @@ function App() {
 		fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
 	});
 	const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
-
 	return (
 		<>
 			{theme && (

src/components/DataTable/DataTable.tsx

@@ -1,3 +1,8 @@
+import { ActionIcon, Button, Flex, Text, Tooltip } from '@mantine/core';
+import { modals } from '@mantine/modals';
+import { IconEdit, IconTrash } from '@tabler/icons-react';
+import { ThemeProvider } from 'components/ThemeProvider';
+import { useCommonHooks, useMutationAPI } from 'hooks';
 import {
 	type MRT_Row,
 	type MRT_TableOptions,
@@ -5,13 +10,8 @@ import {
 	useMantineReactTable,
 } from 'mantine-react-table';
 import { memo } from 'react';
-import '../../../src/dataTableStyles.css';
-import { ActionIcon, Button, Flex, Text } from '@mantine/core';
-import { modals } from '@mantine/modals';
-import { IconEdit, IconTrash } from '@tabler/icons-react';
-import { useCommonHooks, useMutationAPI } from 'hooks';
 import { FiPlus } from 'react-icons/fi';
-import { actionIconClasses, buttonClasses } from 'styles';
+import { actionIconClasses, buttonClasses, textInputClasses } from 'styles';
 
 export function DataTableComponent({
 	tableName,
@@ -48,10 +48,18 @@ export function DataTableComponent({
 	};
 	const openDeleteConfirmModal = (row: MRT_Row<any>) =>
 		modals.openConfirmModal({
-			title: 'Are you sure you want to delete this user?',
+			title: (
-			children: <Text>Are you sure?</Text>,
+				<Text c={theme.primaryColor}>Are you sure you want to delete this user?</Text>
+			),
+			children: <Text c={theme.primaryColor}>Are you sure?</Text>,
 			labels: { confirm: 'Delete', cancel: 'Cancel' },
-			confirmProps: { color: 'red' },
+			confirmProps: {
+				style: {
+					backgroundColor: 'var(--mantine-color-red-6)',
+					color: 'var(--mantine-color-white)',
+				},
+			},
+			cancelProps: { color: 'green' },
 			onConfirm: () =>
 				deleteRow({ method: 'DELETE', endpoint: endpoint, body: row.original }),
 		});
@@ -80,12 +88,17 @@ export function DataTableComponent({
 			columnVisibility: { id: false, categoryIndex: false },
 			showGlobalFilter: tableName !== 'Personalization',
 		},
-		mantineSearchTextInputProps: {},
+		mantineSearchTextInputProps: {
+			classNames: textInputClasses,
+			className: textInputClasses.default,
+		},
 		mantinePaperProps: {
-			className: 'root',
 			style: {
 				border: 'none',
 				boxShadow: 'none',
+				'--mrt-base-background-color': 'transparent',
+				'--mrt-row-hover-background-color': theme.searchColor,
+				color: 'var(--color-text-pri)',
 			},
 		},
 		mantineTableContainerProps: {
@@ -107,9 +120,46 @@ export function DataTableComponent({
 		},
 		mantineTableBodyRowProps: {
 			style: {
+				fontSize: '18px',
 				borderBottom: 'none',
 			},
 		},
+		mantineEditTextInputProps: {
+			styles: {
+				wrapper: {
+					display: 'flex',
+				},
+				input: {
+					width: '100%',
+					border: 'none',
+					backgroundColor: `${theme.searchColor}`,
+					color: 'var(--color-text-pri)',
+					fontSize: '18px',
+				},
+			},
+		},
+		mantineFilterTextInputProps: {
+			classNames: textInputClasses,
+			className: textInputClasses.default,
+		},
+		mantineEditSelectProps: {
+			styles: {
+				input: {
+					color: theme.primaryColor,
+					fontSize: '18px',
+					backgroundColor: theme.searchColor,
+					border: 'none',
+				},
+				option: {
+					color: theme.primaryColor,
+					fontSize: '18px',
+					backgroundColor: 'transparent',
+				},
+				dropdown: {
+					backgroundColor: `${theme.backgroundColor} !important`,
+				},
+			},
+		},
 		displayColumnDefOptions: {
 			'mrt-row-actions': {
 				header: '',
@@ -118,6 +168,11 @@ export function DataTableComponent({
 		},
 		renderRowActions: ({ row, table }) => (
 			<Flex gap='xs'>
+				<Tooltip
+					color={theme.primaryColor}
+					bd={`solid 1px ${theme.borderColor}`}
+					label={'Edit'}
+				>
 					<ActionIcon
 						className={actionIconClasses.editButton}
 						classNames={actionIconClasses}
@@ -125,9 +180,16 @@ export function DataTableComponent({
 					>
 						<IconEdit />
 					</ActionIcon>
+				</Tooltip>
+				<Tooltip
+					color={theme.primaryColor}
+					bd={`solid 1px ${theme.borderColor}`}
+					label={'Delete'}
+				>
 					<ActionIcon color='red' onClick={() => openDeleteConfirmModal(row)}>
 						<IconTrash />
 					</ActionIcon>
+				</Tooltip>
 			</Flex>
 		),
 		mantineCreateRowModalProps: {
@@ -158,7 +220,11 @@ export function DataTableComponent({
 			);
 		},
 	});
-	return <MantineReactTable table={table} />;
+	return (
+		<ThemeProvider theme={theme}>
+			<MantineReactTable table={table} />
+		</ThemeProvider>
+	);
 }
 
 export const DataTable = memo(DataTableComponent);

src/components/WeatherModal/WeatherModal.tsx

@@ -3,27 +3,36 @@ import { modalClasses } from 'styles';
 import SmallOutlookCard from './SmallOutlookCard';
 import SmallWeatherCard from './SmallWeatherCard';
 
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useQueryAPI, useWeatherAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import HourlyCard from './HourlyCard';
 
 export function WeatherModal({
 	current,
 	outlook,
+	points,
 	closeWeatherModal,
 	weatherModalOpened,
 }: any) {
+	const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
+		endpoint: 'api/personalData',
+	});
+	const [personalData, setPersonalData] = useState<any>([]);
+	const { data: hourly } = useWeatherAPI({
+		endpoint: 'hourly',
+		office: points?.properties.gridId,
+		x: points?.properties.gridX,
+		y: points?.properties.gridY,
+	});
+	useEffect(() => {
+		if (personal && personalIsFetched) {
+			setPersonalData(personal);
+		}
+	}, [personal, personalIsFetched]);
 	const [hourlyForecast, setHourlyForecast] = useState<any>([]);
 	const [sunset, setSunset] = useState(100);
-	const {
+	const { theme, isMobile, setProviderLabel, setSearchValue, setProviderURL } =
-		theme,
+		useCommonHooks();
-		isMobile,
-		hourly,
-		setProviderLabel,
-		setSearchValue,
-		setProviderURL,
-		personal,
-	} = useCommonHooks();
 	useEffect(() => {
 		if (hourly) {
 			setHourlyForecast(hourly.properties.periods.slice(1, 13));
@@ -75,7 +84,7 @@ export function WeatherModal({
 								Weather Forecast for{' '}
 							</Text>
 							<Text fz={18} fw={600}>
-								{personal?.[0].physicalAddress}
+								{personalData?.[0]?.physicalAddress}
 							</Text>
 						</Group>
 					</Modal.Title>

src/dataTableStyles.css

@@ -1,32 +0,0 @@
-.root {
-	--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;
-}
-
-.mrt-table-head-sort-button {
-	color: var(--color-text-pri) !important;
-}
-
-.mantine-Input-input {
-	color: var(--color-text-pri) !important;
-}
-
-.mantine-Select-input {
-	color: var(--color-text-pri) !important;
-}
-
-.mantine-Select-options {
-	color: black !important;
-	background-color: white !important;
-}

src/hooks/useCommonHooks.ts

@@ -1,67 +1,10 @@
 import { useLocalStorage } from '@mantine/hooks';
 import { appTheme } from 'contexts';
 import { useAtom } from 'jotai';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
-import { useOSMAPI, useQueryAPI, useWeatherAPI } from './useAPI';
 
 export function useCommonHooks() {
 	const isMobile = window.matchMedia('(max-width: 600px)').matches;
-	const {
-		data: apps,
-		isFetching: isAppsFetching,
-		isLoading: isAppsLoading,
-	} = useQueryAPI({ endpoint: 'api/apps' });
-	const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({
-		endpoint: 'api/themes',
-	});
-	const { data: backgrounds, isFetched: isBackgroundFetched } = useQueryAPI({
-		endpoint: 'api/backgrounds',
-	});
-	const {
-		data: messages,
-		isFetching: isMessagesFetching,
-		isFetched: isMessagesFetched,
-		isLoading: isMessagesLoading,
-	} = useQueryAPI({
-		endpoint: 'api/messages',
-	});
-	const {
-		data: linkData,
-		isFetched: linksIsFetched,
-		isFetching: linksIsFetching,
-		isLoading: linksIsLoading,
-	} = useQueryAPI({
-		endpoint: 'api/links',
-	});
-	const {
-		data: groupData,
-		isFetched: groupsIsFetched,
-		isFetching: groupsIsFetching,
-		isLoading: groupsIsLoading,
-	} = useQueryAPI({
-		endpoint: 'api/categories',
-	});
-	const {
-		data: personal,
-		isFetched: personalIsFetched,
-		isFetching: personalIsFetching,
-		isLoading: personalIsLoading,
-	} = useQueryAPI({
-		endpoint: 'api/personalData',
-	});
-	const {
-		data: providers,
-		isFetched: providersIsFetched,
-		isFetching: providersIsFetching,
-		isLoading: providersIsLoading,
-	} = useQueryAPI({ endpoint: 'api/providers' });
-	const {
-		data: wolClients,
-		isFetched: wolClientsIsFetched,
-		isFetching: wolClientsIsFetching,
-		isLoading: wolClientsIsLoading,
-	} = useQueryAPI({ endpoint: 'api/wolClients' });
-
 	const [theme, setTheme] = useAtom(appTheme);
 	const [themeName, setThemeName] = useLocalStorage<any>({
 		key: 'theme',
@@ -96,114 +39,10 @@ export function useCommonHooks() {
 		}
 	};
 
-	const [applicationData, setApplicationData] = useState<any>([]);
-
-	useEffect(() => {
-		if (apps && !isAppsFetching) {
-			setApplicationData(apps);
-		}
-	}, [apps, isAppsFetching]);
-
-	const [bookmarkData, setBookmarkData] = useState<any>([]);
-
-	const [groups, setGroups] = useState([]);
-
-	useEffect(() => {
-		if (linkData && linksIsFetched) {
-			setBookmarkData(linkData);
-		}
-	}, [linksIsFetched, linkData]);
-
-	useEffect(() => {
-		if (groupData && groupsIsFetched) {
-			const groupList = groupData?.map((category: any) => {
-				return category.categoryName;
-			});
-			setGroups(groupList);
-		}
-	}, [groupData, groupsIsFetched]);
-
-	const [messageData, setMessageData] = useState<any>([]);
-
-	useEffect(() => {
-		if (messages && isMessagesFetched) {
-			setMessageData(messages);
-		}
-	}, [messages, isMessagesFetched]);
-
-	const [personalData, setPersonalData] = useState<any>([]);
-
-	useEffect(() => {
-		if (personal && personalIsFetched) {
-			setPersonalData(personal);
-		}
-	}, [personal, personalIsFetched]);
-
-	const [providerData, setProviderData] = useState<any>([]);
-
-	useEffect(() => {
-		if (providers && providersIsFetched) {
-			setProviderData(providers);
-		}
-	}, [providers, providersIsFetched]);
-
-	const [wolClientsData, setWolClientsData] = useState<any>([]);
-
-	useEffect(() => {
-		if (wolClients && wolClientsIsFetched) {
-			setWolClientsData(wolClients);
-		}
-	}, [wolClients, wolClientsIsFetched]);
-
-	const { data: weatherMetadata } = useOSMAPI({ address: personal?.[0].physicalAddress });
-	const { data: points } = useWeatherAPI({
-		endpoint: 'points',
-		lat: weatherMetadata?.[0].lat || 0,
-		lon: weatherMetadata?.[0].lon || 0,
-	});
-	const { data: basicWeather } = useWeatherAPI({
-		endpoint: 'baseline',
-		office: points?.properties.gridId,
-		x: points?.properties.gridX,
-		y: points?.properties.gridY,
-	});
-	const { data: stations } = useWeatherAPI({
-		endpoint: 'stations',
-		office: points?.properties.gridId,
-		x: points?.properties.gridX,
-		y: points?.properties.gridY,
-	});
-	const { data: weather } = useWeatherAPI({
-		endpoint: 'current',
-		station: stations?.features[0].properties.stationIdentifier,
-	});
-	const { data: forecast } = useWeatherAPI({
-		endpoint: 'forecast',
-		office: points?.properties.gridId,
-		x: points?.properties.gridX,
-		y: points?.properties.gridY,
-	});
-	const { data: hourly } = useWeatherAPI({
-		endpoint: 'hourly',
-		office: points?.properties.gridId,
-		x: points?.properties.gridX,
-		y: points?.properties.gridY,
-	});
-
 	return {
 		isMobile,
 		theme,
 		setTheme,
-		allThemes,
-		backgrounds,
-		isBackgroundFetched,
-		isAllThemesFetched,
-		messages,
-		isMessagesFetching,
-		basicWeather,
-		weather,
-		forecast,
-		hourly,
 		handleThemeChange,
 		themeName,
 		setThemeName,
@@ -219,37 +58,5 @@ export function useCommonHooks() {
 		setProviderLabel,
 		providerURL,
 		setProviderURL,
-		providers,
-		providerData,
-		providersIsFetched,
-		providersIsFetching,
-		providersIsLoading,
-		linkData,
-		linksIsFetched,
-		groupData,
-		groupsIsFetched,
-		apps,
-		isAppsFetching,
-		isAppsLoading,
-		applicationData,
-		bookmarkData,
-		groups,
-		linksIsFetching,
-		linksIsLoading,
-		groupsIsFetching,
-		groupsIsLoading,
-		messageData,
-		isMessagesFetched,
-		isMessagesLoading,
-		personal,
-		personalData,
-		personalIsFetched,
-		personalIsFetching,
-		personalIsLoading,
-		wolClients,
-		wolClientsData,
-		wolClientsIsFetched,
-		wolClientsIsFetching,
-		wolClientsIsLoading,
 	};
 }

src/index.css

@@ -1,16 +1,5 @@
 @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;
-	}
-}
-
 .Toastify__toast-theme--light {
 	backdrop-filter: blur(10px) !important;
 }

src/pages/homepage/Homepage.tsx

@@ -1,6 +1,6 @@
 import { Stack } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useOSMAPI, useQueryAPI, useWeatherAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { stackClasses } from 'styles';
 import type { CurrentWeather, OutlookWeather } from 'types';
@@ -11,19 +11,93 @@ import Search from './components/Search/Search';
 import SettingsButton from './components/SettingsButton';
 
 export function Homepage() {
-	const [displayedGreeting, setDisplayedGreeting] = useState('');
+	const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
+		endpoint: 'api/personalData',
+	});
+	const [personalData, setPersonalData] = useState<any>([]);
 	const {
-		appFilter,
+		data: messageData,
-		bookmarkFilter,
+		isFetching: isMessagesFetching,
-		isMobile,
+		isFetched: isMessagesFetched,
-		messages,
+	} = useQueryAPI({
-		isMessagesFetching,
+		endpoint: 'api/messages',
-		weather,
+	});
-		basicWeather,
+	const [messages, setMessages] = useState<any>([]);
-		forecast,
-		personal,
-	} = useCommonHooks();
 
+	useEffect(() => {
+		if (messageData && isMessagesFetched) {
+			setMessages(messageData);
+		}
+	}, [messageData, isMessagesFetched]);
+	useEffect(() => {
+		if (personal && personalIsFetched) {
+			setPersonalData(personal);
+		}
+	}, [personal, personalIsFetched]);
+	const [displayedGreeting, setDisplayedGreeting] = useState('');
+	const { appFilter, bookmarkFilter, isMobile } = useCommonHooks();
+
+	const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
+		useDisclosure(false);
+
+	const dateOptions: Intl.DateTimeFormatOptions = !isMobile
+		? {
+				weekday: 'long',
+				year: 'numeric',
+				month: 'long',
+				day: 'numeric',
+			}
+		: {};
+	const date = new Date().toLocaleDateString('en-US', dateOptions);
+
+	useEffect(() => {
+		if (messages && personalData) {
+			setDisplayedGreeting(() => {
+				if (Math.floor(Math.random() * 100) > 10 || messages.length === 0) {
+					switch (Math.floor(new Date().getHours() / 6)) {
+						case 0:
+							return `Good night, ${personalData?.[0]?.firstName}!`;
+						case 1:
+							return `Good morning, ${personalData?.[0]?.firstName}!`;
+						case 2:
+							return `Good afternoon, ${personalData?.[0]?.firstName}!`;
+						case 3:
+							return `Good evening, ${personalData?.[0]?.firstName}!`;
+					}
+				}
+				return messages[Math.floor(Math.random() * messages.length)].message;
+			});
+		}
+	}, [messages, personalData, isMessagesFetching]);
+
+	const { data: weatherMetadata } = useOSMAPI({ address: personal?.[0].physicalAddress });
+	const { data: points } = useWeatherAPI({
+		endpoint: 'points',
+		lat: weatherMetadata?.[0].lat || 0,
+		lon: weatherMetadata?.[0].lon || 0,
+	});
+	const { data: basicWeather } = useWeatherAPI({
+		endpoint: 'baseline',
+		office: points?.properties.gridId,
+		x: points?.properties.gridX,
+		y: points?.properties.gridY,
+	});
+	const { data: stations } = useWeatherAPI({
+		endpoint: 'stations',
+		office: points?.properties.gridId,
+		x: points?.properties.gridX,
+		y: points?.properties.gridY,
+	});
+	const { data: weather } = useWeatherAPI({
+		endpoint: 'current',
+		station: stations?.features[0].properties.stationIdentifier,
+	});
+	const { data: forecast } = useWeatherAPI({
+		endpoint: 'forecast',
+		office: points?.properties.gridId,
+		x: points?.properties.gridX,
+		y: points?.properties.gridY,
+	});
 	const [current, setCurrent] = useState<CurrentWeather>({
 		icon: '',
 		temperature: 0,
@@ -46,38 +120,6 @@ export function Homepage() {
 			windDirection: 'N',
 		},
 	]);
-	const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
-		useDisclosure(false);
-
-	const dateOptions: Intl.DateTimeFormatOptions = !isMobile
-		? {
-				weekday: 'long',
-				year: 'numeric',
-				month: 'long',
-				day: 'numeric',
-			}
-		: {};
-	const date = new Date().toLocaleDateString('en-US', dateOptions);
-
-	useEffect(() => {
-		if (messages) {
-			setDisplayedGreeting(() => {
-				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}!`;
-						case 1:
-							return `Good morning, ${personal[0].firstName}!`;
-						case 2:
-							return `Good afternoon, ${personal[0].firstName}!`;
-						case 3:
-							return `Good evening, ${personal[0].firstName}!`;
-					}
-				}
-				return messages[Math.floor(Math.random() * messages.length)].message;
-			});
-		}
-	}, [messages, isMessagesFetching]);
 
 	useEffect(() => {
 		if (weather !== undefined && basicWeather !== undefined) {
@@ -140,6 +182,9 @@ export function Homepage() {
 			<Search
 				current={current}
 				outlook={outlook}
+				weather={weather}
+				basicWeather={basicWeather}
+				points={points}
 				weatherModalOpened={weatherModalOpened}
 				closeWeatherModal={closeWeatherModal}
 				openWeatherModal={openWeatherModal}
@@ -150,6 +195,9 @@ export function Homepage() {
 				current={current}
 				setCurrent={setCurrent}
 				outlook={outlook}
+				weather={weather}
+				basicWeather={basicWeather}
+				points={points}
 				weatherModalOpened={weatherModalOpened}
 				closeWeatherModal={closeWeatherModal}
 				openWeatherModal={openWeatherModal}

src/pages/homepage/components/Applications/Applications.tsx

@@ -1,10 +1,21 @@
 import { Stack, Text } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 import AppItem from './AppItem';
 
 function Applications({ contentType }: any) {
-	const { isMobile, applicationData } = useCommonHooks();
+	const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
+		endpoint: 'api/apps',
+	});
+	const { isMobile } = useCommonHooks();
+	const [applicationData, setApplicationData] = useState<any>([]);
+
+	useEffect(() => {
+		if (apps && !isAppsFetching) {
+			setApplicationData(apps);
+		}
+	}, [apps, isAppsFetching]);
 	return (
 		<>
 			{applicationData.length > 0 && contentType.length > 0 && (

src/pages/homepage/components/Bookmarks/Bookmarks.tsx

@@ -1,16 +1,40 @@
 import { Stack, Text } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 import LinkGroups from './LinkGroups';
 
 function Links({ contentType }: any) {
-	const { isMobile, linksIsFetched, groupsIsFetched, groupData, bookmarkData } =
+	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
-		useCommonHooks();
+		endpoint: 'api/links',
+	});
+	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
+		endpoint: 'api/categories',
+	});
+	const [bookmarkData, setBookmarkData] = useState<any>([]);
+
+	const [groups, setGroups] = useState([]);
+	useEffect(() => {
+		if (linkData && linksIsFetched) {
+			setBookmarkData(linkData);
+		}
+	}, [linksIsFetched, linkData]);
+
+	useEffect(() => {
+		if (groupData && groupsIsFetched) {
+			const groupList = groupData?.map((category: any) => {
+				return category;
+			});
+			setGroups(groupList);
+		}
+	}, [groupData, groupsIsFetched]);
+	const { isMobile } = useCommonHooks();
+
 	return (
 		<>
 			{groupsIsFetched &&
 				linksIsFetched &&
-				groupData?.length > 0 &&
+				groups?.length > 0 &&
 				contentType.length > 0 && (
 					<Stack id='links' style={{ gap: 0 }}>
 						<Text className={textClasses.sectionTitle} classNames={textClasses}>
@@ -26,7 +50,7 @@ function Links({ contentType }: any) {
 								gridTemplateRows: 'auto',
 							}}
 						>
-							{groupData.map((category: any) => {
+							{groups.map((category: any) => {
 								if (
 									contentType.includes(category.filterName) ||
 									contentType.includes('All')

src/pages/homepage/components/Header/Header.tsx

@@ -1,6 +1,6 @@
 import { Group, Stack, Text } from '@mantine/core';
 import { WeatherModal } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 
@@ -10,11 +10,19 @@ function Header({
 	current,
 	setCurrent,
 	outlook,
+	weather,
+	basicWeather,
+	points,
 	weatherModalOpened,
 	closeWeatherModal,
 	openWeatherModal,
 }: any) {
-	const { isMobile, weather, basicWeather, personal } = useCommonHooks();
+	const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
+		endpoint: 'api/personalData',
+	});
+
+	const [personalData, setPersonalData] = useState<any>([]);
+	const { isMobile } = useCommonHooks();
 	const [time, setTime] = useState(new Date());
 	function fixDigits(k: any) {
 		if (k < 10) {
@@ -30,6 +38,12 @@ function Header({
 		}, 1000);
 	}, []);
 
+	useEffect(() => {
+		if (personal && personalIsFetched) {
+			setPersonalData(personal);
+		}
+	}, [personal, personalIsFetched]);
+
 	useEffect(() => {
 		if (weather !== undefined && basicWeather !== undefined) {
 			setCurrent({
@@ -77,10 +91,10 @@ function Header({
 					fz={isMobile ? 24 : undefined}
 				>
 					{greet
-						.replace('$firstName', personal?.[0].firstName)
+						.replace('$firstName', personalData?.[0]?.firstName)
-						.replace('$lastName', personal?.[0].lastName)
+						.replace('$lastName', personalData?.[0]?.lastName)
-						.replace('$firstName!', personal?.[0].firstName.toUpperCase())
+						.replace('$firstName!', personalData?.[0]?.firstName.toUpperCase())
-						.replace('$lastName!', personal?.[0].lastName.toUpperCase())}
+						.replace('$lastName!', personalData?.[0]?.lastName.toUpperCase())}
 				</Text>
 			</Stack>
 			<Stack
@@ -150,6 +164,7 @@ function Header({
 			<WeatherModal
 				current={current}
 				outlook={outlook}
+				points={points}
 				closeWeatherModal={closeWeatherModal}
 				weatherModalOpened={weatherModalOpened}
 			/>

src/pages/homepage/components/Search/Search.tsx

@@ -1,16 +1,30 @@
 import { Stack, TextInput } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { HelpModal, WeatherModal } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textInputClasses } from 'styles';
 
 export default function Search({
 	current,
 	outlook,
+	points,
 	weatherModalOpened,
 	closeWeatherModal,
 	openWeatherModal,
 }: any) {
+	const { data: providers, isFetched: providersIsFetched } = useQueryAPI({
+		endpoint: 'api/providers',
+	});
+
+	const [providerData, setProviderData] = useState<any>([]);
+
+	useEffect(() => {
+		if (providers && providersIsFetched) {
+			setProviderData(providers);
+		}
+	}, [providers, providersIsFetched]);
+
 	const {
 		providerLabel,
 		setProviderLabel,
@@ -18,7 +32,6 @@ export default function Search({
 		setProviderURL,
 		searchValue,
 		setSearchValue,
-		providers,
 	} = useCommonHooks();
 
 	const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
@@ -94,7 +107,7 @@ export default function Search({
 					) {
 						setProviderLabel('Show help');
 					} else if (item.target.value.startsWith('/')) {
-						const provider = providers?.find(
+						const provider = providerData?.find(
 							(p: any) => p.prefix === item.target.value.split(' ')[0],
 						);
 						setProviderLabel(provider?.name || 'Invalid Search');
@@ -121,6 +134,7 @@ export default function Search({
 			<WeatherModal
 				current={current}
 				outlook={outlook}
+				points={points}
 				closeWeatherModal={closeWeatherModal}
 				weatherModalOpened={weatherModalOpened}
 			/>

src/pages/homepage/components/SettingsButton.tsx

@@ -20,12 +20,21 @@ import {
 	actionIconClasses,
 	buttonClasses,
 	menuClasses,
+	multiSelectClasses,
 	selectClasses,
 	stackClasses,
 } from 'styles';
 
 function SettingsButton() {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
+	const { data: wolClients, isFetched: wolClientsIsFetched } = useQueryAPI({
+		endpoint: 'api/wolClients',
+	});
+	const [wolClientsData, setWolClientsData] = useState<any>([]);
+	const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({
+		endpoint: 'api/themes',
+	});
+	const [allThemeData, setAllThemeData] = useState<any>([]);
 	const { mutateAsync: wakeRequest } = useMutationAPI();
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
 	const navigate = useNavigate();
@@ -34,13 +43,11 @@ function SettingsButton() {
 		setCurrentTheme,
 		handleThemeChange,
 		theme,
-		allThemes,
 		appFilter,
 		setAppFilter,
 		bookmarkFilter,
 		setBookmarkFilter,
 		isMobile,
-		wolClients,
 	} = useCommonHooks();
 
 	const notify = (notification: any) => toast(notification, { position: 'bottom-right' });
@@ -65,6 +72,18 @@ function SettingsButton() {
 		}
 	}, [data, isFetched]);
 
+	useEffect(() => {
+		if (wolClients && wolClientsIsFetched) {
+			setWolClientsData(wolClients);
+		}
+	}, [wolClients, wolClientsIsFetched]);
+
+	useEffect(() => {
+		if (allThemes && isAllThemesFetched) {
+			setAllThemeData(allThemes);
+		}
+	}, [allThemes, isAllThemesFetched]);
+
 	return (
 		<>
 			{overlayOpened && <Overlay />}
@@ -108,7 +127,7 @@ function SettingsButton() {
 								<Button
 									classNames={buttonClasses}
 									className={buttonClasses.wakeButton}
-									disabled={!wolClients?.length || selectedClient === null}
+									disabled={!wolClientsData?.length || selectedClient === null}
 									onClick={() => {
 										handleWakeRequest();
 										notify('Wake command sent');
@@ -121,9 +140,9 @@ function SettingsButton() {
 								<Select
 									labelProps={{ display: 'none' }}
 									placeholder='Pick a host...'
-									defaultValue={wolClients?.[0]?.hostname}
+									defaultValue={wolClientsData?.[0]?.hostname}
 									data={
-										wolClients?.map((wolClient: any) => {
+										wolClientsData?.map((wolClient: any) => {
 											return {
 												value: wolClient.hostname,
 												label: `${wolClient.hostname} (${wolClient.macAddress})`,
@@ -178,7 +197,7 @@ function SettingsButton() {
 												color: theme.primaryColor,
 											}}
 											onClick={() => {
-												handleThemeChange(allThemes, true);
+												handleThemeChange(allThemeData, true);
 											}}
 										>
 											<FaDice />
@@ -220,7 +239,7 @@ function SettingsButton() {
 									onChange={(data: any) => {
 										setAppFilter(data);
 									}}
-									classNames={selectClasses}
+									classNames={multiSelectClasses}
 									comboboxProps={{ withinPortal: false }}
 								/>
 								<MultiSelect
@@ -237,7 +256,7 @@ function SettingsButton() {
 									onChange={(data: any) => {
 										setBookmarkFilter(data);
 									}}
-									classNames={selectClasses}
+									classNames={multiSelectClasses}
 									comboboxProps={{ withinPortal: false }}
 								/>
 							</Group>

src/pages/settings/components/Applications.tsx

@@ -1,11 +1,25 @@
 import { Stack, Text } from '@mantine/core';
 import { ApplicationColumns, DataTable } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 
 const ApplicationSettings = () => {
 	const endpoint = 'api/apps';
-	const { isAppsFetching, isAppsLoading, applicationData } = useCommonHooks();
+	const {
+		data: apps,
+		isFetching: isAppsFetching,
+		isLoading: isAppsLoading,
+	} = useQueryAPI({
+		endpoint: 'api/apps',
+	});
+	const [applicationData, setApplicationData] = useState<any>([]);
+
+	useEffect(() => {
+		if (apps && !isAppsFetching) {
+			setApplicationData(apps);
+		}
+	}, [apps, isAppsFetching]);
 
 	return (
 		<Stack>

src/pages/settings/components/Bookmarks.tsx

@@ -1,10 +1,38 @@
 import { Stack, Text } from '@mantine/core';
 import { BookmarkColumns, DataTable } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 const BookmarkSettings = () => {
 	const endpoint = 'api/links';
-	const { groups, bookmarkData, linksIsFetching, linksIsLoading } = useCommonHooks();
+	const {
+		data: linkData,
+		isFetched: linksIsFetched,
+		isFetching: linksIsFetching,
+		isLoading: linksIsLoading,
+	} = useQueryAPI({
+		endpoint: 'api/links',
+	});
+	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
+		endpoint: 'api/categories',
+	});
+	const [bookmarkData, setBookmarkData] = useState<any>([]);
+
+	const [groups, setGroups] = useState([]);
+	useEffect(() => {
+		if (linkData && linksIsFetched) {
+			setBookmarkData(linkData);
+		}
+	}, [linksIsFetched, linkData]);
+
+	useEffect(() => {
+		if (groupData && groupsIsFetched) {
+			const groupList = groupData?.map((category: any) => {
+				return category.categoryName;
+			});
+			setGroups(groupList);
+		}
+	}, [groupData, groupsIsFetched]);
 
 	return (
 		<Stack>
@@ -12,7 +40,7 @@ const BookmarkSettings = () => {
 				Bookmarks
 			</Text>
 			<DataTable
-				tableName='Applications'
+				tableName='Bookmarks'
 				columns={BookmarkColumns(groups)}
 				tableData={bookmarkData}
 				isFetching={linksIsFetching}

src/pages/settings/components/Categories.tsx

@@ -1,10 +1,29 @@
 import { Stack, Text } from '@mantine/core';
 import { CategoryColumns, DataTable } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from '../../../styles';
 const CategorySettings = () => {
 	const endpoint = 'api/categories';
-	const { groupData, groupsIsFetching, groupsIsLoading } = useCommonHooks();
+	const {
+		data: groupData,
+		isFetching: groupsIsFetching,
+		isLoading: groupsIsLoading,
+		isFetched: groupsIsFetched,
+	} = useQueryAPI({
+		endpoint: endpoint,
+	});
+
+	const [groups, setGroups] = useState([]);
+
+	useEffect(() => {
+		if (groupData && groupsIsFetched) {
+			const groupList = groupData?.map((category: any) => {
+				return category;
+			});
+			setGroups(groupList);
+		}
+	}, [groupData, groupsIsFetched]);
 	return (
 		<Stack>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -13,7 +32,7 @@ const CategorySettings = () => {
 			<DataTable
 				tableName='Categories'
 				columns={CategoryColumns()}
-				tableData={groupData ?? []}
+				tableData={groups ?? []}
 				isFetching={groupsIsFetching}
 				isLoading={groupsIsLoading}
 				endpoint={endpoint}

src/pages/settings/components/Messages.tsx

@@ -1,10 +1,25 @@
 import { Stack, Text } from '@mantine/core';
 import { DataTable, MessagesColumns } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 const MessageSettings = () => {
 	const endpoint = 'api/messages';
-	const { messageData, isMessagesFetching, isMessagesLoading } = useCommonHooks();
+	const {
+		data: messageData,
+		isFetching: isMessagesFetching,
+		isFetched: isMessagesFetched,
+		isLoading: isMessagesLoading,
+	} = useQueryAPI({
+		endpoint: 'api/messages',
+	});
+	const [messages, setMessages] = useState<any>([]);
+
+	useEffect(() => {
+		if (messageData && isMessagesFetched) {
+			setMessages(messageData);
+		}
+	}, [messageData, isMessagesFetched]);
 	return (
 		<Stack>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -13,7 +28,7 @@ const MessageSettings = () => {
 			<DataTable
 				tableName='Messages'
 				columns={MessagesColumns()}
-				tableData={messageData}
+				tableData={messages}
 				isFetching={isMessagesFetching}
 				isLoading={isMessagesLoading}
 				endpoint={endpoint}

src/pages/settings/components/Personalization.tsx

@@ -1,11 +1,24 @@
 import { Text } from '@mantine/core';
 import { DataTable, PersonalizationColumns } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 const PersonalizationSettings = () => {
 	const endpoint = 'api/personalData';
-	const { personalData, personalIsFetching, personalIsLoading } = useCommonHooks();
+	const {
-
+		data: personalData,
+		isFetched: personalIsFetched,
+		isFetching: personalIsFetching,
+		isLoading: personalIsLoading,
+	} = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [personal, setPersonal] = useState<any>([]);
+	useEffect(() => {
+		if (personalData && personalIsFetched) {
+			setPersonal(personalData);
+		}
+	}, [personalData, personalIsFetched]);
 	return (
 		<>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -14,7 +27,7 @@ const PersonalizationSettings = () => {
 			<DataTable
 				tableName='Personalization'
 				columns={PersonalizationColumns()}
-				tableData={personalData}
+				tableData={personal}
 				isFetching={personalIsFetching}
 				isLoading={personalIsLoading}
 				endpoint={endpoint}

src/pages/settings/components/SearchProviders.tsx

@@ -1,11 +1,27 @@
 import { Stack, Text } from '@mantine/core';
 import { DataTable, SearchProviderColumns } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 
 const SearchProviderSettings = () => {
 	const endpoint = 'api/providers';
-	const { providerData, providersIsFetching, providersIsLoading } = useCommonHooks();
+	const {
+		data: providers,
+		isFetched: providersIsFetched,
+		isFetching: providersIsFetching,
+		isLoading: providersIsLoading,
+	} = useQueryAPI({
+		endpoint: endpoint,
+	});
+
+	const [providerData, setProviderData] = useState<any>([]);
+
+	useEffect(() => {
+		if (providers && providersIsFetched) {
+			setProviderData(providers);
+		}
+	}, [providers, providersIsFetched]);
 
 	return (
 		<Stack>

src/pages/settings/components/ThemeCard.tsx

@@ -4,11 +4,16 @@ import { useState } from 'react';
 import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
 import { actionIconClasses } from 'styles';
 
-function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: any) {
+function ThemeCard({
+	cardTheme,
+	handleOpen,
+	handleDeleteTheme,
+	createTheme,
+	allThemes,
+}: any) {
 	const [hover, setHover] = useState(false);
 	const [shift, setShift] = useState<number>(0);
-	const { handleThemeChange, currentTheme, setCurrentTheme, theme, allThemes } =
+	const { handleThemeChange, currentTheme, setCurrentTheme, theme } = useCommonHooks();
-		useCommonHooks();
 	return (
 		<Group
 			gap={0}
@@ -51,7 +56,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
 					setCurrentTheme(cardTheme.name);
 				}}
 			>
-				{hover && currentTheme !== 'random' && <Overlay opacity={0.5} zIndex={0} />}
+				{hover && currentTheme !== 'random' && <Overlay opacity={0.5} zIndex={1} />}
 				<Group w={'100%'} gap={0} display={'flex'} align='center' justify='center'>
 					<Stack align='center'>
 						<Box
@@ -179,6 +184,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
 				<Stack
 					gap={0}
 					style={{
+						zIndex: 2,
 						padding: '4px',
 						paddingRight: '0px',
 						position: 'absolute',
@@ -224,7 +230,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
 						{cardTheme.randomEnabled ? <FiShuffle color='green' /> : <FiX color='red' />}
 					</ActionIcon>
 					<ActionIcon
-						className={actionIconClasses.editButton}
+						className={actionIconClasses.themeEditButton}
 						classNames={actionIconClasses}
 						onClick={() => handleOpen(cardTheme)}
 						mb={2}
@@ -232,7 +238,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
 						<FiEdit color='green' />
 					</ActionIcon>
 					<ActionIcon
-						className={actionIconClasses.editButton}
+						className={actionIconClasses.themeEditButton}
 						classNames={actionIconClasses}
 						onClick={() => handleDeleteTheme(cardTheme)}
 					>

src/pages/settings/components/ThemeModal.tsx

@@ -7,7 +7,6 @@ import {
 	Group,
 	Image,
 	Modal,
-	OptionalPortal,
 	Select,
 	Stack,
 	Text,
@@ -153,10 +152,8 @@ function ThemeModal({
 								/>
 							</Group>
 							<Group justify='space-between'>
-								<OptionalPortal withinPortal={false}>
 								<Select
 									data={backgroundList}
-										className={selectClasses.select}
 									classNames={selectClasses}
 									label='Background Image'
 									value={selectedTheme.backgroundImage}
@@ -181,7 +178,6 @@ function ThemeModal({
 										})
 									}
 								/>
-								</OptionalPortal>
 							</Group>
 						</Stack>
 						<Stack h={'100%'} w={'50%'} align='center' justify='center'>

src/pages/settings/components/Themes.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Group, Overlay, Stack, Switch, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { useCommonHooks, useMutationAPI } from 'hooks';
+import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiChevronRight, FiPlus } from 'react-icons/fi';
 import '@mantine/core/styles/ModalBase.css';
@@ -10,6 +10,12 @@ import { buttonClasses, textClasses } from 'styles';
 import ThemeCard from './ThemeCard';
 import ThemeModal from './ThemeModal';
 function ThemesSettings() {
+	const { data: allThemes } = useQueryAPI({
+		endpoint: 'api/themes',
+	});
+	const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
+		endpoint: 'api/backgrounds',
+	});
 	const [opened, { open, close }] = useDisclosure(false);
 	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
 	const [colorId, setColorId] = useState<string>('');
@@ -20,21 +26,13 @@ function ThemesSettings() {
 	const { mutateAsync: createTheme } = useMutationAPI();
 	const { mutateAsync: deleteTheme } = useMutationAPI();
 
-	const {
+	const { currentTheme, setCurrentTheme, isMobile, theme } = useCommonHooks();
-		currentTheme,
-		setCurrentTheme,
-		backgrounds,
-		isBackgroundFetched,
-		isMobile,
-		theme,
-		allThemes,
-	} = useCommonHooks();
 
 	useEffect(() => {
-		if (backgrounds && isBackgroundFetched) {
+		if (backgroundData && isBackgroundFetched) {
-			setBackgroundList(['None', ...backgrounds]);
+			setBackgroundList(['None', ...backgroundData]);
 		}
-	}, [backgrounds, isBackgroundFetched]);
+	}, [backgroundData, isBackgroundFetched]);
 
 	const handleOpen = (theme: any) => {
 		setSelectedTheme(theme);
@@ -162,6 +160,7 @@ function ThemesSettings() {
 								}}
 							>
 								<ThemeCard
+									allThemes={allThemes}
 									cardTheme={cardTheme}
 									handleOpen={handleOpen}
 									handleDeleteTheme={handleDeleteTheme}

src/pages/settings/components/WolClients.tsx

@@ -1,11 +1,26 @@
 import { Stack, Text } from '@mantine/core';
 import { DataTable, WolClientColumns } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 
 const WolClientSettings = () => {
 	const endpoint = 'api/wolClients';
-	const { wolClientsData, wolClientsIsFetching, wolClientsIsLoading } = useCommonHooks();
+	const {
+		data: wolClientsData,
+		isFetched: wolClientsIsFetched,
+		isFetching: wolClientsIsFetching,
+		isLoading: wolClientsIsLoading,
+	} = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [wolClients, setWolClients] = useState<any>([]);
+
+	useEffect(() => {
+		if (wolClientsData && wolClientsIsFetched) {
+			setWolClients(wolClientsData);
+		}
+	}, [wolClientsData, wolClientsIsFetched]);
 
 	return (
 		<Stack>
@@ -15,7 +30,7 @@ const WolClientSettings = () => {
 			<DataTable
 				tableName='WoL Clients'
 				columns={WolClientColumns()}
-				tableData={wolClientsData}
+				tableData={wolClients}
 				isFetching={wolClientsIsFetching}
 				isLoading={wolClientsIsLoading}
 				endpoint={endpoint}

src/styles/ActionIcon.module.css

@@ -17,13 +17,28 @@
             color: var(--color-text-pri) !important;
         }
     }
-    
 }
 
 .editButton {
+    &.root {
+        background-color: var(--color-text-acc) !important;
+        color: var(--color-text-pri) !important;
+        .icon {
+            font-size: 24px;
+        }
+        .loader {
+            display: none;
+        }
+        :hover {
+            background-color: var(--color-text-pri) !important;
+            color: var(--color-text-acc) !important;
+        }
+    }
+}
+
+.themeEditButton {
     &.root {
         background-color: white !important;
-        color: black !important;
         .icon {
             font-size: 24px;
         }

src/styles/MultiSelect.module.css

@@ -0,0 +1,61 @@
+.label {
+    margin-bottom: 5px !important;
+    color: var(--color-text-pri) !important;
+    font-size: 14px !important;
+}
+.input {
+    border-color: light-dark(var(--mantine-color-appGray-2), white) !important;
+    background-color: var(--color-background) !important;
+    color: var(--color-text-pri) !important;
+    &:focus {
+        border-color: var(--color-text-pri) !important;
+    }
+    display: flex !important;
+    overflow: clip !important;
+    height: 36px !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-acc) !important;
+            color: var(--color-text-pri) !important;
+            &:hover {
+                background-color: var(--color-text-acc) !important;
+                color: var(--color-background) !important;
+            }
+        }
+
+        /* applies styles to hovered item (with mouse or keyboard) */
+        &:hover {
+            background-color: var(--color-text-acc) !important;
+            color: var(--color-text-pri) !important;
+        }
+    }
+}
+
+.dropdown {
+    background-color: var(--color-background) !important;
+}
+
+.pillsList {
+    .pill {
+        display: none !important;
+    }
+}
+
+
+.inputField {
+    color: var(--color-text-acc) !important;
+    &::placeholder {
+        color: var(--color-text-acc) !important;
+    }
+}
+
+.root {
+
+    width: 180px !important;
+}

src/styles/Select.module.css

@@ -5,7 +5,7 @@
 }
 .input {
     border-color: light-dark(var(--mantine-color-appGray-2), white) !important;
-    background-color: var(--color-background);
+    background-color: var(--color-background) !important;
     color: var(--color-text-pri) !important;
     &:focus {
         border-color: var(--color-text-pri) !important;
@@ -13,6 +13,9 @@
     display: flex !important;
     overflow: clip !important;
     height: 36px !important;
+    &::placeholder {
+        color: var(--color-text-acc) !important;
+    }
 }
 
 .options {
@@ -38,17 +41,7 @@
 }
 
 .dropdown {
-    background-color: var(--color-background) !important;
+    background-color: var(--color-background);
-}
-
-.pillsList {
-    .pill {
-        display: none !important;
-    }
-}
-
-.placeholder {
-    color: white !important;
 }
 
 .root {

src/styles/TextInput.module.css

@@ -1,3 +1,25 @@
+.default{
+	&.root {
+		.wrapper {
+			display: flex;
+			justify-content: center;
+			.input {
+				width: 100%;
+				border: none;
+				background-color: var(--color-search-background);
+				color: var(--color-text-pri);
+				font-size: 18px;
+			}
+			.section{
+				color: var(--color-border);
+				width: auto;
+				padding-left: .5rem;
+				opacity: 1;
+			}
+		}
+	}
+}
+
 .search{
 	&.root {
 		.wrapper {

src/styles/index.ts

@@ -2,6 +2,7 @@ import actionIconClasses from './ActionIcon.module.css';
 import buttonClasses from './Button.module.css';
 import menuClasses from './Menu.module.css';
 import modalClasses from './Modal.module.css';
+import multiSelectClasses from './MultiSelect.module.css';
 import navLinkClasses from './NavLink.module.css';
 import popoverClasses from './Popover.module.css';
 import selectClasses from './Select.module.css';
@@ -15,6 +16,7 @@ export {
 	buttonClasses,
 	menuClasses,
 	modalClasses,
+	multiSelectClasses,
 	navLinkClasses,
 	popoverClasses,
 	selectClasses,