Style uniformity

src/components/HelpModal/HelpModal.tsx

@@ -56,7 +56,7 @@ export function HelpModal({
 								};
 							})}
 						/>
-						<Divider my={8} color={'var(--mantine-color-accent-0)'} />
+						<Divider my={'.5rem'} color={'var(--mantine-color-accent-0)'} />
 						<HelpSection
 							name={'Available Applications'}
 							items={applicationData.map((application: Application) => {

src/components/HelpModal/HelpSection.tsx

@@ -8,9 +8,9 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
 			<h3
 				style={{
 					zIndex: 0,
-					padding: '8px',
+					padding: '.5rem',
 					marginTop: 0,
-					marginBottom: -32,
+					marginBottom: '-2rem',
 					borderRadius: '8px',
 					color: 'var(--mantine-color-background-0)',
 					backgroundColor: 'var(--mantine-color-border-0)',
@@ -18,13 +18,13 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
 			>
 				{name}
 			</h3>
-			<Divider py={8} color={'var(--mantine-color-accent-0)'} />
+			<Divider py={'.5rem'} color={'var(--mantine-color-accent-0)'} />
 			<Group
 				style={{
 					width: '100%',
 					backgroundColor: 'var(--mantine-color-search-0)',
 					borderRadius: '8px',
-					padding: '24px',
+					padding: '1.5rem',
 					justifyItems: 'center',
 				}}
 			>

src/components/HelpModal/HintItem.tsx

@@ -8,7 +8,7 @@ function HintItem({ command, name }: { command: string; name: string }) {
 			justify='center'
 			style={{
 				display: 'flex',
-				padding: '8px',
+				padding: '.5rem',
 				borderRadius: '10px',
 				backgroundColor: 'var(--mantine-color-background-0)',
 			}}
@@ -17,7 +17,7 @@ function HintItem({ command, name }: { command: string; name: string }) {
 				style={{
 					color: 'var(--mantine-color-background-0)',
 					backgroundColor: 'var(--mantine-color-primary-0)',
-					padding: '8px',
+					padding: '.5rem',
 					borderTopLeftRadius: '10px',
 					borderBottomLeftRadius: '10px',
 				}}
@@ -28,7 +28,7 @@ function HintItem({ command, name }: { command: string; name: string }) {
 				style={{
 					color: 'var(--mantine-color-background-0)',
 					backgroundColor: 'var(--mantine-color-accent-0)',
-					padding: '8px',
+					padding: '.5rem',
 					borderTopRightRadius: '10px',
 					borderBottomRightRadius: '10px',
 				}}

src/components/WeatherModal/CurrentWeather.tsx

@@ -48,7 +48,7 @@ export default function CurrentWeather({ current }: { current: CW }) {
 					<Group
 						gap={0}
 						justify='space-between'
-						style={{ width: '100%', paddingLeft: 16 }}
+						style={{ width: '100%', paddingLeft: '1rem' }}
 					>
 						<Text
 							style={{
@@ -85,8 +85,8 @@ export default function CurrentWeather({ current }: { current: CW }) {
 								style={{
 									fontSize: '1.375rem',
 									textAlign: 'right',
-									marginTop: -32,
+									marginTop: '-2rem',
-									marginLeft: 16,
+									marginLeft: '1rem',
 								}}
 							>
 								{current.temperature === 69 ? 'Nice' : current.textDescription}

src/components/WeatherModal/ExtendedForecastCard.tsx

@@ -22,7 +22,10 @@ export default function ExtendedForecastCard({
 				paddingBottom: '.5rem',
 			}}
 		>
-			<Group gap={0} style={{ width: '100%', marginBottom: '8px', paddingLeft: '16px' }}>
+			<Group
+				gap={0}
+				style={{ width: '100%', marginBottom: '.5rem', paddingLeft: '1rem' }}
+			>
 				<Text
 					style={{
 						fontSize: '1.375rem',

src/components/WeatherModal/WeatherGraphs.tsx

@@ -45,7 +45,7 @@ export default function WeatherGraphs({
 			style={{
 				background: 'var(--mantine-color-search-0)',
 				padding: '.5rem',
-				borderRadius: '.5rem',
+				borderRadius: '8px',
 			}}
 		>
 			<ResponsiveContainer width={'100%'} height={150}>

src/components/WeatherModal/WeatherModal.tsx

@@ -65,10 +65,10 @@ export function WeatherModal({
 							gap={8}
 							style={{ borderBottom: '1px solid var(--mantine-color-border-0)' }}
 						>
-							<Text fz={18} fw={200}>
+							<Text fz={'1.125rem'} fw={200}>
 								Weather Forecast for{' '}
 							</Text>
-							<Text fz={18} fw={600}>
+							<Text fz={'1.125rem'} fw={600}>
 								{currentUser.physicalAddress}
 							</Text>
 						</Group>

src/pages/homepage/components/Applications/AppItem.tsx

@@ -44,12 +44,12 @@ function AppItem({ url, icon, name }: { url: string; icon: string; name: string
 				style={{
 					height: '64px',
 					width: isMobile ? '100%' : undefined,
-					marginRight: isMobile ? '0' : '1em',
+					marginRight: isMobile ? 0 : '1rem',
-					marginLeft: isMobile ? '0' : '1em',
+					marginLeft: isMobile ? 0 : '1rem',
-					paddingTop: isMobile ? '0' : '15px',
+					paddingTop: isMobile ? 0 : '1rem',
 				}}
 			>
-				{Icon && <Icon style={{ height: '32px', width: '32px' }} />}
+				{Icon && <Icon style={{ height: '2rem', width: '2rem' }} />}
 			</Stack>
 			<Stack
 				style={{

src/pages/homepage/components/Bookmarks/BookmarkGroups.tsx

@@ -10,7 +10,7 @@ function BookmarkGroups({
 	return (
 		<Stack
 			style={{
-				marginBottom: '0em',
+				marginBottom: 0,
 				display: 'block',
 				lineHeight: '1.5rem',
 				overflow: 'hidden',

src/pages/homepage/components/Bookmarks/BookmarkItem.tsx

@@ -9,11 +9,6 @@ function BookmarkItem({ bookmark }: { bookmark: Bookmark }) {
 			classNames={textClasses}
 			component='a'
 			href={bookmark.url}
-			style={{
-				textOverflow: 'ellipsis',
-				overflow: 'hidden',
-				width: '100%',
-			}}
 		>
 			{bookmark.name}
 		</Text>

src/pages/homepage/components/Header/Header.tsx

@@ -138,15 +138,15 @@ function Header({
 							component='h2'
 							className={textClasses.dateTime}
 							classNames={textClasses}
-							mr={4}
+							mr={'.25rem'}
 						>
 							{current.temperature}°F
 						</Text>
 						<Text
 							className={textClasses.dateTime}
 							classNames={textClasses}
-							fz={14}
+							fz={'.875rem'}
-							mb={6}
+							mb={'.375rem'}
 						>
 							{current.highTemp}°F/{current.lowTemp}°F
 						</Text>

src/pages/homepage/components/Header/LargeHeader.tsx

@@ -70,7 +70,7 @@ function LargeHeader({
 			<Text
 				className={textClasses.greeting}
 				classNames={textClasses}
-				fz={isMobile ? 24 : 96}
+				fz={isMobile ? '2rem' : '6rem'}
 			>
 				{greet
 					.replace('$firstName', currentUser.firstName)
@@ -79,7 +79,7 @@ function LargeHeader({
 					.replace('$^lastName', currentUser.lastName.toUpperCase())}
 			</Text>
 			<Text
-				fz={36}
+				fz={'2.25rem'}
 				className={textClasses.dateTime}
 				classNames={textClasses}
 				m={0}
@@ -88,7 +88,7 @@ function LargeHeader({
 				{date}
 			</Text>
 			<Text
-				fz={96}
+				fz={'6rem'}
 				fw={400}
 				m={0}
 				className={textClasses.dateTime}

src/pages/homepage/components/Search/Search.tsx

@@ -75,10 +75,6 @@ export default function Search({
 		open(`${url}${option.searchTerm}`, '_self');
 	};
 
-	const handleAppSearchItem = (item: any) => {
-		open(`https://${item.option.url}`, '_self');
-	};
-
 	const handleKeyPress = (item: any) => {
 		let option = '';
 		let subtext = '';
@@ -278,115 +274,23 @@ export default function Search({
 
 	function RenderOption(item: any) {
 		const [showFillButton, setShowFillButton] = useState(false);
-		if (item.option.searchTerm !== undefined) {
+		const m = new Date(item.option.dateTimeStamp);
-			const m = new Date(item.option.dateTimeStamp);
+		const year = `${m.getUTCFullYear()}`.slice(-2);
-			const year = `${m.getUTCFullYear()}`.slice(-2);
+		const month = `0${m.getUTCMonth() + 1}`.slice(-2);
-			const month = `0${m.getUTCMonth() + 1}`.slice(-2);
+		const day = `0${m.getUTCDate()}`.slice(-2);
-			const day = `0${m.getUTCDate()}`.slice(-2);
+		const hours = `0${m.getUTCHours()}`.slice(-2);
-			const hours = `0${m.getUTCHours()}`.slice(-2);
+		const minutes = `0${m.getUTCMinutes()}`.slice(-2);
-			const minutes = `0${m.getUTCMinutes()}`.slice(-2);
+		const dateString = isMobile
-			const dateString = isMobile
+			? `${month}/${day}/${year}`
-				? `${month}/${day}/${year}`
+			: `${month}/${day}/${year} ${hours}:${minutes}`;
-				: `${month}/${day}/${year} ${hours}:${minutes}`;
-			return (
-				<Group
-					w={'100%'}
-					display={'flex'}
-					justify={'space-between'}
-					gap={0}
-					onClick={() => {
-						handleSearchHistoryItem(item);
-					}}
-					onMouseEnter={() => {
-						setShowFillButton(true);
-					}}
-					onMouseLeave={() => {
-						setShowFillButton(false);
-					}}
-				>
-					<Group m={0} p={0} miw={'160px'} style={{ overflow: 'hidden' }}>
-						<Text
-							style={{
-								backgroundColor: `${theme.primaryColor}33`,
-								fontWeight: 600,
-								borderRadius: '15px',
-								padding: '5px',
-							}}
-						>
-							{item.option.provider}
-						</Text>
-						{showFillButton && (
-							<ActionIcon
-								className={actionIconClasses.selectOptionActions}
-								classNames={actionIconClasses}
-								onClick={(e) => {
-									e.stopPropagation();
-									setSearchValue(`${item.option.prefix} ${item.option.searchTerm}`);
-								}}
-							>
-								<FiEdit />
-							</ActionIcon>
-						)}
-					</Group>
-					<Group
-						m={0}
-						p={0}
-						gap={0}
-						justify='space-between'
-						w={'65%'}
-						style={{
-							whiteSpace: 'nowrap',
-							overflow: 'hidden',
-							boxSizing: 'border-box',
-							position: 'relative',
-						}}
-					>
-						<Text
-							w={'75%'}
-							c={'var(--mantine-color-primary-0)'}
-							style={{
-								overflow: 'hidden',
-								textOverflow: 'ellipsis',
-							}}
-						>
-							{item.option.searchTerm}
-						</Text>
-						<Text
-							w={'25%'}
-							style={{
-								color: `${theme.primaryColor}55`,
-								textAlign: 'right',
-							}}
-						>
-							{dateString}
-						</Text>
-					</Group>
-					<Group m={0} p={0} right={16} w={'24px'}>
-						{showFillButton && (
-							<ActionIcon
-								className={actionIconClasses.selectOptionActions}
-								classNames={actionIconClasses}
-								onClick={(e) => {
-									e.stopPropagation();
-									mutateAsync({
-										method: 'DELETE',
-										endpoint: searchEndpoint,
-										body: { id: item.option.id },
-									});
-								}}
-							>
-								<FiTrash />
-							</ActionIcon>
-						)}
-					</Group>
-				</Group>
-			);
-		}
 		return (
 			<Group
 				w={'100%'}
+				display={'flex'}
+				justify={'space-between'}
+				gap={0}
 				onClick={() => {
-					handleAppSearchItem(item);
+					handleSearchHistoryItem(item);
 				}}
 				onMouseEnter={() => {
 					setShowFillButton(true);
@@ -395,28 +299,81 @@ export default function Search({
 					setShowFillButton(false);
 				}}
 			>
-				<Group w={'15%'}>
+				<Group m={0} p={0} miw={'160px'} style={{ overflow: 'hidden' }}>
 					<Text
 						style={{
 							backgroundColor: `${theme.primaryColor}33`,
 							fontWeight: 600,
 							borderRadius: '15px',
-							padding: '5px',
+							padding: '.25rem',
 						}}
 					>
-						{item.option.label}
+						{item.option.provider}
 					</Text>
+					{showFillButton && (
+						<ActionIcon
+							className={actionIconClasses.selectOptionActions}
+							classNames={actionIconClasses}
+							onClick={(e) => {
+								e.stopPropagation();
+								setSearchValue(`${item.option.prefix} ${item.option.searchTerm}`);
+							}}
+						>
+							<FiEdit />
+						</ActionIcon>
+					)}
 				</Group>
-				<Group justify='space-between' w={'80%'}>
+				<Group
-					<Text c={'var(--mantine-color-primary-0)'}>{item.option.searchTerm}</Text>
+					m={0}
+					p={0}
+					gap={0}
+					justify='space-between'
+					w={'65%'}
+					style={{
+						whiteSpace: 'nowrap',
+						overflow: 'hidden',
+						boxSizing: 'border-box',
+						position: 'relative',
+					}}
+				>
 					<Text
+						w={'75%'}
+						c={'var(--mantine-color-primary-0)'}
+						style={{
+							overflow: 'hidden',
+							textOverflow: 'ellipsis',
+						}}
+					>
+						{item.option.searchTerm}
+					</Text>
+					<Text
+						w={'25%'}
 						style={{
 							color: `${theme.primaryColor}55`,
+							textAlign: 'right',
 						}}
 					>
-						{item.option.value}
+						{dateString}
 					</Text>
 				</Group>
+				<Group m={0} p={0} right={'1rem'} w={'24px'}>
+					{showFillButton && (
+						<ActionIcon
+							className={actionIconClasses.selectOptionActions}
+							classNames={actionIconClasses}
+							onClick={(e) => {
+								e.stopPropagation();
+								mutateAsync({
+									method: 'DELETE',
+									endpoint: searchEndpoint,
+									body: { id: item.option.id },
+								});
+							}}
+						>
+							<FiTrash />
+						</ActionIcon>
+					)}
+				</Group>
 			</Group>
 		);
 	}
@@ -465,6 +422,7 @@ export default function Search({
 			.slice(0, 10);
 		setFilteredHistory(filtered);
 	}, [searchValue]);
+
 	return (
 		<Stack
 			style={{
@@ -472,7 +430,7 @@ export default function Search({
 				backgroundColor: 'transparent',
 				textAlign: 'center',
 				position: 'relative',
-				padding: '.3em',
+				padding: '.3rem',
 				display: 'inline-block',
 				gap: 0,
 			}}

src/pages/homepage/components/SettingsButton/SettingsButton.tsx

@@ -255,11 +255,11 @@ function SettingsButton() {
 										</ActionIcon>
 									</Tooltip>
 								</Group>
-								<Text fw={'bold'} fz={18}>
+								<Text fw={'bold'} fz={'1.125rem'}>
 									Currently:{' '}
 								</Text>
 								{theme.name}
-								<Text fw={'bold'} fz={18}>
+								<Text fw={'bold'} fz={'1.125rem'}>
 									Playlist:{' '}
 								</Text>
 								<Select
@@ -325,22 +325,22 @@ function SettingsButton() {
 							>
 								<Text
 									style={{
-										fontSize: 12,
+										fontSize: '.75rem',
-										paddingLeft: 8,
+										paddingLeft: '.5rem',
-										paddingRight: 8,
+										paddingRight: '.5rem',
-										paddingTop: 2,
+										paddingTop: '.125rem',
-										paddingBottom: 2,
+										paddingBottom: '.125rem',
 										borderRadius: 8,
 										position: 'absolute',
-										left: '-12px',
+										left: -12,
-										top: '-8px',
+										top: -8,
 										backgroundColor: 'var(--mantine-color-primary-0)',
 										color: 'var(--mantine-color-background-0)',
 									}}
 								>
 									Apps
 								</Text>
-								<Text fz={14} mt={16}>
+								<Text fz={'.875rem'} mt={'1rem'}>
 									Density
 								</Text>
 								<Stack m={0} p={0} gap={0} w={'90%'}>
@@ -409,22 +409,22 @@ function SettingsButton() {
 							>
 								<Text
 									style={{
-										fontSize: 12,
+										fontSize: '.75rem',
-										paddingLeft: 8,
+										paddingLeft: '.5rem',
-										paddingRight: 8,
+										paddingRight: '.5rem',
-										paddingTop: 2,
+										paddingTop: '.125rem',
-										paddingBottom: 2,
+										paddingBottom: '.125rem',
 										borderRadius: 8,
 										position: 'absolute',
-										left: '-12px',
+										left: -12,
-										top: '-8px',
+										top: -8,
 										backgroundColor: 'var(--mantine-color-primary-0)',
 										color: 'var(--mantine-color-background-0)',
 									}}
 								>
 									Bookmarks
 								</Text>
-								<Text fz={14} mt={16}>
+								<Text fz={'.875rem'} mt={'1rem'}>
 									Density
 								</Text>
 								<Stack m={0} p={0} gap={0} w={'90%'}>

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

@@ -70,12 +70,12 @@ function AppSettingsItem({
 					style={{
 						height: '128px',
 						width: isMobile ? '100%' : undefined,
-						marginRight: isMobile ? '0' : '1em',
+						marginRight: isMobile ? '0' : '1rem',
-						marginLeft: isMobile ? '0' : '2em',
+						marginLeft: isMobile ? '0' : '2rem',
-						paddingTop: isMobile ? '0' : '32px',
+						paddingTop: isMobile ? '0' : '2rem',
 					}}
 				>
-					{Icon && <Icon style={{ height: '64px', width: '64px' }} />}
+					{Icon && <Icon style={{ height: '4rem', width: '4rem' }} />}
 				</Stack>
 				<Stack
 					style={{
@@ -87,11 +87,11 @@ function AppSettingsItem({
 						gap: 0,
 					}}
 				>
-					<Text fz={22} className={textClasses.appName} classNames={textClasses}>
+					<Text fz={'1.5rem'} className={textClasses.appName} classNames={textClasses}>
 						{name}
 					</Text>
 					<Text
-						fz={16}
+						fz={'1rem'}
 						className={textClasses.appUrl}
 						classNames={textClasses}
 						style={{

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

@@ -121,7 +121,6 @@ const ApplicationSettings = () => {
 							<TextInput
 								label={'Name'}
 								className={textInputClasses.settingsItem}
-								pt={16}
 								w={'45%'}
 								classNames={textInputClasses}
 								defaultValue={newApplication.name}
@@ -135,7 +134,6 @@ const ApplicationSettings = () => {
 							<TextInput
 								label={'Base URL'}
 								className={textInputClasses.settingsItem}
-								pt={16}
 								w={'45%'}
 								classNames={textInputClasses}
 								defaultValue={newApplication.baseUrl}
@@ -151,7 +149,6 @@ const ApplicationSettings = () => {
 							<TextInput
 								label={'URL'}
 								className={textInputClasses.settingsItem}
-								pt={16}
 								w={'100%'}
 								classNames={textInputClasses}
 								defaultValue={newApplication.url}
@@ -175,7 +172,7 @@ const ApplicationSettings = () => {
 									dropdown: selectClasses.dropdown,
 								}}
 								w={'45%'}
-								mt={12}
+								mt={'.75rem'}
 								limit={100}
 								placeholder='Search for an icon...'
 								data={Object.keys(allIcons).map((icon) => {
@@ -208,7 +205,7 @@ const ApplicationSettings = () => {
 							<TextInput
 								label={'Filter'}
 								className={textInputClasses.settingsItem}
-								pt={16}
+								pt={'1rem'}
 								w={'45%'}
 								classNames={textInputClasses}
 								defaultValue={newApplication.filterName}

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

@@ -63,9 +63,9 @@ function DebouncedApplication({
 						<Text
 							style={{
 								fontWeight: 'bold',
-								fontSize: '20px',
+								fontSize: '1.25rem',
-								padding: '8px',
+								padding: '.5rem',
-								margin: '8px',
+								margin: '.5rem',
 								borderRadius: '10px',
 								backgroundColor: 'var(--mantine-color-accent-0)',
 								color: 'var(--mantine-color-background-0)',
@@ -83,8 +83,8 @@ function DebouncedApplication({
 			>
 				<ActionIcon
 					pos={'absolute'}
-					top={16}
+					top={'1rem'}
-					right={16}
+					right={'1rem'}
 					color='red'
 					onClick={() => {
 						setIsOpen(true);
@@ -106,7 +106,7 @@ function DebouncedApplication({
 					label={'Enabled'}
 					labelPosition='left'
 					pos={'absolute'}
-					left={16}
+					left={'1rem'}
 					defaultChecked={app.enabled === 1}
 					defaultValue={app.enabled}
 					onChange={(event) => {
@@ -121,7 +121,6 @@ function DebouncedApplication({
 				<TextInput
 					label={'Name'}
 					className={textInputClasses.settingsItem}
-					pt={16}
 					classNames={textInputClasses}
 					defaultValue={app.name}
 					onChange={(event) => {
@@ -134,7 +133,6 @@ function DebouncedApplication({
 				<TextInput
 					label={'Base URL'}
 					className={textInputClasses.settingsItem}
-					pt={16}
 					classNames={textInputClasses}
 					defaultValue={app.baseUrl}
 					onChange={(event) => {
@@ -150,7 +148,6 @@ function DebouncedApplication({
 					label={'URL'}
 					className={textInputClasses.settingsItem}
 					w={isMobile ? undefined : '100%'}
-					pt={16}
 					classNames={textInputClasses}
 					defaultValue={app.url}
 					onChange={(event) => {
@@ -176,7 +173,7 @@ function DebouncedApplication({
 						option: selectClasses.menuSelectOption,
 						dropdown: selectClasses.dropdown,
 					}}
-					mt={12}
+					mt={'.75rem'}
 					limit={100}
 					defaultSearchValue={app?.icon}
 					data={Object.keys(allIcons).map((icon) => {
@@ -209,7 +206,6 @@ function DebouncedApplication({
 				<TextInput
 					label={'Filter'}
 					className={textInputClasses.settingsItem}
-					pt={16}
 					classNames={textInputClasses}
 					defaultValue={app.filterName}
 					onChange={(event) => {

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

@@ -12,7 +12,7 @@ function BookmarkSettingsItem({ bookmark }: { bookmark: Bookmark }) {
 				borderRadius: '4px',
 				color: 'var(--mantine-color-accent-0)',
 				backgroundColor: 'var(--mantine-color-search-0)',
-				padding: '8px',
+				padding: '.5rem',
 			}}
 			onMouseEnter={() => setHover(true)}
 			onMouseLeave={() => setHover(false)}

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

@@ -123,7 +123,6 @@ const BookmarkSettings = () => {
 							<TextInput
 								label={'Category Name'}
 								className={textInputClasses.settingsItem}
-								pt={16}
 								classNames={textInputClasses}
 								defaultValue={newGroup.categoryName}
 								onChange={(event) => {
@@ -136,7 +135,6 @@ const BookmarkSettings = () => {
 							<TextInput
 								label={'Filter Name'}
 								className={textInputClasses.settingsItem}
-								pt={16}
 								classNames={textInputClasses}
 								defaultValue={newGroup.filterName}
 								onChange={(event) => {
@@ -241,14 +239,14 @@ const BookmarkSettings = () => {
 													>
 														<Group gap={0} align='center' justify='space-between'>
 															<Stack gap={0}>
-																<Text c={'var(--mantine-color-accent-0)'} fz={14}>
+																<Text c={'var(--mantine-color-accent-0)'} fz={'1rem'}>
 																	Name
 																</Text>
 																<Text
-																	p={4}
+																	p={'.25rem'}
 																	style={{
 																		borderRadius: '4px',
-																		paddingLeft: '8px',
+																		paddingLeft: '.5rem',
 																		color: 'var(--mantine-color-primary-0)',
 																		backgroundColor: 'var(--mantine-color-search-0)',
 																	}}
@@ -257,14 +255,14 @@ const BookmarkSettings = () => {
 																</Text>
 															</Stack>
 															<Stack gap={0}>
-																<Text c={'var(--mantine-color-accent-0)'} fz={14}>
+																<Text c={'var(--mantine-color-accent-0)'} fz={'1rem'}>
 																	Filter Name
 																</Text>
 																<Text
-																	p={4}
+																	p={'.25rem'}
 																	style={{
 																		borderRadius: '4px',
-																		paddingLeft: '8px',
+																		paddingLeft: '.5rem',
 																		color: 'var(--mantine-color-primary-0)',
 																		backgroundColor: 'var(--mantine-color-search-0)',
 																	}}

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

@@ -50,9 +50,9 @@ function DebouncedBookmarkItem({
 						<Text
 							style={{
 								fontWeight: 'bold',
-								fontSize: '20px',
+								fontSize: '1.25rem',
-								padding: '8px',
+								padding: '.5rem',
-								margin: '8px',
+								margin: '.5rem',
 								borderRadius: '10px',
 								backgroundColor: 'var(--mantine-color-accent-0)',
 								color: 'var(--mantine-color-background-0)',
@@ -71,8 +71,8 @@ function DebouncedBookmarkItem({
 			>
 				<ActionIcon
 					pos={'absolute'}
-					right={16}
+					right={'1rem'}
-					top={16}
+					top={'1rem'}
 					color='red'
 					onClick={() => {
 						setIsOpen(true);
@@ -86,7 +86,6 @@ function DebouncedBookmarkItem({
 				<TextInput
 					label={'Name'}
 					className={textInputClasses.settingsItem}
-					pt={16}
 					classNames={textInputClasses}
 					defaultValue={bookmark.name}
 					onChange={(event) => {
@@ -99,7 +98,6 @@ function DebouncedBookmarkItem({
 				<TextInput
 					label={'Category'}
 					className={textInputClasses.settingsItem}
-					pt={16}
 					classNames={textInputClasses}
 					defaultValue={bookmark.category}
 					onChange={(event) => {
@@ -115,7 +113,6 @@ function DebouncedBookmarkItem({
 					label={'URL'}
 					className={textInputClasses.settingsItem}
 					w={isMobile ? '80%' : '100%'}
-					pt={16}
 					classNames={textInputClasses}
 					defaultValue={bookmark.url}
 					onChange={(event) => {

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

@@ -109,9 +109,9 @@ function DebouncedGroupSettingsItem({
 						<Text
 							style={{
 								fontWeight: 'bold',
-								fontSize: '20px',
+								fontSize: '1.25rem',
-								padding: '8px',
+								padding: '.5rem',
-								margin: '8px',
+								margin: '.5rem',
 								borderRadius: '10px',
 								backgroundColor: 'var(--mantine-color-accent-0)',
 								color: 'var(--mantine-color-background-0)',
@@ -125,7 +125,7 @@ function DebouncedGroupSettingsItem({
 				}
 			/>
 			<Card.Section
-				p={16}
+				p={'1rem'}
 				bg={'var(--mantine-color-search-0)'}
 				c={'var(--mantine-color-background-0)'}
 			>
@@ -174,7 +174,7 @@ function DebouncedGroupSettingsItem({
 							label={'Delete'}
 						>
 							<ActionIcon
-								mt={24}
+								mt={'1.5rem'}
 								size={'lg'}
 								color='red'
 								onClick={() => {
@@ -196,7 +196,7 @@ function DebouncedGroupSettingsItem({
 							top: isMobile ? 140 : 78,
 							right: 18,
 							zIndex: 10,
-							fontSize: 20,
+							fontSize: '1.25rem',
 							textAlign: 'center',
 							textJustify: 'auto',
 						}}
@@ -205,7 +205,7 @@ function DebouncedGroupSettingsItem({
 					</Text>
 				</Stack>
 			</Card.Section>
-			<Card.Section mt={16} p={16}>
+			<Card.Section mt={'1rem'} p={'1rem'}>
 				<Stack>
 					<DragDropContext onDragEnd={onDragEnd}>
 						<Droppable droppableId={`${bookmarkGroup.id}`}>
@@ -274,7 +274,7 @@ function DebouncedGroupSettingsItem({
 				</Stack>
 			</Card.Section>
 			<Card.Section
-				p={8}
+				p={'.5rem'}
 				bg={'var(--mantine-color-search-0)'}
 				c={'var(--mantine-color-background-0)'}
 			>
@@ -317,7 +317,7 @@ function DebouncedGroupSettingsItem({
 												},
 											}}
 											className={textInputClasses.settingsItem}
-											pt={16}
+											pt={'1rem'}
 											classNames={textInputClasses}
 											onChange={(event) => {
 												setNewBookmark({
@@ -334,7 +334,7 @@ function DebouncedGroupSettingsItem({
 												},
 											}}
 											className={textInputClasses.settingsItem}
-											pt={16}
+											pt={'1rem'}
 											classNames={textInputClasses}
 											disabled
 											defaultValue={group.categoryName}
@@ -356,7 +356,7 @@ function DebouncedGroupSettingsItem({
 											}}
 											className={textInputClasses.settingsItem}
 											w={'100%'}
-											pt={16}
+											pt={'1rem'}
 											classNames={textInputClasses}
 											onChange={(event) => {
 												setNewBookmark({

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

@@ -30,9 +30,9 @@ function DebouncedMessage({
 						<Text
 							style={{
 								fontWeight: 'bold',
-								fontSize: '20px',
+								fontSize: '1.25rem',
-								padding: '8px',
+								padding: '.5rem',
-								margin: '8px',
+								margin: '.5rem',
 								borderRadius: '10px',
 								backgroundColor: 'var(--mantine-color-accent-0)',
 								color: 'var(--mantine-color-background-0)',
@@ -50,7 +50,7 @@ function DebouncedMessage({
 			>
 				<ActionIcon
 					pos={'absolute'}
-					right={16}
+					right={'1rem'}
 					color='red'
 					onClick={() => {
 						openModal();
@@ -62,7 +62,6 @@ function DebouncedMessage({
 			<TextInput
 				label={label}
 				className={textInputClasses.settingsItem}
-				pt={16}
 				classNames={textInputClasses}
 				defaultValue={message.message}
 				onChange={(event) => {

src/pages/settings/components/Personalization/Personalization.tsx

@@ -74,7 +74,7 @@ const PersonalizationSettings = () => {
 						<Overlay
 							style={{
 								borderRadius: '10px',
-								margin: '-8px',
+								margin: '-.5rem',
 								backdropFilter: 'blur(10px) brightness(1.2)',
 							}}
 						/>

src/pages/settings/components/Search/DebouncedSearchProvider.tsx

@@ -56,9 +56,9 @@ function DebouncedSearchProvider({
 						<Text
 							style={{
 								fontWeight: 'bold',
-								fontSize: '20px',
+								fontSize: '1.25rem',
-								padding: '8px',
+								padding: '.5rem',
-								margin: '8px',
+								margin: '.5rem',
 								borderRadius: '10px',
 								backgroundColor: 'var(--mantine-color-accent-0)',
 								color: 'var(--mantine-color-background-0)',
@@ -76,7 +76,7 @@ function DebouncedSearchProvider({
 			>
 				<ActionIcon
 					pos={'absolute'}
-					right={16}
+					right={'1rem'}
 					color='red'
 					onClick={() => {
 						setIsOpen(true);
@@ -91,7 +91,6 @@ function DebouncedSearchProvider({
 					<TextInput
 						label={'Name'}
 						className={textInputClasses.settingsItem}
-						pt={16}
 						classNames={textInputClasses}
 						defaultValue={provider.name}
 						onChange={(event) => {
@@ -104,7 +103,6 @@ function DebouncedSearchProvider({
 					<TextInput
 						label={'Prefix'}
 						className={textInputClasses.settingsItem}
-						pt={16}
 						classNames={textInputClasses}
 						defaultValue={provider.prefix}
 						onChange={(event) => {
@@ -119,7 +117,6 @@ function DebouncedSearchProvider({
 					label={'Url'}
 					w={isMobile ? '80%' : '100%'}
 					className={textInputClasses.settingsItem}
-					pt={16}
 					classNames={textInputClasses}
 					defaultValue={provider.url}
 					onChange={(event) => {

src/pages/settings/components/Search/SearchProviders.tsx

@@ -76,7 +76,6 @@ const SearchProviderSettings = () => {
 								<TextInput
 									label={'Name'}
 									className={textInputClasses.settingsItem}
-									pt={16}
 									classNames={textInputClasses}
 									defaultValue={newProvider.name}
 									onChange={(event) => {
@@ -89,7 +88,6 @@ const SearchProviderSettings = () => {
 								<TextInput
 									label={'Prefix'}
 									className={textInputClasses.settingsItem}
-									pt={16}
 									classNames={textInputClasses}
 									defaultValue={newProvider.prefix}
 									onChange={(event) => {
@@ -103,7 +101,6 @@ const SearchProviderSettings = () => {
 							<TextInput
 								label={'Url'}
 								className={textInputClasses.settingsItem}
-								pt={16}
 								w={isMobile ? '64%' : '100%'}
 								classNames={textInputClasses}
 								defaultValue={newProvider.url}

src/pages/settings/components/Theming/ThemeCard.tsx

@@ -54,9 +54,9 @@ function ThemeCard({
 						<Text
 							style={{
 								fontWeight: 'bold',
-								fontSize: '20px',
+								fontSize: '1.25rem',
-								padding: '8px',
+								padding: '.5rem',
-								margin: '8px',
+								margin: '.5rem',
 								borderRadius: '10px',
 								backgroundColor: 'var(--mantine-color-accent-0)',
 								color: 'var(--mantine-color-background-0)',
@@ -71,8 +71,8 @@ function ThemeCard({
 					position: 'absolute',
 					top: -10,
 					left: 6,
-					paddingRight: 4,
+					paddingRight: '.25rem',
-					paddingLeft: 4,
+					paddingLeft: '.25rem',
 					backgroundColor: cardTheme.borderColor,
 					borderRadius: '4px',
 					color:
@@ -115,7 +115,7 @@ function ThemeCard({
 						<Group justify='space-between'>
 							<Box
 								style={{
-									height: '8px',
+									height: '.5rem',
 									width: '100px',
 									backgroundColor: cardTheme.accentColor,
 									borderRadius: '4px',
@@ -123,7 +123,7 @@ function ThemeCard({
 							/>
 							<Box
 								style={{
-									height: '8px',
+									height: '.5rem',
 									width: '50px',
 									backgroundColor: cardTheme.primaryColor,
 									borderRadius: '4px',
@@ -147,7 +147,7 @@ function ThemeCard({
 									width: '40px',
 									borderRadius: '4px',
 									backdropFilter: 'blur(10px) brightness(1.5)',
-									fontSize: '6px',
+									fontSize: '.375rem',
 									justifyContent: 'center',
 									alignContent: 'center',
 									color: cardTheme.primaryColor,
@@ -161,7 +161,7 @@ function ThemeCard({
 									width: '40px',
 									borderRadius: '4px',
 									backdropFilter: 'blur(10px) brightness(1.5)',
-									fontSize: '6px',
+									fontSize: '.375rem',
 									justifyContent: 'center',
 									alignContent: 'center',
 									color: cardTheme.primaryColor,
@@ -175,7 +175,7 @@ function ThemeCard({
 									width: '40px',
 									borderRadius: '4px',
 									backdropFilter: 'blur(10px) brightness(1.5)',
-									fontSize: '6px',
+									fontSize: '.375rem',
 									justifyContent: 'center',
 									alignContent: 'center',
 									color: cardTheme.primaryColor,
@@ -208,8 +208,8 @@ function ThemeCard({
 							backgroundColor:
 								shiftEdit === 0 ? 'white' : 'var(--mantine-color-background-0)',
 							borderRadius: '50%',
-							padding: '8px',
+							padding: '.5rem',
-							margin: '4px',
+							margin: '.25rem',
 							border: 'solid 2px',
 							borderColor: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
 							transition: 'all 0.2s',
@@ -217,7 +217,7 @@ function ThemeCard({
 					>
 						<FiEdit
 							style={{
-								fontSize: '2em',
+								fontSize: '2rem',
 								fontWeight: 'bold',
 								color: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
 							}}
@@ -250,8 +250,8 @@ function ThemeCard({
 							backgroundColor:
 								shiftShuffle === 0 ? 'white' : 'var(--mantine-color-background-0)',
 							borderRadius: '50%',
-							padding: '8px',
+							padding: '.5rem',
-							margin: '4px',
+							margin: '.25rem',
 							border: 'solid 2px',
 							borderColor:
 								shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
@@ -260,7 +260,7 @@ function ThemeCard({
 					>
 						<FiShuffle
 							style={{
-								fontSize: '2em',
+								fontSize: '2rem',
 								fontWeight: 'bold',
 								color: shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
 							}}
@@ -272,8 +272,8 @@ function ThemeCard({
 					gap={0}
 					style={{
 						zIndex: 2,
-						padding: '4px',
+						padding: '.25rem',
-						paddingRight: '0px',
+						paddingRight: 0,
 						position: 'absolute',
 						right: 3,
 						backgroundColor: '#ffffff88',
@@ -291,7 +291,7 @@ function ThemeCard({
 							background: cardTheme.randomEnabled
 								? 'rgba(255,255,255,1)'
 								: 'rgba(255,255,255,0.5)',
-							margin: '2px',
+							margin: '.125rem',
 						}}
 						styles={{
 							root: {
@@ -301,7 +301,7 @@ function ThemeCard({
 							icon: {
 								height: '20px',
 								width: '20px',
-								fontSize: '24px',
+								fontSize: '1.5rem',
 								margin: 0,
 								padding: 0,
 							},
@@ -320,7 +320,7 @@ function ThemeCard({
 						className={actionIconClasses.themeEditButton}
 						classNames={actionIconClasses}
 						onClick={() => handleOpen(cardTheme)}
-						mb={2}
+						mb={'.125rem'}
 					>
 						<FiEdit color='green' />
 					</ActionIcon>

src/pages/settings/components/Theming/ThemeMiniCard.tsx

@@ -31,7 +31,7 @@ function ThemeMiniCard({
 				c={theme?.primaryColor}
 				size='md'
 				style={{
-					padding: 4,
+					padding: '.25rem',
 					borderRadius: '8px',
 				}}
 			>

src/pages/settings/components/Theming/ThemeModal.tsx

@@ -71,7 +71,7 @@ function ThemeModal({
 						: undefined,
 				backgroundSize: item !== 'none' ? 'cover' : undefined,
 				backgroundColor: item === 'none' ? '#00000088' : undefined,
-				paddingLeft: 8,
+				paddingLeft: '.5rem',
 				alignItems: 'center',
 			}}
 			onClick={() =>
@@ -87,7 +87,7 @@ function ThemeModal({
 						width: 'min-content',
 						height: 'min-content',
 						backdropFilter: 'blur(10px) brightness(.25)',
-						padding: 8,
+						padding: '.5rem',
 						borderRadius: 4,
 					}}
 				>
@@ -98,8 +98,8 @@ function ThemeModal({
 						style={{
 							width: 'min-content',
 							backdropFilter: 'blur(10px) brightness(.25)',
-							padding: 8,
+							padding: '.5rem',
-							marginTop: 34,
+							marginTop: '2rem',
 							borderTopLeftRadius: 4,
 							color: 'var(--mantine-color-accent-0)',
 						}}
@@ -174,7 +174,7 @@ function ThemeModal({
 										onChange={setColorValue}
 										format={colorId === 'background' ? 'hex' : 'hexa'}
 										w={'90%'}
-										mb={colorId === 'background' ? '24px' : undefined}
+										mb={colorId === 'background' ? '1.5rem' : undefined}
 									/>
 									<Group justify='center'>
 										<TextInput
@@ -342,7 +342,7 @@ function ThemeModal({
 							justify='center'
 						>
 							<Group gap={0}>
-								<Text mr={8}>Search:</Text>
+								<Text mr={'.5rem'}>Search:</Text>
 								<TextInput
 									className={textInputClasses.default}
 									classNames={textInputClasses}
@@ -351,7 +351,7 @@ function ThemeModal({
 										<FiX
 											style={{
 												cursor: 'pointer',
-												margin: '4px',
+												margin: '.25rem',
 											}}
 											onClick={() => {
 												setQuery('');

src/pages/settings/components/Theming/ThemeModalContent.tsx

@@ -18,9 +18,9 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 				<Stack
 					style={{
 						height: '64px',
-						marginRight: '1em',
+						marginRight: '1rem',
-						marginLeft: '1em',
+						marginLeft: '1rem',
-						paddingTop: '15px',
+						paddingTop: '1rem',
 					}}
 				>
 					<FiCheck style={{ color: selectedTheme.primaryColor }} height={32} width={32} />
@@ -38,7 +38,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 					<Text
 						style={{
 							fontWeight: 400,
-							fontSize: 11,
+							fontSize: '.625rem',
 							fontStyle: 'normal',
 							color: selectedTheme.primaryColor,
 							fontFamily:
@@ -51,7 +51,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 					<Text
 						style={{
 							fontWeight: 400,
-							fontSize: 11,
+							fontSize: '.625rem',
 							fontStyle: 'italic',
 							color: selectedTheme.accentColor,
 							fontFamily:
@@ -96,13 +96,13 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 				pl={'1.5rem'}
 				style={{
 					textDecoration: 'underline',
-					fontSize: '20px',
+					fontSize: '1.25rem',
 					fontWeight: 200,
 					fontStyle: 'italic',
 					height: '10px',
 					textTransform: 'uppercase',
-					marginTop: '20px',
+					marginTop: '1.25rem',
-					marginBottom: '20px',
+					marginBottom: '1.25rem',
 					color: selectedTheme.primaryColor,
 				}}
 			>
@@ -119,7 +119,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 					gridTemplateColumns: '1fr 1fr 1fr',
 					gridTemplateRows: '64px',
 					padding: '1rem',
-					paddingTop: '0rem',
+					paddingTop: 0,
 					justifyContent: 'center',
 					alignContent: 'center',
 				}}
@@ -132,13 +132,13 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 				pl={'1.5rem'}
 				style={{
 					textDecoration: 'underline',
-					fontSize: '20px',
+					fontSize: '1.25rem',
 					fontWeight: 200,
 					fontStyle: 'italic',
 					height: '10px',
 					textTransform: 'uppercase',
-					marginTop: '20px',
+					marginTop: '1.25rem',
-					marginBottom: '20px',
+					marginBottom: '1.25rem',
 					color: selectedTheme.primaryColor,
 				}}
 			>
@@ -158,23 +158,23 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 				<Stack
 					style={{
 						width: '100%',
-						marginBottom: '0em',
+						marginBottom: 0,
 						display: 'block',
 						lineHeight: '1.5rem',
 						padding: '1rem',
-						paddingTop: '0rem',
+						paddingTop: 0,
 					}}
 				>
 					<Text
 						style={{
-							fontSize: '14px',
+							fontSize: '.875rem',
 							fontWeight: 400,
 							height: '10px',
 							width: 'auto',
 							color: selectedTheme.accentColor,
 							textTransform: 'uppercase',
-							marginTop: '20px',
+							marginTop: '1.25rem',
-							marginBottom: '20px',
+							marginBottom: '1.25rem',
 						}}
 					>
 						Example Category
@@ -182,7 +182,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 					<Text
 						style={{
 							display: 'block',
-							fontSize: '14px',
+							fontSize: '.875rem',
 							lineHeight: 2,
 							color: selectedTheme.primaryColor,
 						}}
@@ -193,7 +193,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 					<Text
 						style={{
 							display: 'block',
-							fontSize: '14px',
+							fontSize: '.875rem',
 							lineHeight: 2,
 							color: selectedTheme.primaryColor,
 						}}
@@ -205,23 +205,23 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 				<Stack
 					style={{
 						width: '100%',
-						marginBottom: '0em',
+						marginBottom: 0,
 						display: 'block',
 						lineHeight: '1.5rem',
 						padding: '1rem',
-						paddingTop: '0rem',
+						paddingTop: 0,
 					}}
 				>
 					<Text
 						style={{
-							fontSize: '14px',
+							fontSize: '.875rem',
 							fontWeight: 400,
 							height: '10px',
 							width: 'auto',
 							color: selectedTheme.accentColor,
 							textTransform: 'uppercase',
-							marginTop: '20px',
+							marginTop: '1.25rem',
-							marginBottom: '20px',
+							marginBottom: '1.25rem',
 						}}
 					>
 						Example Category
@@ -229,7 +229,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 					<Text
 						style={{
 							display: 'block',
-							fontSize: '14px',
+							fontSize: '.875rem',
 							lineHeight: 2,
 							color: selectedTheme.primaryColor,
 						}}
@@ -240,7 +240,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 					<Text
 						style={{
 							display: 'block',
-							fontSize: '14px',
+							fontSize: '.875rem',
 							lineHeight: 2,
 							color: selectedTheme.primaryColor,
 						}}

src/pages/settings/components/Theming/ThemePlaylistCard.tsx

@@ -52,9 +52,9 @@ function ThemePlaylistCard({
 						<Text
 							style={{
 								fontWeight: 'bold',
-								fontSize: '20px',
+								fontSize: '1.25rem',
-								padding: '8px',
+								padding: '.5rem',
-								margin: '8px',
+								margin: '.5rem',
 								borderRadius: '10px',
 								backgroundColor: 'var(--mantine-color-accent-0)',
 								color: 'var(--mantine-color-background-0)',
@@ -69,8 +69,8 @@ function ThemePlaylistCard({
 					position: 'absolute',
 					top: -10,
 					left: 6,
-					paddingRight: 4,
+					paddingRight: '.25rem',
-					paddingLeft: 4,
+					paddingLeft: '.25rem',
 					backgroundColor: 'var(--mantine-color-border-0)',
 					borderRadius: '4px',
 					color:
@@ -88,8 +88,8 @@ function ThemePlaylistCard({
 						position: 'absolute',
 						top: -10,
 						right: 6,
-						paddingRight: 4,
+						paddingRight: '.25rem',
-						paddingLeft: 4,
+						paddingLeft: '.25rem',
 						backgroundColor: 'var(--mantine-color-border-0)',
 						borderRadius: '4px',
 						color:
@@ -111,8 +111,8 @@ function ThemePlaylistCard({
 						position: 'absolute',
 						top: -10,
 						right: 40,
-						paddingRight: 4,
+						paddingRight: '.25rem',
-						paddingLeft: 4,
+						paddingLeft: '.25rem',
 						backgroundColor: 'var(--mantine-color-border-0)',
 						borderRadius: '4px',
 						color:
@@ -143,13 +143,13 @@ function ThemePlaylistCard({
 				}}
 			>
 				{hover && <Overlay opacity={0.5} zIndex={1} />}
-				<Stack h={'100%'} w={'100%'} align='center' mt={12}>
+				<Stack h={'100%'} w={'100%'} align='center' mt={'.75rem'}>
 					{cardPlaylist.name !== 'Time of Day' ? (
 						<>
 							<Text
-								px={8}
+								px={'.5rem'}
-								mt={8}
+								mt={'.5rem'}
-								mb={-8}
+								mb={'-.5rem'}
 								style={{
 									color: 'var(--mantine-color-background-0)',
 									backgroundColor: 'var(--mantine-color-primary-0)',
@@ -175,9 +175,9 @@ function ThemePlaylistCard({
 					) : (
 						<>
 							<Text
-								px={8}
+								px={'.5rem'}
-								mt={8}
+								mt={'.5rem'}
-								mb={-8}
+								mb={'-.5rem'}
 								style={{
 									color: 'var(--mantine-color-background-0)',
 									backgroundColor: 'var(--mantine-color-primary-0)',

src/pages/settings/components/Theming/ThemePlaylistModal.tsx

@@ -85,7 +85,7 @@ function ThemePlaylistModal({
 					</Group>
 					<Modal.CloseButton />
 				</Modal.Header>
-				<Modal.Body pt={8}>
+				<Modal.Body pt={'.5rem'}>
 					{selectedPlaylist?.name === 'Time of Day' ? (
 						<TimeOfDay
 							createPlaylist={createPlaylist}

src/pages/settings/components/Theming/ThemePlaylists.tsx

@@ -114,7 +114,7 @@ function ThemePlaylists() {
 											position: 'absolute',
 											left: -14,
 											zIndex: 10,
-											fontSize: '2em',
+											fontSize: '2rem',
 											fontWeight: 'bold',
 											borderRadius: '50%',
 											backgroundColor: 'var(--mantine-color-border-0)',
@@ -145,7 +145,7 @@ function ThemePlaylists() {
 											position: 'absolute',
 											left: -14,
 											zIndex: 10,
-											fontSize: '2em',
+											fontSize: '2rem',
 											fontWeight: 'bold',
 											borderRadius: '50%',
 											backgroundColor: 'var(--mantine-color-border-0)',
@@ -176,7 +176,7 @@ function ThemePlaylists() {
 											position: 'absolute',
 											left: -14,
 											zIndex: 10,
-											fontSize: '2em',
+											fontSize: '2rem',
 											fontWeight: 'bold',
 											borderRadius: '50%',
 											backgroundColor: 'var(--mantine-color-border-0)',
@@ -207,7 +207,7 @@ function ThemePlaylists() {
 											position: 'absolute',
 											left: -14,
 											zIndex: 10,
-											fontSize: '2em',
+											fontSize: '2rem',
 											fontWeight: 'bold',
 											borderRadius: '50%',
 											backgroundColor: 'var(--mantine-color-border-0)',
@@ -265,7 +265,7 @@ function ThemePlaylists() {
 															position: 'absolute',
 															left: -14,
 															zIndex: 10,
-															fontSize: '2em',
+															fontSize: '2rem',
 															fontWeight: 'bold',
 															borderRadius: '50%',
 															backgroundColor: 'var(--mantine-color-border-0)',

src/pages/settings/components/Theming/ThemeSelect.tsx

@@ -53,7 +53,7 @@ function ThemeSelect({
 				}}
 				styles={{
 					option: {
-						padding: 4,
+						padding: '.25rem',
 					},
 					input: {
 						textAlign: 'center',
@@ -90,7 +90,7 @@ function ThemeSelect({
 								c={theme?.primaryColor}
 								size='md'
 								style={{
-									padding: 4,
+									padding: '.25rem',
 									borderRadius: '8px',
 								}}
 							>

src/pages/settings/components/Theming/Themes.tsx

@@ -157,8 +157,8 @@ function ThemesSettings() {
 					style={{
 						zIndex: 190,
 						borderRadius: '10px',
-						marginTop: '-15px',
+						marginTop: '-1rem',
-						marginBottom: '-10px',
+						marginBottom: '-1.25rem',
 						boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
 					}}
 					pos={'absolute'}
@@ -172,7 +172,7 @@ function ThemesSettings() {
 										position: 'absolute',
 										left: -14,
 										zIndex: 1,
-										fontSize: '2em',
+										fontSize: '2rem',
 										fontWeight: 'bold',
 										borderRadius: '50%',
 										backgroundColor: cardTheme.borderColor,
@@ -255,7 +255,7 @@ function ThemesSettings() {
 								style={{
 									color: 'var(--mantine-color-primary-0)',
 									fontWeight: 'bold',
-									fontSize: '1.2em',
+									fontSize: '1.2rem',
 								}}
 							>
 								{currentThemePlaylist === 'All' ? 'All' : currentThemePlaylist}

src/pages/settings/components/WoL/DebouncedWolClient.tsx

@@ -55,9 +55,9 @@ function DebouncedWolClient({
 						<Text
 							style={{
 								fontWeight: 'bold',
-								fontSize: '20px',
+								fontSize: '1.25rem',
-								padding: '8px',
+								padding: '.5rem',
-								margin: '8px',
+								margin: '.5rem',
 								borderRadius: '10px',
 								backgroundColor: 'var(--mantine-color-accent-0)',
 								color: 'var(--mantine-color-background-0)',
@@ -75,7 +75,7 @@ function DebouncedWolClient({
 			>
 				<ActionIcon
 					pos={'absolute'}
-					right={16}
+					right={'1rem'}
 					color='red'
 					onClick={() => {
 						openModal();
@@ -88,7 +88,6 @@ function DebouncedWolClient({
 				<TextInput
 					label={'Hostname'}
 					className={textInputClasses.settingsItem}
-					pt={16}
 					classNames={textInputClasses}
 					defaultValue={client.hostname}
 					onChange={(event) => {
@@ -101,7 +100,6 @@ function DebouncedWolClient({
 				<TextInput
 					label={'MAC Address'}
 					className={textInputClasses.settingsItem}
-					pt={16}
 					classNames={textInputClasses}
 					defaultValue={client.macAddress}
 					onChange={(event) => {

src/pages/settings/components/WoL/WolClientSettingsItem.tsx

@@ -13,8 +13,8 @@ function WolClientSettingsItem({ client }: { client: WolClient }) {
 		>
 			<Stack align='center' gap={0}>
 				<FaLaptop fontSize={100} />
-				<Text fz={24}>{client.hostname}</Text>
+				<Text fz={'1.5rem'}>{client.hostname}</Text>
-				<Text fz={20}>{client.macAddress}</Text>
+				<Text fz={'1.25rem'}>{client.macAddress}</Text>
 			</Stack>
 		</Card>
 	);

src/pages/settings/components/WoL/WolClients.tsx

@@ -69,7 +69,6 @@ const WolClientSettings = () => {
 							<TextInput
 								label={'Hostname'}
 								className={textInputClasses.settingsItem}
-								pt={16}
 								classNames={textInputClasses}
 								defaultValue={newWolClient.hostname}
 								onChange={(event) => {
@@ -82,7 +81,6 @@ const WolClientSettings = () => {
 							<TextInput
 								label={'MAC Address'}
 								className={textInputClasses.settingsItem}
-								pt={16}
 								classNames={textInputClasses}
 								defaultValue={newWolClient.macAddress}
 								onChange={(event) => {

src/styles/ActionIcon.module.css

@@ -6,7 +6,7 @@
 		height: 2rem;
 		margin-top: 1.5rem;
 		.icon {
-			font-size: 24px;
+			font-size: 1.5rem;
 		}
 		.loader {
 			display: none;
@@ -22,7 +22,7 @@
 	&.root {
 		background-color: white !important;
 		.icon {
-			font-size: 24px;
+			font-size: 1.5rem;
 		}
 		.loader {
 			display: none;
@@ -42,7 +42,7 @@
 		border-radius: 10px;
 		border: none;
 		.icon {
-			font-size: 24px;
+			font-size: 1.5rem;
 		}
 		.loader {
 			display: none;
@@ -65,7 +65,7 @@
 		background-color: transparent;
 		color: var(--mantine-color-primary-0);
 		.icon {
-			font-size: 24px;
+			font-size: 1.5rem;
 		}
 		.loader {
 			display: none;
@@ -83,7 +83,7 @@
 		background-color: transparent !important;
 		color: var(--mantine-color-accent-0) !important;
 		.icon {
-			font-size: 24px;
+			font-size: 1.5rem;
 		}
 		.loader {
 			display: none;
@@ -104,7 +104,7 @@
 		background-color: transparent;
 		color: var(--mantine-color-primary-0);
 		.icon {
-			font-size: 24px;
+			font-size: 1.5rem;
 		}
 		.loader {
 			display: none;

src/styles/Box.module.css

@@ -19,7 +19,7 @@
 	margin: 0;
 	backdrop-filter: blur(10px) brightness(1.2);
 	border-radius: 6px;
-	font-size: 2em;
+	font-size: 2rem;
 	font-weight: 400;
 	text-transform: uppercase;
 }

src/styles/Button.module.css

@@ -2,8 +2,8 @@
 	&.root {
 		width: 2rem;
 		height: 2rem;
-		padding: 0px;
+		padding: 0;
-		margin: 0px;
+		margin: 0;
 		position: fixed;
 		bottom: 10px;
 		left: 10px;
@@ -21,9 +21,9 @@
 
 .wakeButton {
 	&.root {
-		font-size: 1em;
+		font-size: 1rem;
 		font-weight: 500;
-		margin-bottom: 10px;
+		margin-bottom: .625rem;
 		width: 72px;
 		height: 72px;
 		line-height: 3rem;
@@ -49,8 +49,8 @@
 		}
 		width: 2rem;
 		height: 2rem;
-		padding: 8px;
+		padding: .5rem;
-		margin: 0px;
+		margin: 0;
 		background-color: var(--mantine-color-search-0);
 		color: var(--mantine-color-accent-0);
 	}
@@ -62,8 +62,8 @@
 
 .settingsMenuButton {
 	&.root {
-		padding: 10px;
+		padding: .625rem;
-		margin: 0px;
+		margin: 0;
 		color: var(--mantine-color-background-0);
 		background-color: var(--mantine-color-primary-0);
 		border-radius: 20px;

src/styles/Modal.module.css

@@ -7,7 +7,7 @@
 			.header {
 				color: var(--mantine-color-primary-0);
 				.title {
-					font-size: 22px;
+					font-size: 1.625rem;
 				}
 				.close {
 					color: white;

src/styles/MultiSelect.module.css

@@ -1,7 +1,7 @@
 .label {
-	margin-bottom: 5px !important;
+	margin-bottom: .25rem !important;
 	color: var(--mantine-color-primary-0) !important;
-	font-size: 14px !important;
+	font-size: .875rem !important;
 }
 .input {
 	border-color: var(--mantine-color-border-0) !important;
@@ -24,7 +24,7 @@
 
 .option {
 	color: var(--mantine-color-primary-0) !important;
-	font-size: 14px !important;
+	font-size: .875rem !important;
 	&[data-checked] {
 		background-color: var(--mantine-color-accent-0) !important;
 		color: var(--mantine-color-background-0) !important;

src/styles/Select.module.css

@@ -2,9 +2,9 @@
 	width: 45%;
 }
 .menuSelectLabel {
-	margin-bottom: 5px !important;
+	margin-bottom: .25rem !important;
 	color: var(--mantine-color-primary-0) !important;
-	font-size: 14px !important;
+	font-size: .875rem !important;
 }
 .menuSelectInput {
 	border-color: var(--mantine-color-border-0) !important;
@@ -27,7 +27,7 @@
 
 .menuSelectOption {
 	color: var(--mantine-color-primary-0) !important;
-	font-size: 14px !important;
+	font-size: .875rem !important;
 	&[data-checked] {
 		background-color: var(--mantine-color-accent-0) !important;
 		color: var(--mantine-color-background-0) !important;
@@ -52,7 +52,7 @@
 	.option {
 		transition: all .1s ease !important;
 		color: var(--mantine-color-accent-0);
-		font-size: 18px;
+		font-size: 1.125rem;
 		&[data-combobox-selected="true"] {
 			background-color: var(--mantine-color-background-0);
 		}
@@ -71,12 +71,12 @@
 		background-color: transparent;
 		color: var(--mantine-color-primary-0);
 		font-style: italic;
-		font-size: 0.8em;
+		font-size: 0.8rem;
 		height: 3.5em;
 		transition: all 0.4s ease;
 		width: 50%;
-		padding-left: 1em;
+		padding-left: 1rem;
-		padding-right: 1em;
+		padding-right: 1rem;
 		text-align: center;
 		&[data-active="true"] {
 			background-color: color-mix(in srgb, var(--mantine-color-search-0), transparent 50%);
@@ -85,7 +85,7 @@
 			color: var(--mantine-color-primary-0);
 			font-style: normal;
 			font-weight: 500;
-			font-size: 1.2em;
+			font-size: 1.2rem;
 			letter-spacing: .2em;
 			width: 100%;
 			border-top-left-radius: .25em;
@@ -110,7 +110,7 @@
 		color: var(--mantine-color-primary-0);
 		font-style: normal;
 		font-weight: 500;
-		font-size: 1.2em;
+		font-size: 1.2rem;
 		letter-spacing: .2em;
 		width: 100%;
 		border-top-left-radius: .25em;
@@ -124,7 +124,7 @@
 			color: var(--mantine-color-primary-0);
 			font-style: normal;
 			font-weight: 500;
-			font-size: 1.2em;
+			font-size: 1.2rem;
 			letter-spacing: .2em;
 			width: 100%;
 			border-top-left-radius: .25em;

src/styles/Stack.module.css

@@ -20,7 +20,7 @@
 	margin: 0;
 	backdrop-filter: blur(10px) brightness(1.2);
 	border-radius: 6px;
-	font-size: 1em;
+	font-size: 1rem;
 	font-weight: 400;
 	text-transform: uppercase;
 }

src/styles/Switch.module.css

@@ -10,7 +10,7 @@
 	}
 	&.root {
 		.label {
-			font-size: 16px;
+			font-size: 1rem;
 			color: var(--mantine-color-primary-0);
 		}
 		.track {

src/styles/Text.module.css

@@ -1,11 +1,11 @@
 .greeting {
 	&.root {
 		margin: 0;
-		margin-left: .5em;
+		margin-left: .5rem;
-		margin-right: .5em;
+		margin-right: .5rem;
 		padding: 0;
 		text-align: left;
-		font-size: 3.5em;
+		font-size: 3.5rem;
 		font-weight: 400;
 		width: max-content;
 		color: var(--mantine-color-accent-0);
@@ -17,10 +17,10 @@
 		display: flex;
 		font-family: -apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto,
 			sans-serif !important;
-		font-size: 28px;
+		font-size: 1.75rem;
 		margin: 0;
 		padding: 0;
-		margin-right: 1em;
+		margin-right: 1rem;
 		text-transform: uppercase;
 		font-weight: 300;
 		color: var(--mantine-color-primary-0);
@@ -30,13 +30,13 @@
 .sectionTitle {
 	&.root {
 		text-decoration: underline;
-		font-size: 20px;
+		font-size: 1.25rem;
 		font-weight: 200;
 		font-style: italic;
 		height: 10px;
 		text-transform: uppercase;
-		margin-top: 20px;
+		margin-top: 1.25rem;
-		margin-bottom: 20px;
+		margin-bottom: 1.25rem;
 		color: var(--mantine-color-primary-0);
 	}
 }
@@ -50,7 +50,7 @@
 .appName {
 	&.root {
 		font-weight: 400;
-		font-size: 11px;
+		font-size: .6875rem;
 		font-style: normal;
 		color: var(--mantine-color-primary-0);
 		font-family: "Jost", sans-serif;
@@ -60,7 +60,7 @@
 
 .appUrl {
 	&.root {
-		font-size: 11px;
+		font-size: .6875rem;
 		font-weight: 400;
 		font-style: italic;
 		text-transform: uppercase;
@@ -71,23 +71,28 @@
 
 .bookmarkCategory {
 	&.root {
-		font-size: 14px;
+		font-size: .875rem;
 		font-weight: 400;
-		height: 10px;
 		color: var(--mantine-color-accent-0);
 		text-transform: uppercase;
-		margin-top: 20px;
+		margin-top: 1.25rem;
-		margin-bottom: 20px;
+		margin-bottom: .625rem;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		width: 100%;
+		height: fit-content;
 	}
 }
 
 .bookmarkItem {
 	&.root {
 		display: block;
-		font-size: 14px;
+		font-size: .875rem;
 		line-height: 2;
 		color: var(--mantine-color-primary-0);
-		width: min-content;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		width: 100%;
 		&:hover {
 			text-decoration: underline;
 		}
@@ -96,20 +101,20 @@
 
 .settingsTitle {
 	&.root {
-		font-size: 32px;
+		font-size: 2rem;
 		font-weight: bold;
 		margin-top: 1.5rem;
 		color: var(--mantine-color-accent-0);
 		background-color: var(--mantine-color-search-0);
 		border-radius: 8px;
-		padding-left: 8px;
+		padding-left: .5rem;
-		padding-right: 8px;
+		padding-right: .5rem;
 	}
 }
 
 .settingsSubTitle {
 	&.root {
-		font-size: 24px;
+		font-size: 1.5rem;
 		font-weight: bold;
 		color: var(--mantine-color-primary-0);
 	}

src/styles/TextInput.module.css

@@ -8,7 +8,7 @@
 				border: none;
 				background-color: var(--mantine-color-search-0);
 				color: var(--mantine-color-primary-0);
-				font-size: 18px;
+				font-size: 1.125rem;
 			}
 			.section {
 				color: var(--mantine-color-border-0);
@@ -22,6 +22,7 @@
 
 .settingsItem {
 	&.root {
+		padding-top: 1rem;
 		.wrapper {
 			display: flex;
 			justify-content: center;
@@ -30,7 +31,7 @@
 				border: none;
 				background-color: var(--mantine-color-search-0);
 				color: var(--mantine-color-primary-0);
-				font-size: 18px;
+				font-size: 1.125rem;
 			}
 			.section {
 				color: var(--mantine-color-border-0);