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-09-08 16:29:52 -05:00
parent fed970834b
commit 9a5af3f4ef
28 changed files with 197 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/settings/components/Theming/Themes/ThemeCard/ThemeCard.tsx
View File

@@ -7,6 +7,7 @@ import {
} from '@mantine/hooks';
import { DeleteItemModal } from 'components';
import { useCommonHooks } from 'hooks';
import { textClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import { MiniAppItem } from './components/MiniAppItem';
import { MiniGroupItem } from './components/MiniGroupItem';
@@ -57,15 +58,8 @@ export function ThemeCard({
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
<Text>Are you sure you want to delete this theme?</Text>
<Text
style={{
fontWeight: 'bold',
fontSize: '1.25rem',
padding: '.5rem',
margin: '.5rem',
borderRadius: '10px',
backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-background-0)',
}}
className={textClasses.deleteItem}
classNames={textClasses}
>{`"${cardTheme.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
</Stack>

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

@@ -18,7 +18,13 @@ import { useCommonHooks } from 'hooks';
import { useRef, useState } from 'react';
import { FaShuffle } from 'react-icons/fa6';
import { FiImage, FiSave, FiShuffle, FiX } from 'react-icons/fi';
import { scrollAreaClasses, textClasses, textInputClasses } from 'styles';
import {
colorSwatchClasses,
scrollAreaClasses,
textClasses,
textInputClasses,
toolTipClasses,
} from 'styles';
import { BackgroundProperties, type Theme } from 'types';
import { ThemeModalContent } from './ThemeModalContent';
@@ -53,7 +59,7 @@ export function ThemeEditor({
}) {
const [query, setQuery] = useState('');
const [hovered, setHovered] = useState(-1);
const { isMobile, theme, getObjectDiff } = useCommonHooks();
const { isMobile, theme, getObjectDiff, textShadowStyle } = useCommonHooks();
const viewportRef = useRef<HTMLDivElement>(null);
const [colorId, setColorId] = useState<string>('');
const [colorValue, setColorValue] = useState('#000000');
@@ -124,7 +130,9 @@ export function ThemeEditor({
);
});
const handleSwatchClick = () => {
const handleSwatchClick = (colorId: string, colorValue: string) => {
setColorId(colorId || '');
setColorValue(colorValue || '');
closeBackgroundPicker();
openPicker();
setDesignerTheme(selectedTheme);
@@ -140,108 +148,98 @@ export function ThemeEditor({
};
return (
<>
<Group p={'2rem'} w={'100%'} align='flex-start' justify='space-between'>
<Stack display={'flex'} pos={'relative'} w={isMobile ? '100%' : '70%'}>
<Group p={'2rem'} w={'100%'} justify='space-between'>
<Stack pos={'relative'} w={isMobile ? '100%' : '70%'}>
<ThemeModalContent selectedTheme={designerTheme} />
<Tooltip
label={'Change Primary Color'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
className={toolTipClasses.default}
classNames={toolTipClasses}
>
<ColorSwatch
onClick={() => {
setColorId('primaryColor');
setColorValue(selectedTheme.primaryColor);
handleSwatchClick();
handleSwatchClick('primaryColor', selectedTheme.primaryColor);
}}
color={selectedTheme.primaryColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
style={{ borderColor: selectedTheme.primaryColor }}
className={colorSwatchClasses.themeDesignerSwatch}
classNames={colorSwatchClasses}
top={'11.5rem'}
left={'8.5rem'}
style={{ cursor: 'pointer' }}
/>
</Tooltip>
<Tooltip
label={'Change Accent Color'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
className={toolTipClasses.default}
classNames={toolTipClasses}
>
<ColorSwatch
onClick={() => {
setColorId('accentColor');
setColorValue(selectedTheme.accentColor);
handleSwatchClick();
handleSwatchClick('accentColor', selectedTheme.accentColor);
}}
color={selectedTheme.accentColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
style={{ borderColor: selectedTheme.primaryColor }}
className={colorSwatchClasses.themeDesignerSwatch}
classNames={colorSwatchClasses}
bottom={'6rem'}
left={'11rem'}
style={{ cursor: 'pointer' }}
/>
</Tooltip>
<Tooltip
label={'Change Background Color'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
className={toolTipClasses.default}
classNames={toolTipClasses}
>
<ColorSwatch
onClick={() => {
setColorId('backgroundColor');
setColorValue(selectedTheme.backgroundColor);
handleSwatchClick();
handleSwatchClick('backgroundColor', selectedTheme.backgroundColor);
}}
color={selectedTheme.backgroundColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
style={{ borderColor: selectedTheme.primaryColor }}
className={colorSwatchClasses.themeDesignerSwatch}
classNames={colorSwatchClasses}
bottom={'4rem'}
right={'3.5rem'}
style={{ cursor: 'pointer' }}
/>
</Tooltip>
<Tooltip
label={'Change Border Color'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
className={toolTipClasses.default}
classNames={toolTipClasses}
>
<ColorSwatch
onClick={() => {
setColorId('borderColor');
setColorValue(selectedTheme.borderColor);
handleSwatchClick();
handleSwatchClick('borderColor', selectedTheme.borderColor);
}}
color={selectedTheme.borderColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
style={{ borderColor: selectedTheme.primaryColor }}
className={colorSwatchClasses.themeDesignerSwatch}
classNames={colorSwatchClasses}
top={'4.5rem'}
right={'15%'}
style={{ cursor: 'pointer' }}
/>
</Tooltip>
<Tooltip
label={'Change Search Color'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
className={toolTipClasses.default}
classNames={toolTipClasses}
>
<ColorSwatch
onClick={() => {
setColorId('searchColor');
setColorValue(selectedTheme.searchColor);
handleSwatchClick();
handleSwatchClick('searchColor', selectedTheme.searchColor);
}}
color={selectedTheme.searchColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
style={{ borderColor: selectedTheme.primaryColor }}
className={colorSwatchClasses.themeDesignerSwatch}
classNames={colorSwatchClasses}
top={'3.25rem'}
left={'6.5rem'}
style={{ cursor: 'pointer' }}
/>
</Tooltip>
<Tooltip
label={'Change Background'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
className={toolTipClasses.default}
classNames={toolTipClasses}
>
<ActionIcon
onClick={() => {
@@ -273,15 +271,13 @@ export function ThemeEditor({
}}
>
{pickerOpen && (
<Stack h={'100%'} align='center' justify='space-between'>
<Stack h={'100%'} align='center'>
<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%)'
: undefined,
textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
}}
>
Change{' '}
@@ -372,6 +368,17 @@ export function ThemeEditor({
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
styles={{
label: {
color: 'var(--mantine-color-primary-0)',
},
input: {
color: selectedTheme.primaryColor,
backgroundColor: selectedTheme.backgroundColor,
border: 'none',
borderBottom: '1px solid var(--mantine-color-primary-0)',
},
}}
placeholder='Search'
value={query.replace(/\.[^/.]+$/, '')}
rightSection={

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

@@ -1,9 +1,11 @@
import { Group, Select, Stack, Text } from '@mantine/core';
import { AppItem } from 'components';
import { useCommonHooks } from 'hooks';
import { selectClasses, textClasses } from 'styles';
import type { Theme } from 'types';
export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
const { textShadowStyle, largeTextShadowStyle } = useCommonHooks();
return (
<Stack
style={{
@@ -65,9 +67,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
m={0}
w={'100%'}
style={{
textShadow: selectedTheme.textShadowsEnabled
? '3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)'
: undefined,
textShadow: selectedTheme.textShadowsEnabled ? largeTextShadowStyle : undefined,
transition: 'all 0.2s ease',
}}
>
@@ -78,9 +78,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
className={textClasses.sectionTitle}
classNames={textClasses}
style={{
boxShadow: selectedTheme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
: undefined,
boxShadow: selectedTheme.textShadowsEnabled ? textShadowStyle : undefined,
transition: 'all 0.2s ease',
}}
>
@@ -148,9 +146,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
mb={'-.5rem'}
mt={0}
style={{
boxShadow: selectedTheme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
: undefined,
boxShadow: selectedTheme.textShadowsEnabled ? textShadowStyle : undefined,
transition: 'all 0.2s ease',
}}
>

6
src/pages/settings/components/Theming/Themes/Themes.tsx
View File

@@ -16,7 +16,7 @@ import { useEffect, useState } from 'react';
import { FaDice } from 'react-icons/fa';
import { FiChevronRight, FiEdit, FiMousePointer, FiStopCircle } from 'react-icons/fi';
import { useNavigate } from 'react-router-dom';
import { switchClasses, textClasses } from 'styles';
import { switchClasses, textClasses, toolTipClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import { BackgroundModal } from '../Backgrounds';
import { ThemeCard } from './ThemeCard';
@@ -325,9 +325,9 @@ export function Themes() {
)}
</Button>
<Tooltip
className={toolTipClasses.default}
classNames={toolTipClasses}
label='Shuffle is always on when a playlist is active.'
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
disabled={currentThemePlaylist === 'All'}
>
<Group>