Style updates and bugfixes

src/components/ManagementPill.tsx

@@ -0,0 +1,74 @@
+import { ActionIcon, Group, Switch, Tooltip } from '@mantine/core';
+import { FiPower, FiTrash } from 'react-icons/fi';
+import { switchClasses } from 'styles';
+
+export function ManagementPill({
+	enabled,
+	onChange,
+	openModal,
+}: {
+	enabled: number;
+	onChange: any;
+	openModal: () => void;
+}) {
+	return (
+		<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)',
+			}}
+		>
+			<Tooltip
+				c={'var(--mantine-color-primary-0)'}
+				bg={'var(--mantine-color-background-0)'}
+				bd={'solid 1px var(--mantine-color-border-0)'}
+				label={enabled === 1 ? 'Enabled' : 'Disabled'}
+				refProp='rootRef'
+				styles={{
+					tooltip: { marginTop: '-.5rem' },
+					arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
+				}}
+				withArrow
+			>
+				<Switch
+					className={switchClasses.enable}
+					classNames={switchClasses}
+					defaultChecked={enabled === 1}
+					defaultValue={enabled}
+					thumbIcon={
+						<FiPower
+							style={{
+								color: enabled === 1 ? 'var(--mantine-color-accent-0)' : 'red',
+							}}
+						/>
+					}
+					onChange={onChange}
+				/>
+			</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={() => {
+						openModal();
+					}}
+				>
+					<FiTrash color='black' />
+				</ActionIcon>
+			</Tooltip>
+		</Group>
+	);
+}