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-02-07 16:31:16 -06:00
parent ada878a1f7
commit 1d1b707d0c
3 changed files with 54 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,7 +14,7 @@ import {
} from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { FiSave, FiX } from 'react-icons/fi';
import { modalClasses, selectClasses, textClasses } from 'styles';
import { modalClasses, selectClasses, textClasses, textInputClasses } from 'styles';
import ThemeModalContent from './ThemeModalContent';
function ThemeModal({
@@ -33,7 +33,6 @@ function ThemeModal({
handleSaveTheme,
}: any) {
const { theme } = useCommonHooks();
return (
<Modal.Root
size={'50%'}
@@ -44,7 +43,7 @@ function ThemeModal({
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundImage ? 'gray' : theme.backgroundColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url("${theme.backgroundImage}")`,
@@ -60,6 +59,8 @@ function ThemeModal({
<ThemeModalContent selectedTheme={selectedTheme} />
<Divider color='black' my='sm' />
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
label='Theme Name'
value={selectedTheme.name}
onChange={(e) => setSelectedTheme({ ...selectedTheme, name: e.target.value })}
@@ -67,6 +68,10 @@ function ThemeModal({
label: {
color: theme.primaryColor,
},
input: {
color: theme.primaryColor,
border: 'none',
},
}}
/>
<Divider color='black' my='sm' />
@@ -85,7 +90,10 @@ function ThemeModal({
radius={'sm'}
w={'100px'}
color={selectedTheme.primaryColor}
style={{ cursor: 'pointer' }}
style={{
cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`,
}}
/>
</Group>
<Group justify='space-between'>
@@ -101,7 +109,10 @@ function ThemeModal({
radius={'sm'}
w={'100px'}
color={selectedTheme.accentColor}
style={{ cursor: 'pointer' }}
style={{
cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`,
}}
/>
</Group>
<Group justify='space-between'>
@@ -117,7 +128,10 @@ function ThemeModal({
radius={'sm'}
w={'100px'}
color={selectedTheme.backgroundColor}
style={{ cursor: 'pointer' }}
style={{
cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`,
}}
/>
</Group>
<Group justify='space-between'>
@@ -133,7 +147,10 @@ function ThemeModal({
radius={'sm'}
w={'100px'}
color={selectedTheme.borderColor}
style={{ cursor: 'pointer' }}
style={{
cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`,
}}
/>
</Group>
<Group justify='space-between'>
@@ -149,23 +166,40 @@ function ThemeModal({
radius={'sm'}
w={'100px'}
color={selectedTheme.searchColor}
style={{ cursor: 'pointer' }}
style={{
cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`,
}}
/>
</Group>
<Group justify='space-between'>
<Select
w={'100%'}
data={backgroundList}
classNames={selectClasses}
label='Background Image'
value={selectedTheme.backgroundImage}
value={
selectedTheme.backgroundImage === 'none'
? 'None'
: selectedTheme.backgroundImage
}
renderOption={(value) => {
return (
<Group h={'100%'} w={'100%'} justify='space-between'>
<Group
h={'50px'}
w={'100%'}
justify='space-between'
style={{
color: theme.primaryColor,
backgroundColor: theme.backgroundColor,
fontSize: '18px',
}}
>
{value.option.value}
{value.option.value && value.option.value !== 'None' && (
<Image
h={'28px'}
w={'50px'}
h={'50px'}
w={'90px'}
src={`/backgrounds/${value.option.value}`}
/>
)}
@@ -187,11 +221,13 @@ function ThemeModal({
<ColorPicker value={colorValue} onChange={setColorValue} />
<Group w={'75%'} justify='space-between'>
<TextInput
w={'50%'}
className={textInputClasses.default}
classNames={textInputClasses}
w={'100%'}
value={colorValue}
onChange={(e) => setColorValue(e.target.value)}
/>
<Group>
<Group w={'100%'} align='center' justify='center'>
<Button
color={'green'}
onClick={() => {
@@ -248,7 +284,7 @@ function ThemeModal({
</Stack>
</Group>
<Divider color='black' my='sm' />
<Group>
<Group mt={'2rem'}>
<Button color={'green'} onClick={handleSaveTheme}>
Save
</Button>