Style updates

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

@@ -290,7 +290,7 @@ const BookmarkSettings = () => {
 					w={'100%'}
 					align='center'
 				>
-					<Group w={isMobile ? undefined : '75%'} align='start' justify='center'>
+					<Group w={isMobile ? undefined : '80%'} align='start' justify='center'>
 						{groups.length > 0 ? (
 							groups?.map((group: BookmarkGroup) => (
 								<DebouncedGroupSettingsItem

src/pages/settings/components/Messages/DebouncedMessage.tsx

@@ -1,7 +1,16 @@
-import { ActionIcon, Card, Stack, Switch, Text, TextInput, Tooltip } from '@mantine/core';
+import {
+	ActionIcon,
+	Card,
+	Group,
+	Stack,
+	Switch,
+	Text,
+	TextInput,
+	Tooltip,
+} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useCommonHooks } from 'hooks';
-import { FiTrash } from 'react-icons/fi';
+import { FiPower, FiTrash } from 'react-icons/fi';
 import { cardClasses, switchClasses, textInputClasses } from 'styles';
 import type { Message } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';
@@ -18,7 +27,12 @@ function DebouncedMessage({
 	const { handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	return (
-		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
+		<Card
+			className={cardClasses.settingsItem}
+			classNames={cardClasses}
+			w={'100%'}
+			style={{ alignItems: 'center' }}
+		>
 			<DeleteItemModal
 				modalOpened={modalOpened}
 				handleClose={closeModal}
@@ -42,48 +56,76 @@ function DebouncedMessage({
 					</Stack>
 				}
 			/>
-			<Tooltip
-				c={'var(--mantine-color-primary-0)'}
-				bg={'var(--mantine-color-background-0)'}
-				bd={'solid 1px var(--mantine-color-border-0)'}
-				label={'Delete'}
+			<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)',
+				}}
 			>
-				<ActionIcon
-					pos={'absolute'}
-					right={'1rem'}
-					color='red'
-					onClick={() => {
-						openModal();
+				<Tooltip
+					c={'var(--mantine-color-primary-0)'}
+					bg={'var(--mantine-color-background-0)'}
+					bd={'solid 1px var(--mantine-color-border-0)'}
+					label={message.customGreeting === 1 ? 'Enabled' : 'Disabled'}
+					refProp='rootRef'
+					styles={{
+						tooltip: { marginTop: '-.5rem' },
+						arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
 					}}
+					withArrow
 				>
-					<FiTrash color='black' />
-				</ActionIcon>
-			</Tooltip>
-			<Tooltip
-				c={'var(--mantine-color-primary-0)'}
-				bg={'var(--mantine-color-background-0)'}
-				bd={'solid 1px var(--mantine-color-border-0)'}
-				label={'Enabled'}
-			>
-				<Switch
-					className={switchClasses.default}
-					classNames={switchClasses}
-					label={'Enabled'}
-					labelPosition='left'
-					pos={'absolute'}
-					left={'1rem'}
-					defaultChecked={message.customGreeting === 1}
-					defaultValue={message.customGreeting}
-					onChange={(event) => {
-						setMessage({
-							...message,
-							customGreeting: event.target.checked ? 1 : 0,
-						});
-					}}
-				/>
-			</Tooltip>
+					<Switch
+						className={switchClasses.enable}
+						classNames={switchClasses}
+						defaultChecked={message.customGreeting === 1}
+						defaultValue={message.customGreeting}
+						thumbIcon={
+							<FiPower
+								style={{
+									color:
+										message.customGreeting === 1
+											? 'var(--mantine-color-accent-0)'
+											: 'red',
+								}}
+							/>
+						}
+						onChange={(event) => {
+							setMessage({
+								...message,
+								customGreeting: 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={() => {
+							openModal();
+						}}
+					>
+						<FiTrash color='black' />
+					</ActionIcon>
+				</Tooltip>
+			</Group>
 			<TextInput
 				label={label}
+				disabled={message.customGreeting === 0}
+				w={'100%'}
 				className={textInputClasses.settingsItem}
 				classNames={textInputClasses}
 				defaultValue={message.message}
@@ -93,6 +135,7 @@ function DebouncedMessage({
 						message: event.target.value,
 					});
 				}}
+				styles={{ root: { paddingTop: '1.25rem' } }}
 			/>
 		</Card>
 	);