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

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

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

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

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

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

@@ -128,7 +128,7 @@ function ThemePlaylists() {
color:
theme.borderColor === theme.primaryColor
? '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;
margin: 0;
background-color: var(--mantine-color-search-0);
color: var(--mantine-color-accent-0);
color: var(--mantine-color-primary-0);
}
&:hover {
background-color: var(--mantine-color-primary-0) !important;