Style updates and bugfixes

src/components/SettingsHeader.tsx

@@ -0,0 +1,183 @@
+import {
+	ActionIcon,
+	Button,
+	Group,
+	Highlight,
+	Popover,
+	Stack,
+	Switch,
+	Text,
+	TextInput,
+} from '@mantine/core';
+import { useCommonHooks } from 'hooks';
+import { useState } from 'react';
+import { FiHelpCircle, FiLoader, FiPlus, FiX } from 'react-icons/fi';
+import {
+	actionIconClasses,
+	buttonClasses,
+	popoverClasses,
+	switchClasses,
+	textClasses,
+	textInputClasses,
+} from 'styles';
+
+export function SettingsHeader({
+	setDragging,
+	openModal,
+	title,
+	tooltip,
+	searchValue,
+	setSearchValue,
+	searchPlaceholder,
+	isLoading,
+	setIsLoading,
+}: {
+	setDragging: undefined | ((dragging: boolean) => void);
+	openModal: () => void;
+	title: string;
+	tooltip: {
+		title: string;
+		highlightList: string[];
+		description: string;
+	};
+	searchValue: string | undefined;
+	setSearchValue: (searchValue: string) => void;
+	searchPlaceholder: string | undefined;
+	isLoading: boolean;
+	setIsLoading: (isLoading: boolean) => void;
+}) {
+	const { isMobile, theme } = useCommonHooks();
+	const [disabled, setDisabled] = useState(false);
+	return (
+		<Group
+			align='center'
+			justify='center'
+			style={{
+				backdropFilter: 'blur(5px) brightness(.75)',
+				zIndex: 199,
+				paddingTop: '1.5rem',
+				paddingBottom: '1.5rem',
+				paddingLeft: '1rem',
+				height: 'min-content',
+				width: '100%',
+				marginTop: 0,
+				position: 'absolute',
+			}}
+		>
+			<Group w={isMobile ? undefined : '100%'}>
+				<Text
+					miw={isMobile ? 100 : undefined}
+					className={textClasses.settingsSubTitle}
+					classNames={textClasses}
+				>
+					{title}
+				</Text>
+				<Popover withArrow withOverlay classNames={popoverClasses}>
+					<Popover.Target>
+						<ActionIcon
+							className={actionIconClasses.settingsTooltip}
+							classNames={actionIconClasses}
+						>
+							<FiHelpCircle />
+						</ActionIcon>
+					</Popover.Target>
+					<Popover.Dropdown
+						style={{
+							color: 'var(--mantine-color-primary-0)',
+							backgroundColor: 'var(--mantine-color-background-0)',
+							width: isMobile ? '95%' : '500px',
+						}}
+					>
+						<Stack>
+							<Text className={textClasses.settingsTooltip} classNames={textClasses}>
+								{tooltip.title}
+							</Text>
+							<Highlight
+								highlight={tooltip.highlightList}
+								className={textClasses.settingsTooltip}
+								classNames={textClasses}
+								highlightStyles={{
+									backgroundImage:
+										'linear-gradient(45deg, var(--mantine-color-accent-0), var(--mantine-color-primary-0))',
+									fontWeight: 700,
+									WebkitBackgroundClip: 'text',
+									WebkitTextFillColor: 'transparent',
+								}}
+							>
+								{tooltip.description}
+							</Highlight>
+						</Stack>
+					</Popover.Dropdown>
+				</Popover>
+				{searchValue !== undefined && (
+					<Button
+						className={buttonClasses.newItemButton}
+						classNames={buttonClasses}
+						onClick={openModal}
+					>
+						<FiPlus />
+					</Button>
+				)}
+			</Group>
+			{searchValue !== undefined && (
+				<TextInput
+					disabled={disabled}
+					w={isMobile ? undefined : '35%'}
+					pos={isMobile ? undefined : 'absolute'}
+					className={textInputClasses.default}
+					classNames={textInputClasses}
+					autoFocus={!isMobile}
+					placeholder={searchPlaceholder ?? 'Search...'}
+					value={searchValue}
+					onInput={(event: any) => {
+						setIsLoading(true);
+						setSearchValue(event.target.value);
+					}}
+					style={{
+						zIndex: 100,
+					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
+					rightSection={
+						isLoading ? (
+							<ActionIcon
+								className={actionIconClasses.loadingSpinner}
+								classNames={actionIconClasses}
+							>
+								<FiLoader />
+							</ActionIcon>
+						) : (
+							searchValue && (
+								<ActionIcon
+									className={actionIconClasses.settingsTooltip}
+									classNames={actionIconClasses}
+									onClick={() => setSearchValue('')}
+								>
+									<FiX />
+								</ActionIcon>
+							)
+						)
+					}
+				/>
+			)}
+			{setDragging && (
+				<Switch
+					className={switchClasses.default}
+					classNames={switchClasses}
+					label={'Reorder'}
+					labelPosition='left'
+					pos={'absolute'}
+					right={isMobile ? '2rem' : '1rem'}
+					top={isMobile ? '3.5rem' : undefined}
+					onChange={(e) => {
+						setDragging(e.target.checked);
+						setDisabled(e.target.checked);
+					}}
+				/>
+			)}
+		</Group>
+	);
+}