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

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

@@ -193,66 +193,70 @@ const ApplicationSettings = () => {
</Modal.Body> </Modal.Body>
</Modal.Content> </Modal.Content>
</Modal.Root> </Modal.Root>
<Group align='center'> <Group align='center' justify='center' mt={'1rem'}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}> <Group w={isMobile ? undefined : '100%'}>
Applications <Text className={textClasses.settingsSubTitle} classNames={textClasses}>
</Text> Applications
<Popover withArrow withOverlay withinPortal={false}> </Text>
<Popover.Target> <Popover withArrow withOverlay withinPortal={false}>
<ActionIcon <Popover.Target>
className={actionIconClasses.settingsTooltip} <ActionIcon
classNames={actionIconClasses} className={actionIconClasses.settingsTooltip}
> classNames={actionIconClasses}
<FiHelpCircle />
</ActionIcon>
</Popover.Target>
<Popover.Dropdown
style={{
color: theme.primaryColor,
backgroundColor: theme.backgroundColor,
width: '500px',
}}
>
<Stack>
<Text className={textClasses.settingsTooltip} classNames={textClasses}>
{'Applications are the apps that will be displayed on the homepage.'}
</Text>
<Highlight
highlight={[
'Applications',
'apps',
'application',
'name',
'base url',
'url',
'icon',
'filter',
]}
className={textClasses.settingsTooltip}
classNames={textClasses}
highlightStyles={{
backgroundImage:
'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
fontWeight: 700,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
> >
{ <FiHelpCircle />
'Applications contain a name, base url, url, icon and filter. Currently the icon must be the mdi icon name. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.' </ActionIcon>
} </Popover.Target>
</Highlight> <Popover.Dropdown
</Stack> style={{
</Popover.Dropdown> color: theme.primaryColor,
</Popover> backgroundColor: theme.backgroundColor,
<Button width: '500px',
className={buttonClasses.tableButton} }}
classNames={buttonClasses} >
onClick={openModal} <Stack>
> <Text className={textClasses.settingsTooltip} classNames={textClasses}>
<FiPlus /> {'Applications are the apps that will be displayed on the homepage.'}
</Button> </Text>
<Highlight
highlight={[
'Applications',
'apps',
'application',
'name',
'base url',
'url',
'icon',
'filter',
]}
className={textClasses.settingsTooltip}
classNames={textClasses}
highlightStyles={{
backgroundImage:
'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
fontWeight: 700,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
{
'Applications contain a name, base url, url, icon and filter. Currently the icon must be the mdi icon name. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.'
}
</Highlight>
</Stack>
</Popover.Dropdown>
</Popover>
<Button
className={buttonClasses.tableButton}
classNames={buttonClasses}
onClick={openModal}
>
<FiPlus />
</Button>
</Group>
<TextInput <TextInput
w={isMobile ? undefined : '35%'}
pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}
classNames={textInputClasses} classNames={textInputClasses}
autoFocus autoFocus

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

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

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

@@ -145,66 +145,70 @@ const BookmarkSettings = () => {
</Modal.Body> </Modal.Body>
</Modal.Content> </Modal.Content>
</Modal.Root> </Modal.Root>
<Group align='center'> <Group align='center' justify='center' mt={'1rem'}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}> <Group w={isMobile ? undefined : '100%'}>
Bookmarks <Text className={textClasses.settingsSubTitle} classNames={textClasses}>
</Text> Bookmarks
<Popover withArrow withOverlay withinPortal={false}> </Text>
<Popover.Target> <Popover withArrow withOverlay withinPortal={false}>
<ActionIcon <Popover.Target>
className={actionIconClasses.settingsTooltip} <ActionIcon
classNames={actionIconClasses} className={actionIconClasses.settingsTooltip}
> classNames={actionIconClasses}
<FiHelpCircle />
</ActionIcon>
</Popover.Target>
<Popover.Dropdown
style={{
color: theme.primaryColor,
backgroundColor: theme.backgroundColor,
width: '500px',
}}
>
<Stack>
<Text className={textClasses.settingsTooltip} classNames={textClasses}>
{'Bookmarks are the links that will be displayed on the homepage.'}
</Text>
<Highlight
highlight={[
'Bookmark',
'Bookmarks',
'Group',
'Groups',
'Link',
'Links',
'Category',
'Categories',
]}
className={textClasses.settingsTooltip}
classNames={textClasses}
highlightStyles={{
backgroundImage:
'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
fontWeight: 700,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
> >
{ <FiHelpCircle />
'Bookmarks can only belong to a single category, and will be displayed under that category on the homepage.' </ActionIcon>
} </Popover.Target>
</Highlight> <Popover.Dropdown
</Stack> style={{
</Popover.Dropdown> color: theme.primaryColor,
</Popover> backgroundColor: theme.backgroundColor,
<Button width: '500px',
className={buttonClasses.tableButton} }}
classNames={buttonClasses} >
onClick={openModal} <Stack>
> <Text className={textClasses.settingsTooltip} classNames={textClasses}>
<FiPlus /> {'Bookmarks are the links that will be displayed on the homepage.'}
</Button> </Text>
<Highlight
highlight={[
'Bookmark',
'Bookmarks',
'Group',
'Groups',
'Link',
'Links',
'Category',
'Categories',
]}
className={textClasses.settingsTooltip}
classNames={textClasses}
highlightStyles={{
backgroundImage:
'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
fontWeight: 700,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
{
'Bookmarks can only belong to a single category, and will be displayed under that category on the homepage.'
}
</Highlight>
</Stack>
</Popover.Dropdown>
</Popover>
<Button
className={buttonClasses.tableButton}
classNames={buttonClasses}
onClick={openModal}
>
<FiPlus />
</Button>
</Group>
<TextInput <TextInput
w={isMobile ? undefined : '35%'}
pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}
classNames={textInputClasses} classNames={textInputClasses}
autoFocus 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 { IconTrash } from '@tabler/icons-react';
import { useCommonHooks, useMutationAPI } from 'hooks'; import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { FiPlus } from 'react-icons/fi';
import { buttonClasses, cardClasses, modalClasses, textInputClasses } from 'styles'; import { buttonClasses, cardClasses, modalClasses, textInputClasses } from 'styles';
import BookmarkSettingsItem from './BookmarkSettingsItem'; import BookmarkSettingsItem from './BookmarkSettingsItem';
import DebouncedBookmarkItem from './DebouncedBookmarkItem'; import DebouncedBookmarkItem from './DebouncedBookmarkItem';
@@ -242,7 +243,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
}); });
}} }}
> >
Add bookmark <FiPlus /> Bookmark
</Button> </Button>
</Popover.Target> </Popover.Target>
<Popover.Dropdown <Popover.Dropdown

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

@@ -134,57 +134,63 @@ const MessageSettings = () => {
</Modal.Body> </Modal.Body>
</Modal.Content> </Modal.Content>
</Modal.Root> </Modal.Root>
<Group align='center'> <Group align='center' justify='center' mt={'1rem'}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}> <Group w={isMobile ? undefined : '100%'}>
Messages <Text className={textClasses.settingsSubTitle} classNames={textClasses}>
</Text> Messages
<Popover withArrow withOverlay withinPortal={false}> </Text>
<Popover.Target> <Popover withArrow withOverlay withinPortal={false}>
<ActionIcon <Popover.Target>
className={actionIconClasses.settingsTooltip} <ActionIcon
classNames={actionIconClasses} className={actionIconClasses.settingsTooltip}
> classNames={actionIconClasses}
<FiHelpCircle />
</ActionIcon>
</Popover.Target>
<Popover.Dropdown
style={{
color: theme.primaryColor,
backgroundColor: theme.backgroundColor,
width: '500px',
}}
>
<Stack>
<Text className={textClasses.settingsTooltip} classNames={textClasses}>
{'These custom messages will be displayed in the header on the homepage.'}
</Text>
<Highlight
highlight={['$firstName', '$lastName', '$^firstName', '$^lastName']}
className={textClasses.settingsTooltip}
classNames={textClasses}
highlightStyles={{
backgroundImage:
'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
fontWeight: 700,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
> >
{ <FiHelpCircle />
'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.' </ActionIcon>
} </Popover.Target>
</Highlight> <Popover.Dropdown
</Stack> style={{
</Popover.Dropdown> color: theme.primaryColor,
</Popover> backgroundColor: theme.backgroundColor,
<Button width: '500px',
className={buttonClasses.tableButton} }}
classNames={buttonClasses} >
onClick={openModal} <Stack>
> <Text className={textClasses.settingsTooltip} classNames={textClasses}>
<FiPlus /> {
</Button> 'These custom messages will be displayed in the header on the homepage.'
}
</Text>
<Highlight
highlight={['$firstName', '$lastName', '$^firstName', '$^lastName']}
className={textClasses.settingsTooltip}
classNames={textClasses}
highlightStyles={{
backgroundImage:
'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
fontWeight: 700,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
{
'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.'
}
</Highlight>
</Stack>
</Popover.Dropdown>
</Popover>
<Button
className={buttonClasses.tableButton}
classNames={buttonClasses}
onClick={openModal}
>
<FiPlus />
</Button>
</Group>
<TextInput <TextInput
w={isMobile ? undefined : '35%'}
pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}
classNames={textInputClasses} classNames={textInputClasses}
autoFocus autoFocus

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

@@ -157,57 +157,61 @@ const SearchProviderSettings = () => {
</Modal.Body> </Modal.Body>
</Modal.Content> </Modal.Content>
</Modal.Root> </Modal.Root>
<Group align='center'> <Group align='center' justify='center' mt={'1rem'}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}> <Group w={isMobile ? undefined : '100%'}>
Search Providers <Text className={textClasses.settingsSubTitle} classNames={textClasses}>
</Text> Search Providers
<Popover withArrow withOverlay withinPortal={false}> </Text>
<Popover.Target> <Popover withArrow withOverlay withinPortal={false}>
<ActionIcon <Popover.Target>
className={actionIconClasses.settingsTooltip} <ActionIcon
classNames={actionIconClasses} className={actionIconClasses.settingsTooltip}
> classNames={actionIconClasses}
<FiHelpCircle />
</ActionIcon>
</Popover.Target>
<Popover.Dropdown
style={{
color: theme.primaryColor,
backgroundColor: theme.backgroundColor,
width: '500px',
}}
>
<Stack>
<Text className={textClasses.settingsTooltip} classNames={textClasses}>
{'Search providers and shortcuts can be configured here.'}
</Text>
<Highlight
highlight={['Providers', 'search']}
className={textClasses.settingsTooltip}
classNames={textClasses}
highlightStyles={{
backgroundImage:
'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
fontWeight: 700,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
> >
{ <FiHelpCircle />
'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.' </ActionIcon>
} </Popover.Target>
</Highlight> <Popover.Dropdown
</Stack> style={{
</Popover.Dropdown> color: theme.primaryColor,
</Popover> backgroundColor: theme.backgroundColor,
<Button width: '500px',
className={buttonClasses.tableButton} }}
classNames={buttonClasses} >
onClick={openModal} <Stack>
> <Text className={textClasses.settingsTooltip} classNames={textClasses}>
<FiPlus /> {'Search providers and shortcuts can be configured here.'}
</Button> </Text>
<Highlight
highlight={['Providers', 'search']}
className={textClasses.settingsTooltip}
classNames={textClasses}
highlightStyles={{
backgroundImage:
'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
fontWeight: 700,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
{
'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.'
}
</Highlight>
</Stack>
</Popover.Dropdown>
</Popover>
<Button
className={buttonClasses.tableButton}
classNames={buttonClasses}
onClick={openModal}
>
<FiPlus />
</Button>
</Group>
<TextInput <TextInput
w={isMobile ? undefined : '35%'}
pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}
classNames={textInputClasses} classNames={textInputClasses}
autoFocus autoFocus

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

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

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

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

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

@@ -9,14 +9,16 @@ import {
Stack, Stack,
Switch, Switch,
Text, Text,
TextInput,
} from '@mantine/core'; } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks'; import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi'; import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
import '@mantine/core/styles/ModalBase.css'; import '@mantine/core/styles/ModalBase.css';
import '@mantine/core/styles/Modal.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 ThemeCard from './ThemeCard';
import ThemeModal from './ThemeModal'; import ThemeModal from './ThemeModal';
function ThemesSettings() { function ThemesSettings() {
@@ -33,7 +35,9 @@ function ThemesSettings() {
const [backgroundList, setBackgroundList] = useState<any>(['None']); const [backgroundList, setBackgroundList] = useState<any>(['None']);
const [selectedTheme, setSelectedTheme] = useState<any>({}); const [selectedTheme, setSelectedTheme] = useState<any>({});
const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false); 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(); useCommonHooks();
const handleOpen = (theme: any) => { const handleOpen = (theme: any) => {
@@ -79,8 +83,8 @@ function ThemesSettings() {
handleSaveTheme={handleSaveTheme} handleSaveTheme={handleSaveTheme}
/> />
<Stack h={'100%'} w={'100%'}> <Stack h={'100%'} w={'100%'}>
<Group w={'100%'} justify='space-between'> <Group w={'100%'} justify='center' align='center' mt={'1rem'}>
<Group> <Group w={isMobile ? undefined : '100%'}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}> <Text className={textClasses.settingsSubTitle} classNames={textClasses}>
Themes Themes
</Text> </Text>
@@ -143,9 +147,30 @@ function ThemesSettings() {
<FiPlus /> <FiPlus />
</Button> </Button>
</Group> </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 <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' labelPosition='left'
pos={'absolute'}
right={isMobile ? '2rem' : '1rem'}
top={isMobile ? '9.5rem' : undefined}
checked={currentTheme === 'random'} checked={currentTheme === 'random'}
onChange={(e) => { onChange={(e) => {
setCurrentTheme(e.target.checked ? 'random' : theme.name); setCurrentTheme(e.target.checked ? 'random' : theme.name);
@@ -166,39 +191,45 @@ function ThemesSettings() {
}} }}
pos={'absolute'} pos={'absolute'}
/> />
{allThemes?.map((cardTheme: any) => ( {allThemes
<Group key={cardTheme.name} pos={'relative'}> ?.filter((a: any) =>
{cardTheme.name === currentTheme && ( a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
<FiChevronRight )
.map((cardTheme: any) => (
<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={{
position: 'absolute', zIndex:
left: -14, currentTheme === 'random' && cardTheme.name === theme.name
zIndex: 1, ? 200
fontSize: '2em', : 0,
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: cardTheme.borderColor,
color:
cardTheme.borderColor === cardTheme.primaryColor
? cardTheme.accentColor
: cardTheme.primaryColor,
}} }}
/> >
)} <ThemeCard
<Box allThemes={allThemes}
style={{ cardTheme={cardTheme}
zIndex: handleOpen={handleOpen}
currentTheme === 'random' && cardTheme.name === theme.name ? 200 : 0, />
}} </Box>
> </Group>
<ThemeCard ))}
allThemes={allThemes}
cardTheme={cardTheme}
handleOpen={handleOpen}
/>
</Box>
</Group>
))}
</Group> </Group>
</Stack> </Stack>
</> </>

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

@@ -145,55 +145,59 @@ const WolClientSettings = () => {
</Modal.Body> </Modal.Body>
</Modal.Content> </Modal.Content>
</Modal.Root> </Modal.Root>
<Group align='center'> <Group align='center' justify='center' mt={'1rem'}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}> <Group w={isMobile ? undefined : '100%'}>
WoL Clients <Text className={textClasses.settingsSubTitle} classNames={textClasses}>
</Text> WoL Clients
<Popover withArrow withOverlay withinPortal={false}> </Text>
<Popover.Target> <Popover withArrow withOverlay withinPortal={false}>
<ActionIcon <Popover.Target>
className={actionIconClasses.settingsTooltip} <ActionIcon
classNames={actionIconClasses} className={actionIconClasses.settingsTooltip}
> classNames={actionIconClasses}
<FiHelpCircle />
</ActionIcon>
</Popover.Target>
<Popover.Dropdown
style={{
color: theme.primaryColor,
backgroundColor: theme.backgroundColor,
}}
>
<Stack>
<Text className={textClasses.settingsTooltip} classNames={textClasses}>
{'Wake on Lan clients can be configured here.'}
</Text>
<Highlight
ta={'center'}
highlight={['Clients', 'homepage']}
className={textClasses.settingsTooltip}
classNames={textClasses}
highlightStyles={{
backgroundImage:
'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
fontWeight: 700,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
> >
{'Clients can be powered on from the settings button the homepage.'} <FiHelpCircle />
</Highlight> </ActionIcon>
</Stack> </Popover.Target>
</Popover.Dropdown> <Popover.Dropdown
</Popover> style={{
<Button color: theme.primaryColor,
className={buttonClasses.tableButton} backgroundColor: theme.backgroundColor,
classNames={buttonClasses} }}
onClick={openModal} >
> <Stack>
<FiPlus /> <Text className={textClasses.settingsTooltip} classNames={textClasses}>
</Button> {'Wake on Lan clients can be configured here.'}
</Text>
<Highlight
ta={'center'}
highlight={['Clients', 'homepage']}
className={textClasses.settingsTooltip}
classNames={textClasses}
highlightStyles={{
backgroundImage:
'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
fontWeight: 700,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
{'Clients can be powered on from the settings button the homepage.'}
</Highlight>
</Stack>
</Popover.Dropdown>
</Popover>
<Button
className={buttonClasses.tableButton}
classNames={buttonClasses}
onClick={openModal}
>
<FiPlus />
</Button>
</Group>
<TextInput <TextInput
w={isMobile ? undefined : '35%'}
pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}
classNames={textInputClasses} classNames={textInputClasses}
autoFocus autoFocus

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

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