Updated header and bug fixes

src/pages/settings/components/Shared/SettingsHeader.tsx

@@ -23,12 +23,22 @@ function SettingsHeader({
 }: any) {
 	const { isMobile, theme } = useCommonHooks();
 	return (
-		<Group align='center' justify='center' mt={'1rem'}>
+		<Group
+			py={'1.5rem'}
+			pl={'1rem'}
+			h={'min-content'}
+			w={'100%'}
+			align='center'
+			mt={0}
+			justify='center'
+			pos={'absolute'}
+			style={{ backdropFilter: 'blur(10px) brightness(.5)', zIndex: 1 }}
+		>
 			<Group w={isMobile ? undefined : '100%'}>
 				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
 					{title}
 				</Text>
-				<Popover withArrow withOverlay withinPortal={false}>
+				<Popover withArrow withOverlay withinPortal={true}>
 					<Popover.Target>
 						<ActionIcon
 							className={actionIconClasses.settingsTooltip}
@@ -65,26 +75,33 @@ function SettingsHeader({
 						</Stack>
 					</Popover.Dropdown>
 				</Popover>
-				<Button
-					className={buttonClasses.tableButton}
-					classNames={buttonClasses}
-					onClick={openModal}
-				>
-					<FiPlus />
-				</Button>
+				{searchValue !== undefined && (
+					<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);
-				}}
-			/>
+			{searchValue !== undefined && (
+				<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);
+					}}
+					style={{
+						zIndex: 100,
+					}}
+				/>
+			)}
 			{setDragging && (
 				<Switch
 					label={<Text c={theme.primaryColor}>Reorder</Text>}