Added SettingsHeader

src/pages/settings/components/Messages/Messages.tsx

@@ -1,38 +1,27 @@
 import {
-	ActionIcon,
 	Button,
 	Card,
 	Divider,
 	Grid,
 	GridCol,
 	Group,
-	Highlight,
 	Modal,
-	Popover,
 	Stack,
-	Text,
 	TextInput,
 } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import DebouncedMessage from 'pages/settings/components/Messages/DebouncedMessage';
 import { useEffect, useState } from 'react';
-import { FiHelpCircle, FiPlus } from 'react-icons/fi';
-import {
-	actionIconClasses,
-	buttonClasses,
-	cardClasses,
-	modalClasses,
-	textClasses,
-	textInputClasses,
-} from 'styles';
+import { cardClasses, modalClasses, textInputClasses } from 'styles';
 import type { Message } from 'types';
+import SettingsHeader from '../Shared/SettingsHeader';
 const MessageSettings = () => {
 	const endpoint = 'api/messages';
 	const { data: messageData, isFetched: isMessagesFetched } = useQueryAPI({
 		endpoint: endpoint,
 	});
-	const { theme, isMobile, modalStyle } = useCommonHooks();
+	const { isMobile, modalStyle } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [messages, setMessages] = useState<Message[]>([]);
 	const [newMessage, setNewMessage] = useState('');
@@ -129,73 +118,19 @@ const MessageSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center' justify='center' mt={'1rem'}>
-				<Group w={isMobile ? undefined : '100%'}>
-					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-						Messages
-					</Text>
-					<Popover withArrow withOverlay withinPortal={false}>
-						<Popover.Target>
-							<ActionIcon
-								className={actionIconClasses.settingsTooltip}
-								classNames={actionIconClasses}
-							>
-								<FiHelpCircle />
-							</ActionIcon>
-						</Popover.Target>
-						<Popover.Dropdown
-							style={{
-								color: theme.primaryColor,
-								backgroundColor: theme.backgroundColor,
-								width: '500px',
-							}}
-						>
-							<Stack>
-								<Text className={textClasses.settingsTooltip} classNames={textClasses}>
-									{
-										'These custom messages will be displayed in the header on the homepage.'
-									}
-								</Text>
-								<Highlight
-									highlight={['$firstName', '$lastName', '$^firstName', '$^lastName']}
-									className={textClasses.settingsTooltip}
-									classNames={textClasses}
-									highlightStyles={{
-										backgroundImage:
-											'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
-										fontWeight: 700,
-										WebkitBackgroundClip: 'text',
-										WebkitTextFillColor: 'transparent',
-									}}
-								>
-									{
-										'Built-in variables include $firstName and $lastName. To force the text to upper case, use a carat (^), ie, $^firstName. Messages may contain any unicode text.'
-									}
-								</Highlight>
-							</Stack>
-						</Popover.Dropdown>
-					</Popover>
-					<Button
-						className={buttonClasses.tableButton}
-						classNames={buttonClasses}
-						onClick={openModal}
-					>
-						<FiPlus />
-					</Button>
-				</Group>
-				<TextInput
-					w={isMobile ? undefined : '35%'}
-					pos={isMobile ? undefined : 'absolute'}
-					className={textInputClasses.settingsItem}
-					classNames={textInputClasses}
-					autoFocus={!isMobile}
-					placeholder='Search...'
-					value={searchValue}
-					onInput={(event: any) => {
-						setSearchValue(event.target.value);
-					}}
-				/>
-			</Group>
+			<SettingsHeader
+				setDragging={undefined}
+				openModal={openModal}
+				title={'Messages'}
+				tooltip={{
+					title: 'These custom messages will be displayed in the header on the homepage.',
+					highlightList: ['$firstName', '$lastName', '$^firstName', '$^lastName'],
+					description:
+						'Built-in variables include $firstName and $lastName. To force the text to upper case, use a carat (^), ie, $^firstName. Messages may contain any unicode text.',
+				}}
+				searchValue={searchValue}
+				setSearchValue={setSearchValue}
+			/>
 			<Stack w={'100%'} align='center'>
 				<Grid w={'75%'}>
 					{messages?.map((message: Message) => (