Bugfixes and updates

2025-06-24 16:20:29 -05:00
parent 81aecb261a
commit 9aa8dba56c
36 changed files with 1000 additions and 967 deletions
--- a/src/pages/settings/components/Theming/BackgroundModal.tsx
+++ b/src/pages/settings/components/Theming/BackgroundModal.tsx
@@ -63,7 +63,7 @@ function BackgroundModal({
 			fullScreen={isMobile}
 			centered
 		>
-			<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
+			<Modal.Overlay />
 			<Modal.Content>
 				<Modal.Header style={{ justifyContent: 'center' }}>
 					<Group pos={'absolute'}>
--- a/src/pages/settings/components/Theming/ThemeCard.tsx
+++ b/src/pages/settings/components/Theming/ThemeCard.tsx
@@ -3,7 +3,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useState } from 'react';
 import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
-import { actionIconClasses } from 'styles';
+import { actionIconClasses, boxClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';

@@ -143,7 +143,7 @@ function ThemeCard({
 						<Group w={'100%'}>
 							<Box
 								style={{
-									height: '5px',
+									height: '.25rem',
 									width: '40px',
 									backgroundColor: cardTheme.primaryColor,
 									borderRadius: '4px',
@@ -152,42 +152,24 @@ function ThemeCard({
 						</Group>
 						<Group w={'100%'}>
 							<Box
+								className={boxClasses.appItemExampleText}
 								style={{
-									height: '10px',
-									width: '40px',
-									borderRadius: '4px',
-									backdropFilter: 'blur(10px) brightness(1.5)',
-									fontSize: '.375rem',
-									justifyContent: 'center',
-									alignContent: 'center',
 									color: cardTheme.primaryColor,
 								}}
 							>
 								lorem ipsum
 							</Box>
 							<Box
+								className={boxClasses.appItemExampleText}
 								style={{
-									height: '10px',
-									width: '40px',
-									borderRadius: '4px',
-									backdropFilter: 'blur(10px) brightness(1.5)',
-									fontSize: '.375rem',
-									justifyContent: 'center',
-									alignContent: 'center',
 									color: cardTheme.primaryColor,
 								}}
 							>
 								lorem ipsum
 							</Box>
 							<Box
+								className={boxClasses.appItemExampleText}
 								style={{
-									height: '10px',
-									width: '40px',
-									borderRadius: '4px',
-									backdropFilter: 'blur(10px) brightness(1.5)',
-									fontSize: '.375rem',
-									justifyContent: 'center',
-									alignContent: 'center',
 									color: cardTheme.primaryColor,
 								}}
 							>
@@ -230,6 +212,7 @@ function ThemeCard({
 								fontSize: '2rem',
 								fontWeight: 'bold',
 								color: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
+								cursor: 'pointer',
 							}}
 						/>
 					</Group>
@@ -291,6 +274,7 @@ function ThemeCard({
 								fontSize: '2rem',
 								fontWeight: 'bold',
 								color: shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
+								cursor: 'pointer',
 							}}
 						/>
 					</Group>
--- a/src/pages/settings/components/Theming/ThemeModal.tsx
+++ b/src/pages/settings/components/Theming/ThemeModal.tsx
@@ -1,8 +1,6 @@
 import {
 	Button,
 	ColorPicker,
-	ColorSwatch,
-	Divider,
 	Group,
 	Modal,
 	ScrollArea,
@@ -14,8 +12,9 @@ import {
 import { useCommonHooks } from 'hooks';
 import { useEffect, useRef, useState } from 'react';
 import { FiSave, FiX } from 'react-icons/fi';
-import { modalClasses, scrollAreaClasses, textClasses, textInputClasses } from 'styles';
+import { modalClasses, scrollAreaClasses, textInputClasses } from 'styles';
 import type { Theme } from 'types';
+import ThemeModalColorSwatches from './ThemeModalColorSwatches';
 import ThemeModalContent from './ThemeModalContent';

 function ThemeModal({
@@ -86,7 +85,7 @@ function ThemeModal({
 					<Text
 						style={{
 							width: 'min-content',
-							backdropFilter: 'blur(10px) brightness(.25)',
+							backdropFilter: 'blur(5px) brightness(.25)',
 							padding: '.5rem',
 							borderBottomRightRadius: 4,
 							marginTop: '-2.15rem',
@@ -100,7 +99,7 @@ function ThemeModal({
 						<Text
 							style={{
 								width: 'min-content',
-								backdropFilter: 'blur(10px) brightness(.25)',
+								backdropFilter: 'blur(5px) brightness(.25)',
 								padding: '.5rem',
 								marginTop: '2rem',
 								marginBottom: -1,
@@ -136,7 +135,7 @@ function ThemeModal({
 			fullScreen={isMobile}
 			centered
 		>
-			<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
+			<Modal.Overlay />
 			<Modal.Content>
 				<Modal.Header style={{ justifyContent: 'center' }}>
 					<Group pos={'absolute'}>
@@ -164,7 +163,6 @@ function ThemeModal({
 				</Modal.Header>
 				<Modal.Body p={'2rem'}>
 					<ThemeModalContent selectedTheme={selectedTheme} />
-					<Divider color='black' my='sm' />
 					<Group
 						w={'100%'}
 						h={'100%'}
@@ -191,7 +189,6 @@ function ThemeModal({
 										/>
 										<Button
 											color={'green'}
-											styles={{ label: { color: 'black' } }}
 											onClick={() => {
 												switch (colorId) {
 													case 'primaryColor':
@@ -241,103 +238,12 @@ function ThemeModal({
 									</Group>
 								</Group>
 							) : (
-								<Stack h={isMobile ? '100%' : 256} justify='center'>
-									<Group justify='space-between'>
-										<Text className={textClasses.label} classNames={textClasses}>
-											Primary Color
-										</Text>
-										<ColorSwatch
-											onClick={() => {
-												setColorId('primaryColor');
-												openPicker();
-												setColorValue(selectedTheme.primaryColor);
-											}}
-											radius={'sm'}
-											w={'100px'}
-											color={selectedTheme.primaryColor}
-											style={{
-												cursor: 'pointer',
-												border: '2px dashed var(--mantine-color-primary-0)',
-											}}
-										/>
-									</Group>
-									<Group justify='space-between'>
-										<Text className={textClasses.label} classNames={textClasses}>
-											Accent Color
-										</Text>
-										<ColorSwatch
-											onClick={() => {
-												setColorId('accentColor');
-												openPicker();
-												setColorValue(selectedTheme.accentColor);
-											}}
-											radius={'sm'}
-											w={'100px'}
-											color={selectedTheme.accentColor}
-											style={{
-												cursor: 'pointer',
-												border: '2px dashed var(--mantine-color-primary-0)',
-											}}
-										/>
-									</Group>
-									<Group justify='space-between'>
-										<Text className={textClasses.label} classNames={textClasses}>
-											Background Color
-										</Text>
-										<ColorSwatch
-											onClick={() => {
-												setColorId('background');
-												openPicker();
-												setColorValue(selectedTheme.backgroundColor);
-											}}
-											radius={'sm'}
-											w={'100px'}
-											color={selectedTheme.backgroundColor}
-											style={{
-												cursor: 'pointer',
-												border: '2px dashed var(--mantine-color-primary-0)',
-											}}
-										/>
-									</Group>
-									<Group justify='space-between'>
-										<Text className={textClasses.label} classNames={textClasses}>
-											Border Color
-										</Text>
-										<ColorSwatch
-											onClick={() => {
-												setColorId('borderColor');
-												openPicker();
-												setColorValue(selectedTheme.borderColor);
-											}}
-											radius={'sm'}
-											w={'100px'}
-											color={selectedTheme.borderColor}
-											style={{
-												cursor: 'pointer',
-												border: '2px dashed var(--mantine-color-primary-0)',
-											}}
-										/>
-									</Group>
-									<Group justify='space-between'>
-										<Text className={textClasses.label} classNames={textClasses}>
-											Search Background Color
-										</Text>
-										<ColorSwatch
-											onClick={() => {
-												setColorId('searchBackground');
-												openPicker();
-												setColorValue(selectedTheme.searchColor);
-											}}
-											radius={'sm'}
-											w={'100px'}
-											color={selectedTheme.searchColor}
-											style={{
-												cursor: 'pointer',
-												border: '2px dashed var(--mantine-color-primary-0)',
-											}}
-										/>
-									</Group>
-								</Stack>
+								<ThemeModalColorSwatches
+									selectedTheme={selectedTheme}
+									openPicker={openPicker}
+									setColorId={setColorId}
+									setColorValue={setColorValue}
+								/>
 							)}
 						</Stack>
 						<Stack
@@ -409,13 +315,8 @@ function ThemeModal({
 							</ScrollArea.Autosize>
 						</Stack>
 					</Group>
-					<Divider color='black' my='sm' />
-					<Group pos={'absolute'} bottom={isMobile ? -72 : 8}>
-						<Button
-							color={'green'}
-							styles={{ label: { color: 'black' } }}
-							onClick={handleSaveTheme}
-						>
+					<Group>
+						<Button color={'green'} onClick={handleSaveTheme}>
 							Save
 						</Button>
 						<Button
--- a/src/pages/settings/components/Theming/ThemeModalColorSwatches.tsx
+++ b/src/pages/settings/components/Theming/ThemeModalColorSwatches.tsx
@@ -0,0 +1,99 @@
+import { ColorSwatch, Group, Stack, Text } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
+import { colorSwatchClasses, textClasses } from 'styles';
+import type { Theme } from 'types';
+
+function ThemeModalColorSwatches({
+	selectedTheme,
+	openPicker,
+	setColorId,
+	setColorValue,
+}: {
+	selectedTheme: Theme;
+	openPicker: () => void;
+	setColorId: (colorId: string) => void;
+	setColorValue: (colorValue: string) => void;
+}) {
+	const { isMobile } = useCommonHooks();
+	return (
+		<Stack h={isMobile ? '100%' : 256} justify='center'>
+			<Group justify='space-between'>
+				<Text className={textClasses.label} classNames={textClasses}>
+					Primary Color
+				</Text>
+				<ColorSwatch
+					onClick={() => {
+						setColorId('primaryColor');
+						openPicker();
+						setColorValue(selectedTheme.primaryColor);
+					}}
+					color={selectedTheme.primaryColor}
+					className={colorSwatchClasses.default}
+					classNames={colorSwatchClasses}
+				/>
+			</Group>
+			<Group justify='space-between'>
+				<Text className={textClasses.label} classNames={textClasses}>
+					Accent Color
+				</Text>
+				<ColorSwatch
+					onClick={() => {
+						setColorId('accentColor');
+						openPicker();
+						setColorValue(selectedTheme.accentColor);
+					}}
+					color={selectedTheme.accentColor}
+					className={colorSwatchClasses.default}
+					classNames={colorSwatchClasses}
+				/>
+			</Group>
+			<Group justify='space-between'>
+				<Text className={textClasses.label} classNames={textClasses}>
+					Background Color
+				</Text>
+				<ColorSwatch
+					onClick={() => {
+						setColorId('background');
+						openPicker();
+						setColorValue(selectedTheme.backgroundColor);
+					}}
+					color={selectedTheme.backgroundColor}
+					className={colorSwatchClasses.default}
+					classNames={colorSwatchClasses}
+				/>
+			</Group>
+			<Group justify='space-between'>
+				<Text className={textClasses.label} classNames={textClasses}>
+					Border Color
+				</Text>
+				<ColorSwatch
+					onClick={() => {
+						setColorId('borderColor');
+						openPicker();
+						setColorValue(selectedTheme.borderColor);
+					}}
+					color={selectedTheme.borderColor}
+					className={colorSwatchClasses.default}
+					classNames={colorSwatchClasses}
+				/>
+			</Group>
+			<Group justify='space-between'>
+				<Text className={textClasses.label} classNames={textClasses}>
+					Search Background Color
+				</Text>
+				<ColorSwatch
+					onClick={() => {
+						setColorId('searchBackground');
+						openPicker();
+						setColorValue(selectedTheme.searchColor);
+					}}
+					color={selectedTheme.searchColor}
+					className={colorSwatchClasses.default}
+					classNames={colorSwatchClasses}
+				/>
+			</Group>
+		</Stack>
+	);
+}
+
+export default ThemeModalColorSwatches;
--- a/src/pages/settings/components/Theming/ThemePlaylistModal.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylistModal.tsx
@@ -1,12 +1,4 @@
-import {
-	Button,
-	Divider,
-	Group,
-	Modal,
-	SimpleGrid,
-	Text,
-	TextInput,
-} from '@mantine/core';
+import { Button, Group, Modal, SimpleGrid, Text, TextInput } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { modalClasses, textInputClasses } from 'styles';
@@ -59,7 +51,7 @@ function ThemePlaylistModal({
 				setThemeList('[]');
 			}}
 		>
-			<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
+			<Modal.Overlay />
 			<Modal.Content>
 				<Modal.Header style={{ justifyContent: 'center' }}>
 					<Group pos={'absolute'}>
@@ -113,13 +105,8 @@ function ThemePlaylistModal({
 										);
 									})}
 							</SimpleGrid>
-							<Divider color='black' my='sm' />
-							<Group>
-								<Button
-									color={'green'}
-									styles={{ label: { color: 'black' } }}
-									onClick={handleSavePlaylist}
-								>
+							<Group mt={'1rem'}>
+								<Button color={'green'} onClick={handleSavePlaylist}>
 									Save
 								</Button>
 								<Button
--- a/src/pages/settings/components/Theming/Themes.tsx
+++ b/src/pages/settings/components/Theming/Themes.tsx
@@ -252,7 +252,7 @@ function ThemesSettings() {
 			</Group>
 			<Group
 				style={{
-					backdropFilter: 'blur(10px) brightness(.75)',
+					backdropFilter: 'blur(5px) brightness(.75)',
 					zIndex: 199,
 					paddingTop: isMobile ? '.5rem' : '1.5rem',
 					paddingBottom: '1.5rem',