Updated header and bug fixes

src/pages/settings/components/Personalization/Personalization.tsx

@@ -1,9 +1,10 @@
-import { Card, Grid, GridCol, Overlay, Stack, Text, TextInput } from '@mantine/core';
+import { Card, Grid, GridCol, Overlay, Stack, TextInput } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { cardClasses, textClasses, textInputClasses } from 'styles';
+import { cardClasses, textInputClasses } from 'styles';
 import type { PersonalData } from 'types';
+import SettingsHeader from '../Shared/SettingsHeader';
 const PersonalizationSettings = () => {
 	const endpoint = 'api/personalData';
 	const {
@@ -39,11 +40,30 @@ const PersonalizationSettings = () => {
 	}, [update]);
 
 	return (
-		<>
-			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-				Personalization
-			</Text>
-			<Stack w={'100%'} align='center'>
+		<Stack>
+			<SettingsHeader
+				setDragging={undefined}
+				openModal={() => {}}
+				title={'Personalization'}
+				tooltip={{
+					title: 'The personalization section allows you to update basic information.',
+					highlightList: [
+						'Applications',
+						'apps',
+						'application',
+						'name',
+						'base url',
+						'url',
+						'icon',
+						'filter',
+					],
+					description:
+						'The first and last name fields will be used for greetings, and the physical address field will be used for weather.',
+				}}
+				searchValue={undefined}
+				setSearchValue={() => {}}
+			/>
+			<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
 				<Grid w={'75%'} pos={'relative'}>
 					{personalIsFetching && (
 						<Overlay
@@ -124,7 +144,7 @@ const PersonalizationSettings = () => {
 					</GridCol>
 				</Grid>
 			</Stack>
-		</>
+		</Stack>
 	);
 };
 export default PersonalizationSettings;