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

Updates to theme builder

Browse Source
This commit is contained in:
Sean Edmunds
2025-07-29 19:59:41 -05:00
parent b4e4f14310
commit 7277ff501b
5 changed files with 67 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeEditor.tsx
View File

@@ -155,8 +155,8 @@ export function ThemeEditor({
color={selectedTheme.primaryColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
top={'6.25rem'}
left={'1.5rem'}
top={'11.5rem'}
left={'8.5rem'}
/>
</Tooltip>
<Tooltip
@@ -191,7 +191,7 @@ export function ThemeEditor({
color={selectedTheme.backgroundColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
bottom={'10rem'}
bottom={'4rem'}
right={'3.5rem'}
/>
</Tooltip>
@@ -251,7 +251,7 @@ export function ThemeEditor({
</Stack>
<Stack
w={isMobile ? '100%' : '28%'}
h={'436px'}
h={'450px'}
p={'1rem'}
style={{
borderRadius: '1rem',
@@ -263,6 +263,7 @@ export function ThemeEditor({
<Text
className={textClasses.sectionTitle}
classNames={textClasses}
c={'var(--mantine-color-background-0)'}
style={{
textShadow: theme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'

65
src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeModalContent.tsx
View File

@@ -1,6 +1,6 @@
import { Group, Select, Stack, Text } from '@mantine/core';
import { AppItem } from 'components';
import { selectClasses } from 'styles';
import { selectClasses, textClasses } from 'styles';
import type { Theme } from 'types';
export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
@@ -23,8 +23,14 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
borderRadius: '10px',
border: '2px solid var(--mantine-color-primary-0)',
padding: '1rem',
'--mantine-color-primary-0': selectedTheme?.primaryColor,
'--mantine-color-accent-0': selectedTheme?.accentColor,
'--mantine-color-background-0': selectedTheme?.backgroundColor,
'--mantine-color-border-0': selectedTheme?.borderColor,
'--mantine-color-search-0': selectedTheme?.searchColor,
}}
align='center'
gap={0}
>
<Select
disabled
@@ -51,19 +57,28 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
leftSection={'Google Search'}
rightSection={<div />}
/>
<Text
className={textClasses.greeting}
classNames={textClasses}
p={0}
m={0}
w={'100%'}
style={{
textShadow: selectedTheme.textShadowsEnabled
? '3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)'
: undefined,
}}
>
Hello World!
</Text>
<Stack gap={0} w={'100%'}>
<Text
pl={'1.5rem'}
className={textClasses.sectionTitle}
classNames={textClasses}
style={{
textDecoration: 'underline',
fontSize: '1.25rem',
fontWeight: 200,
fontStyle: 'italic',
height: '10px',
textTransform: 'uppercase',
marginTop: '1.25rem',
marginBottom: '1.25rem',
color: selectedTheme?.primaryColor,
boxShadow: selectedTheme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
: undefined,
}}
>
Applications
@@ -78,8 +93,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
gridRowGap: '5px',
gridTemplateColumns: '1fr 1fr 1fr',
gridTemplateRows: '64px',
padding: '1rem',
paddingTop: 0,
padding: 0,
justifyContent: 'center',
alignContent: 'center',
}}
@@ -87,11 +101,6 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
>
<Group
style={{
'--mantine-color-primary-0': selectedTheme?.primaryColor,
'--mantine-color-accent-0': selectedTheme?.accentColor,
'--mantine-color-background-0': selectedTheme?.backgroundColor,
'--mantine-color-border-0': selectedTheme?.borderColor,
'--mantine-color-search-0': selectedTheme?.searchColor,
display: 'grid',
gridTemplateColumns: '1fr 1fr 1fr',
}}
@@ -105,6 +114,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
enabled={1}
scale={1}
linksActive={false}
selectedTheme={selectedTheme}
/>
<AppItem
url='https://google.com'
@@ -113,6 +123,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
enabled={1}
scale={1}
linksActive={false}
selectedTheme={selectedTheme}
/>
<AppItem
url='https://google.com'
@@ -121,23 +132,21 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
enabled={1}
scale={1}
linksActive={false}
selectedTheme={selectedTheme}
/>
</Group>
</Stack>
</Stack>
<Stack gap={0} w={'100%'}>
<Text
pl={'1.5rem'}
className={textClasses.sectionTitle}
classNames={textClasses}
mb={'-.5rem'}
mt={0}
style={{
textDecoration: 'underline',
fontSize: '1.25rem',
fontWeight: 200,
fontStyle: 'italic',
height: '10px',
textTransform: 'uppercase',
marginTop: '1.25rem',
marginBottom: '1.25rem',
color: selectedTheme?.primaryColor,
boxShadow: selectedTheme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
: undefined,
}}
>
Bookmarks