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-06-20 15:24:27 -05:00
parent b122b1af18
commit 25c0ae223e
5 changed files with 61 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/hooks/useCommonHooks.ts
View File

@@ -11,7 +11,7 @@ export function useCommonHooks() {
const [theme, setTheme] = useAtom(appTheme); const [theme, setTheme] = useAtom(appTheme);
const [themeName, setThemeName] = useLocalStorage<string>({ const [themeName, setThemeName] = useLocalStorage<string>({
key: 'theme', key: 'theme',
defaultValue: 'blackboard', defaultValue: 'random',
}); });
const [appFilter, setAppFilter] = useLocalStorage<string[]>({ const [appFilter, setAppFilter] = useLocalStorage<string[]>({
key: 'appFilter', key: 'appFilter',
@@ -35,11 +35,11 @@ export function useCommonHooks() {
}); });
const [bookmarkDensity, setBookmarkDensity] = useLocalStorage<number>({ const [bookmarkDensity, setBookmarkDensity] = useLocalStorage<number>({
key: 'bookmarkDensity', key: 'bookmarkDensity',
defaultValue: 5, defaultValue: 6,
}); });
const [currentTheme, setCurrentTheme] = useLocalStorage<string>({ const [currentTheme, setCurrentTheme] = useLocalStorage<string>({
key: 'theme', key: 'theme',
defaultValue: 'blackboard', defaultValue: 'random',
}); });
const [currentThemePlaylist, setCurrentThemePlaylist] = useLocalStorage<string>({ const [currentThemePlaylist, setCurrentThemePlaylist] = useLocalStorage<string>({
key: 'themePlaylist', key: 'themePlaylist',

102
src/pages/settings/components/Theming/ThemeModal.tsx
View File

@@ -14,7 +14,7 @@ import {
import { useCommonHooks } from 'hooks'; import { useCommonHooks } from 'hooks';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { FiSave, FiX } from 'react-icons/fi'; import { FiSave, FiX } from 'react-icons/fi';
import { modalClasses, textClasses, textInputClasses } from 'styles'; import { modalClasses, scrollAreaClasses, textClasses, textInputClasses } from 'styles';
import type { Theme } from 'types'; import type { Theme } from 'types';
import ThemeModalContent from './ThemeModalContent'; import ThemeModalContent from './ThemeModalContent';
@@ -56,63 +56,65 @@ function ThemeModal({
); );
const re = /(?:\.([^.]+))?$/; const re = /(?:\.([^.]+))?$/;
const items = filtered.map((item: string, index: number) => ( const items = filtered.map((item: string, index: number) => {
<UnstyledButton return (
data-list-item <UnstyledButton
key={item} data-list-item
style={{ key={item}
width: '100%', style={{
height: '75px', width: '100%',
background: height: '75px',
item !== 'none' background:
? index === hovered item !== 'none' && item !== 'None'
? `linear-gradient(${selectedTheme.backgroundColor}88, ${selectedTheme.backgroundColor}88), no-repeat center url(../../api/backgroundImages/${item})` ? index === hovered
: `no-repeat center url(../../api/backgroundImages/${item})` ? `linear-gradient(${selectedTheme.backgroundColor}88, ${selectedTheme.backgroundColor}88), no-repeat center url(../../api/backgroundImages/${item})`
: undefined, : `no-repeat center url(../../api/backgroundImages/${item})`
backgroundSize: item !== 'none' ? 'cover' : undefined, : 'repeating-linear-gradient(45deg, #33333366, #33333366 10px, #88888866 10px, #88888866 20px)',
backgroundColor: item === 'none' ? '#00000088' : undefined, backgroundSize: item !== 'none' ? 'cover' : undefined,
paddingLeft: '.5rem', backgroundColor: item === 'none' ? '#00000088' : undefined,
alignItems: 'center', paddingLeft: '.5rem',
}} alignItems: 'center',
onClick={() => }}
setSelectedTheme({ onClick={() =>
...selectedTheme, setSelectedTheme({
backgroundImage: item, ...selectedTheme,
}) backgroundImage: item,
} })
> }
<Group h={'100%'} w={'100%'} justify='space-between'> >
<Text <Group h={'100%'} w={'100%'} justify='space-between'>
style={{
width: 'min-content',
backdropFilter: 'blur(10px) brightness(.25)',
padding: '.5rem',
borderBottomRightRadius: 4,
marginTop: '-2.15rem',
marginLeft: '-.5rem',
color: 'white',
}}
>
{item.replace(/\.[^/.]+$/, '')}
</Text>
{item !== 'None' && (
<Text <Text
style={{ style={{
width: 'min-content', width: 'min-content',
backdropFilter: 'blur(10px) brightness(.25)', backdropFilter: 'blur(10px) brightness(.25)',
padding: '.5rem', padding: '.5rem',
marginTop: '2rem', borderBottomRightRadius: 4,
marginBottom: -1, marginTop: '-2.15rem',
borderTopLeftRadius: 4, marginLeft: '-.5rem',
color: 'white', color: 'white',
}} }}
> >
{re.exec(item.toUpperCase())?.[1]} {item.replace(/\.[^/.]+$/, '')}
</Text> </Text>
)} {item !== 'None' && (
</Group> <Text
</UnstyledButton> style={{
)); width: 'min-content',
backdropFilter: 'blur(10px) brightness(.25)',
padding: '.5rem',
marginTop: '2rem',
marginBottom: -1,
borderTopLeftRadius: 4,
color: 'white',
}}
>
{re.exec(item.toUpperCase())?.[1]}
</Text>
)}
</Group>
</UnstyledButton>
);
});
useEffect(() => { useEffect(() => {
if (selectedTheme) { if (selectedTheme) {
@@ -393,6 +395,8 @@ function ThemeModal({
</Group> </Group>
<ScrollArea.Autosize <ScrollArea.Autosize
viewportRef={viewportRef} viewportRef={viewportRef}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
style={{ style={{
height: 150, height: 150,
width: '90%', width: '90%',

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

@@ -77,7 +77,7 @@ function ThemePlaylistCard({
color: color:
theme.borderColor === theme.primaryColor theme.borderColor === theme.primaryColor
? 'var(--mantine-color-accent-0)' ? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-background-0)', : 'var(--mantine-color-primary-0)',
zIndex: 3, zIndex: 3,
}} }}
> >
@@ -96,7 +96,7 @@ function ThemePlaylistCard({
color: color:
theme.borderColor === theme.primaryColor theme.borderColor === theme.primaryColor
? 'var(--mantine-color-accent-0)' ? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-background-0)', : 'var(--mantine-color-primary-0)',
zIndex: 3, zIndex: 3,
}} }}
onClick={() => { onClick={() => {
@@ -119,7 +119,7 @@ function ThemePlaylistCard({
color: color:
theme.borderColor === theme.primaryColor theme.borderColor === theme.primaryColor
? 'var(--mantine-color-accent-0)' ? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-background-0)', : 'var(--mantine-color-red-6)',
zIndex: 3, zIndex: 3,
}} }}
onClick={() => { onClick={() => {

2
src/pages/settings/components/Theming/ThemePlaylists.tsx
View File

@@ -128,7 +128,7 @@ function ThemePlaylists() {
color: color:
theme.borderColor === theme.primaryColor theme.borderColor === theme.primaryColor
? 'var(--mantine-color-accent-0)' ? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-background-0)', : 'var(--mantine-color-primary-0)',
}} }}
/> />
)} )}

2
src/styles/Button.module.css
View File

@@ -52,7 +52,7 @@
padding: .5rem; padding: .5rem;
margin: 0; margin: 0;
background-color: var(--mantine-color-search-0); background-color: var(--mantine-color-search-0);
color: var(--mantine-color-accent-0); color: var(--mantine-color-primary-0);
} }
&:hover { &:hover {
background-color: var(--mantine-color-primary-0) !important; background-color: var(--mantine-color-primary-0) !important;