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

18
src/components/Applications/AppItem.tsx
View File

@@ -7,6 +7,7 @@ import { FiAlertCircle } from 'react-icons/fi';
import * as si from 'react-icons/si';
import * as vsc from 'react-icons/vsc';
import { actionIconClasses, boxClasses, textClasses } from 'styles';
import type { Theme } from 'types';
export function AppItem({
url,
@@ -15,6 +16,7 @@ export function AppItem({
enabled,
scale,
linksActive,
selectedTheme,
}: {
url: string;
icon: string;
@@ -22,6 +24,7 @@ export function AppItem({
enabled: number | null;
scale: number;
linksActive: boolean;
selectedTheme?: Theme;
}) {
const { ref, width, height } = useElementSize();
const allIcons: any = { ...fa6, ...vsc, ...si };
@@ -32,6 +35,17 @@ export function AppItem({
const validUrl =
url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
const filter = () => {
if (selectedTheme && selectedTheme.appShadowsEnabled === 1) {
return 'drop-shadow(2px 2px color-mix(in srgb, var(--mantine-color-accent-0), transparent 30%))';
}
if (!selectedTheme && theme.appShadowsEnabled === 1) {
return 'drop-shadow(2px 2px color-mix(in srgb, var(--mantine-color-accent-0), transparent 30%))';
}
return 'none';
};
return (
<Box
component='a'
@@ -99,9 +113,7 @@ export function AppItem({
style={{
height: scale * 32,
width: scale * 32,
filter:
theme.appShadowsEnabled === 1 &&
'drop-shadow(2px 2px color-mix(in srgb, var(--mantine-color-accent-0), transparent 30%))',
filter: filter(),
}}
/>
)}

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