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

Working empty version

Browse Source
This commit is contained in:
Sean Edmunds
2024-08-28 17:06:37 -05:00
parent 7990f164d6
commit 18db0c17ff
18 changed files with 198 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -123,11 +123,11 @@ function ThemesSettings({ theme }: any) {
onClick={() => {
setColorId('primary');
openPicker();
setColorValue(selectedTheme.colortextpri);
setColorValue(selectedTheme.primary);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.colortextpri}
color={selectedTheme.primary}
style={{ cursor: 'pointer' }}
/>
</Group>
@@ -137,11 +137,11 @@ function ThemesSettings({ theme }: any) {
onClick={() => {
setColorId('accent');
openPicker();
setColorValue(selectedTheme.colortextacc);
setColorValue(selectedTheme.accent);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.colortextacc}
color={selectedTheme.accent}
style={{ cursor: 'pointer' }}
/>
</Group>
@@ -151,11 +151,11 @@ function ThemesSettings({ theme }: any) {
onClick={() => {
setColorId('background');
openPicker();
setColorValue(selectedTheme.colorbackground);
setColorValue(selectedTheme.backgroundColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.colorbackground}
color={selectedTheme.backgroundColor}
style={{ cursor: 'pointer' }}
/>
</Group>
@@ -165,11 +165,11 @@ function ThemesSettings({ theme }: any) {
onClick={() => {
setColorId('border');
openPicker();
setColorValue(selectedTheme.colorborder);
setColorValue(selectedTheme.border);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.colorborder}
color={selectedTheme.border}
style={{ cursor: 'pointer' }}
/>
</Group>
@@ -179,31 +179,34 @@ function ThemesSettings({ theme }: any) {
onClick={() => {
setColorId('searchbackground');
openPicker();
setColorValue(selectedTheme.colorsearchbackground);
setColorValue(selectedTheme.searchColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.colorsearchbackground}
color={selectedTheme.searchColor}
style={{ cursor: 'pointer' }}
/>
</Group>
<Group c={'black'} justify='space-between'>
<TextInput
label='Background Image Path'
value={selectedTheme.imagebackground}
onChange={(e) =>
setSelectedTheme({ ...selectedTheme, imagebackground: e.target.value })
}
styles={{
label: {
color: 'black',
},
input: {
color: 'black',
backgroundColor: 'white',
},
}}
/>
<TextInput
label='Background Image Path'
value={selectedTheme.backgroundImage}
onChange={(e) =>
setSelectedTheme({
...selectedTheme,
backgroundImage: e.target.value,
})
}
styles={{
label: {
color: 'black',
},
input: {
color: 'black',
backgroundColor: 'white',
},
}}
/>
</Group>
</Stack>
<Stack h={'100%'} w={'50%'} align='center' justify='center'>
@@ -220,31 +223,31 @@ function ThemesSettings({ theme }: any) {
case 'primary':
setSelectedTheme({
...selectedTheme,
colortextpri: colorValue,
primary: colorValue,
});
break;
case 'accent':
setSelectedTheme({
...selectedTheme,
colortextacc: colorValue,
accent: colorValue,
});
break;
case 'background':
setSelectedTheme({
...selectedTheme,
colorbackground: colorValue,
backgroundColor: colorValue,
});
break;
case 'border':
setSelectedTheme({
...selectedTheme,
colorborder: colorValue,
border: colorValue,
});
break;
case 'searchbackground':
setSelectedTheme({
...selectedTheme,
colorsearchbackground: colorValue,
searchColor: colorValue,
});
break;
}
@@ -295,12 +298,12 @@ function ThemesSettings({ theme }: any) {
setSelectedTheme({
id: undefined,
name: 'default',
imagebackground: 'none',
colorbackground: '#EEEEEE',
colorsearchbackground: '#00000033',
colortextpri: '#222222',
colortextacc: '#5c5c5c',
colorborder: '#5c5c5c',
backgroundImage: 'none',
backgroundColor: '#EEEEEE',
searchColor: '#00000033',
primary: '#222222',
accent: '#5c5c5c',
border: '#5c5c5c',
});
open();
}}
@@ -316,9 +319,9 @@ function ThemesSettings({ theme }: any) {
w={'100%'}
h={'75px'}
style={{
backgroundColor: theme.colorbackground,
border: `solid ${theme.colorborder}`,
color: theme.colortextpri,
backgroundColor: theme.backgroundColor,
border: `solid ${theme.border}`,
color: theme.primary,
}}
data-theme={theme.name}
onClick={() => {
@@ -337,11 +340,11 @@ function ThemesSettings({ theme }: any) {
>
<FiEdit />
</ActionIcon>
<ColorSwatch color={theme.colorbackground} />
<ColorSwatch color={theme.colorsearchbackground} />
<ColorSwatch color={theme.colortextpri} />
<ColorSwatch color={theme.colortextacc} />
<ColorSwatch color={theme.colorborder} />
<ColorSwatch color={theme.backgroundColor} />
<ColorSwatch color={theme.searchColor} />
<ColorSwatch color={theme.primary} />
<ColorSwatch color={theme.accent} />
<ColorSwatch color={theme.border} />
<ActionIcon
className={actionIconClasses.editButton}