From 11045b16ab8c13656a0b1a35b4ab36881991c63a Mon Sep 17 00:00:00 2001
From: Drew Peifer <drew@drewpeifer.com>
Date: Sat, 14 Feb 2026 01:08:04 -0500
Subject: [PATCH] fixed weather charts

---
 claudash/src/App.css                          | 73 ++++++++++++++-----
 .../src/components/widgets/WeatherWidget.jsx  | 68 +++++++----------
 2 files changed, 81 insertions(+), 60 deletions(-)

diff --git a/claudash/src/App.css b/claudash/src/App.css
index af301c7..e1a0df4 100644
--- a/claudash/src/App.css
+++ b/claudash/src/App.css
@@ -271,46 +271,79 @@ input, textarea {
 }
 
 /* Weather Widget Styles */
-.weather-temp {
+.weather-error-message {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 1rem;
+  margin: 0;
+}
+
+.app-light .weather-error-message {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weather-location-caption {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.75rem;
+  display: block;
+  margin-top: 8px;
+}
+
+.app-light .weather-location-caption {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weather-temp-large {
   font-size: 3rem;
-  font-weight: 400;
+  font-weight: 300;
   line-height: 1;
 }
 
-.weather-unit {
+.weather-temp-unit {
   font-size: 1.5rem;
   color: rgba(255, 255, 255, 0.6);
   margin-left: 4px;
 }
 
-.app-light .weather-unit {
+.app-light .weather-temp-unit {
   color: rgba(0, 0, 0, 0.6);
 }
 
-.weather-description {
+.weather-description-text {
+  color: rgba(255, 255, 255, 0.6);
   font-size: 1rem;
-  margin: 0 0 16px 0;
+  margin: 8px 0 0 0;
 }
 
-.forecast-label {
+.app-light .weather-description-text {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weather-section-title {
   font-size: 0.875rem;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.6);
+  font-weight: 600;
+  margin: 0 0 16px 0;
+  font-family: "Russo One", sans-serif;
+}
+
+.weather-forecast-day {
+  font-size: 0.75rem;
+  display: block;
   margin-bottom: 8px;
 }
 
-.app-light .forecast-label {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-.forecast-day {
-  font-size: 0.75rem;
-  display: block;
-  margin-bottom: 4px;
-}
-
-.forecast-temp {
+.weather-forecast-temp-max {
   font-size: 0.875rem;
+  font-weight: 500;
+  margin: 8px 0 0 0;
+}
+
+.weather-forecast-temp-min {
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.app-light .weather-forecast-temp-min {
+  color: rgba(0, 0, 0, 0.6);
 }
 
 /* News Widget Styles */
diff --git a/claudash/src/components/widgets/WeatherWidget.jsx b/claudash/src/components/widgets/WeatherWidget.jsx
index d402ebd..d59ca89 100644
--- a/claudash/src/components/widgets/WeatherWidget.jsx
+++ b/claudash/src/components/widgets/WeatherWidget.jsx
@@ -1,4 +1,4 @@
-import { Box, Chip, Stack, Paper, Typography, Divider, useTheme } from '@mui/material';
+import { Box, Chip, Stack, Paper, Divider, useTheme } from '@mui/material';
 import { 
   Cloud, 
   WbSunny, 
@@ -78,13 +78,13 @@ function WeatherWidget({ data, sx }) {
       <GenericWidget title="Weather" sx={{ minWidth: '50%', opacity: 0.7, ...sx }}>
         <Box sx={{ textAlign: 'center', py: 3 }}>
           <Cloud sx={{ fontSize: 48, color: theme.palette.grey[400], mb: 2 }} />
-          <Typography variant="body1" color="text.secondary">
+          <p className="weather-error-message">
             {data?.message || 'Weather data unavailable'}
-          </Typography>
+          </p>
           {data?.location && (
-            <Typography variant="caption" color="text.secondary">
+            <span className="weather-location-caption">
               Location: {data.location}
-            </Typography>
+            </span>
           )}
         </Box>
       </GenericWidget>
@@ -116,15 +116,15 @@ function WeatherWidget({ data, sx }) {
             {getWeatherIcon(current?.icon)}
           </Box>
           <Box sx={{ flexGrow: 1 }}>
-            <Typography variant="h3" component="span" sx={{ fontWeight: 300 }}>
+            <span className="weather-temp-large">
               {Math.round(current?.temp || 0)}
-            </Typography>
-            <Typography variant="h5" component="span" sx={{ ml: 0.5 }}>
+            </span>
+            <span className="weather-temp-unit">
               {units?.temperature}
-            </Typography>
-            <Typography variant="body1" color="text.secondary" sx={{ mt: 1 }}>
+            </span>
+            <p className="weather-description-text">
               {current?.description}
-            </Typography>
+            </p>
           </Box>
         </Box>
 
@@ -156,9 +156,9 @@ function WeatherWidget({ data, sx }) {
       {/* 5-Day Forecast */}
       {forecast && forecast.length > 0 && (
         <Box sx={{ mb: 3 }}>
-          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+          <h6 className="weather-section-title">
             5-Day Forecast
-          </Typography>
+          </h6>
           <Box sx={{ display: 'flex', gap: 1, overflowX: 'auto' }}>
             {forecast.map((day, index) => (
               <Paper
@@ -174,16 +174,16 @@ function WeatherWidget({ data, sx }) {
                   borderRadius: 2
                 }}
               >
-                <Typography variant="caption" display="block" sx={{ mb: 1 }}>
+                <span className="weather-forecast-day">
                   {index === 0 ? 'Today' : formatDate(day.date)}
-                </Typography>
+                </span>
                 {getForecastIcon(day.icon)}
-                <Typography variant="body2" sx={{ mt: 1, fontWeight: 500 }}>
+                <p className="weather-forecast-temp-max">
                   {Math.round(day.maxTemp)}°
-                </Typography>
-                <Typography variant="caption" color="text.secondary">
+                </p>
+                <span className="weather-forecast-temp-min">
                   {Math.round(day.minTemp)}°
-                </Typography>
+                </span>
               </Paper>
             ))}
           </Box>
@@ -195,11 +195,11 @@ function WeatherWidget({ data, sx }) {
       {/* Historical Temperature Chart */}
       {tempChartData.length > 0 && (
         <Box sx={{ mb: 3 }}>
-          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+          <h6 className="weather-section-title">
             7-Day Temperature History
-          </Typography>
+          </h6>
           <LineChart
-            height={200}
+            height={250}
             series={[
               { 
                 data: tempChartData.map(d => d.high), 
@@ -216,19 +216,13 @@ function WeatherWidget({ data, sx }) {
             ]}
             xAxis={[{ 
               scaleType: 'point', 
-              data: tempChartData.map(d => d.date),
-              tickLabelStyle: {
-                angle: 45,
-                textAnchor: 'start',
-                fontSize: 10
-              },
-              tickNumber: tempChartData.length
+              data: tempChartData.map(d => d.date)
             }]}
             yAxis={[{
               label: `Temperature (${units?.temperature})`,
               labelStyle: { fontSize: 12 }
             }]}
-            margin={{ top: 20, bottom: 80, left: 60, right: 30 }}
+            margin={{ top: 20, bottom: 100, left: 60, right: 30 }}
             sx={{
               '.MuiLineElement-root': {
                 strokeWidth: 2
@@ -253,11 +247,11 @@ function WeatherWidget({ data, sx }) {
       {/* Historical Wind Speed Chart */}
       {windChartData.length > 0 && (
         <Box>
-          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+          <h6 className="weather-section-title">
             7-Day Wind Speed History
-          </Typography>
+          </h6>
           <LineChart
-            height={200}
+            height={250}
             series={[
               { 
                 data: windChartData.map(d => d.max), 
@@ -274,13 +268,7 @@ function WeatherWidget({ data, sx }) {
             ]}
             xAxis={[{ 
               scaleType: 'point', 
-              data: windChartData.map(d => d.date),
-              tickLabelStyle: {
-                angle: 45,
-                textAnchor: 'start',
-                fontSize: 10
-              },
-              tickNumber: windChartData.length
+              data: windChartData.map(d => d.date)
             }]}
             yAxis={[{
               label: `Wind Speed (${units?.windSpeed})`,