Refactoring theme files

src/pages/settings/components/Theming/Backgrounds/BackgroundModal.tsx

@@ -21,10 +21,10 @@ import {
 	scrollAreaClasses,
 	textInputClasses,
 } from 'styles';
-import { AddBackground } from './AddBackground';
-import { BackgroundLightbox } from './BackgroundLightbox';
-import { DeleteBackground } from './DeleteBackground';
-import { EditBackground } from './EditBackground';
+import { AddBackground } from './components/AddBackground';
+import { BackgroundLightbox } from './components/BackgroundLightbox';
+import { DeleteBackground } from './components/DeleteBackground';
+import { EditBackground } from './components/EditBackground';
 
 export function BackgroundModal({
 	backgroundModalOpened,

src/pages/settings/components/Theming/Backgrounds/index.ts

@@ -1,5 +1 @@
-export { AddBackground } from './AddBackground';
-export { BackgroundLightbox } from './BackgroundLightbox';
 export { BackgroundModal } from './BackgroundModal';
-export { DeleteBackground } from './DeleteBackground';
-export { EditBackground } from './EditBackground';

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

@@ -6,8 +6,8 @@ import { useEffect, useState } from 'react';
 import { FiChevronRight } from 'react-icons/fi';
 import { textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
-import { ThemePlaylistCard } from './ThemePlaylistCard';
-import { ThemePlaylistModal } from './ThemePlaylistModal';
+import { ThemePlaylistCard } from './components/ThemePlaylistCard';
+import { ThemePlaylistModal } from './components/ThemePlaylistModal';
 
 export function ThemePlaylists() {
 	const themesEndpoint = 'api/themes';

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

@@ -14,7 +14,7 @@ import { useState } from 'react';
 import { FiEdit, FiTrash } from 'react-icons/fi';
 import { scrollAreaClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
-import { ThemeMiniCard } from '../Themes';
+import { ThemeMiniCard } from '../../Themes';
 
 export function ThemePlaylistCard({
 	cardPlaylist,

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

@@ -3,7 +3,8 @@ import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { modalClasses, textInputClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
-import { ThemePreviewMiddleware, TimeOfDay } from '../Themes';
+import { ThemePreviewMiddleware } from '../../Themes';
+import { TimeOfDay } from './TimeOfDay';
 
 export function ThemePlaylistModal({
 	opened,

src/pages/settings/components/Theming/ThemePlaylists/index.ts

@@ -1,3 +1 @@
-export { ThemePlaylistCard } from './ThemePlaylistCard';
-export { ThemePlaylistModal } from './ThemePlaylistModal';
 export { ThemePlaylists } from './ThemePlaylists';

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

@@ -8,7 +8,9 @@ import {
 import { DeleteItemModal } from 'components';
 import { useCommonHooks } from 'hooks';
 import type { Theme, ThemePlaylist } from 'types';
-import { MiniAppItem, MiniGroupItem, ThemeManagementPill } from '.';
+import { MiniAppItem } from './components/MiniAppItem';
+import { MiniGroupItem } from './components/MiniGroupItem';
+import { ThemeManagementPill } from './components/ThemeManagementPill';
 
 export function ThemeCard({
 	cardTheme,

src/pages/settings/components/Theming/Themes/ThemeCard/index.ts

@@ -0,0 +1 @@
+export { ThemeCard } from './ThemeCard';

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

@@ -4,8 +4,8 @@ import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { modalClasses, textInputClasses } from 'styles';
 import type { Theme } from 'types';
-import { NewThemeStarter } from './NewThemeStarter';
-import { ThemeEditor } from './ThemeEditor';
+import { NewThemeStarter } from './components/NewThemeStarter';
+import { ThemeEditor } from './components/ThemeEditor';
 
 export function ThemeModal({
 	opened,

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

@@ -4,9 +4,9 @@ import { useState } from 'react';
 import { FaArrowRight } from 'react-icons/fa';
 import { textClasses } from 'styles';
 import type { Theme } from 'types';
-import { ThemeCard } from '../ThemeCard';
-import { ThemeMiniCard } from '../ThemeMiniCard';
-import { ThemePreviewMiddleware } from '../ThemePreviewMiddleware';
+import { ThemeCard } from '../../ThemeCard';
+import { ThemeMiniCard } from '../../ThemeMiniCard';
+import { ThemePreviewMiddleware } from '../../ThemePreviewMiddleware';
 
 export function NewThemeStarter({
 	allThemes,

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

@@ -20,7 +20,7 @@ import { FaShuffle } from 'react-icons/fa6';
 import { FiImage, FiSave, FiShuffle, FiX } from 'react-icons/fi';
 import { scrollAreaClasses, textClasses, textInputClasses } from 'styles';
 import { BackgroundProperties, type Theme } from 'types';
-import { ThemeModalContent } from '../ThemeModalContent';
+import { ThemeModalContent } from './ThemeModalContent';
 
 export function ThemeEditor({
 	backgroundList,

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

@@ -1,7 +1,7 @@
-import { Select, Stack, Text } from '@mantine/core';
+import { Group, Select, Stack, Text } from '@mantine/core';
+import { AppItem } from 'components';
 import { selectClasses } from 'styles';
 import type { Theme } from 'types';
-import { ThemeExampleApp } from './ThemeExampleApp';
 
 export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 	return (
@@ -73,7 +73,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 						gap: '.25rem',
 						backgroundSize: 'cover',
 						borderBottom: '0px solid',
-						display: 'grid',
+						display: 'flex',
 						gridColumnGap: '5px',
 						gridRowGap: '5px',
 						gridTemplateColumns: '1fr 1fr 1fr',
@@ -83,10 +83,46 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 						justifyContent: 'center',
 						alignContent: 'center',
 					}}
+					w={'100%'}
 				>
-					<ThemeExampleApp selectedTheme={selectedTheme} />
-					<ThemeExampleApp selectedTheme={selectedTheme} />
-					<ThemeExampleApp selectedTheme={selectedTheme} />
+					<Group
+						style={{
+							'--mantine-color-primary-0': selectedTheme?.primaryColor,
+							'--mantine-color-accent-0': selectedTheme?.accentColor,
+							'--mantine-color-background-0': selectedTheme?.backgroundColor,
+							'--mantine-color-border-0': selectedTheme?.borderColor,
+							'--mantine-color-search-0': selectedTheme?.searchColor,
+							display: 'grid',
+							gridTemplateColumns: '1fr 1fr 1fr',
+						}}
+						w={'100%'}
+						display={'grid'}
+					>
+						<AppItem
+							url='https://google.com'
+							icon='FaGoogle'
+							name='Google'
+							enabled={1}
+							scale={1}
+							linksActive={false}
+						/>
+						<AppItem
+							url='https://google.com'
+							icon='FaGoogle'
+							name='Google'
+							enabled={1}
+							scale={1}
+							linksActive={false}
+						/>
+						<AppItem
+							url='https://google.com'
+							icon='FaGoogle'
+							name='Google'
+							enabled={1}
+							scale={1}
+							linksActive={false}
+						/>
+					</Group>
 				</Stack>
 			</Stack>
 			<Stack gap={0} w={'100%'}>

src/pages/settings/components/Theming/Themes/ThemeModal/index.ts

@@ -0,0 +1 @@
+export { ThemeModal } from './ThemeModal';

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

@@ -2,7 +2,7 @@ import { Group, Overlay, Popover } from '@mantine/core';
 import { useLongPress } from '@mantine/hooks';
 import { useState } from 'react';
 import { ThemeMiniCard } from './ThemeMiniCard';
-import { ThemeModalContent } from './ThemeModalContent';
+import { ThemeModalContent } from './ThemeModal/components/ThemeModalContent';
 
 export function ThemePreviewMiddleware({
 	newThemeList,

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

@@ -20,7 +20,7 @@ import { switchClasses, textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 import { BackgroundModal } from '../Backgrounds';
 import { ThemeCard } from './ThemeCard';
-import { ThemeModal } from './ThemeModal/ThemeModal';
+import { ThemeModal } from './ThemeModal';
 
 export function Themes() {
 	const backgroundsEndpoint = 'api/backgrounds';

src/pages/settings/components/Theming/Themes/index.ts

@@ -1,12 +1,3 @@
-export { MiniAppItem } from './MiniAppItem';
-export { MiniGroupItem } from './MiniGroupItem';
-export { ThemeCard } from './ThemeCard';
-export { ThemeExampleApp } from './ThemeExampleApp';
-export { ThemeManagementPill } from './ThemeManagementPill';
 export { ThemeMiniCard } from './ThemeMiniCard';
-export { ThemeModal } from './ThemeModal/ThemeModal';
-export { ThemeModalContent } from './ThemeModalContent';
 export { ThemePreviewMiddleware } from './ThemePreviewMiddleware';
-export { ThemeSelect } from './ThemeSelect';
 export { Themes } from './Themes';
-export { TimeOfDay } from './TimeOfDay';