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

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>