Theme updates
This commit is contained in:
Sean Edmunds
194
src/pages/settings/components/ThemeCard.tsx
Normal file
194
src/pages/settings/components/ThemeCard.tsx
Normal file
@@ -0,0 +1,194 @@
|
|||||||
|
import { ActionIcon, Box, Button, Group, Stack, Text } from '@mantine/core';
|
||||||
|
import { FiCheck, FiEdit, FiTrash } from 'react-icons/fi';
|
||||||
|
import { actionIconClasses } from 'styles';
|
||||||
|
|
||||||
|
function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme }: any) {
|
||||||
|
return (
|
||||||
|
<Group gap={0} align='center' justify='center' display={'grid'} pos={'relative'}>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: -10,
|
||||||
|
left: 6,
|
||||||
|
paddingRight: 4,
|
||||||
|
paddingLeft: 4,
|
||||||
|
backgroundColor: theme.borderColor,
|
||||||
|
borderRadius: '4px',
|
||||||
|
color: theme.primaryColor,
|
||||||
|
zIndex: 3,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{theme.name}
|
||||||
|
</Text>
|
||||||
|
<Button
|
||||||
|
w={'300px'}
|
||||||
|
h={'125px'}
|
||||||
|
style={{
|
||||||
|
background: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), no-repeat center url(/backgrounds/${theme.backgroundImage})`,
|
||||||
|
backgroundSize: 'cover',
|
||||||
|
backgroundColor: theme.backgroundColor,
|
||||||
|
border: `solid ${theme.borderColor}`,
|
||||||
|
color: theme.primaryColor,
|
||||||
|
}}
|
||||||
|
data-theme={theme.name}
|
||||||
|
onClick={() => {
|
||||||
|
setValue(theme.name);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Group
|
||||||
|
style={{ zIndex: 2 }}
|
||||||
|
w={'100%'}
|
||||||
|
gap={0}
|
||||||
|
display={'flex'}
|
||||||
|
align='center'
|
||||||
|
justify='center'
|
||||||
|
>
|
||||||
|
<Stack align='center'>
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
height: '10px',
|
||||||
|
width: '100px',
|
||||||
|
backgroundColor: theme.searchColor,
|
||||||
|
borderRadius: '4px',
|
||||||
|
borderBottom: `solid 1px ${theme.borderColor}`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Group justify='space-between'>
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
height: '8px',
|
||||||
|
width: '100px',
|
||||||
|
backgroundColor: theme.accentColor,
|
||||||
|
borderRadius: '4px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
height: '8px',
|
||||||
|
width: '50px',
|
||||||
|
backgroundColor: theme.primaryColor,
|
||||||
|
borderRadius: '4px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Group>
|
||||||
|
<Group w={'100%'}>
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
height: '5px',
|
||||||
|
width: '40px',
|
||||||
|
backgroundColor: theme.primaryColor,
|
||||||
|
borderRadius: '4px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Group>
|
||||||
|
<Group w={'100%'}>
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
height: '10px',
|
||||||
|
width: '40px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
backdropFilter: 'blur(10px) brightness(1.5)',
|
||||||
|
fontSize: '6px',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
lorem ipsum
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
height: '10px',
|
||||||
|
width: '40px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
backdropFilter: 'blur(10px) brightness(1.5)',
|
||||||
|
fontSize: '6px',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
lorem ipsum
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
height: '10px',
|
||||||
|
width: '40px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
backdropFilter: 'blur(10px) brightness(1.5)',
|
||||||
|
fontSize: '6px',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
lorem ipsum
|
||||||
|
</Box>
|
||||||
|
</Group>
|
||||||
|
</Stack>
|
||||||
|
</Group>
|
||||||
|
</Button>
|
||||||
|
<Stack
|
||||||
|
gap={0}
|
||||||
|
style={{
|
||||||
|
padding: '4px',
|
||||||
|
paddingRight: '0px',
|
||||||
|
position: 'absolute',
|
||||||
|
right: 3,
|
||||||
|
backgroundColor: '#ffffff66',
|
||||||
|
borderTopLeftRadius: '10px',
|
||||||
|
borderBottomLeftRadius: '10px',
|
||||||
|
}}
|
||||||
|
align='center'
|
||||||
|
justify='center'
|
||||||
|
>
|
||||||
|
<ActionIcon
|
||||||
|
style={{
|
||||||
|
background: theme.randomEnabled
|
||||||
|
? 'rgba(255,255,255,1)'
|
||||||
|
: 'rgba(255,255,255,0.5)',
|
||||||
|
border: `solid 1px ${theme.borderColor}`,
|
||||||
|
borderRadius: '2%',
|
||||||
|
margin: '2px',
|
||||||
|
color: 'black',
|
||||||
|
}}
|
||||||
|
styles={{
|
||||||
|
root: {
|
||||||
|
height: '10px',
|
||||||
|
width: '10px',
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
height: '10px',
|
||||||
|
width: '10px',
|
||||||
|
fontSize: '24px',
|
||||||
|
margin: 0,
|
||||||
|
padding: 0,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
createTheme({
|
||||||
|
method: 'PATCH',
|
||||||
|
endpoint: 'api/themes',
|
||||||
|
body: { ...theme, randomEnabled: !theme.randomEnabled },
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FiCheck />
|
||||||
|
</ActionIcon>
|
||||||
|
<ActionIcon
|
||||||
|
className={actionIconClasses.editButton}
|
||||||
|
classNames={actionIconClasses}
|
||||||
|
onClick={() => handleOpen(theme)}
|
||||||
|
>
|
||||||
|
<FiEdit />
|
||||||
|
</ActionIcon>
|
||||||
|
<ActionIcon
|
||||||
|
className={actionIconClasses.editButton}
|
||||||
|
classNames={actionIconClasses}
|
||||||
|
onClick={() => handleDeleteTheme(theme)}
|
||||||
|
>
|
||||||
|
<FiTrash color='red' />
|
||||||
|
</ActionIcon>
|
||||||
|
</Stack>
|
||||||
|
</Group>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ThemeCard;
|
||||||
267
src/pages/settings/components/ThemeModal.tsx
Normal file
267
src/pages/settings/components/ThemeModal.tsx
Normal file
@@ -0,0 +1,267 @@
|
|||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
ColorPicker,
|
||||||
|
ColorSwatch,
|
||||||
|
Divider,
|
||||||
|
Group,
|
||||||
|
Image,
|
||||||
|
Modal,
|
||||||
|
OptionalPortal,
|
||||||
|
Select,
|
||||||
|
Stack,
|
||||||
|
Text,
|
||||||
|
TextInput,
|
||||||
|
} from '@mantine/core';
|
||||||
|
import { FiSave, FiX } from 'react-icons/fi';
|
||||||
|
import { modalClasses, selectClasses, textClasses } from 'styles';
|
||||||
|
import ThemeModalContent from './ThemeModalContent';
|
||||||
|
|
||||||
|
function ThemeModal({
|
||||||
|
opened,
|
||||||
|
handleClose,
|
||||||
|
selectedTheme,
|
||||||
|
setSelectedTheme,
|
||||||
|
theme,
|
||||||
|
setColorId,
|
||||||
|
colorId,
|
||||||
|
setColorValue,
|
||||||
|
openPicker,
|
||||||
|
backgroundList,
|
||||||
|
pickerOpen,
|
||||||
|
colorValue,
|
||||||
|
closePicker,
|
||||||
|
handleSaveTheme,
|
||||||
|
}: any) {
|
||||||
|
return (
|
||||||
|
<Modal.Root
|
||||||
|
size={'50%'}
|
||||||
|
className={modalClasses.editThemeModal}
|
||||||
|
classNames={modalClasses}
|
||||||
|
opened={opened}
|
||||||
|
onClose={handleClose}
|
||||||
|
style={{
|
||||||
|
'--color-text-pri': theme.primaryColor,
|
||||||
|
'--color-text-acc': theme.accentColor,
|
||||||
|
'--color-background': theme.backgroundImage ? 'gray' : theme.backgroundColor,
|
||||||
|
'--color-border': theme.borderColor,
|
||||||
|
'--color-search-background': theme.searchColor,
|
||||||
|
'--image-background': `url("${theme.backgroundImage}")`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Modal.Overlay />
|
||||||
|
<Modal.Content>
|
||||||
|
<Modal.Header>
|
||||||
|
<Modal.Title>Edit Theme</Modal.Title>
|
||||||
|
<Modal.CloseButton />
|
||||||
|
</Modal.Header>
|
||||||
|
<Modal.Body p={'2rem'}>
|
||||||
|
<ThemeModalContent selectedTheme={selectedTheme} />
|
||||||
|
<Divider color='black' my='sm' />
|
||||||
|
<TextInput
|
||||||
|
label='Theme Name'
|
||||||
|
value={selectedTheme.name}
|
||||||
|
onChange={(e) => setSelectedTheme({ ...selectedTheme, name: e.target.value })}
|
||||||
|
styles={{
|
||||||
|
label: {
|
||||||
|
color: theme.primaryColor,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Divider color='black' my='sm' />
|
||||||
|
<Group w={'100%'} h={'100%'} gap={0}>
|
||||||
|
<Stack w={'50%'}>
|
||||||
|
<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' }}
|
||||||
|
/>
|
||||||
|
</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' }}
|
||||||
|
/>
|
||||||
|
</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' }}
|
||||||
|
/>
|
||||||
|
</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' }}
|
||||||
|
/>
|
||||||
|
</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' }}
|
||||||
|
/>
|
||||||
|
</Group>
|
||||||
|
<Group justify='space-between'>
|
||||||
|
<OptionalPortal withinPortal={false}>
|
||||||
|
<Select
|
||||||
|
data={backgroundList}
|
||||||
|
className={selectClasses.select}
|
||||||
|
classNames={selectClasses}
|
||||||
|
label='Background Image'
|
||||||
|
value={selectedTheme.backgroundImage}
|
||||||
|
renderOption={(value) => {
|
||||||
|
return (
|
||||||
|
<Group h={'100%'} w={'100%'} justify='space-between'>
|
||||||
|
{value.option.value}
|
||||||
|
{value.option.value && value.option.value !== 'None' && (
|
||||||
|
<Image
|
||||||
|
h={'28px'}
|
||||||
|
w={'50px'}
|
||||||
|
src={`/backgrounds/${value.option.value}`}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Group>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
onChange={(value) =>
|
||||||
|
setSelectedTheme({
|
||||||
|
...selectedTheme,
|
||||||
|
backgroundImage: value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</OptionalPortal>
|
||||||
|
</Group>
|
||||||
|
</Stack>
|
||||||
|
<Stack h={'100%'} w={'50%'} align='center' justify='center'>
|
||||||
|
{pickerOpen ? (
|
||||||
|
<>
|
||||||
|
<ColorPicker value={colorValue} onChange={setColorValue} />
|
||||||
|
<Group w={'75%'} justify='space-between'>
|
||||||
|
<TextInput
|
||||||
|
w={'50%'}
|
||||||
|
value={colorValue}
|
||||||
|
onChange={(e) => setColorValue(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Group>
|
||||||
|
<Button
|
||||||
|
color={'green'}
|
||||||
|
onClick={() => {
|
||||||
|
switch (colorId) {
|
||||||
|
case 'primaryColor':
|
||||||
|
setSelectedTheme({
|
||||||
|
...selectedTheme,
|
||||||
|
primaryColor: colorValue,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'accentColor':
|
||||||
|
setSelectedTheme({
|
||||||
|
...selectedTheme,
|
||||||
|
accentColor: colorValue,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'background':
|
||||||
|
setSelectedTheme({
|
||||||
|
...selectedTheme,
|
||||||
|
backgroundColor: colorValue,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'borderColor':
|
||||||
|
setSelectedTheme({
|
||||||
|
...selectedTheme,
|
||||||
|
borderColor: colorValue,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'searchBackground':
|
||||||
|
setSelectedTheme({
|
||||||
|
...selectedTheme,
|
||||||
|
searchColor: colorValue,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
closePicker();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FiSave />
|
||||||
|
</Button>
|
||||||
|
<Button color={'red'} onClick={closePicker}>
|
||||||
|
<FiX />
|
||||||
|
</Button>
|
||||||
|
</Group>
|
||||||
|
</Group>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<Card bg={'#0002'} h={'100%'} w={'90%'} style={{ alignItems: 'center' }}>
|
||||||
|
<Text className={textClasses.label} classNames={textClasses}>
|
||||||
|
Pick a swatch to edit the color.
|
||||||
|
</Text>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
</Group>
|
||||||
|
<Divider color='black' my='sm' />
|
||||||
|
<Group>
|
||||||
|
<Button color={'green'} onClick={handleSaveTheme}>
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
<Button color={'red'} onClick={close}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</Group>
|
||||||
|
</Modal.Body>
|
||||||
|
</Modal.Content>
|
||||||
|
</Modal.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ThemeModal;
|
||||||
@@ -1,40 +1,20 @@
|
|||||||
import {
|
import { Button, Group, Stack, Switch, Text } from '@mantine/core';
|
||||||
ActionIcon,
|
|
||||||
Button,
|
|
||||||
Card,
|
|
||||||
ColorPicker,
|
|
||||||
ColorSwatch,
|
|
||||||
Divider,
|
|
||||||
Group,
|
|
||||||
Image,
|
|
||||||
Modal,
|
|
||||||
OptionalPortal,
|
|
||||||
Select,
|
|
||||||
Stack,
|
|
||||||
Text,
|
|
||||||
TextInput,
|
|
||||||
} from '@mantine/core';
|
|
||||||
import { useDisclosure, useLocalStorage } from '@mantine/hooks';
|
import { useDisclosure, useLocalStorage } from '@mantine/hooks';
|
||||||
import { useMutationAPI, useQueryAPI } from 'hooks';
|
import { useMutationAPI, useQueryAPI } from 'hooks';
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { FiCheck, FiEdit, FiPlus, FiSave, FiTrash, FiX } from 'react-icons/fi';
|
import { FiChevronRight, FiPlus } from 'react-icons/fi';
|
||||||
import '@mantine/core/styles/ModalBase.css';
|
import '@mantine/core/styles/ModalBase.css';
|
||||||
import '@mantine/core/styles/Modal.css';
|
import '@mantine/core/styles/Modal.css';
|
||||||
import { modals } from '@mantine/modals';
|
import { modals } from '@mantine/modals';
|
||||||
import {
|
import { buttonClasses, textClasses } from 'styles';
|
||||||
actionIconClasses,
|
import ThemeCard from './ThemeCard';
|
||||||
buttonClasses,
|
import ThemeModal from './ThemeModal';
|
||||||
modalClasses,
|
|
||||||
selectClasses,
|
|
||||||
textClasses,
|
|
||||||
} from 'styles';
|
|
||||||
import ThemeModalContent from './ThemeModalContent';
|
|
||||||
function ThemesSettings({ theme }: any) {
|
function ThemesSettings({ theme }: any) {
|
||||||
const [opened, { open, close }] = useDisclosure(false);
|
const [opened, { open, close }] = useDisclosure(false);
|
||||||
const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
|
const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
|
||||||
const [colorId, setColorId] = useState<string>('');
|
const [colorId, setColorId] = useState<string>('');
|
||||||
const [colorValue, setColorValue] = useState('#000000');
|
const [colorValue, setColorValue] = useState('#000000');
|
||||||
const [_, setValue] = useLocalStorage<any>({
|
const [currentTheme, setValue] = useLocalStorage<any>({
|
||||||
key: 'theme',
|
key: 'theme',
|
||||||
defaultValue: 'blackboard',
|
defaultValue: 'blackboard',
|
||||||
});
|
});
|
||||||
@@ -95,393 +75,86 @@ function ThemesSettings({ theme }: any) {
|
|||||||
close();
|
close();
|
||||||
};
|
};
|
||||||
|
|
||||||
const randomColor = () => {
|
|
||||||
return `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},1)`;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Modal.Root
|
<ThemeModal
|
||||||
size={'50%'}
|
|
||||||
className={modalClasses.editThemeModal}
|
|
||||||
classNames={modalClasses}
|
|
||||||
opened={opened}
|
opened={opened}
|
||||||
onClose={handleClose}
|
handleClose={handleClose}
|
||||||
style={{
|
selectedTheme={selectedTheme}
|
||||||
'--color-text-pri': theme.primaryColor,
|
setSelectedTheme={setSelectedTheme}
|
||||||
'--color-text-acc': theme.accentColor,
|
theme={theme}
|
||||||
'--color-background': theme.backgroundImage ? 'gray' : theme.backgroundColor,
|
setColorId={setColorId}
|
||||||
'--color-border': theme.borderColor,
|
colorId={colorId}
|
||||||
'--color-search-background': theme.searchColor,
|
setColorValue={setColorValue}
|
||||||
'--image-background': `url("${theme.backgroundImage}")`,
|
openPicker={openPicker}
|
||||||
}}
|
backgroundList={backgroundList}
|
||||||
>
|
pickerOpen={pickerOpen}
|
||||||
<Modal.Overlay />
|
colorValue={colorValue}
|
||||||
<Modal.Content>
|
closePicker={closePicker}
|
||||||
<Modal.Header>
|
handleSaveTheme={handleSaveTheme}
|
||||||
<Modal.Title>Edit Theme</Modal.Title>
|
/>
|
||||||
<Modal.CloseButton />
|
|
||||||
</Modal.Header>
|
|
||||||
<Modal.Body p={'2rem'}>
|
|
||||||
<ThemeModalContent selectedTheme={selectedTheme} />
|
|
||||||
<Divider color='black' my='sm' />
|
|
||||||
<TextInput
|
|
||||||
label='Theme Name'
|
|
||||||
value={selectedTheme.name}
|
|
||||||
onChange={(e) =>
|
|
||||||
setSelectedTheme({ ...selectedTheme, name: e.target.value })
|
|
||||||
}
|
|
||||||
styles={{
|
|
||||||
label: {
|
|
||||||
color: theme.primaryColor,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Divider color='black' my='sm' />
|
|
||||||
<Group w={'100%'} h={'100%'} gap={0}>
|
|
||||||
<Stack w={'50%'}>
|
|
||||||
<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' }}
|
|
||||||
/>
|
|
||||||
</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' }}
|
|
||||||
/>
|
|
||||||
</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' }}
|
|
||||||
/>
|
|
||||||
</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' }}
|
|
||||||
/>
|
|
||||||
</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' }}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
<Group justify='space-between'>
|
|
||||||
<OptionalPortal withinPortal={false}>
|
|
||||||
<Select
|
|
||||||
data={backgroundList}
|
|
||||||
className={selectClasses.select}
|
|
||||||
classNames={selectClasses}
|
|
||||||
label='Background Image'
|
|
||||||
value={selectedTheme.backgroundImage}
|
|
||||||
renderOption={(value) => {
|
|
||||||
return (
|
|
||||||
<Group h={'100%'} w={'100%'} justify='space-between'>
|
|
||||||
{value.option.value}
|
|
||||||
{value.option.value && value.option.value !== 'None' && (
|
|
||||||
<Image
|
|
||||||
h={'28px'}
|
|
||||||
w={'50px'}
|
|
||||||
src={`/backgrounds/${value.option.value}`}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Group>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
onChange={(value) =>
|
|
||||||
setSelectedTheme({
|
|
||||||
...selectedTheme,
|
|
||||||
backgroundImage: value,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</OptionalPortal>
|
|
||||||
</Group>
|
|
||||||
</Stack>
|
|
||||||
<Stack h={'100%'} w={'50%'} align='center' justify='center'>
|
|
||||||
{pickerOpen ? (
|
|
||||||
<>
|
|
||||||
<ColorPicker value={colorValue} onChange={setColorValue} />
|
|
||||||
<Group w={'75%'} justify='space-between'>
|
|
||||||
<TextInput
|
|
||||||
w={'50%'}
|
|
||||||
value={colorValue}
|
|
||||||
onChange={(e) => setColorValue(e.target.value)}
|
|
||||||
/>
|
|
||||||
<Group>
|
|
||||||
<Button
|
|
||||||
color={'green'}
|
|
||||||
onClick={() => {
|
|
||||||
switch (colorId) {
|
|
||||||
case 'primaryColor':
|
|
||||||
setSelectedTheme({
|
|
||||||
...selectedTheme,
|
|
||||||
primaryColor: colorValue,
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'accentColor':
|
|
||||||
setSelectedTheme({
|
|
||||||
...selectedTheme,
|
|
||||||
accentColor: colorValue,
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'background':
|
|
||||||
setSelectedTheme({
|
|
||||||
...selectedTheme,
|
|
||||||
backgroundColor: colorValue,
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'borderColor':
|
|
||||||
setSelectedTheme({
|
|
||||||
...selectedTheme,
|
|
||||||
borderColor: colorValue,
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'searchBackground':
|
|
||||||
setSelectedTheme({
|
|
||||||
...selectedTheme,
|
|
||||||
searchColor: colorValue,
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
closePicker();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<FiSave />
|
|
||||||
</Button>
|
|
||||||
<Button color={'red'} onClick={closePicker}>
|
|
||||||
<FiX />
|
|
||||||
</Button>
|
|
||||||
</Group>
|
|
||||||
</Group>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<Card
|
|
||||||
bg={'#0002'}
|
|
||||||
h={'100%'}
|
|
||||||
w={'90%'}
|
|
||||||
style={{ alignItems: 'center' }}
|
|
||||||
>
|
|
||||||
<Text className={textClasses.label} classNames={textClasses}>
|
|
||||||
Pick a swatch to edit the color.
|
|
||||||
</Text>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
</Group>
|
|
||||||
<Divider color='black' my='sm' />
|
|
||||||
<Group>
|
|
||||||
<Button color={'green'} onClick={handleSaveTheme}>
|
|
||||||
Save
|
|
||||||
</Button>
|
|
||||||
<Button color={'red'} onClick={close}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Group>
|
|
||||||
</Modal.Body>
|
|
||||||
</Modal.Content>
|
|
||||||
</Modal.Root>
|
|
||||||
<Stack h={'100%'} w={'100%'}>
|
<Stack h={'100%'} w={'100%'}>
|
||||||
<Group>
|
<Group w={'100%'} justify='space-between'>
|
||||||
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
|
<Group>
|
||||||
Themes
|
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
|
||||||
</Text>
|
Themes
|
||||||
<Button
|
</Text>
|
||||||
className={buttonClasses.tableButton}
|
<Button
|
||||||
classNames={buttonClasses}
|
className={buttonClasses.tableButton}
|
||||||
onClick={() => {
|
classNames={buttonClasses}
|
||||||
setSelectedTheme({
|
onClick={() => {
|
||||||
id: undefined,
|
setSelectedTheme({
|
||||||
name: 'default',
|
id: undefined,
|
||||||
backgroundImage: 'none',
|
name: 'default',
|
||||||
backgroundColor: '#EEEEEE',
|
backgroundImage: 'none',
|
||||||
searchColor: '#00000033',
|
backgroundColor: '#EEEEEE',
|
||||||
primaryColor: '#222222',
|
searchColor: '#00000033',
|
||||||
accentColor: '#5c5c5c',
|
primaryColor: '#222222',
|
||||||
borderColor: '#5c5c5c',
|
accentColor: '#5c5c5c',
|
||||||
});
|
borderColor: '#5c5c5c',
|
||||||
open();
|
});
|
||||||
|
open();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FiPlus />
|
||||||
|
</Button>
|
||||||
|
</Group>
|
||||||
|
<Switch
|
||||||
|
label={<Text c={theme.primaryColor}>Random Theme</Text>}
|
||||||
|
labelPosition='left'
|
||||||
|
checked={currentTheme === 'random'}
|
||||||
|
onChange={(e) => {
|
||||||
|
setValue(e.target.checked ? 'random' : 'blackboard');
|
||||||
}}
|
}}
|
||||||
>
|
color={theme.primaryColor}
|
||||||
<FiPlus />
|
/>
|
||||||
</Button>
|
|
||||||
</Group>
|
</Group>
|
||||||
<Group justify='center'>
|
<Group justify='center'>
|
||||||
{themesList.map((theme: any) => (
|
{themesList.map((theme: any) => (
|
||||||
<Stack key={theme.name} w={'300px'}>
|
<Group key={theme.name} pos={'relative'}>
|
||||||
<Group gap={0} justify='space-between'>
|
{theme.name === currentTheme && (
|
||||||
<Button
|
<FiChevronRight
|
||||||
w={'100%'}
|
|
||||||
h={'75px'}
|
|
||||||
style={{
|
style={{
|
||||||
background: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), no-repeat center url(/backgrounds/${theme.backgroundImage})`,
|
position: 'absolute',
|
||||||
backgroundSize: 'cover',
|
left: -14,
|
||||||
backgroundColor: theme.backgroundColor,
|
zIndex: 1,
|
||||||
border: `solid ${theme.borderColor}`,
|
fontSize: '2em',
|
||||||
color: theme.primaryColor,
|
fontWeight: 'bold',
|
||||||
|
borderRadius: '50%',
|
||||||
|
backgroundColor: theme.borderColor,
|
||||||
|
color: 'var(--color-text-pri)',
|
||||||
}}
|
}}
|
||||||
data-theme={theme.name}
|
/>
|
||||||
onClick={() => {
|
)}
|
||||||
setValue(theme.name);
|
<ThemeCard
|
||||||
}}
|
theme={theme}
|
||||||
>
|
handleOpen={handleOpen}
|
||||||
{theme.name}
|
handleDeleteTheme={handleDeleteTheme}
|
||||||
</Button>
|
setValue={setValue}
|
||||||
</Group>
|
createTheme={createTheme}
|
||||||
<Group justify='space-between' gap={0}>
|
/>
|
||||||
<ActionIcon
|
</Group>
|
||||||
style={{
|
|
||||||
background: theme.randomEnabled
|
|
||||||
? 'rgba(255,255,255,1)'
|
|
||||||
: 'rgba(255,255,255,0.5)',
|
|
||||||
border: `solid 1px ${theme.borderColor}`,
|
|
||||||
borderRadius: '2%',
|
|
||||||
margin: '2px',
|
|
||||||
color: 'black',
|
|
||||||
}}
|
|
||||||
styles={{
|
|
||||||
root: {
|
|
||||||
height: '10px',
|
|
||||||
width: '10px',
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
height: '10px',
|
|
||||||
width: '10px',
|
|
||||||
margin: 0,
|
|
||||||
padding: 0,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
onClick={() => {
|
|
||||||
createTheme({
|
|
||||||
method: 'PATCH',
|
|
||||||
endpoint: 'api/themes',
|
|
||||||
body: { ...theme, randomEnabled: !theme.randomEnabled },
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<FiCheck height={'10px'} width={'10px'} />
|
|
||||||
</ActionIcon>
|
|
||||||
<ActionIcon
|
|
||||||
className={actionIconClasses.editButton}
|
|
||||||
classNames={actionIconClasses}
|
|
||||||
onClick={() => handleOpen(theme)}
|
|
||||||
>
|
|
||||||
<FiEdit />
|
|
||||||
</ActionIcon>
|
|
||||||
<ColorSwatch color={theme.backgroundColor} />
|
|
||||||
<ColorSwatch color={theme.searchColor} />
|
|
||||||
<ColorSwatch color={theme.primaryColor} />
|
|
||||||
<ColorSwatch color={theme.accentColor} />
|
|
||||||
<ColorSwatch color={theme.borderColor} />
|
|
||||||
|
|
||||||
<ActionIcon
|
|
||||||
className={actionIconClasses.editButton}
|
|
||||||
classNames={actionIconClasses}
|
|
||||||
onClick={() => handleDeleteTheme(theme)}
|
|
||||||
>
|
|
||||||
<FiTrash color='red' />
|
|
||||||
</ActionIcon>
|
|
||||||
</Group>
|
|
||||||
</Stack>
|
|
||||||
))}
|
))}
|
||||||
<Stack key={theme.name} w={'300px'}>
|
|
||||||
<Group gap={0} justify='space-between'>
|
|
||||||
<Button
|
|
||||||
w={'100%'}
|
|
||||||
h={'75px'}
|
|
||||||
style={{
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundColor: 'white',
|
|
||||||
border: 'solid black',
|
|
||||||
color: 'black',
|
|
||||||
}}
|
|
||||||
data-theme={theme.name}
|
|
||||||
onClick={() => {
|
|
||||||
setValue('random');
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Random
|
|
||||||
</Button>
|
|
||||||
</Group>
|
|
||||||
<Group justify='space-between' gap={0}>
|
|
||||||
<Group className='theme-palette'>
|
|
||||||
<ActionIcon
|
|
||||||
className={actionIconClasses.editButton}
|
|
||||||
classNames={actionIconClasses}
|
|
||||||
onClick={() => handleOpen(theme)}
|
|
||||||
>
|
|
||||||
<FiEdit />
|
|
||||||
</ActionIcon>
|
|
||||||
<ColorSwatch color={randomColor()} />
|
|
||||||
<ColorSwatch color={randomColor()} />
|
|
||||||
<ColorSwatch color={randomColor()} />
|
|
||||||
<ColorSwatch color={randomColor()} />
|
|
||||||
<ColorSwatch color={randomColor()} />
|
|
||||||
|
|
||||||
<ActionIcon
|
|
||||||
className={actionIconClasses.editButton}
|
|
||||||
classNames={actionIconClasses}
|
|
||||||
onClick={() => handleDeleteTheme(theme)}
|
|
||||||
>
|
|
||||||
<FiTrash color='red' />
|
|
||||||
</ActionIcon>
|
|
||||||
</Group>
|
|
||||||
</Group>
|
|
||||||
</Stack>
|
|
||||||
</Group>
|
</Group>
|
||||||
</Stack>
|
</Stack>
|
||||||
</>
|
</>
|
||||||
|
|||||||
Reference in New Issue
Block a user