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-09-08 16:29:52 -05:00
parent fed970834b
commit 9a5af3f4ef
28 changed files with 197 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@ function Applications({ contentType }: { contentType: string[] }) {
const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
endpoint: 'api/enabledApplications',
});
const { appSort, appDensity, appScale, theme } = useCommonHooks();
const { appSort, appDensity, appScale, theme, textShadowStyle } = useCommonHooks();
const [applications, setApplications] = useState<Application[]>([]);
useEffect(() => {
@@ -54,9 +54,7 @@ function Applications({ contentType }: { contentType: string[] }) {
className={textClasses.sectionTitle}
classNames={textClasses}
style={{
boxShadow: theme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
: undefined,
boxShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
}}
>
Applications

7
src/pages/homepage/components/Bookmarks/Bookmarks.tsx
View File

@@ -12,7 +12,8 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
endpoint: 'api/bookmarkCategories',
});
const { bookmarkSort, bookmarkDensity, bookmarkScale, theme } = useCommonHooks();
const { bookmarkSort, bookmarkDensity, bookmarkScale, theme, textShadowStyle } =
useCommonHooks();
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
const [groups, setGroups] = useState<BookmarkGroup[]>([]);
@@ -72,9 +73,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
mb={'-.5rem'}
mt={'1.25rem'}
style={{
boxShadow: theme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
: undefined,
boxShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
}}
>
Bookmarks

29
src/pages/homepage/components/Header/Header.tsx
View File

@@ -16,7 +16,14 @@ function Header({
openWeatherModal: () => void;
}) {
const [time, setTime] = useState(new Date());
const { isMobile, currentUser, fixDigits, theme } = useCommonHooks();
const {
isMobile,
currentUser,
fixDigits,
theme,
textShadowStyle,
largeTextShadowStyle,
} = useCommonHooks();
useEffect(() => {
setInterval(() => {
@@ -38,9 +45,7 @@ function Header({
classNames={textClasses}
fz={isMobile ? 24 : undefined}
style={{
textShadow: theme.textShadowsEnabled
? '3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)'
: undefined,
textShadow: theme.textShadowsEnabled ? largeTextShadowStyle : undefined,
}}
>
{greet
@@ -61,9 +66,7 @@ function Header({
classNames={textClasses}
style={{
width: 'max-content',
textShadow: theme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
: undefined,
textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
}}
>
{date}
@@ -91,9 +94,7 @@ function Header({
classNames={textClasses}
mr={'.25rem'}
style={{
textShadow: theme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
: undefined,
textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
}}
>
{current.temperature}°F
@@ -104,9 +105,7 @@ function Header({
fz={'.875rem'}
mb={'.375rem'}
style={{
textShadow: theme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
: undefined,
textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
}}
>
{current.highTemp}°F/{current.lowTemp}°F
@@ -116,9 +115,7 @@ function Header({
className={textClasses.dateTime}
classNames={textClasses}
style={{
textShadow: theme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
: undefined,
textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
}}
>
{`${

21
src/pages/homepage/components/Header/LargeHeader.tsx
View File

@@ -5,7 +5,14 @@ import { textClasses } from 'styles';
function LargeHeader({ greet, date }: { greet: string | undefined; date: string }) {
const [time, setTime] = useState(new Date());
const { isMobile, currentUser, fixDigits, theme } = useCommonHooks();
const {
isMobile,
currentUser,
fixDigits,
theme,
textShadowStyle,
largeTextShadowStyle,
} = useCommonHooks();
useEffect(() => {
setInterval(() => {
@@ -21,9 +28,7 @@ function LargeHeader({ greet, date }: { greet: string | undefined; date: string
classNames={textClasses}
fz={isMobile ? '2rem' : '6rem'}
style={{
textShadow: theme.textShadowsEnabled
? '3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)'
: undefined,
textShadow: theme.textShadowsEnabled ? largeTextShadowStyle : undefined,
}}
>
{greet
@@ -39,9 +44,7 @@ function LargeHeader({ greet, date }: { greet: string | undefined; date: string
m={0}
style={{
width: 'max-content',
textShadow: theme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
: undefined,
textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
}}
>
{date}
@@ -52,9 +55,7 @@ function LargeHeader({ greet, date }: { greet: string | undefined; date: string
className={textClasses.dateTime}
classNames={textClasses}
style={{
textShadow: theme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
: undefined,
textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
}}
>
{`${

16
src/pages/homepage/components/SettingsButton/ThemingCard.tsx
View File

@@ -13,7 +13,13 @@ import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FaDice } from 'react-icons/fa';
import { FiShuffle } from 'react-icons/fi';
import { actionIconClasses, selectClasses, stackClasses, textClasses } from 'styles';
import {
actionIconClasses,
selectClasses,
stackClasses,
textClasses,
toolTipClasses,
} from 'styles';
import type { Theme, ThemePlaylist } from 'types';
function ThemingCard() {
@@ -80,9 +86,9 @@ function ThemingCard() {
</Text>
</Stack>
<Tooltip
className={toolTipClasses.default}
classNames={toolTipClasses}
label='Random Theme'
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
withArrow
>
<ActionIcon
@@ -226,9 +232,9 @@ function ThemingCard() {
}}
/>
<Tooltip
className={toolTipClasses.default}
classNames={toolTipClasses}
label='Shuffle Playlist'
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
withArrow
>
<ActionIcon

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

@@ -12,7 +12,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { DeleteItemModal, ManagementPill } from 'components';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { cardClasses, selectClasses, textInputClasses } from 'styles';
import { cardClasses, selectClasses, textClasses, textInputClasses } from 'styles';
import type { Application } from 'types';
function DebouncedApplication({
@@ -61,15 +61,8 @@ function DebouncedApplication({
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
<Text>Are you sure you want to delete this application?</Text>
<Text
style={{
fontWeight: 'bold',
fontSize: '1.25rem',
padding: '.5rem',
margin: '.5rem',
borderRadius: '10px',
backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-background-0)',
}}
className={textClasses.deleteItem}
classNames={textClasses}
>{`"${app.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
</Stack>

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

@@ -209,7 +209,7 @@ const BookmarkSettings = () => {
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Bookmark Groups...'}
searchPlaceholder={'Search Bookmarks...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>

13
src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
View File

@@ -3,7 +3,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { DeleteItemModal, ManagementPill } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { cardClasses, selectClasses, textInputClasses } from 'styles';
import { cardClasses, selectClasses, textClasses, textInputClasses } from 'styles';
import type { Bookmark, BookmarkGroup } from 'types';
function DebouncedBookmarkItem({
@@ -63,15 +63,8 @@ function DebouncedBookmarkItem({
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
<Text>Are you sure you want to delete this bookmark?</Text>
<Text
style={{
fontWeight: 'bold',
fontSize: '1.25rem',
padding: '.5rem',
margin: '.5rem',
borderRadius: '10px',
backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-background-0)',
}}
className={textClasses.deleteItem}
classNames={textClasses}
>{`"${bookmark.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
</Stack>

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

@@ -23,7 +23,13 @@ import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FaChevronLeft } from 'react-icons/fa';
import { FiPlus } from 'react-icons/fi';
import { buttonClasses, cardClasses, popoverClasses, textInputClasses } from 'styles';
import {
buttonClasses,
cardClasses,
popoverClasses,
textClasses,
textInputClasses,
} from 'styles';
import type { Bookmark, BookmarkGroup } from 'types';
import BookmarkSettingsItem from './BookmarkSettingsItem';
import DebouncedBookmarkItem from './DebouncedBookmarkItem';
@@ -119,15 +125,8 @@ function DebouncedGroupSettingsItem({
<Stack gap={0} w={'100%'} h={'175px'} align='center'>
<Text>Are you sure you want to delete this bookmark group?</Text>
<Text
style={{
fontWeight: 'bold',
fontSize: '1.25rem',
padding: '.5rem',
margin: '.5rem',
borderRadius: '10px',
backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-background-0)',
}}
className={textClasses.deleteItem}
classNames={textClasses}
>{`"${group.categoryName}"`}</Text>
<Text style={{ fontWeight: 'bold', textTransform: 'uppercase' }}>
This will also delete all bookmarks in this group!

13
src/pages/settings/components/Messages/DebouncedMessage.tsx
View File

@@ -2,7 +2,7 @@ import { Card, Stack, Text, TextInput } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { DeleteItemModal, ManagementPill } from 'components';
import { useCommonHooks } from 'hooks';
import { cardClasses, textInputClasses } from 'styles';
import { cardClasses, textClasses, textInputClasses } from 'styles';
import type { Message } from 'types';
function DebouncedMessage({
@@ -32,15 +32,8 @@ function DebouncedMessage({
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
<Text>Are you sure you want to delete this message?</Text>
<Text
style={{
fontWeight: 'bold',
fontSize: '1.25rem',
padding: '.5rem',
margin: '.5rem',
borderRadius: '10px',
backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-background-0)',
}}
className={textClasses.deleteItem}
classNames={textClasses}
>{`"${message.message}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
</Stack>

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

@@ -69,7 +69,7 @@ const MessageSettings = () => {
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Message content...'}
searchPlaceholder={'Search Messages...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>

13
src/pages/settings/components/Search/DebouncedSearchProvider.tsx
View File

@@ -3,7 +3,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { DeleteItemModal, ManagementPill } from 'components';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { cardClasses, textInputClasses } from 'styles';
import { cardClasses, textClasses, textInputClasses } from 'styles';
import type { Provider } from 'types';
function DebouncedSearchProvider({
@@ -53,15 +53,8 @@ function DebouncedSearchProvider({
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
<Text>Are you sure you want to delete this Search Provider?</Text>
<Text
style={{
fontWeight: 'bold',
fontSize: '1.25rem',
padding: '.5rem',
margin: '.5rem',
borderRadius: '10px',
backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-background-0)',
}}
className={textClasses.deleteItem}
classNames={textClasses}
>{`"${provider.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
</Stack>

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

@@ -16,7 +16,7 @@ import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiPower } from 'react-icons/fi';
import { popoverClasses, switchClasses, textInputClasses } from 'styles';
import { popoverClasses, switchClasses, textInputClasses, toolTipClasses } from 'styles';
import type { Provider } from 'types';
import DebouncedSearchProvider from './DebouncedSearchProvider';
import SearchProviderSettingsItem from './SearchProviderSettingsItem';
@@ -158,15 +158,10 @@ const SearchProviderSettings = () => {
}}
>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
className={toolTipClasses.default}
classNames={toolTipClasses}
label={'Default'}
refProp='rootRef'
styles={{
tooltip: { marginTop: '-.5rem' },
arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
}}
withArrow
>
<Switch
@@ -208,7 +203,7 @@ const SearchProviderSettings = () => {
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Search providerData...'}
searchPlaceholder={'Search Providers...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>

13
src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistCard.tsx
View File

@@ -12,7 +12,7 @@ import { DeleteItemModal } from 'components';
import { useCommonHooks } from 'hooks';
import { useState } from 'react';
import { FiEdit, FiTrash } from 'react-icons/fi';
import { scrollAreaClasses } from 'styles';
import { scrollAreaClasses, textClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import { ThemeMiniCard } from '../../Themes';
@@ -51,15 +51,8 @@ export function ThemePlaylistCard({
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
<Text>Are you sure you want to delete this Theme Playlist?</Text>
<Text
style={{
fontWeight: 'bold',
fontSize: '1.25rem',
padding: '.5rem',
margin: '.5rem',
borderRadius: '10px',
backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-background-0)',
}}
className={textClasses.deleteItem}
classNames={textClasses}
>{`"${cardPlaylist.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
</Stack>

12
src/pages/settings/components/Theming/Themes/ThemeCard/ThemeCard.tsx
View File

@@ -7,6 +7,7 @@ import {
} from '@mantine/hooks';
import { DeleteItemModal } from 'components';
import { useCommonHooks } from 'hooks';
import { textClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import { MiniAppItem } from './components/MiniAppItem';
import { MiniGroupItem } from './components/MiniGroupItem';
@@ -57,15 +58,8 @@ export function ThemeCard({
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
<Text>Are you sure you want to delete this theme?</Text>
<Text
style={{
fontWeight: 'bold',
fontSize: '1.25rem',
padding: '.5rem',
margin: '.5rem',
borderRadius: '10px',
backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-background-0)',
}}
className={textClasses.deleteItem}
classNames={textClasses}
>{`"${cardTheme.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
</Stack>

109
src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeEditor.tsx
View File

@@ -18,7 +18,13 @@ import { useCommonHooks } from 'hooks';
import { useRef, useState } from 'react';
import { FaShuffle } from 'react-icons/fa6';
import { FiImage, FiSave, FiShuffle, FiX } from 'react-icons/fi';
import { scrollAreaClasses, textClasses, textInputClasses } from 'styles';
import {
colorSwatchClasses,
scrollAreaClasses,
textClasses,
textInputClasses,
toolTipClasses,
} from 'styles';
import { BackgroundProperties, type Theme } from 'types';
import { ThemeModalContent } from './ThemeModalContent';
@@ -53,7 +59,7 @@ export function ThemeEditor({
}) {
const [query, setQuery] = useState('');
const [hovered, setHovered] = useState(-1);
const { isMobile, theme, getObjectDiff } = useCommonHooks();
const { isMobile, theme, getObjectDiff, textShadowStyle } = useCommonHooks();
const viewportRef = useRef<HTMLDivElement>(null);
const [colorId, setColorId] = useState<string>('');
const [colorValue, setColorValue] = useState('#000000');
@@ -124,7 +130,9 @@ export function ThemeEditor({
);
});
const handleSwatchClick = () => {
const handleSwatchClick = (colorId: string, colorValue: string) => {
setColorId(colorId || '');
setColorValue(colorValue || '');
closeBackgroundPicker();
openPicker();
setDesignerTheme(selectedTheme);
@@ -140,108 +148,98 @@ export function ThemeEditor({
};
return (
<>
<Group p={'2rem'} w={'100%'} align='flex-start' justify='space-between'>
<Stack display={'flex'} pos={'relative'} w={isMobile ? '100%' : '70%'}>
<Group p={'2rem'} w={'100%'} justify='space-between'>
<Stack pos={'relative'} w={isMobile ? '100%' : '70%'}>
<ThemeModalContent selectedTheme={designerTheme} />
<Tooltip
label={'Change Primary Color'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
className={toolTipClasses.default}
classNames={toolTipClasses}
>
<ColorSwatch
onClick={() => {
setColorId('primaryColor');
setColorValue(selectedTheme.primaryColor);
handleSwatchClick();
handleSwatchClick('primaryColor', selectedTheme.primaryColor);
}}
color={selectedTheme.primaryColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
style={{ borderColor: selectedTheme.primaryColor }}
className={colorSwatchClasses.themeDesignerSwatch}
classNames={colorSwatchClasses}
top={'11.5rem'}
left={'8.5rem'}
style={{ cursor: 'pointer' }}
/>
</Tooltip>
<Tooltip
label={'Change Accent Color'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
className={toolTipClasses.default}
classNames={toolTipClasses}
>
<ColorSwatch
onClick={() => {
setColorId('accentColor');
setColorValue(selectedTheme.accentColor);
handleSwatchClick();
handleSwatchClick('accentColor', selectedTheme.accentColor);
}}
color={selectedTheme.accentColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
style={{ borderColor: selectedTheme.primaryColor }}
className={colorSwatchClasses.themeDesignerSwatch}
classNames={colorSwatchClasses}
bottom={'6rem'}
left={'11rem'}
style={{ cursor: 'pointer' }}
/>
</Tooltip>
<Tooltip
label={'Change Background Color'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
className={toolTipClasses.default}
classNames={toolTipClasses}
>
<ColorSwatch
onClick={() => {
setColorId('backgroundColor');
setColorValue(selectedTheme.backgroundColor);
handleSwatchClick();
handleSwatchClick('backgroundColor', selectedTheme.backgroundColor);
}}
color={selectedTheme.backgroundColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
style={{ borderColor: selectedTheme.primaryColor }}
className={colorSwatchClasses.themeDesignerSwatch}
classNames={colorSwatchClasses}
bottom={'4rem'}
right={'3.5rem'}
style={{ cursor: 'pointer' }}
/>
</Tooltip>
<Tooltip
label={'Change Border Color'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
className={toolTipClasses.default}
classNames={toolTipClasses}
>
<ColorSwatch
onClick={() => {
setColorId('borderColor');
setColorValue(selectedTheme.borderColor);
handleSwatchClick();
handleSwatchClick('borderColor', selectedTheme.borderColor);
}}
color={selectedTheme.borderColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
style={{ borderColor: selectedTheme.primaryColor }}
className={colorSwatchClasses.themeDesignerSwatch}
classNames={colorSwatchClasses}
top={'4.5rem'}
right={'15%'}
style={{ cursor: 'pointer' }}
/>
</Tooltip>
<Tooltip
label={'Change Search Color'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
className={toolTipClasses.default}
classNames={toolTipClasses}
>
<ColorSwatch
onClick={() => {
setColorId('searchColor');
setColorValue(selectedTheme.searchColor);
handleSwatchClick();
handleSwatchClick('searchColor', selectedTheme.searchColor);
}}
color={selectedTheme.searchColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
style={{ borderColor: selectedTheme.primaryColor }}
className={colorSwatchClasses.themeDesignerSwatch}
classNames={colorSwatchClasses}
top={'3.25rem'}
left={'6.5rem'}
style={{ cursor: 'pointer' }}
/>
</Tooltip>
<Tooltip
label={'Change Background'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
className={toolTipClasses.default}
classNames={toolTipClasses}
>
<ActionIcon
onClick={() => {
@@ -273,15 +271,13 @@ export function ThemeEditor({
}}
>
{pickerOpen && (
<Stack h={'100%'} align='center' justify='space-between'>
<Stack h={'100%'} align='center'>
<Text
className={textClasses.sectionTitle}
classNames={textClasses}
c={'var(--mantine-color-background-0)'}
style={{
textShadow: theme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
: undefined,
textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
}}
>
Change{' '}
@@ -372,6 +368,17 @@ export function ThemeEditor({
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
styles={{
label: {
color: 'var(--mantine-color-primary-0)',
},
input: {
color: selectedTheme.primaryColor,
backgroundColor: selectedTheme.backgroundColor,
border: 'none',
borderBottom: '1px solid var(--mantine-color-primary-0)',
},
}}
placeholder='Search'
value={query.replace(/\.[^/.]+$/, '')}
rightSection={

14
src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeModalContent.tsx
View File

@@ -1,9 +1,11 @@
import { Group, Select, Stack, Text } from '@mantine/core';
import { AppItem } from 'components';
import { useCommonHooks } from 'hooks';
import { selectClasses, textClasses } from 'styles';
import type { Theme } from 'types';
export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
const { textShadowStyle, largeTextShadowStyle } = useCommonHooks();
return (
<Stack
style={{
@@ -65,9 +67,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
m={0}
w={'100%'}
style={{
textShadow: selectedTheme.textShadowsEnabled
? '3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)'
: undefined,
textShadow: selectedTheme.textShadowsEnabled ? largeTextShadowStyle : undefined,
transition: 'all 0.2s ease',
}}
>
@@ -78,9 +78,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
className={textClasses.sectionTitle}
classNames={textClasses}
style={{
boxShadow: selectedTheme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
: undefined,
boxShadow: selectedTheme.textShadowsEnabled ? textShadowStyle : undefined,
transition: 'all 0.2s ease',
}}
>
@@ -148,9 +146,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
mb={'-.5rem'}
mt={0}
style={{
boxShadow: selectedTheme.textShadowsEnabled
? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
: undefined,
boxShadow: selectedTheme.textShadowsEnabled ? textShadowStyle : undefined,
transition: 'all 0.2s ease',
}}
>

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

@@ -16,7 +16,7 @@ import { useEffect, useState } from 'react';
import { FaDice } from 'react-icons/fa';
import { FiChevronRight, FiEdit, FiMousePointer, FiStopCircle } from 'react-icons/fi';
import { useNavigate } from 'react-router-dom';
import { switchClasses, textClasses } from 'styles';
import { switchClasses, textClasses, toolTipClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import { BackgroundModal } from '../Backgrounds';
import { ThemeCard } from './ThemeCard';
@@ -325,9 +325,9 @@ export function Themes() {
)}
</Button>
<Tooltip
className={toolTipClasses.default}
classNames={toolTipClasses}
label='Shuffle is always on when a playlist is active.'
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
disabled={currentThemePlaylist === 'All'}
>
<Group>

18
src/pages/settings/components/WoL/DebouncedWolClient.tsx
View File

@@ -4,7 +4,7 @@ import { DeleteItemModal } from 'components';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiTrash } from 'react-icons/fi';
import { cardClasses, textInputClasses } from 'styles';
import { cardClasses, textClasses, textInputClasses, toolTipClasses } from 'styles';
import type { WolClient } from 'types';
function DebouncedWolClient({
@@ -53,24 +53,16 @@ function DebouncedWolClient({
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
<Text>Are you sure you want to delete this WoL Client?</Text>
<Text
style={{
fontWeight: 'bold',
fontSize: '1.25rem',
padding: '.5rem',
margin: '.5rem',
borderRadius: '10px',
backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-background-0)',
}}
className={textClasses.deleteItem}
classNames={textClasses}
>{`"${client.hostname}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
</Stack>
}
/>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
className={toolTipClasses.default}
classNames={toolTipClasses}
label={'Delete'}
>
<ActionIcon