Updates to styles; misc bugfixes

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -1,23 +1,20 @@
 import {
-	ActionIcon,
 	Card,
 	type ComboboxItem,
 	type ComboboxLikeRenderOptionInput,
 	Group,
 	Select,
 	Stack,
-	Switch,
 	Text,
 	TextInput,
-	Tooltip,
 } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiPower, FiTrash } from 'react-icons/fi';
-import { cardClasses, selectClasses, switchClasses, textInputClasses } from 'styles';
+import { cardClasses, selectClasses, textInputClasses } from 'styles';
 import type { Application } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';
+import ManagementPill from '../Shared/ManagementPill';
 
 function DebouncedApplication({
 	application,
@@ -79,70 +76,16 @@ function DebouncedApplication({
 					</Stack>
 				}
 			/>
-			<Group
-				style={{
-					position: 'absolute',
-					right: '1rem',
-					top: '.5rem',
-					width: 'fit-content',
-					backgroundColor:
-						'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
-					padding: '.5rem',
-					borderRadius: '10px',
-					color: 'var(--mantine-color-search-0)',
-					backdropFilter: 'brightness(0.5)',
+			<ManagementPill
+				enabled={app.enabled}
+				onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+					setUpdate({
+						...app,
+						enabled: event.target.checked ? 1 : 0,
+					});
 				}}
-			>
-				<Tooltip
-					c={'var(--mantine-color-primary-0)'}
-					bg={'var(--mantine-color-background-0)'}
-					bd={'solid 1px var(--mantine-color-border-0)'}
-					label={'Enabled'}
-					refProp='rootRef'
-					styles={{
-						tooltip: { marginTop: '-.5rem' },
-						arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
-					}}
-					withArrow
-				>
-					<Switch
-						className={switchClasses.enable}
-						classNames={switchClasses}
-						defaultChecked={app.enabled === 1}
-						defaultValue={app.enabled}
-						thumbIcon={
-							<FiPower
-								style={{
-									color: app.enabled === 1 ? 'var(--mantine-color-accent-0)' : 'red',
-								}}
-							/>
-						}
-						onChange={(event) => {
-							setUpdate({
-								...app,
-								enabled: event.target.checked ? 1 : 0,
-							});
-						}}
-					/>
-				</Tooltip>
-				|
-				<Tooltip
-					c={'var(--mantine-color-primary-0)'}
-					bg={'var(--mantine-color-background-0)'}
-					bd={'solid 1px var(--mantine-color-border-0)'}
-					label={'Delete'}
-				>
-					<ActionIcon
-						color='red'
-						onClick={() => {
-							setIsOpen(true);
-							openModal();
-						}}
-					>
-						<FiTrash color='black' />
-					</ActionIcon>
-				</Tooltip>
-			</Group>
+				openModal={openModal}
+			/>
 			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
 				<TextInput
 					label={'Name'}