Style updates and bugfixes

src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx

@@ -1,11 +1,10 @@
-import { ActionIcon, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
+import { Card, Group, Stack, Text, TextInput } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
+import { DeleteItemModal, ManagementPill } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiTrash } from 'react-icons/fi';
 import { cardClasses, textInputClasses } from 'styles';
 import type { Bookmark } from 'types';
-import DeleteItemModal from '../Shared/DeleteItemModal';
 
 function DebouncedBookmarkItem({
 	bookmarkItem,
@@ -66,25 +65,16 @@ function DebouncedBookmarkItem({
 				}
 				title='Delete Bookmark'
 			/>
-			<Tooltip
-				c={'var(--mantine-color-primary-0)'}
-				bg={'var(--mantine-color-background-0)'}
-				bd={'solid 1px var(--mantine-color-border-0)'}
-				label={'Delete'}
-			>
-				<ActionIcon
-					pos={'absolute'}
-					right={'1rem'}
-					top={'1rem'}
-					color='red'
-					onClick={() => {
-						setIsOpen(true);
-						openModal();
-					}}
-				>
-					<FiTrash color='black' />
-				</ActionIcon>
-			</Tooltip>
+			<ManagementPill
+				enabled={bookmark.enabled}
+				onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+					setUpdate({
+						...bookmark,
+						enabled: event.target.checked ? 1 : 0,
+					});
+				}}
+				openModal={openModal}
+			/>
 			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
 				<TextInput
 					label={'Name'}