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

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

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

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

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

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

@@ -29,8 +29,40 @@
&:hover { &:hover {
&.root { &.root {
background-color: white; 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 { .menuActions {

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

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