Bug fixes

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "triggerfrontend",
 	"private": true,
-	"version": "0.1.0",
+	"version": "1.0.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",

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

@@ -246,7 +246,7 @@ const ApplicationSettings = () => {
 				}
 			/>
 			<SettingsHeader
-				setDragging={setDragging}
+				setDragging={applications.length > 0 ? setDragging : undefined}
 				openModal={openModal}
 				title={'Applications'}
 				tooltip={{

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

@@ -183,7 +183,7 @@ const BookmarkSettings = () => {
 				}
 			/>
 			<SettingsHeader
-				setDragging={setDragging}
+				setDragging={groups.length > 0 ? setDragging : undefined}
 				openModal={openModal}
 				title={'Bookmarks'}
 				tooltip={{

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

@@ -346,6 +346,7 @@ function ThemeCard({
 						className={actionIconClasses.themeEditButton}
 						classNames={actionIconClasses}
 						onClick={openModal}
+						disabled={cardTheme.name === theme.name}
 					>
 						<FiTrash color='red' />
 					</ActionIcon>

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

@@ -85,10 +85,12 @@ function ThemeModal({
 				<Text
 					style={{
 						width: 'min-content',
-						height: 'min-content',
 						backdropFilter: 'blur(10px) brightness(.25)',
 						padding: '.5rem',
-						borderRadius: 4,
+						borderBottomRightRadius: 4,
+						marginTop: '-2.15rem',
+						marginLeft: '-.5rem',
+						color: 'white',
 					}}
 				>
 					{item.replace(/\.[^/.]+$/, '')}
@@ -100,8 +102,9 @@ function ThemeModal({
 							backdropFilter: 'blur(10px) brightness(.25)',
 							padding: '.5rem',
 							marginTop: '2rem',
+							marginBottom: -1,
 							borderTopLeftRadius: 4,
-							color: 'var(--mantine-color-accent-0)',
+							color: 'white',
 						}}
 					>
 						{re.exec(item.toUpperCase())?.[1]}

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

@@ -257,8 +257,8 @@ function ThemePlaylists() {
 							pos={'relative'}
 							mb={isMobile ? '6rem' : undefined}
 						>
-							{themePlaylists.length > 0 ? (
+							{themePlaylists.length > 1 ? (
-								<SimpleGrid cols={4}>
+								<SimpleGrid cols={isMobile ? 1 : 4}>
 									{themePlaylists
 										.filter((playlist: ThemePlaylist) => playlist.default === 0)
 										.sort((a: ThemePlaylist, b: ThemePlaylist) =>

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

@@ -3,7 +3,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FaDice } from 'react-icons/fa';
-import { FiChevronRight } from 'react-icons/fi';
+import { FiChevronRight, FiEdit, FiMousePointer, FiStopCircle } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 import { switchClasses, textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
@@ -162,8 +162,9 @@ function ThemesSettings() {
 				justify='center'
 				align='center'
 				pos={'relative'}
+				display={'flex'}
 				mt={isMobile ? '11.5rem' : '7rem'}
-				mb={isMobile ? '12rem' : '6.5rem'}
+				mb={isMobile ? '100%' : '6.5rem'}
 			>
 				<Overlay
 					display={currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'}
@@ -231,8 +232,6 @@ function ThemesSettings() {
 				)}
 			</Group>
 			<Group
-				align='center'
-				justify='center'
 				style={{
 					backdropFilter: 'blur(10px) brightness(.75)',
 					zIndex: 199,
@@ -240,9 +239,7 @@ function ThemesSettings() {
 					paddingBottom: '1.5rem',
 					paddingLeft: '1rem',
 					paddingRight: '1rem',
-					height: 'min-content',
 					width: '100%',
-					marginTop: 0,
 					position: 'absolute',
 					bottom: isMobile ? '3.25rem' : 0,
 				}}
@@ -252,10 +249,15 @@ function ThemesSettings() {
 						miw={isMobile ? 100 : undefined}
 						className={textClasses.settingsSubTitle}
 						classNames={textClasses}
+						fz={isMobile ? '1rem' : undefined}
 					>
 						Current Settings:
 					</Text>
-					<Group pos={isMobile ? undefined : 'absolute'} w={'100%'} justify='center'>
+					<Group
+						pos={isMobile ? undefined : 'absolute'}
+						w={isMobile ? undefined : '100%'}
+						justify='center'
+					>
 						<Group align='center' justify='center'>
 							<Text
 								style={{
@@ -269,7 +271,7 @@ function ThemesSettings() {
 								style={{
 									color: 'var(--mantine-color-primary-0)',
 									fontWeight: 'bold',
-									fontSize: '1.2rem',
+									fontSize: isMobile ? '.8rem' : '1.2rem',
 								}}
 							>
 								{currentThemePlaylist === 'All' ? 'All' : currentThemePlaylist}
@@ -284,8 +286,22 @@ function ThemesSettings() {
 									setCurrentTheme(theme.name);
 								}
 							}}
+							style={{
+								aspectRatio: isMobile ? 1 : undefined,
+								padding: isMobile ? 0 : undefined,
+							}}
 						>
-							{currentThemePlaylist === 'All' ? 'Select Playlist' : 'Disable Playlist'}
+							{currentThemePlaylist === 'All' ? (
+								isMobile ? (
+									<FiMousePointer />
+								) : (
+									'Select Playlist'
+								)
+							) : isMobile ? (
+								<FiStopCircle />
+							) : (
+								'Disable Playlist'
+							)}
 						</Button>
 						<Tooltip
 							label='Shuffle is always on when a playlist is active.'
@@ -321,12 +337,14 @@ function ThemesSettings() {
 					<Button
 						style={{
 							zIndex: 200,
+							aspectRatio: isMobile ? 1 : undefined,
+							padding: isMobile ? 0 : undefined,
 						}}
 						onClick={() => {
 							openBackgroundModal();
 						}}
 					>
-						Manage Backgrounds
+						{isMobile ? <FiEdit /> : 'Manage Backgrounds'}
 					</Button>
 				</Group>
 			</Group>