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

16
package-lock.json generated
View File

@@ -26,8 +26,8 @@
},
"devDependencies": {
"@types/node": "^24.1.0",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"@types/react": "^19.1.9",
"@types/react-dom": "^19.1.7",
"@vitejs/plugin-react": "^4.7.0",
"@vitest/coverage-v8": "^3.2.4",
"@vitest/ui": "^3.2.4",
@@ -1856,9 +1856,9 @@
}
},
"node_modules/@types/react": {
"version": "19.1.8",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
"integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
"version": "19.1.9",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz",
"integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==",
"devOptional": true,
"license": "MIT",
"dependencies": {
@@ -1866,9 +1866,9 @@
}
},
"node_modules/@types/react-dom": {
"version": "19.1.6",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
"integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
"version": "19.1.7",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.7.tgz",
"integrity": "sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==",
"dev": true,
"license": "MIT",
"peerDependencies": {

4
package.json
View File

@@ -28,8 +28,8 @@
},
"devDependencies": {
"@types/node": "^24.1.0",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"@types/react": "^19.1.9",
"@types/react-dom": "^19.1.7",
"@vitejs/plugin-react": "^4.7.0",
"@vitest/coverage-v8": "^3.2.4",
"@vitest/ui": "^3.2.4",

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