From 20fc0cbca77dac5d196eb801419d227c49fafff1 Mon Sep 17 00:00:00 2001 From: Sean Edmunds Date: Fri, 11 Jul 2025 15:26:00 -0500 Subject: [PATCH] Style updates --- package-lock.json | 54 +-- package.json | 8 +- src/components/HelpModal/HelpSection.tsx | 22 +- .../WeatherModal/CurrentWeather.tsx | 421 ++++++++++-------- .../WeatherModal/ExtendedForecastCard.tsx | 31 +- .../WeatherModal/WeatherFeaturePill.tsx | 61 +++ src/components/WeatherModal/WeatherIcon.tsx | 14 +- src/pages/homepage/Homepage.tsx | 7 +- .../components/Applications/Applications.tsx | 6 +- .../components/Bookmarks/Bookmarks.tsx | 3 +- .../SettingsButton/SettingsCard.tsx | 1 + src/styles/ActionIcon.module.css | 2 +- src/styles/Text.module.css | 50 ++- src/styles/ThemeIcon.module.css | 6 - src/styles/index.ts | 2 - 15 files changed, 400 insertions(+), 288 deletions(-) create mode 100644 src/components/WeatherModal/WeatherFeaturePill.tsx delete mode 100644 src/styles/ThemeIcon.module.css 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 ( {lookupSource(icon).alt} 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, };