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-07-11 15:26:00 -05:00
parent 5a0b354793
commit 20fc0cbca7
15 changed files with 400 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
package-lock.json generated
View File

@@ -13,9 +13,9 @@
"@mantine/form": "^8.1.3",
"@mantine/hooks": "^8.1.3",
"@mantine/notifications": "^8.1.3",
"@tanstack/react-query": "^5.82.0",
"@tanstack/react-query-devtools": "^5.82.0",
"@tanstack/react-query-persist-client": "^5.82.0",
"@tanstack/react-query": "^5.83.0",
"@tanstack/react-query-devtools": "^5.83.0",
"@tanstack/react-query-persist-client": "^5.83.0",
"idb-keyval": "^6.2.2",
"jotai": "^2.12.5",
"react": "^19.1.0",
@@ -25,7 +25,7 @@
"recharts": "^3.1.0"
},
"devDependencies": {
"@types/node": "^24.0.12",
"@types/node": "^24.0.13",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.6.0",
@@ -1630,9 +1630,9 @@
"license": "MIT"
},
"node_modules/@tanstack/query-core": {
"version": "5.82.0",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.82.0.tgz",
"integrity": "sha512-JrjoVuaajBQtnoWSg8iaPHaT4mW73lK2t+exxHNOSMqy0+13eKLqJgTKXKImLejQIfdAHQ6Un0njEhOvUtOd5w==",
"version": "5.83.0",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.83.0.tgz",
"integrity": "sha512-0M8dA+amXUkyz5cVUm/B+zSk3xkQAcuXuz5/Q/LveT4ots2rBpPTZOzd7yJa2Utsf8D2Upl5KyjhHRY+9lB/XA==",
"license": "MIT",
"funding": {
"type": "github",
@@ -1650,12 +1650,12 @@
}
},
"node_modules/@tanstack/query-persist-client-core": {
"version": "5.82.0",
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.82.0.tgz",
"integrity": "sha512-lcjS9Zj9YKo5HNNB/GilPNZos9jKpNqpxmgPkJx2NsKEbgiVfyzWVxKAa09bkhKyWMQ/gMp8kx2RPuh/tG2wSw==",
"version": "5.83.0",
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.83.0.tgz",
"integrity": "sha512-hdKgHkr1MYnwZX+QHj/9JjXZx9gL2RUCD5xSX0EHZiqUQhMk4Gcryq9xosn8LmYRMlhkjk7n9uV+X4UXRvgoIg==",
"license": "MIT",
"dependencies": {
"@tanstack/query-core": "5.82.0"
"@tanstack/query-core": "5.83.0"
},
"funding": {
"type": "github",
@@ -1663,12 +1663,12 @@
}
},
"node_modules/@tanstack/react-query": {
"version": "5.82.0",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.82.0.tgz",
"integrity": "sha512-mnk8/ofKEthFeMdhV1dV8YXRf+9HqvXAcciXkoo755d/ocfWq7N/Y9jGOzS3h7ZW9dDGwSIhs3/HANWUBsyqYg==",
"version": "5.83.0",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.83.0.tgz",
"integrity": "sha512-/XGYhZ3foc5H0VM2jLSD/NyBRIOK4q9kfeml4+0x2DlL6xVuAcVEW+hTlTapAmejObg0i3eNqhkr2dT+eciwoQ==",
"license": "MIT",
"dependencies": {
"@tanstack/query-core": "5.82.0"
"@tanstack/query-core": "5.83.0"
},
"funding": {
"type": "github",
@@ -1679,9 +1679,9 @@
}
},
"node_modules/@tanstack/react-query-devtools": {
"version": "5.82.0",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.82.0.tgz",
"integrity": "sha512-MC05Zq3zr/59jhgF7dL6JSGPg1krbasDSizmRxjNcvxgh/sUTwRFD9CGN10YYX7LB6jq0ZpFtCjSVGdLiFrKAA==",
"version": "5.83.0",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.83.0.tgz",
"integrity": "sha512-yfp8Uqd3I1jgx8gl0lxbSSESu5y4MO2ThOPBnGNTYs0P+ZFu+E9g5IdOngyUGuo6Uz6Qa7p9TLdZEX3ntik2fQ==",
"license": "MIT",
"dependencies": {
"@tanstack/query-devtools": "5.81.2"
@@ -1691,24 +1691,24 @@
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"@tanstack/react-query": "^5.82.0",
"@tanstack/react-query": "^5.83.0",
"react": "^18 || ^19"
}
},
"node_modules/@tanstack/react-query-persist-client": {
"version": "5.82.0",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.82.0.tgz",
"integrity": "sha512-5gzGHxq7XerI8SWSj19DHS4YrivlszumeyP4fPPhrfB3Awky/3c4lI3WBc1mDFsH21rKb0aXF15FSDsnNeN60w==",
"version": "5.83.0",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.83.0.tgz",
"integrity": "sha512-uEqJnSbqlvzlhYJ+RU+2c2DmbbT7cw6eFjiewEXZFXaSGWNjvUG02LePrwL8cdLlRQFcZKas30IdckboOoVg9Q==",
"license": "MIT",
"dependencies": {
"@tanstack/query-persist-client-core": "5.82.0"
"@tanstack/query-persist-client-core": "5.83.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"@tanstack/react-query": "^5.82.0",
"@tanstack/react-query": "^5.83.0",
"react": "^18 || ^19"
}
},
@@ -1847,9 +1847,9 @@
"license": "MIT"
},
"node_modules/@types/node": {
"version": "24.0.12",
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.12.tgz",
"integrity": "sha512-LtOrbvDf5ndC9Xi+4QZjVL0woFymF/xSTKZKPgrrl7H7XoeDvnD+E2IclKVDyaK9UM756W/3BXqSU+JEHopA9g==",
"version": "24.0.13",
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.13.tgz",
"integrity": "sha512-Qm9OYVOFHFYg3wJoTSrz80hoec5Lia/dPp84do3X7dZvLikQvM1YpmvTBEdIr/e+U8HTkFjLHLnl78K/qjf+jQ==",
"dev": true,
"license": "MIT",
"dependencies": {

8
package.json
View File

@@ -15,9 +15,9 @@
"@mantine/form": "^8.1.3",
"@mantine/hooks": "^8.1.3",
"@mantine/notifications": "^8.1.3",
"@tanstack/react-query": "^5.82.0",
"@tanstack/react-query-devtools": "^5.82.0",
"@tanstack/react-query-persist-client": "^5.82.0",
"@tanstack/react-query": "^5.83.0",
"@tanstack/react-query-devtools": "^5.83.0",
"@tanstack/react-query-persist-client": "^5.83.0",
"idb-keyval": "^6.2.2",
"jotai": "^2.12.5",
"react": "^19.1.0",
@@ -27,7 +27,7 @@
"recharts": "^3.1.0"
},
"devDependencies": {
"@types/node": "^24.0.12",
"@types/node": "^24.0.13",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.6.0",

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

@@ -1,30 +1,20 @@
import { Group } from '@mantine/core';
import { Group, Text } from '@mantine/core';
import { textClasses } from 'styles';
import type { SearchShortcut } from 'types';
import HintItem from './HintItem';
function HelpSection({ name, items }: { name: string; items: SearchShortcut[] }) {
return (
<>
<h3
style={{
zIndex: 0,
padding: '.5rem',
marginTop: 0,
marginBottom: '-1.25rem',
borderRadius: '8px',
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-border-0)',
}}
>
<Group gap={4}>
<Text className={textClasses.helpTitle} classNames={textClasses}>
{name}
</h3>
</Text>
<Group
style={{
width: '100%',
backgroundColor: 'var(--mantine-color-search-0)',
borderRadius: '8px',
padding: '1.5rem',
justifyItems: 'center',
}}
>
{items
@@ -35,7 +25,7 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
<HintItem key={item.command} command={item.command} name={item.name} />
))}
</Group>
</>
</Group>
);
}

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

@@ -1,11 +1,12 @@
import { Grid, Group, Stack, Text, ThemeIcon } from '@mantine/core';
import { Box, Card, Group, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useSunStateAPI } from 'hooks/useAPI';
import { useEffect, useState } from 'react';
import { FaLongArrowAltDown, FaLongArrowAltUp, FaWind } from 'react-icons/fa';
import { WiBarometer, WiHumidity, WiSunrise, WiSunset } from 'react-icons/wi';
import { themeIconClasses } from 'styles';
import { textClasses } from 'styles';
import type { CurrentWeather as CW, SunState } from 'types';
import WeatherFeaturePill from './WeatherFeaturePill';
import WeatherIcon from './WeatherIcon';
export default function CurrentWeather({ current }: { current: CW }) {
@@ -33,36 +34,45 @@ export default function CurrentWeather({ current }: { current: CW }) {
return (
<>
{current && (
<Stack
gap={0}
justify='space-between'
<Card
style={{
width: '100%',
color: 'var(--mantine-color-primary-0)',
backgroundColor: 'var(--mantine-color-search-0)',
padding: '1rem',
borderRadius: '8px',
paddingBottom: '.5rem',
marginTop: '1rem',
overflow: 'visible',
}}
>
<Group
gap={0}
justify='space-between'
style={{ width: '100%', paddingLeft: '1rem' }}
>
<Text
style={{
fontSize: '1.375rem',
textAlign: 'right',
}}
>
<Text className={textClasses.weatherTitle} classNames={textClasses}>
Current Weather
</Text>
</Group>
<Group gap={8} justify='space-between'>
<Stack gap={0} w={isMobile ? '40%' : '45%'}>
<Group gap={0} justify='flex-end'>
<Group gap={32} w={'100%'} align='center' justify='center' pt={'.5rem'}>
<Stack gap={4} align='center'>
<Stack
gap={0}
style={{
overflow: 'hidden',
backgroundColor: 'var(--mantine-color-background-0)',
border: 'thin solid var(--mantine-color-primary-0)',
zIndex: 1,
padding: '1rem',
borderRadius: '8px',
}}
>
<Group pos={'relative'}>
<Box
style={{
position: 'absolute',
right: '-1.25rem',
bottom: '-1.25rem',
zIndex: -1,
opacity: 0.5,
}}
>
<WeatherIcon
size={'lg'}
textDescription={`${
current.textDescription.includes('and')
? current.textDescription.substring(
@@ -77,179 +87,198 @@ export default function CurrentWeather({ current }: { current: CW }) {
: current.textDescription
}`}
/>
<Text fz={isMobile ? '5rem' : '7rem'} fw={200}>
</Box>
<Text fz={isMobile ? '5rem' : '7rem'} fw={400}>
{current.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup>
</Text>
</Group>
<Text
<Box
style={{
fontSize: '1.375rem',
textAlign: 'right',
marginTop: '-2rem',
marginLeft: '1rem',
position: 'absolute',
backgroundColor:
'color-mix(in srgb, var(--mantine-color-accent-0), transparent 80%)',
height: '200%',
width: '100%',
bottom: -40,
right: -72,
transform: 'skewX(-25deg)',
zIndex: -1,
borderRadius: '2px',
backdropFilter: 'brightness(0.5)',
}}
/>
</Group>
<Group
justify={current.textDescription.length > 25 ? 'flex-start' : 'center'}
style={{
width: '100%',
maxWidth: '180px',
whiteSpace: 'nowrap',
overflow: 'hidden',
boxSizing: 'border-box',
position: 'relative',
}}
>
<Text
className={
current.textDescription.length > 25
? textClasses.autoScrollText
: undefined
}
classNames={textClasses}
>
{current.temperature === 69 ? 'Nice' : current.textDescription}
</Text>
</Group>
</Stack>
<Stack gap={4} w={isMobile ? '50%' : '45%'}>
<WeatherFeaturePill
leftSide={<Text>Feels like </Text>}
rightSide={
<Text>
Feels like {current.heatIndex ?? current.windChill ?? current.temperature}
°<sup>F</sup>
{current.heatIndex ?? current.windChill ?? current.temperature}°
<sup>F</sup>
</Text>
<Grid align='center'>
<Grid.Col span={1}>
<ThemeIcon
className={themeIconClasses.weatherIcon}
classNames={themeIconClasses}
>
<FaLongArrowAltUp size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col
span={3}
}
highlight='right'
/>
</Stack>
<Stack gap={10}>
<Stack gap={0} align='center'>
<Text
className={textClasses.sectionTitle}
classNames={textClasses}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
textAlign: 'center',
}}
w={'100%'}
>
Temperatures
</Text>
<Group justify='center'>
<WeatherFeaturePill
leftSide={
<Group gap={0}>
<FaLongArrowAltUp size={16} />
High
</Group>
}
rightSide={
<Text>
{current.highTemp}°<sup>F</sup>
</Text>
</Grid.Col>
<Grid.Col span={1}>
<ThemeIcon
className={themeIconClasses.weatherIcon}
classNames={themeIconClasses}
>
<FaLongArrowAltDown size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col
span={1}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
}
highlight='right'
/>
<WeatherFeaturePill
leftSide={
<Group gap={0}>
<FaLongArrowAltDown size={16} />
Low
</Group>
}
rightSide={
<Text>
{current.lowTemp}°<sup>F</sup>
</Text>
</Grid.Col>
</Grid>
<Grid align='center'>
<Grid.Col span={1}>
<ThemeIcon
className={themeIconClasses.weatherIcon}
classNames={themeIconClasses}
>
<WiSunrise size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col
span={3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>{sunStates[0]?.sunrise}</Text>
</Grid.Col>
<Grid.Col span={1}>
<ThemeIcon
className={themeIconClasses.weatherIcon}
classNames={themeIconClasses}
>
<WiSunset size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col
span={3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>{sunStates[0]?.sunset}</Text>
</Grid.Col>
</Grid>
<Grid align='center'>
<Grid.Col span={1}>
<ThemeIcon
className={themeIconClasses.weatherIcon}
classNames={themeIconClasses}
>
<WiHumidity size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col
span={isMobile ? 4 : 3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>Humidity</Text>
</Grid.Col>
<Grid.Col
span={2}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>{current.humidity}%</Text>
</Grid.Col>
</Grid>
<Grid align='center'>
<Grid.Col span={1}>
<ThemeIcon
className={themeIconClasses.weatherIcon}
classNames={themeIconClasses}
>
<FaWind size={28} />
</ThemeIcon>
</Grid.Col>
<Grid.Col
span={3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>Wind</Text>
</Grid.Col>
<Grid.Col
span={isMobile ? 4 : 3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>{current.windSpeed}mph</Text>
</Grid.Col>
</Grid>
<Grid align='center'>
<Grid.Col span={1}>
<ThemeIcon
className={themeIconClasses.weatherIcon}
classNames={themeIconClasses}
>
<WiBarometer size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col
span={3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>Pressure</Text>
</Grid.Col>
<Grid.Col
span={isMobile ? 4 : 3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>{current.pressure} in</Text>
</Grid.Col>
</Grid>
</Stack>
}
highlight='right'
/>
</Group>
</Stack>
<Stack gap={0} align='center'>
<Text
className={textClasses.sectionTitle}
classNames={textClasses}
style={{
textAlign: 'center',
}}
w={'100%'}
>
Conditions
</Text>
<Group justify='center'>
<WeatherFeaturePill
leftSide={
<Group gap={0}>
<WiHumidity size={16} />
Humidity
</Group>
}
rightSide={<Text>{current.humidity}%</Text>}
highlight='right'
/>
<WeatherFeaturePill
leftSide={
<Group gap={0}>
<FaWind size={16} />
Wind
</Group>
}
rightSide={<Text>{current.windSpeed}mph</Text>}
highlight='right'
/>
<WeatherFeaturePill
leftSide={
<Group gap={0}>
<WiBarometer size={16} />
Pressure
</Group>
}
rightSide={<Text>{current.pressure} in</Text>}
highlight='right'
/>
</Group>
</Stack>
<Stack gap={0} align='center'>
<Text
className={textClasses.sectionTitle}
classNames={textClasses}
style={{
textAlign: 'center',
}}
w={'100%'}
>
Sun Cycle
</Text>
<Group justify='center'>
<WeatherFeaturePill
leftSide={
<Group gap={0}>
<WiSunrise
size={18}
style={{
marginTop: '2px',
marginBottom: '2px',
marginLeft: -6,
marginRight: -6,
}}
/>
</Group>
}
rightSide={<Text>{sunStates[0]?.sunrise}</Text>}
highlight='left'
/>
<WeatherFeaturePill
leftSide={
<Group gap={0}>
<WiSunset
size={18}
style={{
marginTop: '2px',
marginBottom: '2px',
marginLeft: -6,
marginRight: -6,
}}
/>
</Group>
}
rightSide={<Text>{sunStates[0]?.sunset}</Text>}
highlight='left'
/>
</Group>
</Stack>
</Stack>
</Group>
</Card>
)}
</>
);

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

@@ -1,4 +1,4 @@
import { Group, SimpleGrid, Stack, Text } from '@mantine/core';
import { Card, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { textClasses } from 'styles';
import type { ExtendedForecast } from 'types';
@@ -13,31 +13,22 @@ export default function ExtendedForecastCard({
const day = forecast.slice(2, 14).filter((item: ExtendedForecast) => item.isDaytime);
const night = forecast.slice(2, 14).filter((item: ExtendedForecast) => !item.isDaytime);
return (
<Stack
gap={0}
<Card
w={'100%'}
justify='space-between'
style={{
color: 'var(--mantine-color-primary-0)',
backgroundColor: 'var(--mantine-color-search-0)',
padding: '1rem',
borderRadius: '8px',
paddingBottom: '.5rem',
marginTop: '.5rem',
overflow: 'visible',
}}
>
<Group
gap={0}
style={{ width: '100%', marginBottom: '.5rem', paddingLeft: '1rem' }}
>
<Text
style={{
fontSize: '1.375rem',
textAlign: 'left',
}}
>
<Text className={textClasses.weatherTitle} classNames={textClasses}>
Extended Forecast
</Text>
</Group>
<SimpleGrid w={'100%'} cols={isMobile ? 3 : 6}>
<SimpleGrid w={'100%'} pt={'.5rem'} cols={isMobile ? 3 : 6}>
{day.map((item: ExtendedForecast, index: number) => {
const short = item.shortForecast.includes('And')
? item.shortForecast.substring(0, item.shortForecast.indexOf('And'))
@@ -56,7 +47,7 @@ export default function ExtendedForecastCard({
}}
>
<Text>{item.name}</Text>
<WeatherIcon textDescription={short} />
<WeatherIcon size='md' textDescription={short} />
<Group
justify={short.length > 15 ? 'flex-start' : 'center'}
style={{
@@ -82,6 +73,6 @@ export default function ExtendedForecastCard({
);
})}
</SimpleGrid>
</Stack>
</Card>
);
}

61
src/components/WeatherModal/WeatherFeaturePill.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { Box, Group } from '@mantine/core';
function WeatherFeaturePill({
leftSide,
rightSide,
highlight,
}: {
leftSide: React.ReactNode;
rightSide: React.ReactNode;
highlight?: string;
}) {
return (
<Group
gap={2}
w={'fit-content'}
style={{
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-primary-0)',
borderRadius: '16px',
padding: '2px',
}}
>
<Box
style={{
color:
highlight === 'left'
? 'var(--mantine-color-primary-0)'
: 'var(--mantine-color-background-0)',
backgroundColor:
highlight === 'left'
? 'var(--mantine-color-background-0)'
: 'var(--mantine-color-primary-0)',
borderRadius: '16px',
paddingLeft: '8px',
paddingRight: '8px',
}}
>
{leftSide}
</Box>
<Box
style={{
color:
highlight === 'right'
? 'var(--mantine-color-primary-0)'
: 'var(--mantine-color-background-0)',
backgroundColor:
highlight === 'right'
? 'var(--mantine-color-background-0)'
: 'var(--mantine-color-primary-0)',
borderRadius: '16px',
paddingLeft: '8px',
paddingRight: '8px',
}}
>
{rightSide}
</Box>
</Group>
);
}
export default WeatherFeaturePill;

14
src/components/WeatherModal/WeatherIcon.tsx
View File

@@ -10,7 +10,13 @@ import SunnyIcon from '../../assets/weather/sunny.svg';
import ThunderstormIcon from '../../assets/weather/thunderstorm.svg';
import WindyIcon from '../../assets/weather/windy.svg';
export default function WeatherIcon({ textDescription }: { textDescription: string }) {
export default function WeatherIcon({
size,
textDescription,
}: {
size: string;
textDescription: string;
}) {
const icon = textDescription.includes('then')
? textDescription.substring(0, textDescription.trim().indexOf('then'))
: textDescription;
@@ -173,7 +179,11 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
return (
<Image
style={{ width: '75px', height: '75px' }}
style={
size === 'lg'
? { width: '150px', height: '150px' }
: { width: '75px', height: '75px' }
}
src={lookupSource(icon).src}
alt={lookupSource(icon).alt}
/>

7
src/pages/homepage/Homepage.tsx
View File

@@ -137,14 +137,17 @@ export function Homepage() {
temperatureUnit: 'F',
},
]);
useEffect(() => {
if (weather !== undefined && basicWeather !== undefined) {
setCurrent({
icon: weather.features[0]?.properties.icon?.replace('medium', 'large') ?? '',
textDescription: weather.features[0]?.properties.textDescription,
temperature: Math.round(
(weather.features[0]?.properties.temperature.value * 9) / 5 + 32,
(weather.features.find((feature: any) => feature.properties.temperature.value)
.properties.temperature.value *
9) /
5 +
32,
),
highTemp: Math.round(
(basicWeather.properties.maxTemperature.values[0].value * 9) / 5 + 32,

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

@@ -42,11 +42,7 @@ function Applications({ contentType }: { contentType: string[] }) {
<>
{applications.length > 0 && contentType.length > 0 && (
<Stack gap={0}>
<Text
fz={appScale * 20}
className={textClasses.sectionTitle}
classNames={textClasses}
>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
Applications
</Text>
<Stack

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

@@ -60,9 +60,10 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
contentType.length > 0 && (
<Stack gap={0}>
<Text
fz={bookmarkScale * 20}
className={textClasses.sectionTitle}
classNames={textClasses}
mb={'-.5rem'}
mt={'1.25rem'}
>
Bookmarks
</Text>

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

@@ -53,6 +53,7 @@ function SettingsCard({
top: -8,
backgroundColor: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
boxShadow: '2px -2px var(--mantine-color-border-0)',
}}
>
{sectionTitle}

2
src/styles/ActionIcon.module.css
View File

@@ -6,7 +6,7 @@
height: 2rem;
margin-top: 1.5rem;
.icon {
font-size: 1.5rem;
font-size: 2.5rem;
}
.loader {
display: none;

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

@@ -28,12 +28,49 @@
.sectionTitle {
&.root {
text-decoration: underline;
font-weight: 200;
font-style: italic;
text-transform: uppercase;
margin-top: 1.25rem;
width: fit-content;
font-size: 1.25rem;
font-weight: 600;
margin-top: .75rem;
margin-bottom: .5rem;
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;
font-style: italic;
}
}
.weatherTitle {
&.root {
width: fit-content;
font-size: 1.25rem;
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;
margin-top: -2rem;
}
}
.helpTitle {
&.root {
width: fit-content;
font-weight: 600;
z-index: 0;
padding: .5rem;
margin-top: 0;
margin-bottom: -1.25rem;
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);
}
}
@@ -95,8 +132,9 @@
font-size: 2rem;
font-weight: bold;
margin-top: 1.5rem;
color: var(--mantine-color-accent-0);
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%);
border-radius: 8px;
padding-left: .5rem;
padding-right: .5rem;

6
src/styles/ThemeIcon.module.css
View File

@@ -1,6 +0,0 @@
.weatherIcon {
height: auto !important;
width: auto !important;
color: var(--mantine-color-primary-0) !important;
background: transparent !important;
}

2
src/styles/index.ts
View File

@@ -15,7 +15,6 @@ import switchClasses from './Switch.module.css';
import tabClasses from './Tabs.module.css';
import textClasses from './Text.module.css';
import textInputClasses from './TextInput.module.css';
import themeIconClasses from './ThemeIcon.module.css';
export {
actionIconClasses,
@@ -35,5 +34,4 @@ export {
tabClasses,
textClasses,
textInputClasses,
themeIconClasses,
};