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

8
src/pages/settings/Settings.tsx
View File

@@ -80,7 +80,6 @@ export function Settings() {
</Tabs.List>
<Tabs.Panel value='personalization'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>
@@ -89,7 +88,6 @@ export function Settings() {
</Tabs.Panel>
<Tabs.Panel value='messages'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>
@@ -98,7 +96,6 @@ export function Settings() {
</Tabs.Panel>
<Tabs.Panel value='applications'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>
@@ -107,7 +104,6 @@ export function Settings() {
</Tabs.Panel>
<Tabs.Panel value='bookmarks'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>
@@ -116,7 +112,6 @@ export function Settings() {
</Tabs.Panel>
<Tabs.Panel value='themes'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>
@@ -125,7 +120,6 @@ export function Settings() {
</Tabs.Panel>
<Tabs.Panel value='themePlaylists'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>
@@ -134,7 +128,6 @@ export function Settings() {
</Tabs.Panel>
<Tabs.Panel value='providers'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>
@@ -143,7 +136,6 @@ export function Settings() {
</Tabs.Panel>
<Tabs.Panel value='wolClients'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>

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

@@ -118,7 +118,35 @@ const ApplicationSettings = () => {
}
}, [applicationList]);
return (
<Stack w={'100%'}>
<Stack>
<SettingsHeader
setDragging={applications.length > 0 ? setDragging : undefined}
openModal={openModal}
title={'Applications'}
tooltip={{
title:
'Applications are the app buttons that will be displayed on the homepage.',
highlightList: [
'Applications',
'applicationData',
'application',
'app',
'apps',
'name',
'base url',
'url',
'icon',
'filter',
],
description:
'Applications contain a name, base url, url, icon and filter. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.',
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Applications...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<AddItemModal
modalOpened={modalOpened}
handleClose={handleClose}
@@ -238,41 +266,8 @@ const ApplicationSettings = () => {
</form>
}
/>
<SettingsHeader
setDragging={applications.length > 0 ? setDragging : undefined}
openModal={openModal}
title={'Applications'}
tooltip={{
title:
'Applications are the app buttons that will be displayed on the homepage.',
highlightList: [
'Applications',
'applicationData',
'application',
'app',
'apps',
'name',
'base url',
'url',
'icon',
'filter',
],
description:
'Applications contain a name, base url, url, icon and filter. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.',
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Applications...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<DragDropContext onDragEnd={onDragEnd}>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
{applications.length > 0 ? (
<Droppable droppableId={'groupList'}>
{(provided) => (
@@ -301,12 +296,9 @@ const ApplicationSettings = () => {
style={{
color: 'var(--mantine-color-primary-0)',
zIndex: 1,
alignContent: 'center',
fontSize: '1.5em',
position: 'absolute',
right: 0,
paddingRight: '1rem',
height: '100%',
right: 4,
bottom: 0,
}}
>
#{index + 1}

102
src/pages/settings/components/Applications/DebouncedApplication.tsx
View File

@@ -14,7 +14,7 @@ import {
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiTrash } from 'react-icons/fi';
import { FiPower, FiTrash } from 'react-icons/fi';
import { cardClasses, selectClasses, switchClasses, textInputClasses } from 'styles';
import type { Application } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal';
@@ -79,48 +79,70 @@ function DebouncedApplication({
</Stack>
}
/>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'}
<Group
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
width: 'fit-content',
backgroundColor:
'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
padding: '.5rem',
borderRadius: '10px',
color: 'var(--mantine-color-search-0)',
backdropFilter: 'brightness(0.5)',
}}
>
<ActionIcon
pos={'absolute'}
top={'1rem'}
right={'1rem'}
color='red'
onClick={() => {
setIsOpen(true);
openModal();
}}
>
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Enabled'}
>
<Switch
className={switchClasses.default}
classNames={switchClasses}
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Enabled'}
labelPosition='left'
pos={'absolute'}
left={'1rem'}
defaultChecked={app.enabled === 1}
defaultValue={app.enabled}
onChange={(event) => {
setUpdate({
...app,
enabled: event.target.checked ? 1 : 0,
});
refProp='rootRef'
styles={{
tooltip: { marginTop: '-.5rem' },
arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
}}
/>
</Tooltip>
withArrow
>
<Switch
className={switchClasses.enable}
classNames={switchClasses}
defaultChecked={app.enabled === 1}
defaultValue={app.enabled}
thumbIcon={
<FiPower
style={{
color: app.enabled === 1 ? 'var(--mantine-color-accent-0)' : 'red',
}}
/>
}
onChange={(event) => {
setUpdate({
...app,
enabled: event.target.checked ? 1 : 0,
});
}}
/>
</Tooltip>
|
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'}
>
<ActionIcon
color='red'
onClick={() => {
setIsOpen(true);
openModal();
}}
>
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
</Group>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<TextInput
label={'Name'}

18
src/pages/settings/components/Bookmarks/Bookmarks.tsx
View File

@@ -203,12 +203,7 @@ const BookmarkSettings = () => {
/>
{dragging ? (
<DragDropContext onDragEnd={onDragEnd}>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
<Droppable droppableId={'groupList'}>
{(provided) => (
<Stack
@@ -284,12 +279,7 @@ const BookmarkSettings = () => {
</Stack>
</DragDropContext>
) : (
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
<Group w={isMobile ? undefined : '80%'} align='start' justify='center'>
{groups.length > 0 ? (
groups?.map((group: BookmarkGroup) => (
@@ -303,9 +293,7 @@ const BookmarkSettings = () => {
/>
))
) : (
<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
<NoItemsFound />
</Group>
<NoItemsFound />
)}
</Group>
</Stack>

15
src/pages/settings/components/Messages/Messages.tsx
View File

@@ -80,7 +80,7 @@ const MessageSettings = () => {
handleClose={handleClose}
title={'Add a new message'}
body={
<Stack gap={0} w={'100%'} align='center'>
<Stack gap={0} align='center'>
<TextInput
label='Message text'
autoFocus={!isMobile}
@@ -120,12 +120,7 @@ const MessageSettings = () => {
</Stack>
}
/>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Stack mb={isMobile ? '6rem' : undefined} align='center'>
<Grid w={'75%'}>
{messages.length > 0 ? (
messages?.map((message: Message) => (
@@ -138,11 +133,7 @@ const MessageSettings = () => {
</GridCol>
))
) : (
<GridCol
w={'100%'}
span={12}
style={{ display: 'flex', justifyContent: 'center' }}
>
<GridCol style={{ display: 'flex', justifyContent: 'center' }}>
<NoItemsFound />
</GridCol>
)}

7
src/pages/settings/components/Personalization/Personalization.tsx
View File

@@ -66,11 +66,8 @@ const PersonalizationSettings = () => {
isLoading={false}
setIsLoading={() => {}}
/>
<Stack
align='center'
style={{ marginTop: '6rem', marginBottom: '1rem', width: '100%' }}
>
<Grid w={'75%'} pos={'relative'}>
<Stack align='center'>
<Grid w={'75%'}>
{personalIsFetching && (
<Overlay
style={{

7
src/pages/settings/components/Search/SearchProviders.tsx
View File

@@ -152,12 +152,7 @@ const SearchProviderSettings = () => {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Stack mb={isMobile ? '6rem' : '1rem'} w={'100%'} align='center'>
<Grid columns={18} w={'75%'}>
{providers.length > 0 ? (
providers?.map((provider: Provider) => (

4
src/pages/settings/components/Shared/SettingsHeader.tsx
View File

@@ -58,10 +58,6 @@ function SettingsHeader({
paddingTop: '1.5rem',
paddingBottom: '1.5rem',
paddingLeft: '1rem',
height: 'min-content',
width: '100%',
marginTop: 0,
position: 'absolute',
}}
>
<Group w={isMobile ? undefined : '100%'}>

35
src/pages/settings/components/Theming/ThemeExampleApp.tsx
View File

@@ -1,7 +1,7 @@
import { Box, Stack, Text } from '@mantine/core';
import { useState } from 'react';
import { FiCheck } from 'react-icons/fi';
import { stackClasses } from 'styles';
import { boxClasses, textClasses } from 'styles';
import type { Theme } from 'types';
function ExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
@@ -12,50 +12,33 @@ function ExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
component='a'
onMouseOver={() => setTextDecoration('underline')}
onMouseOut={() => setTextDecoration('none')}
className={stackClasses.appItemBox}
className={boxClasses.appItemBox}
h={'64px'}
>
<Stack
style={{
height: '64px',
marginRight: '1rem',
marginLeft: '1rem',
paddingTop: '1rem',
}}
justify='center'
>
<FiCheck style={{ color: selectedTheme?.primaryColor }} height={32} width={32} />
<FiCheck style={{ color: selectedTheme?.primaryColor }} />
</Stack>
<Stack
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
flex: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
gap: 0,
}}
>
<Text
style={{
fontWeight: 400,
fontSize: '.625rem',
fontStyle: 'normal',
color: selectedTheme?.primaryColor,
fontFamily:
'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
margin: 0,
}}
>
<Text className={textClasses.appName} classNames={textClasses}>
{'Example App'}
</Text>
<Text
className={textClasses.appUrl}
classNames={textClasses}
style={{
fontWeight: 400,
fontSize: '.625rem',
fontStyle: 'italic',
color: selectedTheme?.accentColor,
fontFamily:
'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
margin: 0,
textDecoration: textDecoration,
}}
>

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

@@ -141,7 +141,6 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
<Text
style={{
fontSize: '.875rem',
fontWeight: 400,
height: '10px',
width: 'auto',
color: selectedTheme?.accentColor,
@@ -188,7 +187,6 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
<Text
style={{
fontSize: '.875rem',
fontWeight: 400,
height: '10px',
width: 'auto',
color: selectedTheme?.accentColor,

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

@@ -108,25 +108,21 @@ function ThemePlaylistCard({
)}
{cardPlaylist.default === 0 && (
<ActionIcon
color='red'
style={{
position: 'absolute',
top: -10,
right: 40,
paddingRight: '.25rem',
paddingLeft: '.25rem',
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color:
theme.borderColor === theme.primaryColor
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-red-6)',
zIndex: 3,
}}
onClick={() => {
openModal();
}}
>
<FiTrash />
<FiTrash color='black' />
</ActionIcon>
)}
<Button

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

@@ -81,31 +81,26 @@ function ThemePlaylists() {
allThemes={allThemeData}
createPlaylist={mutateAsync}
/>
<Stack h={'100%'} w={'100%'}>
<SettingsHeader
setDragging={undefined}
openModal={open}
title={'Theme Playlists'}
tooltip={{
title: 'Theme playlists can be created here and applied to the homepage.',
highlightList: ['theme', 'themes', 'homepage', 'playlist'],
description:
'Playlists are lists of themes. They can be enabled either here or in the settings button on the homepage. When a playlist is enabled, it will shuffle the included themes on the homepage. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Theme Playlists...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<SettingsHeader
setDragging={undefined}
openModal={open}
title={'Theme Playlists'}
tooltip={{
title: 'Theme playlists can be created here and applied to the homepage.',
highlightList: ['theme', 'themes', 'homepage', 'playlist'],
description:
'Playlists are lists of themes. They can be enabled either here or in the settings button on the homepage. When a playlist is enabled, it will shuffle the included themes on the homepage. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Theme Playlists...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack>
{allThemeData && (
<>
<Group
mt={isMobile ? '10rem' : '6rem'}
justify='center'
align='center'
pos={'relative'}
>
<Group justify='center' align='center' pos={'relative'}>
<Text
p={0}
className={textClasses.settingsSubTitle}

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)',

7
src/pages/settings/components/WoL/WolClients.tsx
View File

@@ -127,12 +127,7 @@ const WolClientSettings = () => {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Stack mb={isMobile ? '6rem' : '1rem'} w={'100%'} align='center'>
<Grid columns={18} w={'75%'}>
{wolClients.length > 0 ? (
wolClients?.map((client: WolClient) => (