smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Bugfixes & UI updates

Browse Source
This commit is contained in:
Sean Edmunds
2024-08-29 12:45:25 -05:00
parent 9a3cbbd0e2
commit e9ccd0906c
16 changed files with 249 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/pages/settings/components/Themes.tsx
View File

@@ -32,7 +32,7 @@ function ThemesSettings({ theme }: any) {
const [colorValue, setColorValue] = useState('#000000');
const [value, setValue] = useLocalStorage<any>({
key: 'theme',
defaultValue: {},
defaultValue: 'blackboard',
});
const { data, isFetched } = useQueryAPI({
endpoint: 'api/themes',
@@ -88,6 +88,14 @@ function ThemesSettings({ theme }: any) {
classNames={modalClasses}
opened={opened}
onClose={handleClose}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
>
<Modal.Overlay />
<Modal.Content>
@@ -106,11 +114,7 @@ function ThemesSettings({ theme }: any) {
}
styles={{
label: {
color: 'black',
},
input: {
color: 'black',
backgroundColor: 'white',
color: theme.primaryColor,
},
}}
/>
@@ -118,35 +122,41 @@ function ThemesSettings({ theme }: any) {
<Group w={'100%'} h={'100%'} gap={0}>
<Stack w={'50%'}>
<Group c={'black'} justify='space-between'>
<Text>Primary Color</Text>
<Text className={textClasses.label} classNames={textClasses}>
Primary Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('primary');
setColorId('primaryColor');
openPicker();
setColorValue(selectedTheme.primary);
setColorValue(selectedTheme.primaryColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.primary}
color={selectedTheme.primaryColor}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group c={'black'} justify='space-between'>
<Text>Accent Color</Text>
<Text className={textClasses.label} classNames={textClasses}>
Accent Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('accent');
setColorId('accentColor');
openPicker();
setColorValue(selectedTheme.accent);
setColorValue(selectedTheme.accentColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.accent}
color={selectedTheme.accentColor}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group c={'black'} justify='space-between'>
<Text>Background Color</Text>
<Text className={textClasses.label} classNames={textClasses}>
Background Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('background');
@@ -160,24 +170,28 @@ function ThemesSettings({ theme }: any) {
/>
</Group>
<Group c={'black'} justify='space-between'>
<Text>Border Color</Text>
<Text className={textClasses.label} classNames={textClasses}>
Border Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('border');
setColorId('borderColor');
openPicker();
setColorValue(selectedTheme.border);
setColorValue(selectedTheme.borderColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.border}
color={selectedTheme.borderColor}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group c={'black'} justify='space-between'>
<Text>Search Background Color</Text>
<Text className={textClasses.label} classNames={textClasses}>
Search Background Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('searchbackground');
setColorId('searchBackground');
openPicker();
setColorValue(selectedTheme.searchColor);
}}
@@ -199,11 +213,7 @@ function ThemesSettings({ theme }: any) {
}
styles={{
label: {
color: 'black',
},
input: {
color: 'black',
backgroundColor: 'white',
color: theme.primaryColor,
},
}}
/>
@@ -214,22 +224,26 @@ function ThemesSettings({ theme }: any) {
<>
<ColorPicker value={colorValue} onChange={setColorValue} />
<Group w={'75%'} justify='space-between'>
<Text c={'black'}>{colorValue}</Text>
<TextInput
w={'50%'}
value={colorValue}
onChange={(e) => setColorValue(e.target.value)}
/>
<Group>
<Button
color={'green'}
onClick={() => {
switch (colorId) {
case 'primary':
case 'primaryColor':
setSelectedTheme({
...selectedTheme,
primary: colorValue,
primaryColor: colorValue,
});
break;
case 'accent':
case 'accentColor':
setSelectedTheme({
...selectedTheme,
accent: colorValue,
accentColor: colorValue,
});
break;
case 'background':
@@ -238,13 +252,13 @@ function ThemesSettings({ theme }: any) {
backgroundColor: colorValue,
});
break;
case 'border':
case 'borderColor':
setSelectedTheme({
...selectedTheme,
border: colorValue,
borderColor: colorValue,
});
break;
case 'searchbackground':
case 'searchBackground':
setSelectedTheme({
...selectedTheme,
searchColor: colorValue,
@@ -269,7 +283,9 @@ function ThemesSettings({ theme }: any) {
w={'90%'}
style={{ alignItems: 'center' }}
>
<Text c='black'>Pick a swatch to edit the color.</Text>
<Text className={textClasses.label} classNames={textClasses}>
Pick a swatch to edit the color.
</Text>
</Card>
)}
</Stack>
@@ -301,9 +317,9 @@ function ThemesSettings({ theme }: any) {
backgroundImage: 'none',
backgroundColor: '#EEEEEE',
searchColor: '#00000033',
primary: '#222222',
accent: '#5c5c5c',
border: '#5c5c5c',
primaryColor: '#222222',
accentColor: '#5c5c5c',
borderColor: '#5c5c5c',
});
open();
}}
@@ -320,8 +336,8 @@ function ThemesSettings({ theme }: any) {
h={'75px'}
style={{
backgroundColor: theme.backgroundColor,
border: `solid ${theme.border}`,
color: theme.primary,
border: `solid ${theme.borderColor}`,
color: theme.primaryColor,
}}
data-theme={theme.name}
onClick={() => {
@@ -342,9 +358,9 @@ function ThemesSettings({ theme }: any) {
</ActionIcon>
<ColorSwatch color={theme.backgroundColor} />
<ColorSwatch color={theme.searchColor} />
<ColorSwatch color={theme.primary} />
<ColorSwatch color={theme.accent} />
<ColorSwatch color={theme.border} />
<ColorSwatch color={theme.primaryColor} />
<ColorSwatch color={theme.accentColor} />
<ColorSwatch color={theme.borderColor} />
<ActionIcon
className={actionIconClasses.editButton}