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-04-10 14:48:51 -05:00
parent a1e5b0b7c8
commit 34e20a49aa
21 changed files with 392 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,7 @@ import { useEffect, useState } from 'react';
import * as fa6 from 'react-icons/fa6';
import * as si from 'react-icons/si';
import * as vsc from 'react-icons/vsc';
import { selectClasses, textInputClasses } from 'styles';
import { popoverClasses, selectClasses, textInputClasses } from 'styles';
import type { Application } from 'types';
import AddItemModal from '../Shared/AddItemModal';
import SettingsHeader from '../Shared/SettingsHeader';
@@ -117,11 +117,12 @@ const ApplicationSettings = () => {
title={'Add a new application'}
body={
<Stack gap={0} align='center'>
<Group justify='center'>
<Group w={'100%'} justify='center'>
<TextInput
label={'Name'}
className={textInputClasses.settingsItem}
pt={16}
w={'45%'}
classNames={textInputClasses}
defaultValue={newApplication.name}
onChange={(event) => {
@@ -135,6 +136,7 @@ const ApplicationSettings = () => {
label={'Base URL'}
className={textInputClasses.settingsItem}
pt={16}
w={'45%'}
classNames={textInputClasses}
defaultValue={newApplication.baseUrl}
onChange={(event) => {
@@ -145,12 +147,12 @@ const ApplicationSettings = () => {
}}
/>
</Group>
<Group w={isMobile ? undefined : '64%'} justify='center'>
<Group w={isMobile ? '94%' : '92%'} justify='center'>
<TextInput
label={'URL'}
className={textInputClasses.settingsItem}
pt={16}
w={isMobile ? undefined : '99%'}
w={'100%'}
classNames={textInputClasses}
defaultValue={newApplication.url}
onChange={(event) => {
@@ -161,7 +163,7 @@ const ApplicationSettings = () => {
}}
/>
</Group>
<Group justify='center'>
<Group w={'100%'} justify='center'>
<Select
label={'Icon'}
className={selectClasses.settingsItem}
@@ -172,7 +174,10 @@ const ApplicationSettings = () => {
option: selectClasses.menuSelectOption,
dropdown: selectClasses.dropdown,
}}
w={'45%'}
mt={12}
limit={100}
placeholder='Search for an icon...'
data={Object.keys(allIcons).map((icon) => {
return { value: icon, label: icon };
})}
@@ -205,6 +210,7 @@ const ApplicationSettings = () => {
label={'Filter'}
className={textInputClasses.settingsItem}
pt={16}
w={'45%'}
classNames={textInputClasses}
defaultValue={newApplication.filterName}
onChange={(event) => {
@@ -268,6 +274,7 @@ const ApplicationSettings = () => {
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Applications...'}
/>
{dragging ? (
<DragDropContext onDragEnd={onDragEnd}>
@@ -366,6 +373,7 @@ const ApplicationSettings = () => {
withOverlay
withinPortal={false}
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
>
<Popover.Target>
<Box

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

@@ -14,7 +14,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiTrash } from 'react-icons/fi';
import { cardClasses, selectClasses, textInputClasses } from 'styles';
import { cardClasses, selectClasses, switchClasses, textInputClasses } from 'styles';
import type { Application } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal';
@@ -111,7 +111,9 @@ function DebouncedApplication({
label={'Enabled'}
>
<Switch
label={<Text c={theme.primaryColor}>Enabled</Text>}
className={switchClasses.default}
classNames={switchClasses}
label={'Enabled'}
labelPosition='left'
pos={'absolute'}
left={16}
@@ -123,7 +125,6 @@ function DebouncedApplication({
enabled: event.target.checked ? 1 : 0,
});
}}
color={theme.primaryColor}
/>
</Tooltip>
<Group w={'100%'} justify='center'>
@@ -183,10 +184,12 @@ function DebouncedApplication({
dropdown: selectClasses.dropdown,
}}
mt={12}
limit={100}
defaultSearchValue={app?.icon}
data={Object.keys(allIcons).map((icon) => {
return { value: icon, label: icon };
})}
defaultValue={app.icon}
defaultValue={app?.icon}
comboboxProps={{
zIndex: 3000,
withinPortal: false,

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

@@ -179,6 +179,7 @@ const BookmarkSettings = () => {
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Bookmark Groups...'}
/>
{dragging ? (
<DragDropContext onDragEnd={onDragEnd}>

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

@@ -15,7 +15,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiPlus, FiTrash } from 'react-icons/fi';
import { buttonClasses, cardClasses, textInputClasses } from 'styles';
import { buttonClasses, cardClasses, popoverClasses, textInputClasses } from 'styles';
import type { Bookmark, BookmarkGroup } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal';
import BookmarkSettingsItem from './BookmarkSettingsItem';
@@ -231,7 +231,12 @@ function DebouncedGroupSettingsItem({
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<Popover withArrow withOverlay closeOnClickOutside={!isOpen}>
<Popover
withArrow
withOverlay
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
>
<Popover.Target>
<Box>
<BookmarkSettingsItem bookmark={bookmark} />
@@ -276,7 +281,7 @@ function DebouncedGroupSettingsItem({
opened={popoverOpened}
onChange={setPopoverOpened}
closeOnEscape
// closeOnClickOutside={}
classNames={popoverClasses}
>
<Popover.Target>
<Button

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

@@ -53,12 +53,19 @@ const MessageSettings = () => {
title={'Messages'}
tooltip={{
title: 'These custom messages will be displayed in the header on the homepage.',
highlightList: ['$firstName', '$lastName', '$^firstName', '$^lastName'],
highlightList: [
'$firstName',
'$lastName',
'$^firstName',
'$^lastName',
'messages',
],
description:
'Built-in variables include $firstName and $lastName. To force the text to upper case, use a carat (^), ie, $^firstName. Messages may contain any unicode text.',
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Message content...'}
/>
<AddItemModal
modalOpened={modalOpened}

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

@@ -48,20 +48,19 @@ const PersonalizationSettings = () => {
tooltip={{
title: 'The personalization section allows you to update basic information.',
highlightList: [
'Applications',
'apps',
'application',
'first name',
'last name',
'name',
'base url',
'url',
'icon',
'filter',
'first',
'last',
'physical address',
],
description:
'The first and last name fields will be used for greetings, and the physical address field will be used for weather.',
}}
searchValue={undefined}
setSearchValue={() => {}}
searchPlaceholder={undefined}
/>
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
<Grid w={'75%'} pos={'relative'}>

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

@@ -12,7 +12,7 @@ import {
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textInputClasses } from 'styles';
import { popoverClasses, textInputClasses } from 'styles';
import type { Provider } from 'types';
import AddItemModal from '../Shared/AddItemModal';
import SettingsHeader from '../Shared/SettingsHeader';
@@ -141,12 +141,13 @@ const SearchProviderSettings = () => {
title={'Search Providers'}
tooltip={{
title: 'Search providers and shortcuts can be configured here.',
highlightList: ['Providers', 'search'],
highlightList: ['Providers', 'search', 'provider', 'prefix'],
description:
'Providers can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.',
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Search Providers...'}
/>
<Stack
mt={isMobile ? '9rem' : '6rem'}
@@ -162,6 +163,7 @@ const SearchProviderSettings = () => {
withOverlay
withinPortal={false}
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
>
<Popover.Target>
<Box

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

@@ -23,8 +23,16 @@ function AddItemModal({ modalOpened, handleClose, body, title }: any) {
<Modal.Title>{title}</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body pb={'2rem'}>
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Modal.Body
h={isMobile ? '90%' : undefined}
pb={'2rem'}
style={{ justifyContent: 'center', alignContent: 'center' }}
>
<Card
style={{ alignContent: 'center', justifyContent: 'center' }}
className={cardClasses.settingsItem}
classNames={cardClasses}
>
{body}
</Card>
</Modal.Body>

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

@@ -11,7 +11,14 @@ import {
} from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { FiHelpCircle, FiPlus } from 'react-icons/fi';
import { actionIconClasses, buttonClasses, textClasses, textInputClasses } from 'styles';
import {
actionIconClasses,
buttonClasses,
popoverClasses,
switchClasses,
textClasses,
textInputClasses,
} from 'styles';
function SettingsHeader({
setDragging,
@@ -20,8 +27,9 @@ function SettingsHeader({
tooltip,
searchValue,
setSearchValue,
searchPlaceholder,
}: any) {
const { isMobile, theme } = useCommonHooks();
const { isMobile, theme, modalStyle } = useCommonHooks();
return (
<Group
py={'1.5rem'}
@@ -42,7 +50,15 @@ function SettingsHeader({
>
{title}
</Text>
<Popover withArrow withOverlay withinPortal={true}>
<Popover
withArrow
withOverlay
withinPortal={true}
styles={{
dropdown: modalStyle,
}}
classNames={popoverClasses}
>
<Popover.Target>
<ActionIcon
className={actionIconClasses.settingsTooltip}
@@ -95,7 +111,7 @@ function SettingsHeader({
className={textInputClasses.settingsItem}
classNames={textInputClasses}
autoFocus={!isMobile}
placeholder='Search...'
placeholder={searchPlaceholder || 'Search...'}
value={searchValue}
onInput={(event: any) => {
setSearchValue(event.target.value);
@@ -107,7 +123,9 @@ function SettingsHeader({
)}
{setDragging && (
<Switch
label={<Text c={theme.primaryColor}>Reorder</Text>}
className={switchClasses.default}
classNames={switchClasses}
label={'Reorder'}
labelPosition='left'
pos={'absolute'}
right={isMobile ? '2rem' : '1rem'}
@@ -115,15 +133,6 @@ function SettingsHeader({
onChange={(e) => {
setDragging(e.target.checked);
}}
color={theme.primaryColor}
styles={{
label: {
color: theme.primaryColor,
top: isMobile ? -22 : 0,
left: isMobile ? -8 : 0,
position: isMobile ? 'absolute' : undefined,
},
}}
/>
)}
</Group>

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

@@ -172,8 +172,9 @@ function ThemeModal({
<ColorPicker
value={colorValue}
onChange={setColorValue}
format='hexa'
format={colorId === 'background' ? 'hex' : 'hexa'}
w={'90%'}
mb={colorId === 'background' ? '24px' : undefined}
/>
<Group justify='center'>
<TextInput

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

@@ -63,12 +63,13 @@ function ThemePlaylists() {
title={'Theme Playlists'}
tooltip={{
title: 'Theme playlists can be created here and applied to the homepage.',
highlightList: ['Clients', '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...'}
/>
<Group mt={'6rem'} justify='center' align='center' pos={'relative'}>
<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>

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

@@ -4,6 +4,7 @@ import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FaDice } from 'react-icons/fa';
import { FiChevronRight } from 'react-icons/fi';
import { switchClasses } from 'styles';
import type { Theme } from 'types';
import SettingsHeader from '../Shared/SettingsHeader';
import ThemeCard from './ThemeCard';
@@ -81,12 +82,13 @@ function ThemesSettings() {
title={'Themes'}
tooltip={{
title: 'Themes can be created here and applied to the homepage.',
highlightList: ['Clients', 'homepage'],
highlightList: ['theme', 'themes', 'homepage', 'playlist'],
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}
searchPlaceholder={'Search Themes...'}
/>
<Switch
label={
@@ -105,7 +107,8 @@ function ThemesSettings() {
setCurrentTheme(e.target.checked ? 'random' : theme.name);
setCurrentThemePlaylist('All');
}}
color={theme.primaryColor}
className={switchClasses.default}
classNames={switchClasses}
style={{
zIndex: 250,
}}

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

@@ -11,7 +11,7 @@ import {
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textInputClasses } from 'styles';
import { popoverClasses, textInputClasses } from 'styles';
import type { WolClient } from 'types';
import AddItemModal from '../Shared/AddItemModal';
import SettingsHeader from '../Shared/SettingsHeader';
@@ -130,6 +130,7 @@ const WolClientSettings = () => {
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Clients...'}
/>
<Stack
mt={isMobile ? '9rem' : '6rem'}
@@ -145,6 +146,7 @@ const WolClientSettings = () => {
withOverlay
withinPortal={false}
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
>
<Popover.Target>
<Group