Style updates

README.md

@@ -80,6 +80,8 @@ Backend .env.example
 DB_HOST='127.0.0.1'
 DB_USER='triggeradmin'
 DB_PASS='trigger'
+DB_PORT='3306'
+API_PORT='5000'
 ```
 
 ## Run/build
@@ -91,7 +93,6 @@ npm run dev
 
 To build the application for production:
 
-#### ⚠️ Add any background images to public/backgrounds to include them in the build ⚠️
 
 ```shell
 npm run build
@@ -113,4 +114,4 @@ sudo pm2 start server.cjs
 
 ### TODO
 
-- Image uploads for backgrounds?
+- Mobile improvements

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,38 +56,47 @@ function DebouncedMessage({
 					</Stack>
 				}
 			/>
-			<Tooltip
+			<Group
-				c={'var(--mantine-color-primary-0)'}
+				style={{
-				bg={'var(--mantine-color-background-0)'}
+					position: 'absolute',
-				bd={'solid 1px var(--mantine-color-border-0)'}
+					right: '1rem',
-				label={'Delete'}
+					top: '.5rem',
-			>
+					width: 'fit-content',
-				<ActionIcon
+					backgroundColor:
-					pos={'absolute'}
+						'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
-					right={'1rem'}
+					padding: '.5rem',
-					color='red'
+					borderRadius: '10px',
-					onClick={() => {
+					color: 'var(--mantine-color-search-0)',
-						openModal();
+					backdropFilter: 'brightness(0.5)',
 				}}
 			>
-					<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'}
+					label={message.customGreeting === 1 ? 'Enabled' : 'Disabled'}
+					refProp='rootRef'
+					styles={{
+						tooltip: { marginTop: '-.5rem' },
+						arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
+					}}
+					withArrow
 				>
 					<Switch
-					className={switchClasses.default}
+						className={switchClasses.enable}
 						classNames={switchClasses}
-					label={'Enabled'}
-					labelPosition='left'
-					pos={'absolute'}
-					left={'1rem'}
 						defaultChecked={message.customGreeting === 1}
 						defaultValue={message.customGreeting}
+						thumbIcon={
+							<FiPower
+								style={{
+									color:
+										message.customGreeting === 1
+											? 'var(--mantine-color-accent-0)'
+											: 'red',
+								}}
+							/>
+						}
 						onChange={(event) => {
 							setMessage({
 								...message,
@@ -82,8 +105,27 @@ function DebouncedMessage({
 						}}
 					/>
 				</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>
 	);

src/styles/Card.module.css

@@ -2,7 +2,7 @@
 	&.root {
 		color: var(--mantine-color-primary-0);
 		background-color: transparent;
-		backdrop-filter: blur(5px) brightness(1.25) !important;
+		backdrop-filter: blur(5px) brightness(1.25);
 	}
 }
 
@@ -10,7 +10,7 @@
 	&.root {
 		color: var(--mantine-color-primary-0);
 		background-color: transparent;
-		backdrop-filter: blur(5px) brightness(1.25) !important;
+		backdrop-filter: blur(5px) brightness(1.25);
 		cursor: pointer;
 		&:hover {
 			color: var(--mantine-color-accent-0);

src/styles/Switch.module.css

@@ -34,3 +34,40 @@
 		}
 	}
 }
+
+.enable {
+	@media (max-width: 600px) {
+		&.root {
+			.label {
+				position: absolute;
+				top: -22px;
+				left: -8px;
+			}
+		}
+	}
+	&.root {
+		.track {
+			transition: all .2s ease !important;
+			background-color: color-mix(in srgb, var(--mantine-color-primary-0), transparent 90%);
+			overflow: visible;
+			height: 2px;
+		}
+		.thumb {
+			transition: all .2s ease !important;
+			border: none;
+			background-color: var(--mantine-color-background-0);
+			height: 1.5rem;
+			width: 1.5rem;
+			font-size: 1rem;
+			margin-left: -4px;
+		}
+		.input:checked + * > .thumb {
+			transition: all .2s ease !important;
+			background-color: var(--mantine-color-background-0);
+		}
+		.input:checked + .track {
+			transition: all .2s ease !important;
+			background-color: color-mix(in srgb, var(--mantine-color-primary-0), transparent 30%);
+		}
+	}
+}