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

Style consistency

Browse Source
This commit is contained in:
Sean Edmunds
2025-03-21 15:59:35 -05:00
parent 37107e9653
commit 5d2d20de1e
11 changed files with 393 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -193,7 +193,8 @@ const ApplicationSettings = () => {
</Modal.Body>
</Modal.Content>
</Modal.Root>
<Group align='center'>
<Group align='center' justify='center' mt={'1rem'}>
<Group w={isMobile ? undefined : '100%'}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
Applications
</Text>
@@ -252,7 +253,10 @@ const ApplicationSettings = () => {
>
<FiPlus />
</Button>
</Group>
<TextInput
w={isMobile ? undefined : '35%'}
pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
autoFocus

9
src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx
View File

@@ -1,7 +1,6 @@
import { ActionIcon, Box, Group, Text } from '@mantine/core';
import { useState } from 'react';
import { FiEdit } from 'react-icons/fi';
import { actionIconClasses } from 'styles';
function BookmarkSettingsItem({ bookmark }: any) {
const [hover, setHover] = useState(false);
@@ -10,8 +9,8 @@ function BookmarkSettingsItem({ bookmark }: any) {
style={{
cursor: 'pointer',
borderRadius: '4px',
color: 'var(--color-text-pri)',
backgroundColor: 'var(--color-text-acc)',
color: 'var(--color-text-acc)',
backgroundColor: 'var(--color-search-background)',
padding: '8px',
}}
onMouseEnter={() => setHover(true)}
@@ -21,11 +20,11 @@ function BookmarkSettingsItem({ bookmark }: any) {
<Text>{bookmark.name}</Text>
{hover && (
<ActionIcon
className={actionIconClasses.editButton}
classNames={actionIconClasses}
variant='subtle'
style={{
position: 'absolute',
right: 24,
color: 'var(--color-text-acc)',
}}
>
<FiEdit />

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

@@ -145,7 +145,8 @@ const BookmarkSettings = () => {
</Modal.Body>
</Modal.Content>
</Modal.Root>
<Group align='center'>
<Group align='center' justify='center' mt={'1rem'}>
<Group w={isMobile ? undefined : '100%'}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
Bookmarks
</Text>
@@ -204,7 +205,10 @@ const BookmarkSettings = () => {
>
<FiPlus />
</Button>
</Group>
<TextInput
w={isMobile ? undefined : '35%'}
pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
autoFocus

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

@@ -15,6 +15,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { IconTrash } from '@tabler/icons-react';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiPlus } from 'react-icons/fi';
import { buttonClasses, cardClasses, modalClasses, textInputClasses } from 'styles';
import BookmarkSettingsItem from './BookmarkSettingsItem';
import DebouncedBookmarkItem from './DebouncedBookmarkItem';
@@ -242,7 +243,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
});
}}
>
Add bookmark
<FiPlus /> Bookmark
</Button>
</Popover.Target>
<Popover.Dropdown

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

@@ -134,7 +134,8 @@ const MessageSettings = () => {
</Modal.Body>
</Modal.Content>
</Modal.Root>
<Group align='center'>
<Group align='center' justify='center' mt={'1rem'}>
<Group w={isMobile ? undefined : '100%'}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
Messages
</Text>
@@ -156,7 +157,9 @@ const MessageSettings = () => {
>
<Stack>
<Text className={textClasses.settingsTooltip} classNames={textClasses}>
{'These custom messages will be displayed in the header on the homepage.'}
{
'These custom messages will be displayed in the header on the homepage.'
}
</Text>
<Highlight
highlight={['$firstName', '$lastName', '$^firstName', '$^lastName']}
@@ -184,7 +187,10 @@ const MessageSettings = () => {
>
<FiPlus />
</Button>
</Group>
<TextInput
w={isMobile ? undefined : '35%'}
pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
autoFocus

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

@@ -157,7 +157,8 @@ const SearchProviderSettings = () => {
</Modal.Body>
</Modal.Content>
</Modal.Root>
<Group align='center'>
<Group align='center' justify='center' mt={'1rem'}>
<Group w={isMobile ? undefined : '100%'}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
Search Providers
</Text>
@@ -207,7 +208,10 @@ const SearchProviderSettings = () => {
>
<FiPlus />
</Button>
</Group>
<TextInput
w={isMobile ? undefined : '35%'}
pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
autoFocus

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

@@ -115,7 +115,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.primaryColor,
: theme.backgroundColor,
zIndex: 3,
}}
>
@@ -134,7 +134,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.primaryColor,
: theme.backgroundColor,
zIndex: 3,
}}
onClick={(event) => {
@@ -202,7 +202,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.primaryColor,
: theme.backgroundColor,
zIndex: 3,
}}
onClick={() => {
@@ -224,7 +224,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.primaryColor,
: theme.backgroundColor,
zIndex: 3,
}}
onClick={() => {

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

@@ -7,12 +7,13 @@ import {
Popover,
Stack,
Text,
TextInput,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useState } from 'react';
import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
import { actionIconClasses, buttonClasses, textClasses } from 'styles';
import { actionIconClasses, buttonClasses, textClasses, textInputClasses } from 'styles';
import ThemePlaylistCard from './ThemePlaylistCard';
import ThemePlaylistModal from './ThemePlaylistModal';
@@ -26,7 +27,10 @@ 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);
const handleOpen = (playlist: any) => {
setSelectedPlaylist(playlist);
@@ -58,8 +62,8 @@ function ThemePlaylists() {
createPlaylist={mutateAsync}
/>
<Stack h={'100%'} w={'100%'}>
<Group w={'100%'} justify='space-between'>
<Group>
<Group w={'100%'} justify='center' align='center' mt={'1rem'}>
<Group w={isMobile ? undefined : '100%'}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
Theme Playlists
</Text>
@@ -116,6 +120,18 @@ function ThemePlaylists() {
<FiPlus />
</Button>
</Group>
<TextInput
w={isMobile ? undefined : '35%'}
pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
autoFocus
placeholder='Search...'
value={searchValue}
onInput={(event: any) => {
setSearchValue(event.target.value);
}}
/>
</Group>
<Group justify='center' align='center' pos={'relative'}>
<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -125,6 +141,9 @@ function ThemePlaylists() {
<Group justify='center' align='center' pos={'relative'}>
{themePlaylists
?.filter((playlist: any) => playlist.default === 1)
?.filter((a: any) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.map((cardPlaylist: any) => {
return (
<Group key={cardPlaylist.name} pos={'relative'}>
@@ -141,7 +160,7 @@ function ThemePlaylists() {
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.primaryColor,
: theme.backgroundColor,
}}
/>
)}
@@ -166,6 +185,9 @@ function ThemePlaylists() {
<Group justify='center' align='center' pos={'relative'}>
{themePlaylists
?.filter((playlist: any) => playlist.default === 0)
?.filter((a: any) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.map((cardPlaylist: any) => {
return (
<Group key={cardPlaylist.name} pos={'relative'}>

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

@@ -9,14 +9,16 @@ import {
Stack,
Switch,
Text,
TextInput,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
import '@mantine/core/styles/ModalBase.css';
import '@mantine/core/styles/Modal.css';
import { actionIconClasses, buttonClasses, textClasses } from 'styles';
import { FaDice } from 'react-icons/fa';
import { actionIconClasses, buttonClasses, textClasses, textInputClasses } from 'styles';
import ThemeCard from './ThemeCard';
import ThemeModal from './ThemeModal';
function ThemesSettings() {
@@ -33,7 +35,9 @@ function ThemesSettings() {
const [backgroundList, setBackgroundList] = useState<any>(['None']);
const [selectedTheme, setSelectedTheme] = useState<any>({});
const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
const { currentTheme, setCurrentTheme, theme, setCurrentThemePlaylist } =
const [searchValue, setSearchValue] = useState('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const { currentTheme, setCurrentTheme, theme, isMobile, setCurrentThemePlaylist } =
useCommonHooks();
const handleOpen = (theme: any) => {
@@ -79,8 +83,8 @@ function ThemesSettings() {
handleSaveTheme={handleSaveTheme}
/>
<Stack h={'100%'} w={'100%'}>
<Group w={'100%'} justify='space-between'>
<Group>
<Group w={'100%'} justify='center' align='center' mt={'1rem'}>
<Group w={isMobile ? undefined : '100%'}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
Themes
</Text>
@@ -143,9 +147,30 @@ function ThemesSettings() {
<FiPlus />
</Button>
</Group>
<TextInput
w={isMobile ? undefined : '35%'}
pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
autoFocus
placeholder='Search...'
value={searchValue}
onInput={(event: any) => {
setSearchValue(event.target.value);
}}
/>
<Switch
label={<Text c={theme.primaryColor}>Random Theme</Text>}
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' : undefined}
checked={currentTheme === 'random'}
onChange={(e) => {
setCurrentTheme(e.target.checked ? 'random' : theme.name);
@@ -166,7 +191,11 @@ function ThemesSettings() {
}}
pos={'absolute'}
/>
{allThemes?.map((cardTheme: any) => (
{allThemes
?.filter((a: any) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.map((cardTheme: any) => (
<Group key={cardTheme.name} pos={'relative'}>
{cardTheme.name === currentTheme && (
<FiChevronRight
@@ -188,7 +217,9 @@ function ThemesSettings() {
<Box
style={{
zIndex:
currentTheme === 'random' && cardTheme.name === theme.name ? 200 : 0,
currentTheme === 'random' && cardTheme.name === theme.name
? 200
: 0,
}}
>
<ThemeCard

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

@@ -145,7 +145,8 @@ const WolClientSettings = () => {
</Modal.Body>
</Modal.Content>
</Modal.Root>
<Group align='center'>
<Group align='center' justify='center' mt={'1rem'}>
<Group w={isMobile ? undefined : '100%'}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
WoL Clients
</Text>
@@ -193,7 +194,10 @@ const WolClientSettings = () => {
>
<FiPlus />
</Button>
</Group>
<TextInput
w={isMobile ? undefined : '35%'}
pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
autoFocus

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

@@ -63,13 +63,13 @@
}
width: 2rem;
height: 2rem;
padding: 0px;
padding: 8px;
margin: 0px;
background-color: var(--color-text-pri);
background-color: var(--color-search-background);
color: var(--color-text-acc);
}
&:hover {
background-color: var(--color-text-acc) !important;
color: var(--color-text-pri) !important;
background-color: var(--color-text-pri) !important;
color: var(--color-background) !important;
}
}