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

Style updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-03-12 15:54:12 -05:00
parent d55021b9b5
commit bf82a3920d
2 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/settings/components/ThemeModal.tsx
View File

@@ -48,11 +48,13 @@ function ThemeModal({
width: '100%', width: '100%',
height: '75px', height: '75px',
background: background:
index === hovered item !== 'none'
? `linear-gradient(${selectedTheme.backgroundColor}88, ${selectedTheme.backgroundColor}88), no-repeat center url(/backgrounds/${item})` ? index === hovered
: `no-repeat center url(/backgrounds/${item})`, ? `linear-gradient(${selectedTheme.backgroundColor}88, ${selectedTheme.backgroundColor}88), no-repeat center url(/backgrounds/${item})`
backgroundSize: 'cover', : `no-repeat center url(/backgrounds/${item})`
backgroundColor: item === 'None' ? '#00000088' : undefined, : undefined,
backgroundSize: item !== 'none' ? 'cover' : undefined,
backgroundColor: item === 'none' ? '#00000088' : undefined,
paddingLeft: 8, paddingLeft: 8,
alignItems: 'center', alignItems: 'center',
}} }}
@@ -138,6 +140,7 @@ function ThemeModal({
input: { input: {
color: theme.primaryColor, color: theme.primaryColor,
border: 'none', border: 'none',
borderBottom: `1px solid ${theme.primaryColor}`,
}, },
}} }}
/> />
@@ -167,6 +170,7 @@ function ThemeModal({
/> />
<Button <Button
color={'green'} color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => { onClick={() => {
switch (colorId) { switch (colorId) {
case 'primaryColor': case 'primaryColor':
@@ -205,7 +209,11 @@ function ThemeModal({
> >
<FiSave /> <FiSave />
</Button> </Button>
<Button color={'red'} onClick={closePicker}> <Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={closePicker}
>
<FiX /> <FiX />
</Button> </Button>
<Group w={'100%'} align='center' justify='center' /> <Group w={'100%'} align='center' justify='center' />

13
src/pages/settings/components/ThemeModalContent.tsx
View File

@@ -70,14 +70,19 @@ export default function ThemeModalContent({ selectedTheme }: any) {
</Box> </Box>
); );
}; };
return ( return (
<Stack <Stack
style={{ style={{
width: '100%', width: '100%',
background: `linear-gradient(${selectedTheme.backgroundColor}33, ${selectedTheme.backgroundColor}33), no-repeat center url(/backgrounds/${selectedTheme.backgroundImage})`, background:
backgroundSize: 'cover', selectedTheme.backgroundImage !== 'none'
backgroundColor: selectedTheme.backgroundColor, ? `linear-gradient(${selectedTheme.backgroundColor}33, ${selectedTheme.backgroundColor}33), no-repeat center url(/backgrounds/${selectedTheme.backgroundImage})`
: undefined,
backgroundSize: selectedTheme.backgroundImage !== 'none' ? 'cover' : undefined,
backgroundColor:
selectedTheme.backgroundImage === 'none'
? selectedTheme.backgroundColor
: undefined,
borderRadius: '10px', borderRadius: '10px',
border: '2px solid', border: '2px solid',
}} }}