zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: finish frontend token cleanup

Browse Source
This commit is contained in:
zv
2026-06-04 20:22:42 +02:00
parent cdce40e69c
commit 4e66fb549a
5 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/globals.css
View File

@@ -88,6 +88,10 @@ select {
.weather-scrollbar {
scrollbar-gutter: stable;
}
.modal-overlay {
background: hsl(var(--foreground) / 0.55);
}
}
@supports (-moz-appearance: none) {

4
components/charts/day-forecast-charts.tsx
View File

@@ -27,7 +27,7 @@ export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
<div className="grid gap-3 lg:grid-cols-2">
<Card className="p-4 sm:p-5">
<h3 className="text-sm font-semibold">{t("forecast.temperatureChart")}</h3>
<p className="mt-1 text-xs leading-5 text-slate-600 dark:text-slate-300">{t("forecast.temperatureChartDescription")}</p>
<p className="mt-1 text-xs leading-5 text-muted">{t("forecast.temperatureChartDescription")}</p>
<div className="mt-4 h-56 min-w-0">
<ResponsiveContainer width="100%" height="100%" minWidth={0} minHeight={0} initialDimension={INITIAL_CHART_DIMENSION}>
<ComposedChart data={rows} margin={{ left: -20, right: 8, top: 8 }}>
@@ -48,7 +48,7 @@ export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
<Card className="p-4 sm:p-5">
<h3 className="text-sm font-semibold">{t("forecast.rainfallChart")}</h3>
<p className="mt-1 text-xs leading-5 text-slate-600 dark:text-slate-300">{t("forecast.rainfallChartDescription")}</p>
<p className="mt-1 text-xs leading-5 text-muted">{t("forecast.rainfallChartDescription")}</p>
<div className="mt-4 h-56 min-w-0">
<ResponsiveContainer width="100%" height="100%" minWidth={0} minHeight={0} initialDimension={INITIAL_CHART_DIMENSION}>
<ComposedChart data={rows} margin={{ left: -20, right: -10, top: 8 }}>

2
components/forecast/day-forecast-modal.tsx
View File

@@ -84,7 +84,7 @@ export function DayForecastModal({
<AnimatePresence>
{day ? (
<motion.div
className="fixed inset-0 z-[90] flex items-center justify-center bg-slate-950/55 p-0 sm:p-4 lg:p-8"
className="modal-overlay fixed inset-0 z-[90] flex items-center justify-center p-0 sm:p-4 lg:p-8"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}

14
components/weather/weather-hero.tsx
View File

@@ -12,14 +12,24 @@ import {
formatWind,
getWeatherDescription,
getWeatherMoodFromData,
moodAccentClass,
} from "@/lib/weather-utils";
import type { SynopStation } from "@/types/imgw";
import type { SynopStation, WeatherMood } from "@/types/imgw";
import type { ImgwCurrentWeather } from "@/types/imgw-current";
import { WeatherIcon } from "@/components/weather/weather-icon";
import { WeatherEffects } from "@/components/weather/weather-effects";
import { useI18n } from "@/lib/i18n";
function moodAccentClass(mood: WeatherMood) {
return {
warm: "border-accent/25 bg-accent/10 text-accent",
cloudy: "border-border/70 bg-surface-muted text-muted",
wind: "border-border/70 bg-surface-muted text-muted",
cold: "border-border/70 bg-surface-muted text-muted",
night: "border-border/70 bg-surface-muted text-muted",
mild: "border-accent/25 bg-accent/10 text-accent",
}[mood];
}
export function WeatherHero({ station, currentWeather, currentWeatherLoading = false, locationName, distanceKm }: { station: SynopStation; currentWeather?: ImgwCurrentWeather | null; currentWeatherLoading?: boolean; locationName?: string; distanceKm?: number }) {
const { language, t } = useI18n();
const displayedLocationName = locationName ?? station.name;

11
lib/weather-utils.ts
View File

@@ -183,14 +183,3 @@ export function getWeatherDescription(station: SynopStation, language: Language
if ((station.humidity ?? 0) >= 90) return translate(language, "weather.humid");
return translate(language, "weather.calm");
}
export function moodAccentClass(mood: WeatherMood) {
return {
warm: "border-accent/25 bg-accent/10 text-accent",
cloudy: "border-border/70 bg-surface-muted text-muted",
wind: "border-border/70 bg-surface-muted text-muted",
cold: "border-border/70 bg-surface-muted text-muted",
night: "border-border/70 bg-surface-muted text-muted",
mild: "border-accent/25 bg-accent/10 text-accent",
}[mood];
}