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

Theme changes

Browse Source
This commit is contained in:
Sean Edmunds
2025-04-28 15:59:56 -05:00
parent 19b793fbf9
commit 416c8611ec
53 changed files with 392 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/pages/homepage/components/SettingsButton/SettingsButton.tsx
View File

@@ -114,7 +114,6 @@ function SettingsButton() {
<Menu
classNames={menuClasses}
width={isMobile ? '98%' : 'auto'}
withinPortal={false}
withArrow
shadow='md'
position='top'
@@ -132,7 +131,7 @@ function SettingsButton() {
theme.backgroundImage.toLowerCase() !== 'none' &&
theme.backgroundImage !== undefined
? 'transparent'
: theme.backgroundColor,
: 'var(--mantine-color-background-0)',
}}
>
<Group p={'1rem'} gap={12}>
@@ -183,7 +182,10 @@ function SettingsButton() {
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{ withinPortal: false }}
comboboxProps={{
withinPortal: false,
width: 'fit-content',
}}
/>
</Stack>
<Stack
@@ -195,19 +197,23 @@ function SettingsButton() {
>
<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'>
<Tooltip label='Shuffle Themes' color={theme.primaryColor} withArrow>
<Tooltip
label='Shuffle Themes'
color={'var(--mantine-color-primary-0)'}
withArrow
>
<ActionIcon
className={actionIconClasses.menuActions}
classNames={actionIconClasses}
style={{
backgroundColor:
currentTheme === 'random'
? `${theme?.searchColor === theme.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
? `${theme?.searchColor === theme?.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
: 'transparent',
color:
currentTheme === 'random'
? theme.accentColor
: theme.primaryColor,
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-primary-0)',
}}
onClick={() => {
setCurrentTheme(
@@ -219,13 +225,17 @@ function SettingsButton() {
<FiShuffle />
</ActionIcon>
</Tooltip>
<Tooltip label='Random Theme' color={theme.primaryColor} withArrow>
<Tooltip
label='Random Theme'
color={'var(--mantine-color-primary-0)'}
withArrow
>
<ActionIcon
className={actionIconClasses.menuActions}
classNames={actionIconClasses}
style={{
backgroundColor: 'transparent',
color: theme.primaryColor,
color: 'var(--mantine-color-primary-0)',
}}
onClick={() => {
setCurrentThemePlaylist('All');
@@ -266,7 +276,10 @@ function SettingsButton() {
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{ withinPortal: false }}
comboboxProps={{
withinPortal: false,
width: 'fit-content',
}}
onChange={(_value, option: ComboboxItem) => {
setCurrentThemePlaylist(option.value);
if (option.value !== 'Time of Day') {
@@ -309,8 +322,8 @@ function SettingsButton() {
position: 'absolute',
left: '-12px',
top: '-8px',
backgroundColor: theme.primaryColor,
color: theme.backgroundColor,
backgroundColor: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
}}
>
Apps
@@ -349,7 +362,9 @@ function SettingsButton() {
setAppFilter(data);
}}
classNames={multiSelectClasses}
comboboxProps={{ withinPortal: false }}
comboboxProps={{
withinPortal: false,
}}
/>
<Select
label={'Sorting'}
@@ -362,7 +377,9 @@ function SettingsButton() {
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{ withinPortal: false }}
comboboxProps={{
withinPortal: false,
}}
onChange={(_value, option: ComboboxItem) => {
setAppSort(option.value);
}}
@@ -388,8 +405,8 @@ function SettingsButton() {
position: 'absolute',
left: '-12px',
top: '-8px',
backgroundColor: theme.primaryColor,
color: theme.backgroundColor,
backgroundColor: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
}}
>
Bookmarks
@@ -428,7 +445,9 @@ function SettingsButton() {
setBookmarkFilter(data);
}}
classNames={multiSelectClasses}
comboboxProps={{ withinPortal: false }}
comboboxProps={{
withinPortal: false,
}}
/>
<Select
label={'Sorting'}
@@ -441,7 +460,9 @@ function SettingsButton() {
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{ withinPortal: false }}
comboboxProps={{
withinPortal: false,
}}
onChange={(_value, option: ComboboxItem) => {
setBookmarkSort(option.value);
}}