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

Toggleable shadows

Browse Source
This commit is contained in:
Sean Edmunds
2025-07-11 22:23:29 -05:00
parent 19497d9748
commit e73dfc97fb
31 changed files with 376 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Applications/AppItem.tsx
View File

@@ -26,11 +26,12 @@ export function AppItem({
const { ref, width, height } = useElementSize();
const allIcons: any = { ...fa6, ...vsc, ...si };
const Icon = allIcons[icon];
const { isMobile } = useCommonHooks();
const { isMobile, theme } = useCommonHooks();
const [textDecoration, setTextDecoration] = useState<string>('none');
const [hover, setHover] = useState<boolean>(false);
const validUrl =
url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
return (
<Box
component='a'
@@ -99,6 +100,7 @@ export function AppItem({
height: scale * 32,
width: scale * 32,
filter:
theme.appShadowsEnabled === 1 &&
'drop-shadow(2px 2px color-mix(in srgb, var(--mantine-color-accent-0), transparent 30%))',
}}
/>

10
src/components/HelpModal/HelpSection.tsx
View File

@@ -1,12 +1,20 @@
import { Group, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { textClasses } from 'styles';
import type { SearchShortcut } from 'types';
import HintItem from './HintItem';
function HelpSection({ name, items }: { name: string; items: SearchShortcut[] }) {
const { theme } = useCommonHooks();
return (
<Group gap={4}>
<Text className={textClasses.helpTitle} classNames={textClasses}>
<Text
className={textClasses.helpTitle}
classNames={textClasses}
style={{
textShadow: theme.textShadowsEnabled && '2px 2px var(--mantine-color-border-0)',
}}
>
{name}
</Text>
<Group

20
src/components/WeatherModal/CurrentWeather.tsx
View File

@@ -10,7 +10,7 @@ import WeatherFeaturePill from './WeatherFeaturePill';
import WeatherIcon from './WeatherIcon';
export default function CurrentWeather({ current }: { current: CW }) {
const { currentLocation, isMobile } = useCommonHooks();
const { currentLocation, isMobile, theme } = useCommonHooks();
const { data: sunStateData } = useSunStateAPI({
lat: currentLocation.lat,
lon: currentLocation.lon,
@@ -45,7 +45,14 @@ export default function CurrentWeather({ current }: { current: CW }) {
overflow: 'visible',
}}
>
<Text className={textClasses.weatherTitle} classNames={textClasses}>
<Text
className={textClasses.weatherTitle}
classNames={textClasses}
style={{
textShadow:
theme.textShadowsEnabled && '2px 2px var(--mantine-color-border-0)',
}}
>
Current Weather
</Text>
<Group gap={32} w={'100%'} align='center' justify='center' pt={'.5rem'}>
@@ -148,6 +155,9 @@ export default function CurrentWeather({ current }: { current: CW }) {
classNames={textClasses}
style={{
textAlign: 'center',
textShadow:
theme.textShadowsEnabled &&
'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
}}
w={'100%'}
>
@@ -190,6 +200,9 @@ export default function CurrentWeather({ current }: { current: CW }) {
classNames={textClasses}
style={{
textAlign: 'center',
textShadow:
theme.textShadowsEnabled &&
'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
}}
w={'100%'}
>
@@ -234,6 +247,9 @@ export default function CurrentWeather({ current }: { current: CW }) {
classNames={textClasses}
style={{
textAlign: 'center',
textShadow:
theme.textShadowsEnabled &&
'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
}}
w={'100%'}
>

10
src/components/WeatherModal/ExtendedForecastCard.tsx
View File

@@ -9,7 +9,7 @@ export default function ExtendedForecastCard({
}: {
forecast: ExtendedForecast[];
}) {
const { isMobile } = useCommonHooks();
const { isMobile, theme } = useCommonHooks();
const day = forecast.slice(2, 14).filter((item: ExtendedForecast) => item.isDaytime);
const night = forecast.slice(2, 14).filter((item: ExtendedForecast) => !item.isDaytime);
return (
@@ -25,7 +25,13 @@ export default function ExtendedForecastCard({
overflow: 'visible',
}}
>
<Text className={textClasses.weatherTitle} classNames={textClasses}>
<Text
className={textClasses.weatherTitle}
classNames={textClasses}
style={{
textShadow: theme.textShadowsEnabled && '2px 2px var(--mantine-color-border-0)',
}}
>
Extended Forecast
</Text>
<SimpleGrid w={'100%'} pt={'.5rem'} cols={isMobile ? 3 : 6}>

12
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 } = useCommonHooks();
const { appSort, appDensity, appScale, theme } = useCommonHooks();
const [applications, setApplications] = useState<Application[]>([]);
useEffect(() => {
@@ -42,7 +42,15 @@ function Applications({ contentType }: { contentType: string[] }) {
<>
{applications.length > 0 && contentType.length > 0 && (
<Stack gap={0}>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
<Text
className={textClasses.sectionTitle}
classNames={textClasses}
style={{
textShadow:
theme.textShadowsEnabled &&
'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
}}
>
Applications
</Text>
<Stack

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

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

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

@@ -22,7 +22,7 @@ function Header({
openWeatherModal: () => void;
}) {
const [time, setTime] = useState(new Date());
const { isMobile, currentUser, fixDigits } = useCommonHooks();
const { isMobile, currentUser, fixDigits, theme } = useCommonHooks();
useEffect(() => {
setInterval(() => {
@@ -80,6 +80,11 @@ function Header({
className={textClasses.greeting}
classNames={textClasses}
fz={isMobile ? 24 : undefined}
style={{
textShadow:
theme.textShadowsEnabled &&
'3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)',
}}
>
{greet
?.replace('$firstName', currentUser.firstName)
@@ -97,7 +102,12 @@ function Header({
<Text
className={textClasses.dateTime}
classNames={textClasses}
style={{ width: 'max-content' }}
style={{
width: 'max-content',
textShadow:
theme.textShadowsEnabled &&
'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
}}
>
{date}
</Text>
@@ -119,7 +129,16 @@ function Header({
}}
onClick={openWeatherModal}
>
<Text className={textClasses.dateTime} classNames={textClasses} mr={'.25rem'}>
<Text
className={textClasses.dateTime}
classNames={textClasses}
mr={'.25rem'}
style={{
textShadow:
theme.textShadowsEnabled &&
'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
}}
>
{current.temperature}°F
</Text>
<Text
@@ -127,11 +146,24 @@ function Header({
classNames={textClasses}
fz={'.875rem'}
mb={'.375rem'}
style={{
textShadow:
theme.textShadowsEnabled &&
'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
}}
>
{current.highTemp}°F/{current.lowTemp}°F
</Text>
</Group>
<Text className={textClasses.dateTime} classNames={textClasses}>
<Text
className={textClasses.dateTime}
classNames={textClasses}
style={{
textShadow:
theme.textShadowsEnabled &&
'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
}}
>
{`${
time.getHours() === 0
? 12

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

@@ -18,7 +18,7 @@ function LargeHeader({
setCurrent: (current: CW) => void;
}) {
const [time, setTime] = useState(new Date());
const { isMobile, currentUser, fixDigits } = useCommonHooks();
const { isMobile, currentUser, fixDigits, theme } = useCommonHooks();
useEffect(() => {
setInterval(() => {
@@ -71,6 +71,11 @@ function LargeHeader({
className={textClasses.greeting}
classNames={textClasses}
fz={isMobile ? '2rem' : '6rem'}
style={{
textShadow:
theme.textShadowsEnabled &&
'3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)',
}}
>
{greet
?.replace('$firstName', currentUser.firstName)
@@ -83,11 +88,26 @@ function LargeHeader({
className={textClasses.dateTime}
classNames={textClasses}
m={0}
style={{ width: 'max-content' }}
style={{
width: 'max-content',
textShadow:
theme.textShadowsEnabled &&
'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
}}
>
{date}
</Text>
<Text fz={'6rem'} m={0} className={textClasses.dateTime} classNames={textClasses}>
<Text
fz={'6rem'}
m={0}
className={textClasses.dateTime}
classNames={textClasses}
style={{
textShadow:
theme.textShadowsEnabled &&
'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
}}
>
{`${
time.getHours() === 0
? 12

12
src/pages/homepage/components/SettingsButton/SettingsCard.tsx
View File

@@ -7,6 +7,7 @@ import {
Stack,
Text,
} from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { multiSelectClasses, selectClasses, sliderClasses, stackClasses } from 'styles';
function SettingsCard({
@@ -32,6 +33,7 @@ function SettingsCard({
scale: any;
setScale: any;
}) {
const { theme } = useCommonHooks();
return (
<Stack
gap={0}
@@ -117,6 +119,11 @@ function SettingsCard({
withinPortal: false,
position: 'top',
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
<Select
label={'Sorting'}
@@ -139,6 +146,11 @@ function SettingsCard({
setSort(option.value);
}}
labelProps={{ top: 8 }}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
</Stack>

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

@@ -56,7 +56,7 @@ const ApplicationSettings = () => {
});
const [applications, setApplications] = useState<Application[]>([]);
const [applicationList, setApplicationList] = useState<Application[]>([]);
const { isMobile, reorder } = useCommonHooks();
const { isMobile, reorder, theme } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [searchValue, setSearchValue] = useState('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
@@ -176,6 +176,11 @@ const ApplicationSettings = () => {
w={'45%'}
classNames={textInputClasses}
withAsterisk
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
<TextInput
key={form.key('baseUrl')}
@@ -185,6 +190,11 @@ const ApplicationSettings = () => {
className={textInputClasses.settingsItem}
w={'45%'}
classNames={textInputClasses}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
<Group w={isMobile ? '94%' : '92%'} justify='center'>
@@ -197,6 +207,11 @@ const ApplicationSettings = () => {
w={'100%'}
classNames={textInputClasses}
withAsterisk
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
<Group w={'100%'} justify='center' pos={'relative'}>
@@ -223,6 +238,11 @@ const ApplicationSettings = () => {
comboboxProps={{
zIndex: 3000,
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
const Icon = allIcons[item.option.value];
return (
@@ -249,6 +269,11 @@ const ApplicationSettings = () => {
classNames={textInputClasses}
defaultValue={defaultApplication.filterName}
withAsterisk
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
<Group mt={'1rem'}>

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

@@ -25,7 +25,7 @@ function DebouncedApplication({
setIsOpen: (isOpen: boolean) => void;
allIcons: any;
}) {
const { handleDelete, isMobile } = useCommonHooks();
const { handleDelete, isMobile, theme } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -103,6 +103,11 @@ function DebouncedApplication({
});
}}
disabled
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
<TextInput
label={'Base URL'}
@@ -115,6 +120,11 @@ function DebouncedApplication({
baseUrl: event.target.value,
});
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
<Group
@@ -134,6 +144,11 @@ function DebouncedApplication({
url: event.target.value,
});
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
<Group
@@ -163,6 +178,11 @@ function DebouncedApplication({
comboboxProps={{
zIndex: 3000,
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
onChange={(value: string | null) => {
setUpdate({
...app,
@@ -194,6 +214,11 @@ function DebouncedApplication({
filterName: event.target.value,
});
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
</Card>

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

@@ -37,7 +37,7 @@ const BookmarkSettings = () => {
const [dragging, setDragging] = useState(false);
const [groups, setGroups] = useState<BookmarkGroup[]>([]);
const [groupList, setGroupList] = useState<BookmarkGroup[]>([]);
const { isMobile, reorder } = useCommonHooks();
const { isMobile, reorder, theme } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [searchValue, setSearchValue] = useState('');
const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
@@ -149,6 +149,11 @@ const BookmarkSettings = () => {
className={textInputClasses.settingsItem}
classNames={textInputClasses}
withAsterisk
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
<TextInput
key={form.key('filterName')}
@@ -158,6 +163,11 @@ const BookmarkSettings = () => {
className={textInputClasses.settingsItem}
classNames={textInputClasses}
withAsterisk
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
<Group mt={'1rem'}>

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

@@ -14,7 +14,7 @@ function DebouncedBookmarkItem({
bookmarkItem: Bookmark;
setIsOpen: (isOpen: boolean) => void;
}) {
const { handleDelete, isMobile } = useCommonHooks();
const { handleDelete, isMobile, theme } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -97,6 +97,11 @@ function DebouncedBookmarkItem({
name: event.target.value,
});
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
<TextInput
label={'Category'}
@@ -109,6 +114,11 @@ function DebouncedBookmarkItem({
category: event.target.value,
});
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
@@ -124,6 +134,11 @@ function DebouncedBookmarkItem({
url: event.target.value,
});
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
</Card>

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

@@ -38,7 +38,7 @@ function DebouncedGroupSettingsItem({
bookmarks: Bookmark[];
searchTerm: string;
}) {
const { isMobile, handleDelete, reorder } = useCommonHooks();
const { isMobile, handleDelete, reorder, theme } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const [popoverOpened, setPopoverOpened] = useState(false);
const { mutateAsync } = useMutationAPI();
@@ -156,6 +156,11 @@ function DebouncedGroupSettingsItem({
categoryName: event.target.value,
});
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
<TextInput
label={'Filter Name'}
@@ -169,6 +174,11 @@ function DebouncedGroupSettingsItem({
filterName: event.target.value,
});
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
<Tooltip
c={'var(--mantine-color-primary-0)'}
@@ -332,6 +342,11 @@ function DebouncedGroupSettingsItem({
pt={'1rem'}
classNames={textInputClasses}
withAsterisk
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
<TextInput
key={form.key('category')}
@@ -342,6 +357,11 @@ function DebouncedGroupSettingsItem({
classNames={textInputClasses}
disabled
defaultValue={group.categoryName}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
<Group w={'100%'} justify='center' mb={60}>
@@ -355,6 +375,11 @@ function DebouncedGroupSettingsItem({
pt={'1rem'}
classNames={textInputClasses}
withAsterisk
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
<Group

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

@@ -15,7 +15,7 @@ function DebouncedMessage({
message: Message;
setMessage: (message: Message) => void;
}) {
const { handleDelete } = useCommonHooks();
const { handleDelete, theme } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
return (
<Card
@@ -70,7 +70,12 @@ function DebouncedMessage({
message: event.target.value,
});
}}
styles={{ root: { paddingTop: '1.25rem' } }}
styles={
theme.textShadowsEnabled && {
root: { paddingTop: '1.25rem' },
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Card>
);

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

@@ -14,7 +14,7 @@ const MessageSettings = () => {
const { data: messageData, isFetched: isMessagesFetched } = useQueryAPI({
endpoint: endpoint,
});
const { isMobile } = useCommonHooks();
const { isMobile, theme } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [messages, setMessages] = useState<Message[]>([]);
const [newMessage, setNewMessage] = useState('');
@@ -91,6 +91,11 @@ const MessageSettings = () => {
setNewMessage(event.target.value);
}}
error={newMessageError}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
<Group mt={'1rem'}>
<Button

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

@@ -19,7 +19,7 @@ const PersonalizationSettings = () => {
const [update, setUpdate] = useState<any>({});
const [debounced] = useDebouncedValue(update, 1000);
const { mutateAsync } = useMutationAPI();
const { isMobile } = useCommonHooks();
const { isMobile, theme } = useCommonHooks();
useEffect(() => {
if (personalData && personalIsFetched) {
@@ -91,6 +91,11 @@ const PersonalizationSettings = () => {
};
setUpdate(updatedPersonal);
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Card>
</GridCol>
@@ -108,6 +113,11 @@ const PersonalizationSettings = () => {
};
setUpdate(updatedPersonal);
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Card>
</GridCol>
@@ -125,6 +135,11 @@ const PersonalizationSettings = () => {
};
setUpdate(updatedPersonal);
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Card>
</GridCol>
@@ -142,6 +157,11 @@ const PersonalizationSettings = () => {
};
setUpdate(updatedPersonal);
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Card>
</GridCol>

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

@@ -14,7 +14,7 @@ function DebouncedSearchProvider({
searchProvider: Provider;
setIsOpen: (isOpen: boolean) => void;
}) {
const { handleDelete, isMobile } = useCommonHooks();
const { handleDelete, isMobile, theme } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -99,6 +99,11 @@ function DebouncedSearchProvider({
name: event.target.value,
});
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
<TextInput
label={'Prefix'}
@@ -111,6 +116,11 @@ function DebouncedSearchProvider({
prefix: event.target.value,
});
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
<TextInput
@@ -125,6 +135,11 @@ function DebouncedSearchProvider({
url: event.target.value,
});
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Stack>
</Card>

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

@@ -40,7 +40,7 @@ const SearchProviderSettings = () => {
endpoint: endpoint,
});
const [providers, setProviders] = useState<Provider[]>([]);
const { isMobile } = useCommonHooks();
const { isMobile, theme } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const [searchValue, setSearchValue] = useState('');
@@ -98,6 +98,11 @@ const SearchProviderSettings = () => {
className={textInputClasses.settingsItem}
classNames={textInputClasses}
withAsterisk
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
<TextInput
key={form.key('prefix')}
@@ -107,6 +112,11 @@ const SearchProviderSettings = () => {
className={textInputClasses.settingsItem}
classNames={textInputClasses}
withAsterisk
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
<TextInput
@@ -118,6 +128,11 @@ const SearchProviderSettings = () => {
w={'64%'}
classNames={textInputClasses}
withAsterisk
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Stack>
<Group mt={'1rem'}>

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

@@ -46,7 +46,7 @@ function SettingsHeader({
isLoading: boolean;
setIsLoading: (isLoading: boolean) => void;
}) {
const { isMobile } = useCommonHooks();
const { isMobile, theme } = useCommonHooks();
const [disabled, setDisabled] = useState(false);
return (
<Group
@@ -136,6 +136,11 @@ function SettingsHeader({
style={{
zIndex: 100,
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
rightSection={
isLoading ? (
<ActionIcon

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

@@ -49,7 +49,7 @@ function BackgroundModal({
const [isLoading, setIsLoading] = useState<boolean>(false);
const [searchValue, setSearchValue] = useState<string>('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const { isMobile } = useCommonHooks();
const { isMobile, theme } = useCommonHooks();
const { mutateAsync: uploadAsync } = useFileUploadAPI();
const fd = new FormData();
const handleFileUpload = (e: any) => {
@@ -110,6 +110,11 @@ function BackgroundModal({
zIndex: 100,
paddingTop: 0,
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
rightSection={
isLoading ? (
<ActionIcon

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

@@ -1,5 +1,5 @@
import { Button, Card, Group, Stack, Text, TextInput } from '@mantine/core';
import { useMutationAPI } from 'hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useState } from 'react';
import { textInputClasses } from 'styles';
@@ -20,6 +20,7 @@ function EditBackground({
}) {
const [rename, setRename] = useState<string>('');
const { mutateAsync } = useMutationAPI();
const { theme } = useCommonHooks();
return (
<Stack
justify='center'
@@ -47,6 +48,11 @@ function EditBackground({
classNames={textInputClasses}
label='New Name'
onChange={(e) => setRename(e.target.value)}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
<Card
style={{

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

@@ -1,6 +1,7 @@
import {
ActionIcon,
Button,
Checkbox,
ColorPicker,
ColorSwatch,
Group,
@@ -41,7 +42,7 @@ function ThemeModal({
closePicker: () => void;
handleSaveTheme: () => void;
}) {
const { isMobile } = useCommonHooks();
const { isMobile, theme } = useCommonHooks();
const viewportRef = useRef<HTMLDivElement>(null);
const [query, setQuery] = useState('');
const [hovered, setHovered] = useState(-1);
@@ -293,7 +294,15 @@ function ThemeModal({
>
{pickerOpen && (
<Stack h={'100%'} align='center' justify='space-between'>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
<Text
className={textClasses.sectionTitle}
classNames={textClasses}
style={{
textShadow:
theme.textShadowsEnabled &&
'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
}}
>
Change {colorId}
</Text>
{colorId === 'backgroundColor' && (
@@ -482,7 +491,27 @@ function ThemeModal({
</Stack>
)}
{!pickerOpen && !backgroundPicker && (
<Stack h={'100%'} align='center' justify='center' gap={0}>
<Stack h={'100%'} align='center' justify='center' gap={4}>
<Checkbox
label='Text Shadows'
checked={selectedTheme.textShadowsEnabled === 1}
onChange={(e) => {
setSelectedTheme({
...selectedTheme,
textShadowsEnabled: e.target.checked ? 1 : 0,
});
}}
/>
<Checkbox
label='App Shadows'
checked={selectedTheme.appShadowsEnabled === 1}
onChange={(e) => {
setSelectedTheme({
...selectedTheme,
appShadowsEnabled: e.target.checked ? 1 : 0,
});
}}
/>
<Button
onClick={() => {
setSelectedTheme({ ...defaultTheme });

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

@@ -46,6 +46,8 @@ function ThemesSettings() {
accentColor: '#5c5c5c',
borderColor: '#5c5c5c',
randomEnabled: 0,
textShadowsEnabled: 0,
appShadowsEnabled: 0,
});
const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
const [searchValue, setSearchValue] = useState('');
@@ -78,6 +80,8 @@ function ThemesSettings() {
accentColor: '#5c5c5c',
borderColor: '#5c5c5c',
randomEnabled: 0,
textShadowsEnabled: 0,
appShadowsEnabled: 0,
});
};

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

@@ -14,7 +14,7 @@ function DebouncedWolClient({
wolClient: WolClient;
setIsOpen: (isOpen: boolean) => void;
}) {
const { handleDelete, isMobile } = useCommonHooks();
const { handleDelete, isMobile, theme } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -96,6 +96,11 @@ function DebouncedWolClient({
hostname: event.target.value,
});
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
<TextInput
label={'MAC Address'}
@@ -108,6 +113,11 @@ function DebouncedWolClient({
macAddress: event.target.value,
});
}}
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
</Card>

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

@@ -33,7 +33,7 @@ const WolClientSettings = () => {
});
const [wolClients, setWolClients] = useState<WolClient[]>([]);
const { mutateAsync } = useMutationAPI();
const { isMobile } = useCommonHooks();
const { isMobile, theme } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const [searchValue, setSearchValue] = useState('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
@@ -85,6 +85,11 @@ const WolClientSettings = () => {
className={textInputClasses.settingsItem}
classNames={textInputClasses}
withAsterisk
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
<TextInput
key={form.key('macAddress')}
@@ -94,6 +99,11 @@ const WolClientSettings = () => {
className={textInputClasses.settingsItem}
classNames={textInputClasses}
withAsterisk
styles={
theme.textShadowsEnabled && {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
}
/>
</Group>
<Group mt={'1rem'}>

1
src/styles/MultiSelect.module.css
View File

@@ -9,7 +9,6 @@
border-radius: 8px;
background-color: var(--mantine-color-primary-0);
color: var(--mantine-color-background-0);
box-shadow: 2px 2px var(--mantine-color-border-0);
z-index: 1;
top: 8px;
}

1
src/styles/Select.module.css
View File

@@ -15,7 +15,6 @@
border-radius: 8px;
background-color: var(--mantine-color-primary-0);
color: var(--mantine-color-background-0);
box-shadow: 2px 2px var(--mantine-color-border-0);
z-index: 1;
top: 18px;
}

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

@@ -4,7 +4,6 @@
font-size: 3.5rem;
width: max-content;
color: var(--mantine-color-accent-0);
text-shadow: 3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%);
}
}
@@ -20,7 +19,6 @@
text-transform: uppercase;
font-weight: 300;
color: var(--mantine-color-primary-0);
text-shadow: 1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%);
}
}
@@ -34,7 +32,6 @@
margin-left: -.25rem;
color: var(--mantine-color-primary-0);
background-color: transparent;
box-shadow: 2px 2px color-mix(in srgb, var(--mantine-color-border-0), transparent 50%);
border-radius: 4px;
padding-left: .5rem;
padding-right: .5rem;
@@ -49,7 +46,6 @@
font-weight: 600;
color: var(--mantine-color-background-0);
background-color: var(--mantine-color-primary-0);
box-shadow: 2px 2px var(--mantine-color-border-0);
border-radius: 4px;
padding-left: .5rem;
padding-right: .5rem;
@@ -68,7 +64,6 @@
border-radius: 8px;
color: var(--mantine-color-background-0);
background-color: var(--mantine-color-primary-0);
box-shadow: 2px 2px var(--mantine-color-border-0);
}
}
@@ -132,7 +127,7 @@
margin-top: 1.5rem;
color: var(--mantine-color-primary-0);
background-color: var(--mantine-color-search-0);
box-shadow: 4px -4px color-mix(in srgb, var(--mantine-color-border-0), transparent 50%);
/* box-shadow: 4px -4px color-mix(in srgb, var(--mantine-color-border-0), transparent 50%); */
border-radius: 8px;
padding-left: .5rem;
padding-right: .5rem;

1
src/styles/TextInput.module.css
View File

@@ -35,7 +35,6 @@
border-radius: 8px;
background-color: var(--mantine-color-primary-0);
color: var(--mantine-color-background-0);
box-shadow: 2px 2px var(--mantine-color-border-0);
z-index: 1;
}
.wrapper {

2
src/types/theme.ts
View File

@@ -8,6 +8,8 @@ export interface Theme {
borderColor: string;
searchColor: string;
randomEnabled: number;
textShadowsEnabled: number;
appShadowsEnabled: number;
}
export interface ThemePlaylist {