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

Style updates/design changes

Browse Source
This commit is contained in:
Sean Edmunds
2025-07-18 14:57:15 -05:00
parent 5e5a077ec3
commit 9265bdd5d7
10 changed files with 255 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
package-lock.json generated
View File

@@ -28,7 +28,7 @@
"@types/node": "^24.0.14",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.6.0",
"@vitejs/plugin-react": "^4.7.0",
"@vitest/coverage-v8": "^3.2.4",
"@vitest/ui": "^3.2.4",
"typescript": "^5.8.3",
@@ -77,22 +77,22 @@
}
},
"node_modules/@babel/core": {
"version": "7.27.4",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.27.4.tgz",
"integrity": "sha512-bXYxrXFubeYdvB0NhD/NBB3Qi6aZeV20GOWVI47t2dkecCEoneR4NPVcb7abpXDEvejgrUfFtG6vG/zxAKmg+g==",
"version": "7.28.0",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.0.tgz",
"integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.27.3",
"@babel/generator": "^7.28.0",
"@babel/helper-compilation-targets": "^7.27.2",
"@babel/helper-module-transforms": "^7.27.3",
"@babel/helpers": "^7.27.4",
"@babel/parser": "^7.27.4",
"@babel/helpers": "^7.27.6",
"@babel/parser": "^7.28.0",
"@babel/template": "^7.27.2",
"@babel/traverse": "^7.27.4",
"@babel/types": "^7.27.3",
"@babel/traverse": "^7.28.0",
"@babel/types": "^7.28.0",
"convert-source-map": "^2.0.0",
"debug": "^4.1.0",
"gensync": "^1.0.0-beta.2",
@@ -118,16 +118,16 @@
}
},
"node_modules/@babel/generator": {
"version": "7.27.5",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.5.tgz",
"integrity": "sha512-ZGhA37l0e/g2s1Cnzdix0O3aLYm66eF8aufiVteOgnwxgnRP8GoyMj7VWsgWnQbVKXyge7hqrFh2K2TQM6t1Hw==",
"version": "7.28.0",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.0.tgz",
"integrity": "sha512-lJjzvrbEeWrhB4P3QBsH7tey117PjLZnDbLiQEKjQ/fNJTjuq4HSqgFA+UNSwZT8D7dxxbnuSBMsa1lrWzKlQg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/parser": "^7.27.5",
"@babel/types": "^7.27.3",
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.25",
"@babel/parser": "^7.28.0",
"@babel/types": "^7.28.0",
"@jridgewell/gen-mapping": "^0.3.12",
"@jridgewell/trace-mapping": "^0.3.28",
"jsesc": "^3.0.2"
},
"engines": {
@@ -161,6 +161,16 @@
"semver": "bin/semver.js"
}
},
"node_modules/@babel/helper-globals": {
"version": "7.28.0",
"resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
"integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-module-imports": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
@@ -248,13 +258,13 @@
}
},
"node_modules/@babel/parser": {
"version": "7.27.5",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz",
"integrity": "sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==",
"version": "7.28.0",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.0.tgz",
"integrity": "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/types": "^7.27.3"
"@babel/types": "^7.28.0"
},
"bin": {
"parser": "bin/babel-parser.js"
@@ -323,28 +333,28 @@
}
},
"node_modules/@babel/traverse": {
"version": "7.27.4",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.4.tgz",
"integrity": "sha512-oNcu2QbHqts9BtOWJosOVJapWjBDSxGCpFvikNR5TGDYDQf3JwpIoMzIKrvfoti93cLfPJEG4tH9SPVeyCGgdA==",
"version": "7.28.0",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.0.tgz",
"integrity": "sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.27.3",
"@babel/parser": "^7.27.4",
"@babel/generator": "^7.28.0",
"@babel/helper-globals": "^7.28.0",
"@babel/parser": "^7.28.0",
"@babel/template": "^7.27.2",
"@babel/types": "^7.27.3",
"debug": "^4.3.1",
"globals": "^11.1.0"
"@babel/types": "^7.28.0",
"debug": "^4.3.1"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/types": {
"version": "7.27.6",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.6.tgz",
"integrity": "sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q==",
"version": "7.28.1",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.1.tgz",
"integrity": "sha512-x0LvFTekgSX+83TI28Y9wYPUfzrnl2aT5+5QLnO6v7mSJYtEEevuDRN0F0uSHRk1G1IWZC43o00Y0xDDrpBGPQ==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -883,17 +893,14 @@
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
"version": "0.3.12",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
"integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/set-array": "^1.2.1",
"@jridgewell/sourcemap-codec": "^1.4.10",
"@jridgewell/sourcemap-codec": "^1.5.0",
"@jridgewell/trace-mapping": "^0.3.24"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/resolve-uri": {
@@ -905,15 +912,6 @@
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/set-array": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
"dev": true,
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
@@ -921,10 +919,11 @@
"dev": true
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.25",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
"version": "0.3.29",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.29.tgz",
"integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
@@ -1187,9 +1186,9 @@
}
},
"node_modules/@rolldown/pluginutils": {
"version": "1.0.0-beta.19",
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.19.tgz",
"integrity": "sha512-3FL3mnMbPu0muGOCaKAhhFEYmqv9eTfPSJRJmANrCwtgK8VuxpsZDGK+m0LYAGoyO8+0j5uRe4PeyPDK1yA/hA==",
"version": "1.0.0-beta.27",
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
"integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
"dev": true,
"license": "MIT"
},
@@ -1883,16 +1882,16 @@
"license": "MIT"
},
"node_modules/@vitejs/plugin-react": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.6.0.tgz",
"integrity": "sha512-5Kgff+m8e2PB+9j51eGHEpn5kUzRKH2Ry0qGoe8ItJg7pqnkPrYPkDQZGgGmTa0EGarHrkjLvOdU3b1fzI8otQ==",
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
"integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/core": "^7.27.4",
"@babel/core": "^7.28.0",
"@babel/plugin-transform-react-jsx-self": "^7.27.1",
"@babel/plugin-transform-react-jsx-source": "^7.27.1",
"@rolldown/pluginutils": "1.0.0-beta.19",
"@rolldown/pluginutils": "1.0.0-beta.27",
"@types/babel__core": "^7.20.5",
"react-refresh": "^0.17.0"
},
@@ -1900,7 +1899,7 @@
"node": "^14.18.0 || >=16.0.0"
},
"peerDependencies": {
"vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0"
"vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
}
},
"node_modules/@vitest/coverage-v8": {
@@ -2921,16 +2920,6 @@
"node": ">=6"
}
},
"node_modules/globals": {
"version": "11.12.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=4"
}
},
"node_modules/globrex": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",

2
package.json
View File

@@ -30,7 +30,7 @@
"@types/node": "^24.0.14",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.6.0",
"@vitejs/plugin-react": "^4.7.0",
"@vitest/coverage-v8": "^3.2.4",
"@vitest/ui": "^3.2.4",
"typescript": "^5.8.3",

6
src/pages/settings/components/Applications/Applications.tsx
View File

@@ -355,11 +355,7 @@ const ApplicationSettings = () => {
offset={isMobile ? -100 : 0}
>
<Popover.Target>
<Box
onClick={(e) => {
e.stopPropagation();
}}
>
<Box>
<AppItem
key={application.name}
name={application.name}

33
src/pages/settings/components/Theming/Themes/MiniAppItem.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { Box, Group } from '@mantine/core';
import { boxClasses } from 'styles';
import type { Theme } from 'types';
export function MiniAppItem({ cardTheme }: { cardTheme: Theme }) {
return (
<Box
className={boxClasses.appItemExampleText}
style={{
color: cardTheme.primaryColor,
}}
>
<Group gap={4}>
<Box
style={{
height: '4px',
width: '10px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
}}
/>
<Box
style={{
height: '4px',
width: '20px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
}}
/>
</Group>
</Box>
);
}

46
src/pages/settings/components/Theming/Themes/MiniGroupItem.tsx Normal file
View File

@@ -0,0 +1,46 @@
import { Box, Group, Stack } from '@mantine/core';
import { boxClasses } from 'styles';
import type { Theme } from 'types';
export function MiniGroupItem({ cardTheme }: { cardTheme: Theme }) {
return (
<Box className={boxClasses.bookmarkItemExampleText}>
<Group w={'100%'} justify='space-between'>
<Stack gap={4} align='start'>
<Box
style={{
height: '2px',
width: '25px',
backgroundColor: cardTheme.accentColor,
borderRadius: '4px',
}}
/>
<Box
style={{
height: '2px',
width: '33px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
}}
/>
<Box
style={{
height: '2px',
width: '38px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
}}
/>
<Box
style={{
height: '2px',
width: '28px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
}}
/>
</Stack>
</Group>
</Box>
);
}

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

@@ -7,9 +7,8 @@ import {
} from '@mantine/hooks';
import { DeleteItemModal } from 'components';
import { useCommonHooks } from 'hooks';
import { boxClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import { ThemeManagementPill } from '.';
import { MiniAppItem, MiniGroupItem, ThemeManagementPill } from '.';
export function ThemeCard({
cardTheme,
@@ -28,6 +27,8 @@ export function ThemeCard({
const { currentTheme, setCurrentTheme, setCurrentThemePlaylist, handleDelete } =
useCommonHooks();
const [hoverPreview, setHoverPreview] = useDebouncedState(false, 1000);
const [transition, setTransition] = useDebouncedState(false, 200);
return (
<Group
gap={0}
@@ -99,7 +100,10 @@ export function ThemeCard({
themePlaylists={themePlaylists}
openModal={openModal}
hovered={hovered}
hoverPreview={hoverPreview}
setHoverPreview={setHoverPreview}
transition={transition}
setTransition={setTransition}
/>
</Group>
<Button
@@ -123,20 +127,30 @@ export function ThemeCard({
backgroundPosition: 'center',
border: `solid ${cardTheme.borderColor}`,
filter:
cardTheme.randomEnabled === 0 && !hoverPreview ? 'saturate(0)' : undefined,
transition: 'all .2s ease',
(cardTheme.randomEnabled === 0 && !hoverPreview) || transition
? 'saturate(0)'
: undefined,
transition: 'all .25s ease',
}}
onClick={() => {
setCurrentTheme(cardTheme.name);
setCurrentThemePlaylist('All');
}}
>
{hovered && currentTheme !== 'random' && <Overlay opacity={0.5} zIndex={1} />}
{hovered && currentTheme !== 'random' && (
<Overlay
style={{
opacity: !hoverPreview || transition ? 0.5 : 0,
transition: 'all .25s ease',
}}
zIndex={1}
/>
)}
<Group w={'100%'} gap={0} display={'flex'} align='center' justify='center'>
<Stack align='center'>
<Stack align='center' gap={12}>
<Box
style={{
height: '10px',
height: '8px',
width: '100px',
backgroundColor: cardTheme.searchColor,
borderRadius: '4px',
@@ -161,41 +175,37 @@ export function ThemeCard({
}}
/>
</Group>
<Group w={'100%'}>
<Group w={'100%'} mb={-4}>
<Box
style={{
height: '.25rem',
height: '2px',
width: '40px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
}}
/>
</Group>
<Group w={'100%'}>
<Group w={'100%'} gap={10} justify='space-between'>
<MiniAppItem cardTheme={cardTheme} />
<MiniAppItem cardTheme={cardTheme} />
<MiniAppItem cardTheme={cardTheme} />
<MiniAppItem cardTheme={cardTheme} />
</Group>
<Group w={'100%'} mb={-4}>
<Box
className={boxClasses.appItemExampleText}
style={{
color: cardTheme.primaryColor,
height: '2px',
width: '32px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
}}
>
lorem ipsum
</Box>
<Box
className={boxClasses.appItemExampleText}
style={{
color: cardTheme.primaryColor,
}}
>
lorem ipsum
</Box>
<Box
className={boxClasses.appItemExampleText}
style={{
color: cardTheme.primaryColor,
}}
>
lorem ipsum
</Box>
/>
</Group>
<Group w={'100%'} gap={10} justify='space-between'>
<MiniGroupItem cardTheme={cardTheme} />
<MiniGroupItem cardTheme={cardTheme} />
<MiniGroupItem cardTheme={cardTheme} />
<MiniGroupItem cardTheme={cardTheme} />
</Group>
</Stack>
</Group>

40
src/pages/settings/components/Theming/Themes/ThemeManagementPill.tsx
View File

@@ -14,7 +14,10 @@ export function ThemeManagementPill({
themePlaylists,
openModal,
hovered,
hoverPreview,
setHoverPreview,
transition,
setTransition,
}: {
allThemes: Theme[];
cardTheme: Theme;
@@ -22,7 +25,10 @@ export function ThemeManagementPill({
themePlaylists: ThemePlaylist[];
openModal: () => void;
hovered: boolean;
hoverPreview: boolean;
setHoverPreview: (hoverPreview: boolean) => void;
transition: boolean;
setTransition: (transition: boolean) => void;
}) {
const { currentTheme, currentThemePlaylist, handleThemeChange, theme } =
useCommonHooks();
@@ -161,7 +167,7 @@ export function ThemeManagementPill({
)}
</Stack>
<Stack
gap={0}
gap={4}
style={{
zIndex: 2,
padding: '.25rem',
@@ -179,10 +185,20 @@ export function ThemeManagementPill({
justify='center'
>
<ActionIcon
className={actionIconClasses.themeEditButton}
className={
cardTheme.randomEnabled
? actionIconClasses.themeEditButton
: actionIconClasses.themeEditButtonAnimated
}
classNames={actionIconClasses}
onMouseEnter={() => setHoverPreview(true)}
onMouseLeave={() => setHoverPreview(false)}
onMouseEnter={() => {
!cardTheme.randomEnabled && setHoverPreview(true);
setTransition(false);
}}
onMouseLeave={() => {
setHoverPreview(false);
!cardTheme.randomEnabled && setTransition(true);
}}
onClick={() => {
mutateAsync({
method: 'PATCH',
@@ -190,18 +206,26 @@ export function ThemeManagementPill({
body: { ...cardTheme, randomEnabled: !cardTheme.randomEnabled },
});
}}
mb={'.125rem'}
>
<FiPower
color={cardTheme.randomEnabled ? 'DarkOliveGreen' : '#33333388'}
style={{ strokeWidth: 4, filter: 'brightness(1.5)' }}
color={
cardTheme.randomEnabled
? 'DarkOliveGreen'
: !hoverPreview || transition
? '#33333388'
: 'DarkOliveGreen'
}
style={{
strokeWidth: 4,
filter: 'brightness(1.5)',
transition: 'all 0.2s ease',
}}
/>
</ActionIcon>
<ActionIcon
className={actionIconClasses.themeEditButton}
classNames={actionIconClasses}
onClick={() => handleOpen(cardTheme)}
mb={'.125rem'}
>
<FaPencil
style={{ padding: '.25rem', filter: 'brightness(1.5)' }}

2
src/pages/settings/components/Theming/Themes/index.ts
View File

@@ -1,3 +1,5 @@
export { MiniAppItem } from './MiniAppItem';
export { MiniGroupItem } from './MiniGroupItem';
export { ThemeCard } from './ThemeCard';
export { ThemeExampleApp } from './ThemeExampleApp';
export { ThemeManagementPill } from './ThemeManagementPill';

32
src/styles/ActionIcon.module.css
View File

@@ -29,8 +29,40 @@
&:hover {
&.root {
background-color: white;
}
}
}
.themeEditButtonAnimated {
&.root {
background-color: transparent;
border-radius: 100%;
.icon {
font-size: 1.5rem;
}
.loader {
display: none;
}
}
&:hover {
&.root {
background-color: white;
stroke-dasharray: 50 50;
stroke-dashoffset: 0;
animation: grow 1s ease-in;
}
}
}
@keyframes grow {
0% {
background-color: transparent;
}
100% {
stroke-dashoffset: -100;
background-color: white;
}
}
.menuActions {

10
src/styles/Box.module.css
View File

@@ -45,10 +45,16 @@
.appItemExampleText {
height: 10px;
width: 40px;
border-radius: 4px;
width: 45px;
border-radius: 2px;
backdrop-filter: blur(5px) brightness(1.5);
font-size: .375rem;
justify-content: center;
align-content: center;
padding-left: 2px;
}
.bookmarkItemExampleText {
border-radius: 4px;
font-size: .375rem;
}