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

Style changes

Browse Source
This commit is contained in:
Sean Edmunds
2025-04-03 15:42:16 -05:00
parent 8d2700174c
commit d098753ac6
12 changed files with 163 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,8 +26,8 @@ export function Settings() {
const navigate = useNavigate(); const navigate = useNavigate();
const { tabValue } = useParams(); const { tabValue } = useParams();
return ( return (
<Stack h={'100%'}> <Stack h={'100%'} gap={0}>
<Group gap={0} pl={'2rem'}> <Group gap={0} pb={'1rem'} pl={'2rem'}>
<ActionIcon <ActionIcon
className={actionIconClasses.backButton} className={actionIconClasses.backButton}
classNames={actionIconClasses} classNames={actionIconClasses}
@@ -47,7 +47,7 @@ export function Settings() {
classNames={tabClasses} classNames={tabClasses}
keepMounted={false} keepMounted={false}
value={tabValue} value={tabValue}
h={'100%'} h={isMobile ? undefined : '100%'}
onChange={(value) => onChange={(value) =>
navigate(`/${import.meta.env.VITE_BASE_URL}/settings/${value}`) navigate(`/${import.meta.env.VITE_BASE_URL}/settings/${value}`)
} }

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

@@ -240,7 +240,12 @@ const ApplicationSettings = () => {
/> />
{dragging ? ( {dragging ? (
<DragDropContext onDragEnd={onDragEnd}> <DragDropContext onDragEnd={onDragEnd}>
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'> <Stack
mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Droppable droppableId={'groupList'}> <Droppable droppableId={'groupList'}>
{(provided) => ( {(provided) => (
<Stack <Stack
@@ -316,7 +321,12 @@ const ApplicationSettings = () => {
</Stack> </Stack>
</DragDropContext> </DragDropContext>
) : ( ) : (
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'> <Stack
mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Grid columns={18} w={'75%'}> <Grid columns={18} w={'75%'}>
{applicationData?.map((application: Application) => ( {applicationData?.map((application: Application) => (
<GridCol span={6} key={application.id}> <GridCol span={6} key={application.id}>
@@ -340,7 +350,7 @@ const ApplicationSettings = () => {
/> />
</Box> </Box>
</Popover.Target> </Popover.Target>
<Popover.Dropdown> <Popover.Dropdown w={isMobile ? '100%' : undefined}>
<DebouncedApplication <DebouncedApplication
application={application} application={application}
setIsOpen={setIsOpen} setIsOpen={setIsOpen}

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

@@ -182,7 +182,12 @@ const BookmarkSettings = () => {
/> />
{dragging ? ( {dragging ? (
<DragDropContext onDragEnd={onDragEnd}> <DragDropContext onDragEnd={onDragEnd}>
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'> <Stack
mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Droppable droppableId={'groupList'}> <Droppable droppableId={'groupList'}>
{(provided) => ( {(provided) => (
<Stack <Stack
@@ -258,8 +263,13 @@ const BookmarkSettings = () => {
</Stack> </Stack>
</DragDropContext> </DragDropContext>
) : ( ) : (
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'> <Stack
<Group w={isMobile ? undefined : '75%'} align='start'> mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Group w={isMobile ? undefined : '75%'} align='start' justify='center'>
{groups?.map((group: BookmarkGroup) => ( {groups?.map((group: BookmarkGroup) => (
<DebouncedGroupSettingsItem <DebouncedGroupSettingsItem
key={group.id} key={group.id}

2
src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
View File

@@ -234,6 +234,7 @@ function DebouncedGroupSettingsItem({
</Box> </Box>
</Popover.Target> </Popover.Target>
<Popover.Dropdown <Popover.Dropdown
w={isMobile ? '100%' : undefined}
style={{ style={{
'--color-text-pri': theme.primaryColor, '--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor, '--color-text-acc': theme.accentColor,
@@ -290,6 +291,7 @@ function DebouncedGroupSettingsItem({
</Button> </Button>
</Popover.Target> </Popover.Target>
<Popover.Dropdown <Popover.Dropdown
w={isMobile ? '100%' : undefined}
style={{ style={{
'--color-text-pri': theme.primaryColor, '--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor, '--color-text-acc': theme.accentColor,

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

@@ -107,7 +107,12 @@ const MessageSettings = () => {
</Stack> </Stack>
} }
/> />
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'> <Stack
mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Grid w={'75%'}> <Grid w={'75%'}>
{messages?.map((message: Message) => ( {messages?.map((message: Message) => (
<GridCol span={isMobile ? 12 : 6} key={message.id}> <GridCol span={isMobile ? 12 : 6} key={message.id}>

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

@@ -148,7 +148,12 @@ const SearchProviderSettings = () => {
searchValue={searchValue} searchValue={searchValue}
setSearchValue={setSearchValue} setSearchValue={setSearchValue}
/> />
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'> <Stack
mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Grid columns={18} w={'75%'}> <Grid columns={18} w={'75%'}>
{providerData?.map((provider: Provider) => ( {providerData?.map((provider: Provider) => (
<GridCol span={isMobile ? 18 : 6} key={provider.id}> <GridCol span={isMobile ? 18 : 6} key={provider.id}>
@@ -167,7 +172,7 @@ const SearchProviderSettings = () => {
<SearchProviderSettingsItem provider={provider} /> <SearchProviderSettingsItem provider={provider} />
</Box> </Box>
</Popover.Target> </Popover.Target>
<Popover.Dropdown> <Popover.Dropdown w={isMobile ? '100%' : undefined}>
<DebouncedSearchProvider <DebouncedSearchProvider
searchProvider={provider} searchProvider={provider}
setIsOpen={setIsOpen} setIsOpen={setIsOpen}

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

@@ -32,10 +32,14 @@ function SettingsHeader({
mt={0} mt={0}
justify='center' justify='center'
pos={'absolute'} pos={'absolute'}
style={{ backdropFilter: 'blur(10px) brightness(.5)', zIndex: 1 }} style={{ backdropFilter: 'blur(10px) brightness(.5)', zIndex: 99 }}
> >
<Group w={isMobile ? undefined : '100%'}> <Group w={isMobile ? undefined : '100%'}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}> <Text
miw={isMobile ? 100 : undefined}
className={textClasses.settingsSubTitle}
classNames={textClasses}
>
{title} {title}
</Text> </Text>
<Popover withArrow withOverlay withinPortal={true}> <Popover withArrow withOverlay withinPortal={true}>
@@ -51,7 +55,7 @@ function SettingsHeader({
style={{ style={{
color: theme.primaryColor, color: theme.primaryColor,
backgroundColor: theme.backgroundColor, backgroundColor: theme.backgroundColor,
width: '500px', width: isMobile ? '95%' : '500px',
}} }}
> >
<Stack> <Stack>
@@ -108,7 +112,7 @@ function SettingsHeader({
labelPosition='left' labelPosition='left'
pos={'absolute'} pos={'absolute'}
right={isMobile ? '2rem' : '1rem'} right={isMobile ? '2rem' : '1rem'}
top={isMobile ? '10rem' : undefined} top={isMobile ? '3.5rem' : undefined}
onChange={(e) => { onChange={(e) => {
setDragging(e.target.checked); setDragging(e.target.checked);
}} }}

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

@@ -21,7 +21,8 @@ function ThemePlaylists() {
const { mutateAsync } = useMutationAPI(); const { mutateAsync } = useMutationAPI();
const [opened, { open, close }] = useDisclosure(false); const [opened, { open, close }] = useDisclosure(false);
const [selectedPlaylist, setSelectedPlaylist] = useState<any>({}); const [selectedPlaylist, setSelectedPlaylist] = useState<any>({});
const { currentThemePlaylist, setCurrentThemePlaylist, theme } = useCommonHooks(); const { currentThemePlaylist, setCurrentThemePlaylist, theme, isMobile } =
useCommonHooks();
const [searchValue, setSearchValue] = useState(''); const [searchValue, setSearchValue] = useState('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500); const [debouncedSearch] = useDebouncedValue(searchValue, 500);
@@ -118,7 +119,12 @@ function ThemePlaylists() {
User Made User Made
</Text> </Text>
</Group> </Group>
<Group justify='center' align='center' pos={'relative'}> <Group
justify='center'
align='center'
pos={'relative'}
mb={isMobile ? '6rem' : undefined}
>
{themePlaylists {themePlaylists
?.filter((playlist: ThemePlaylist) => playlist.default === 0) ?.filter((playlist: ThemePlaylist) => playlist.default === 0)
?.filter((a: ThemePlaylist) => ?.filter((a: ThemePlaylist) =>

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

@@ -58,7 +58,7 @@ function ThemesSettings() {
} }
}, [backgroundData, isBackgroundFetched]); }, [backgroundData, isBackgroundFetched]);
return ( return (
<Stack> <Stack w={'100%'} align='center'>
<ThemeModal <ThemeModal
opened={opened} opened={opened}
handleClose={handleClose} handleClose={handleClose}
@@ -75,96 +75,99 @@ function ThemesSettings() {
closePicker={closePicker} closePicker={closePicker}
handleSaveTheme={handleSaveTheme} handleSaveTheme={handleSaveTheme}
/> />
<Stack h={'100%'} w={'100%'}> <SettingsHeader
<SettingsHeader setDragging={undefined}
setDragging={undefined} openModal={open}
openModal={open} title={'Themes'}
title={'Themes'} tooltip={{
tooltip={{ title: 'Themes can be created here and applied to the homepage.',
title: 'Themes can be created here and applied to the homepage.', highlightList: ['Clients', 'homepage'],
highlightList: ['Clients', 'homepage'], description:
description: 'Themes are combinations of 5 colors and a background image, and can be added to a playlist. If a theme has been disabled, it will only be disabled with random/shuffle is enabled. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
'Themes are combinations of 5 colors and a background image, and can be added to a playlist. If a theme has been disabled, it will only be disabled with random/shuffle is enabled. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.', }}
}} searchValue={searchValue}
searchValue={searchValue} setSearchValue={setSearchValue}
setSearchValue={setSearchValue} />
/> <Switch
<Switch label={
label={ isMobile ? (
isMobile ? ( <FaDice size={20} color={theme.primaryColor} />
<FaDice size={20} color={theme.primaryColor} /> ) : (
) : ( <Text c={theme.primaryColor}>Random Theme</Text>
<Text c={theme.primaryColor}>Random Theme</Text> )
) }
} labelPosition='left'
labelPosition='left' pos={'absolute'}
pos={'absolute'} right={isMobile ? '2rem' : '1rem'}
right={isMobile ? '2rem' : '1rem'} top={isMobile ? '3.5rem' : '2rem'}
top={isMobile ? '9.5rem' : '2rem'} checked={currentTheme === 'random'}
checked={currentTheme === 'random'} onChange={(e) => {
onChange={(e) => { setCurrentTheme(e.target.checked ? 'random' : theme.name);
setCurrentTheme(e.target.checked ? 'random' : theme.name); setCurrentThemePlaylist('All');
setCurrentThemePlaylist('All'); }}
}} color={theme.primaryColor}
color={theme.primaryColor} style={{
zIndex: 100,
}}
/>
<Group
w={'85%'}
justify='center'
align='center'
pos={'relative'}
mt={isMobile ? '10rem' : '7rem'}
mb={isMobile ? '6rem' : '1rem'}
>
<Overlay
display={currentTheme === 'random' ? 'flex' : 'none'}
blur={5}
style={{ style={{
zIndex: 1, borderRadius: '10px',
marginTop: '-15px',
marginBottom: '-10px',
boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
}} }}
pos={'absolute'}
/> />
<Group justify='center' align='center' pos={'relative'} mt={'10rem'}> {allThemes
<Overlay ?.filter((a: Theme) =>
display={currentTheme === 'random' ? 'flex' : 'none'} a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
blur={5} )
style={{ .map((cardTheme: Theme) => (
borderRadius: '10px', <Group key={cardTheme.name} pos={'relative'}>
marginTop: '-15px', {cardTheme.name === currentTheme && (
marginBottom: '-10px', <FiChevronRight
boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
}}
pos={'absolute'}
/>
{allThemes
?.filter((a: Theme) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.map((cardTheme: Theme) => (
<Group key={cardTheme.name} pos={'relative'}>
{cardTheme.name === currentTheme && (
<FiChevronRight
style={{
position: 'absolute',
left: -14,
zIndex: 1,
fontSize: '2em',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: cardTheme.borderColor,
color:
cardTheme.borderColor === cardTheme.primaryColor
? cardTheme.accentColor
: cardTheme.primaryColor,
}}
/>
)}
<Box
style={{ style={{
zIndex: position: 'absolute',
currentTheme === 'random' && cardTheme.name === theme.name left: -14,
? 200 zIndex: 1,
: 0, fontSize: '2em',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: cardTheme.borderColor,
color:
cardTheme.borderColor === cardTheme.primaryColor
? cardTheme.accentColor
: cardTheme.primaryColor,
}} }}
> />
<ThemeCard )}
allThemes={allThemes} <Box
cardTheme={cardTheme} style={{
handleOpen={handleOpen} zIndex:
themePlaylists={themePlaylists} currentTheme === 'random' && cardTheme.name === theme.name ? 200 : 0,
/> }}
</Box> >
</Group> <ThemeCard
))} allThemes={allThemes}
</Group> cardTheme={cardTheme}
</Stack> handleOpen={handleOpen}
themePlaylists={themePlaylists}
/>
</Box>
</Group>
))}
</Group>
</Stack> </Stack>
); );
} }

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

@@ -131,7 +131,12 @@ const WolClientSettings = () => {
searchValue={searchValue} searchValue={searchValue}
setSearchValue={setSearchValue} setSearchValue={setSearchValue}
/> />
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'> <Stack
mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Grid columns={18} w={'75%'}> <Grid columns={18} w={'75%'}>
{wolClients?.map((client: WolClient) => ( {wolClients?.map((client: WolClient) => (
<GridCol w={'100%'} span={isMobile ? 18 : 6} key={client.id}> <GridCol w={'100%'} span={isMobile ? 18 : 6} key={client.id}>
@@ -151,7 +156,7 @@ const WolClientSettings = () => {
<WolClientSettingsItem client={client} /> <WolClientSettingsItem client={client} />
</Group> </Group>
</Popover.Target> </Popover.Target>
<Popover.Dropdown> <Popover.Dropdown w={isMobile ? '100%' : undefined}>
<DebouncedWolClient wolClient={client} setIsOpen={setIsOpen} /> <DebouncedWolClient wolClient={client} setIsOpen={setIsOpen} />
</Popover.Dropdown> </Popover.Dropdown>
</Popover> </Popover>

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

@@ -2,6 +2,7 @@
@media (max-width: 600px) { @media (max-width: 600px) {
.panel { .panel {
padding-left: 0 !important; padding-left: 0 !important;
height: 100%;
} }
} }
.panel { .panel {
@@ -22,7 +23,6 @@
border-top: solid 2px var(--color-text-acc); border-top: solid 2px var(--color-text-acc);
padding-left: 2rem; padding-left: 2rem;
padding-top: 2rem; padding-top: 2rem;
height: 100%;
} }
.list::before { .list::before {
border-color: var(--color-text-acc); border-color: var(--color-text-acc);

8
src/styles/Text.module.css
View File

@@ -98,8 +98,12 @@
&.root { &.root {
font-size: 32px; font-size: 32px;
font-weight: bold; font-weight: bold;
padding-top: 1.5rem; margin-top: 1.5rem;
color: var(--color-text-pri); color: var(--color-text-acc);
background-color: var(--color-search-background);
border-radius: 12px;
padding-left: 12px;
padding-right: 12px;
} }
} }