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 { tabValue } = useParams();
return (
<Stack h={'100%'}>
<Group gap={0} pl={'2rem'}>
<Stack h={'100%'} gap={0}>
<Group gap={0} pb={'1rem'} pl={'2rem'}>
<ActionIcon
className={actionIconClasses.backButton}
classNames={actionIconClasses}
@@ -47,7 +47,7 @@ export function Settings() {
classNames={tabClasses}
keepMounted={false}
value={tabValue}
h={'100%'}
h={isMobile ? undefined : '100%'}
onChange={(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 ? (
<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'}>
{(provided) => (
<Stack
@@ -316,7 +321,12 @@ const ApplicationSettings = () => {
</Stack>
</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%'}>
{applicationData?.map((application: Application) => (
<GridCol span={6} key={application.id}>
@@ -340,7 +350,7 @@ const ApplicationSettings = () => {
/>
</Box>
</Popover.Target>
<Popover.Dropdown>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<DebouncedApplication
application={application}
setIsOpen={setIsOpen}

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

@@ -182,7 +182,12 @@ const BookmarkSettings = () => {
/>
{dragging ? (
<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'}>
{(provided) => (
<Stack
@@ -258,8 +263,13 @@ const BookmarkSettings = () => {
</Stack>
</DragDropContext>
) : (
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
<Group w={isMobile ? undefined : '75%'} align='start'>
<Stack
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) => (
<DebouncedGroupSettingsItem
key={group.id}

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

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

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

@@ -107,7 +107,12 @@ const MessageSettings = () => {
</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%'}>
{messages?.map((message: Message) => (
<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}
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%'}>
{providerData?.map((provider: Provider) => (
<GridCol span={isMobile ? 18 : 6} key={provider.id}>
@@ -167,7 +172,7 @@ const SearchProviderSettings = () => {
<SearchProviderSettingsItem provider={provider} />
</Box>
</Popover.Target>
<Popover.Dropdown>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<DebouncedSearchProvider
searchProvider={provider}
setIsOpen={setIsOpen}

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

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

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

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

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

@@ -58,7 +58,7 @@ function ThemesSettings() {
}
}, [backgroundData, isBackgroundFetched]);
return (
<Stack>
<Stack w={'100%'} align='center'>
<ThemeModal
opened={opened}
handleClose={handleClose}
@@ -75,96 +75,99 @@ function ThemesSettings() {
closePicker={closePicker}
handleSaveTheme={handleSaveTheme}
/>
<Stack h={'100%'} w={'100%'}>
<SettingsHeader
setDragging={undefined}
openModal={open}
title={'Themes'}
tooltip={{
title: 'Themes can be created here and applied to the homepage.',
highlightList: ['Clients', 'homepage'],
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.',
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
/>
<Switch
label={
isMobile ? (
<FaDice size={20} color={theme.primaryColor} />
) : (
<Text c={theme.primaryColor}>Random Theme</Text>
)
}
labelPosition='left'
pos={'absolute'}
right={isMobile ? '2rem' : '1rem'}
top={isMobile ? '9.5rem' : '2rem'}
checked={currentTheme === 'random'}
onChange={(e) => {
setCurrentTheme(e.target.checked ? 'random' : theme.name);
setCurrentThemePlaylist('All');
}}
color={theme.primaryColor}
<SettingsHeader
setDragging={undefined}
openModal={open}
title={'Themes'}
tooltip={{
title: 'Themes can be created here and applied to the homepage.',
highlightList: ['Clients', 'homepage'],
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.',
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
/>
<Switch
label={
isMobile ? (
<FaDice size={20} color={theme.primaryColor} />
) : (
<Text c={theme.primaryColor}>Random Theme</Text>
)
}
labelPosition='left'
pos={'absolute'}
right={isMobile ? '2rem' : '1rem'}
top={isMobile ? '3.5rem' : '2rem'}
checked={currentTheme === 'random'}
onChange={(e) => {
setCurrentTheme(e.target.checked ? 'random' : theme.name);
setCurrentThemePlaylist('All');
}}
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={{
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'}>
<Overlay
display={currentTheme === 'random' ? 'flex' : 'none'}
blur={5}
style={{
borderRadius: '10px',
marginTop: '-15px',
marginBottom: '-10px',
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
{allThemes
?.filter((a: Theme) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.map((cardTheme: Theme) => (
<Group key={cardTheme.name} pos={'relative'}>
{cardTheme.name === currentTheme && (
<FiChevronRight
style={{
zIndex:
currentTheme === 'random' && cardTheme.name === theme.name
? 200
: 0,
position: 'absolute',
left: -14,
zIndex: 1,
fontSize: '2em',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: cardTheme.borderColor,
color:
cardTheme.borderColor === cardTheme.primaryColor
? cardTheme.accentColor
: cardTheme.primaryColor,
}}
>
<ThemeCard
allThemes={allThemes}
cardTheme={cardTheme}
handleOpen={handleOpen}
themePlaylists={themePlaylists}
/>
</Box>
</Group>
))}
</Group>
</Stack>
/>
)}
<Box
style={{
zIndex:
currentTheme === 'random' && cardTheme.name === theme.name ? 200 : 0,
}}
>
<ThemeCard
allThemes={allThemes}
cardTheme={cardTheme}
handleOpen={handleOpen}
themePlaylists={themePlaylists}
/>
</Box>
</Group>
))}
</Group>
</Stack>
);
}

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

@@ -131,7 +131,12 @@ const WolClientSettings = () => {
searchValue={searchValue}
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%'}>
{wolClients?.map((client: WolClient) => (
<GridCol w={'100%'} span={isMobile ? 18 : 6} key={client.id}>
@@ -151,7 +156,7 @@ const WolClientSettings = () => {
<WolClientSettingsItem client={client} />
</Group>
</Popover.Target>
<Popover.Dropdown>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<DebouncedWolClient wolClient={client} setIsOpen={setIsOpen} />
</Popover.Dropdown>
</Popover>

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

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

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

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