diff --git a/package-lock.json b/package-lock.json
index ef9e1fc..d4fea3a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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": {
diff --git a/package.json b/package.json
index 3882946..f0f1301 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/components/HelpModal/HelpSection.tsx b/src/components/HelpModal/HelpSection.tsx
index 4d43130..aab6f2f 100644
--- a/src/components/HelpModal/HelpSection.tsx
+++ b/src/components/HelpModal/HelpSection.tsx
@@ -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 (
- <>
-
+
+
{name}
-
+
{items
@@ -35,7 +25,7 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
))}
-
+
);
}
diff --git a/src/components/WeatherModal/CurrentWeather.tsx b/src/components/WeatherModal/CurrentWeather.tsx
index 5c4b9bb..483752d 100644
--- a/src/components/WeatherModal/CurrentWeather.tsx
+++ b/src/components/WeatherModal/CurrentWeather.tsx
@@ -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,223 +34,251 @@ export default function CurrentWeather({ current }: { current: CW }) {
return (
<>
{current && (
-
-
-
- Current Weather
-
-
-
-
-
-
-
- {current.temperature}°F
-
-
-
+ Current Weather
+
+
+
+
- {current.temperature === 69 ? 'Nice' : current.textDescription}
-
+
+
+
+
+
+ {current.temperature}°F
+
+
+
+ 25 ? 'flex-start' : 'center'}
+ style={{
+ width: '100%',
+ maxWidth: '180px',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ boxSizing: 'border-box',
+ position: 'relative',
+ }}
+ >
+ 25
+ ? textClasses.autoScrollText
+ : undefined
+ }
+ classNames={textClasses}
+ >
+ {current.temperature === 69 ? 'Nice' : current.textDescription}
+
+
+
+ Feels like }
+ rightSide={
+
+ {current.heatIndex ?? current.windChill ?? current.temperature}°
+ F
+
+ }
+ highlight='right'
+ />
-
-
- Feels like {current.heatIndex ?? current.windChill ?? current.temperature}
- °F
-
-
-
-
-
-
-
-
+
+
-
- {current.highTemp}°F
-
-
-
-
-
-
-
-
+
+
+
+ High
+
+ }
+ rightSide={
+
+ {current.highTemp}°F
+
+ }
+ highlight='right'
+ />
+
+
+ Low
+
+ }
+ rightSide={
+
+ {current.lowTemp}°F
+
+ }
+ highlight='right'
+ />
+
+
+
+
-
- {current.lowTemp}°F
-
-
-
-
-
-
-
-
-
-
+
+
+
+ Humidity
+
+ }
+ rightSide={{current.humidity}%}
+ highlight='right'
+ />
+
+
+ Wind
+
+ }
+ rightSide={{current.windSpeed}mph}
+ highlight='right'
+ />
+
+
+ Pressure
+
+ }
+ rightSide={{current.pressure} in}
+ highlight='right'
+ />
+
+
+
+
- {sunStates[0]?.sunrise}
-
-
-
-
-
-
-
- {sunStates[0]?.sunset}
-
-
-
-
-
-
-
-
-
- Humidity
-
-
- {current.humidity}%
-
-
-
-
-
-
-
-
-
- Wind
-
-
- {current.windSpeed}mph
-
-
-
-
-
-
-
-
-
- Pressure
-
-
- {current.pressure} in
-
-
+ Sun Cycle
+
+
+
+
+
+ }
+ rightSide={{sunStates[0]?.sunrise}}
+ highlight='left'
+ />
+
+
+
+ }
+ rightSide={{sunStates[0]?.sunset}}
+ highlight='left'
+ />
+
+
-
+
)}
);
diff --git a/src/components/WeatherModal/ExtendedForecastCard.tsx b/src/components/WeatherModal/ExtendedForecastCard.tsx
index e7a07d1..bc0fa25 100644
--- a/src/components/WeatherModal/ExtendedForecastCard.tsx
+++ b/src/components/WeatherModal/ExtendedForecastCard.tsx
@@ -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 (
-
-
-
- Extended Forecast
-
-
-
+
+ Extended Forecast
+
+
{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({
}}
>
{item.name}
-
+
15 ? 'flex-start' : 'center'}
style={{
@@ -82,6 +73,6 @@ export default function ExtendedForecastCard({
);
})}
-
+
);
}
diff --git a/src/components/WeatherModal/WeatherFeaturePill.tsx b/src/components/WeatherModal/WeatherFeaturePill.tsx
new file mode 100644
index 0000000..f742e1e
--- /dev/null
+++ b/src/components/WeatherModal/WeatherFeaturePill.tsx
@@ -0,0 +1,61 @@
+import { Box, Group } from '@mantine/core';
+
+function WeatherFeaturePill({
+ leftSide,
+ rightSide,
+ highlight,
+}: {
+ leftSide: React.ReactNode;
+ rightSide: React.ReactNode;
+ highlight?: string;
+}) {
+ return (
+
+
+ {leftSide}
+
+
+ {rightSide}
+
+
+ );
+}
+
+export default WeatherFeaturePill;
diff --git a/src/components/WeatherModal/WeatherIcon.tsx b/src/components/WeatherModal/WeatherIcon.tsx
index 133f562..6a9505b 100644
--- a/src/components/WeatherModal/WeatherIcon.tsx
+++ b/src/components/WeatherModal/WeatherIcon.tsx
@@ -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 (
diff --git a/src/pages/homepage/Homepage.tsx b/src/pages/homepage/Homepage.tsx
index 66786e5..a7b62b0 100644
--- a/src/pages/homepage/Homepage.tsx
+++ b/src/pages/homepage/Homepage.tsx
@@ -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,
diff --git a/src/pages/homepage/components/Applications/Applications.tsx b/src/pages/homepage/components/Applications/Applications.tsx
index fdab1a9..13fa092 100644
--- a/src/pages/homepage/components/Applications/Applications.tsx
+++ b/src/pages/homepage/components/Applications/Applications.tsx
@@ -42,11 +42,7 @@ function Applications({ contentType }: { contentType: string[] }) {
<>
{applications.length > 0 && contentType.length > 0 && (
-
+
Applications
0 && (
Bookmarks
diff --git a/src/pages/homepage/components/SettingsButton/SettingsCard.tsx b/src/pages/homepage/components/SettingsButton/SettingsCard.tsx
index 4b412eb..320ffa5 100644
--- a/src/pages/homepage/components/SettingsButton/SettingsCard.tsx
+++ b/src/pages/homepage/components/SettingsButton/SettingsCard.tsx
@@ -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}
diff --git a/src/styles/ActionIcon.module.css b/src/styles/ActionIcon.module.css
index 8645a17..8bde41b 100644
--- a/src/styles/ActionIcon.module.css
+++ b/src/styles/ActionIcon.module.css
@@ -6,7 +6,7 @@
height: 2rem;
margin-top: 1.5rem;
.icon {
- font-size: 1.5rem;
+ font-size: 2.5rem;
}
.loader {
display: none;
diff --git a/src/styles/Text.module.css b/src/styles/Text.module.css
index d71dc04..f26b871 100644
--- a/src/styles/Text.module.css
+++ b/src/styles/Text.module.css
@@ -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;
diff --git a/src/styles/ThemeIcon.module.css b/src/styles/ThemeIcon.module.css
deleted file mode 100644
index 278850c..0000000
--- a/src/styles/ThemeIcon.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.weatherIcon {
- height: auto !important;
- width: auto !important;
- color: var(--mantine-color-primary-0) !important;
- background: transparent !important;
-}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index c4e6dd4..59b4e4e 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -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,
};