Updates to theme editor and weather icon

src/components/WeatherModal/WeatherIcon.tsx

@@ -1,4 +1,5 @@
-import { Image } from '@mantine/core';
+import { Group, Image } from '@mantine/core';
+import { FaArrowRight } from 'react-icons/fa';
 import CloudyIcon from '../../assets/weather/cloudy.svg';
 import HazeIcon from '../../assets/weather/haze.svg';
 import HeavyRainIcon from '../../assets/weather/heavy-rain.svg';
@@ -18,8 +19,11 @@ export default function WeatherIcon({
 	textDescription: string;
 }) {
 	const icon = textDescription.includes('then')
-		? textDescription.substring(0, textDescription.trim().indexOf('then'))
-		: textDescription;
+		? [
+				textDescription.substring(0, textDescription.trim().indexOf('then')),
+				textDescription.substring(textDescription.trim().indexOf('then') + 4).trim(),
+			]
+		: [textDescription.trim()];
 
 	const lookupSource = (icon: any) => {
 		switch (icon.trim()) {
@@ -178,14 +182,61 @@ export default function WeatherIcon({
 	};
 
 	return (
-		<Image
-			style={
-				size === 'lg'
-					? { width: '150px', height: '150px' }
-					: { width: '75px', height: '75px' }
-			}
-			src={lookupSource(icon).src}
-			alt={lookupSource(icon).alt}
-		/>
+		<>
+			{icon.length === 1 ? (
+				<Image
+					style={
+						size === 'lg'
+							? { width: '150px', height: '150px' }
+							: { width: '75px', height: '75px' }
+					}
+					src={lookupSource(icon[0]).src}
+					alt={lookupSource(icon[0]).alt}
+				/>
+			) : (
+				<Group
+					pos={'relative'}
+					style={
+						size === 'lg'
+							? { width: '150px', height: '150px' }
+							: { width: '75px', height: '75px' }
+					}
+					align='center'
+					justify='center'
+				>
+					<Image
+						style={{
+							mask: 'linear-gradient(105deg, rgba(0, 0, 0, 1) 52%, rgba(0, 0, 0, 0) 56%)',
+						}}
+						pos={'absolute'}
+						left={-8}
+						src={lookupSource(icon[0]).src}
+						alt={lookupSource(icon[0]).alt}
+					/>
+					<Image
+						style={{
+							mask: 'linear-gradient(105deg, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 1) 48%)',
+						}}
+						pos={'absolute'}
+						right={-8}
+						src={lookupSource(icon[1]).src}
+						alt={lookupSource(icon[1]).alt}
+					/>
+					<FaArrowRight
+						size={28}
+						style={{
+							color: 'var(--mantine-color-background-0)',
+							position: 'absolute',
+							stroke: 'var(--mantine-color-primary-0)',
+							strokeWidth: 16,
+							backgroundColor:
+								'color-mix(in srgb, var(--mantine-color-accent-0), transparent 20%)',
+							borderRadius: '50%',
+							padding: '5px',
+						}}
+					/>
+				</Group>
+			)}
+		</>
 	);
 }

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

@@ -85,7 +85,6 @@ export function ThemeModal({
 			setDefaultTheme(selectedTheme);
 		}
 	}, [selectedTheme]);
-
 	return (
 		<Modal.Root
 			size={'75%'}
@@ -138,7 +137,7 @@ export function ThemeModal({
 						bg={'var(--mantine-color-background-0)'}
 						style={{ zIndex: -1 }}
 					/>
-					{playlists.length > 0 && !isMobile && (
+					{playlists.length > 0 && !isMobile && !isNew && !duplicate && (
 						<Card
 							pos={'absolute'}
 							top={0}
@@ -233,6 +232,7 @@ export function ThemeModal({
 							pickerOpen={pickerOpen}
 							setSelectedTheme={setSelectedTheme}
 							handleClose={handleClose}
+							duplicate={duplicate}
 							setDuplicate={setDuplicate}
 						/>
 					)}

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

@@ -34,6 +34,7 @@ export function ThemeEditor({
 	closePicker,
 	handleClose,
 	handleSaveTheme,
+	duplicate,
 	setDuplicate,
 }: {
 	backgroundList: string[];
@@ -47,6 +48,7 @@ export function ThemeEditor({
 	closePicker: () => void;
 	handleClose: () => void;
 	handleSaveTheme: () => void;
+	duplicate: boolean;
 	setDuplicate: (duplicate: boolean) => void;
 }) {
 	const [query, setQuery] = useState('');
@@ -621,7 +623,12 @@ export function ThemeEditor({
 								</Tooltip>
 								<Button
 									onClick={() => {
-										setSelectedTheme({ ...defaultTheme });
+										!duplicate
+											? setSelectedTheme({ ...defaultTheme })
+											: setSelectedTheme({
+													...defaultTheme,
+													name: `${defaultTheme.name} copy`,
+												});
 									}}
 								>
 									Reset Changes