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

Style bugfixes and updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-07-07 16:33:30 -05:00
parent dcea54ffaa
commit 9ef9cde336
32 changed files with 271 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -136,7 +136,7 @@ function ThemesSettings() {
}, [allThemes]);
return (
<Stack w={'100%'} align='center'>
<Stack>
<ThemeModal
opened={themeModalOpened}
handleClose={handleClose}
@@ -170,80 +170,81 @@ function ThemesSettings() {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Group
w={'85%'}
justify='center'
align='center'
pos={'relative'}
display={'flex'}
mt={isMobile ? '11.5rem' : '7rem'}
mb={isMobile ? '100%' : '6.5rem'}
>
<Overlay
display={currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'}
blur={5}
style={{
zIndex: 190,
borderRadius: '10px',
marginTop: '-1rem',
marginBottom: '-1.25rem',
boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
}}
pos={'absolute'}
/>
{allThemes.length > 0 ? (
allThemes.map((cardTheme: Theme) => (
<Group key={cardTheme.name} pos={'relative'}>
{cardTheme.name === currentTheme && (
<FiChevronRight
<Stack mt={'1rem'} align='center'>
<Group
w={'85%'}
justify='center'
pos={'relative'}
mb={isMobile ? '10rem' : '7.5rem'}
>
<Overlay
display={
currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'
}
blur={5}
style={{
zIndex: 190,
borderRadius: '10px',
marginTop: '-1rem',
marginBottom: '-1rem',
boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
}}
pos={'absolute'}
/>
{allThemes.length > 0 ? (
allThemes.map((cardTheme: Theme) => (
<Group key={cardTheme.name} pos={'relative'}>
{cardTheme.name === currentTheme && (
<FiChevronRight
style={{
position: 'absolute',
left: -14,
zIndex: 1,
fontSize: '2rem',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: cardTheme.borderColor,
color:
cardTheme.borderColor === cardTheme.primaryColor
? cardTheme.accentColor
: cardTheme.primaryColor,
}}
/>
)}
<Box
style={{
position: 'absolute',
left: -14,
zIndex: 1,
fontSize: '2rem',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: cardTheme.borderColor,
color:
cardTheme.borderColor === cardTheme.primaryColor
? cardTheme.accentColor
: cardTheme.primaryColor,
zIndex:
currentTheme === 'random' &&
(themePlaylists
.filter(
(t: ThemePlaylist) =>
t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
)[0]
?.themeList.includes(`${cardTheme.id}`) ||
cardTheme.name === theme.name)
? 195
: 0,
}}
/>
)}
<Box
style={{
zIndex:
currentTheme === 'random' &&
(themePlaylists
.filter(
(t: ThemePlaylist) =>
t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
)[0]
?.themeList.includes(`${cardTheme.id}`) ||
cardTheme.name === theme.name)
? 195
: 0,
}}
>
<ThemeCard
allThemes={allThemeData}
cardTheme={cardTheme}
handleOpen={handleOpen}
themePlaylists={themePlaylists}
/>
</Box>
>
<ThemeCard
allThemes={allThemeData}
cardTheme={cardTheme}
handleOpen={handleOpen}
themePlaylists={themePlaylists}
/>
</Box>
</Group>
))
) : (
<Group
w={'100%'}
style={{ zIndex: 1000, display: 'flex', justifyContent: 'center' }}
>
<NoItemsFound />
</Group>
))
) : (
<Group
w={'100%'}
style={{ zIndex: 1000, display: 'flex', justifyContent: 'center' }}
>
<NoItemsFound />
</Group>
)}
</Group>
)}
</Group>
</Stack>
<Group
style={{
backdropFilter: 'blur(5px) brightness(.75)',
@@ -271,7 +272,7 @@ function ThemesSettings() {
w={isMobile ? undefined : '100%'}
justify='center'
>
<Group align='center' justify='center'>
<Group>
<Text
style={{
color: 'var(--mantine-color-accent-0)',