Application adding bugfix; consolidated Settings headers
This commit is contained in:
Sean Edmunds
@@ -1,19 +1,11 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Modal,
|
||||
Overlay,
|
||||
Stack,
|
||||
Text,
|
||||
} from '@mantine/core';
|
||||
import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
|
||||
import { useState } from 'react';
|
||||
import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
|
||||
import { actionIconClasses, modalClasses } from 'styles';
|
||||
import { actionIconClasses } from 'styles';
|
||||
import type { ThemePlaylist } from 'types';
|
||||
import DeleteItemModal from '../Shared/DeleteItemModal';
|
||||
|
||||
function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
|
||||
const { data: themePlaylists } = useQueryAPI({
|
||||
@@ -29,10 +21,8 @@ function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
|
||||
currentTheme,
|
||||
setCurrentTheme,
|
||||
theme,
|
||||
isMobile,
|
||||
currentThemePlaylist,
|
||||
setCurrentThemePlaylist,
|
||||
modalStyle,
|
||||
handleDelete,
|
||||
} = useCommonHooks();
|
||||
|
||||
@@ -46,65 +36,49 @@ function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
|
||||
onMouseEnter={() => setHover(true)}
|
||||
onMouseLeave={() => setHover(false)}
|
||||
>
|
||||
<Modal.Root
|
||||
size={'60%'}
|
||||
fullScreen={isMobile}
|
||||
className={modalClasses.helpModal}
|
||||
classNames={modalClasses}
|
||||
opened={modalOpened}
|
||||
onClose={() => {
|
||||
closeModal();
|
||||
}}
|
||||
style={modalStyle}
|
||||
closeOnEscape
|
||||
closeOnClickOutside
|
||||
>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Delete Theme</Modal.Title>
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body pb={'2rem'}>
|
||||
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
|
||||
<Text>Are you sure you want to delete this theme?</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
fontSize: '20px',
|
||||
padding: '8px',
|
||||
margin: '8px',
|
||||
borderRadius: '10px',
|
||||
backgroundColor: 'var(--color-text-acc)',
|
||||
color: 'var(--color-background)',
|
||||
<DeleteItemModal
|
||||
modalOpened={modalOpened}
|
||||
handleClose={closeModal}
|
||||
title={'Delete Theme'}
|
||||
body={
|
||||
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
|
||||
<Text>Are you sure you want to delete this theme?</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
fontSize: '20px',
|
||||
padding: '8px',
|
||||
margin: '8px',
|
||||
borderRadius: '10px',
|
||||
backgroundColor: 'var(--color-text-acc)',
|
||||
color: 'var(--color-background)',
|
||||
}}
|
||||
>{`"${cardTheme.name}"`}</Text>
|
||||
<Text c='red'>This action cannot be undone!</Text>
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
handleDelete(cardTheme, 'api/themes');
|
||||
closeModal();
|
||||
}}
|
||||
>{`"${cardTheme.name}"`}</Text>
|
||||
<Text c='red'>This action cannot be undone!</Text>
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
handleDelete(cardTheme, 'api/themes');
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
<Button
|
||||
color={'grey'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
<Button
|
||||
color={'grey'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
position: 'absolute',
|
||||
|
||||
@@ -2,7 +2,6 @@ import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
Group,
|
||||
Modal,
|
||||
Overlay,
|
||||
ScrollArea,
|
||||
Stack,
|
||||
@@ -12,19 +11,12 @@ import { useDisclosure } from '@mantine/hooks';
|
||||
import { useCommonHooks, useMutationAPI } from 'hooks';
|
||||
import { useState } from 'react';
|
||||
import { FiEdit, FiRefreshCcw, FiTrash } from 'react-icons/fi';
|
||||
import { modalClasses } from 'styles';
|
||||
import DeleteItemModal from '../Shared/DeleteItemModal';
|
||||
import ThemeMiniCard from './ThemeMiniCard';
|
||||
|
||||
function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
|
||||
const [hover, setHover] = useState(false);
|
||||
const {
|
||||
setThemeName,
|
||||
setCurrentThemePlaylist,
|
||||
theme,
|
||||
isMobile,
|
||||
modalStyle,
|
||||
handleDelete,
|
||||
} = useCommonHooks();
|
||||
const { setThemeName, setCurrentThemePlaylist, theme, handleDelete } = useCommonHooks();
|
||||
const syncableLists = ['All', 'Backgrounds', 'No Backgrounds'];
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
|
||||
@@ -42,65 +34,49 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
|
||||
onMouseEnter={() => setHover(true)}
|
||||
onMouseLeave={() => setHover(false)}
|
||||
>
|
||||
<Modal.Root
|
||||
size={'60%'}
|
||||
fullScreen={isMobile}
|
||||
className={modalClasses.helpModal}
|
||||
classNames={modalClasses}
|
||||
opened={modalOpened}
|
||||
onClose={() => {
|
||||
closeModal();
|
||||
}}
|
||||
style={modalStyle}
|
||||
closeOnEscape
|
||||
closeOnClickOutside
|
||||
>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Delete Theme Playlist</Modal.Title>
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body pb={'2rem'}>
|
||||
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
|
||||
<Text>Are you sure you want to delete this Theme Playlist?</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
fontSize: '20px',
|
||||
padding: '8px',
|
||||
margin: '8px',
|
||||
borderRadius: '10px',
|
||||
backgroundColor: 'var(--color-text-acc)',
|
||||
color: 'var(--color-background)',
|
||||
<DeleteItemModal
|
||||
modalOpened={modalOpened}
|
||||
closeModal={closeModal}
|
||||
title='Delete Theme Playlist'
|
||||
body={
|
||||
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
|
||||
<Text>Are you sure you want to delete this Theme Playlist?</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
fontSize: '20px',
|
||||
padding: '8px',
|
||||
margin: '8px',
|
||||
borderRadius: '10px',
|
||||
backgroundColor: 'var(--color-text-acc)',
|
||||
color: 'var(--color-background)',
|
||||
}}
|
||||
>{`"${cardPlaylist.name}"`}</Text>
|
||||
<Text c='red'>This action cannot be undone!</Text>
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
handleDelete(cardPlaylist, 'api/themePlaylists');
|
||||
closeModal();
|
||||
}}
|
||||
>{`"${cardPlaylist.name}"`}</Text>
|
||||
<Text c='red'>This action cannot be undone!</Text>
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
handleDelete(cardPlaylist, 'api/themePlaylists');
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
<Button
|
||||
color={'grey'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
<Button
|
||||
color={'grey'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
position: 'absolute',
|
||||
|
||||
@@ -10,11 +10,13 @@ import ThemePlaylistCard from './ThemePlaylistCard';
|
||||
import ThemePlaylistModal from './ThemePlaylistModal';
|
||||
|
||||
function ThemePlaylists() {
|
||||
const themesEndpoint = 'api/themes';
|
||||
const { data: allThemes } = useQueryAPI({
|
||||
endpoint: 'api/themes',
|
||||
endpoint: themesEndpoint,
|
||||
});
|
||||
const themePlaylistsEndpoint = 'api/themePlaylists';
|
||||
const { data: themePlaylists } = useQueryAPI({
|
||||
endpoint: 'api/themePlaylists',
|
||||
endpoint: themePlaylistsEndpoint,
|
||||
});
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
@@ -36,7 +38,7 @@ function ThemePlaylists() {
|
||||
const handleSavePlaylist = () => {
|
||||
mutateAsync({
|
||||
method: selectedPlaylist.id === undefined ? 'POST' : 'PATCH',
|
||||
endpoint: 'api/themePlaylists',
|
||||
endpoint: themePlaylistsEndpoint,
|
||||
body: selectedPlaylist,
|
||||
});
|
||||
close();
|
||||
|
||||
@@ -2,20 +2,20 @@ import { Box, Group, Overlay, Stack, Switch, Text } from '@mantine/core';
|
||||
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
|
||||
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FiChevronRight } from 'react-icons/fi';
|
||||
import '@mantine/core/styles/ModalBase.css';
|
||||
import '@mantine/core/styles/Modal.css';
|
||||
import { FaDice } from 'react-icons/fa';
|
||||
import { FiChevronRight } from 'react-icons/fi';
|
||||
import type { Theme } from 'types';
|
||||
import SettingsHeader from '../Shared/SettingsHeader';
|
||||
import ThemeCard from './ThemeCard';
|
||||
import ThemeModal from './ThemeModal';
|
||||
function ThemesSettings() {
|
||||
const themesEndpoint = 'api/themes';
|
||||
const backgroundsEndpoint = 'api/backgrounds';
|
||||
const { data: allThemes } = useQueryAPI({
|
||||
endpoint: 'api/themes',
|
||||
});
|
||||
const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
|
||||
endpoint: 'api/backgrounds',
|
||||
endpoint: backgroundsEndpoint,
|
||||
});
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
@@ -43,7 +43,7 @@ function ThemesSettings() {
|
||||
const handleSaveTheme = () => {
|
||||
mutateAsync({
|
||||
method: selectedTheme.id === undefined ? 'POST' : 'PATCH',
|
||||
endpoint: 'api/themes',
|
||||
endpoint: themesEndpoint,
|
||||
body: selectedTheme,
|
||||
});
|
||||
close();
|
||||
|
||||
Reference in New Issue
Block a user