Bug fix

src/components/WeatherModal/ExtendedForecastDetails.tsx

@@ -1,11 +1,18 @@
-import { Box, Card, Group, Stack, Text } from '@mantine/core';
+import { ActionIcon, Box, Card, Group, Stack, Text } from '@mantine/core';
 import { FaArrowDown, FaArrowUp, FaLocationArrow, FaSun, FaWind } from 'react-icons/fa';
+import { FaX } from 'react-icons/fa6';
 import { WiRain, WiSunrise, WiSunset } from 'react-icons/wi';
 import { WeatherCodes } from 'types';
 import WeatherFeaturePill from './WeatherFeaturePill';
 import WeatherIcon from './WeatherIcon';
 
-export default function ExtendedForecastDetails({ selectedDay }: { selectedDay: any }) {
+export default function ExtendedForecastDetails({
+	selectedDay,
+	setSelectedDay,
+}: {
+	selectedDay: any;
+	setSelectedDay: (day: any) => void;
+}) {
 	return (
 		<Card
 			h={'100%'}
@@ -15,6 +22,7 @@ export default function ExtendedForecastDetails({ selectedDay }: { selectedDay:
 				backgroundColor: 'var(--mantine-color-background-0)',
 				padding: '1rem',
 				borderRadius: '8px',
+				overflow: 'visible',
 			}}
 			onClick={(e) => {
 				e.stopPropagation();
@@ -22,17 +30,32 @@ export default function ExtendedForecastDetails({ selectedDay }: { selectedDay:
 			shadow='xl'
 			p={0}
 		>
+			<ActionIcon
+				pos={'absolute'}
+				top={-12}
+				right={-12}
+				style={{
+					borderRadius: '100%',
+				}}
+				onClick={() => {
+					setSelectedDay(undefined);
+				}}
+			>
+				<FaX />
+			</ActionIcon>
 			<Group
 				w={'100%'}
 				justify='center'
 				bg={'var(--mantine-color-search-0)'}
-				p={0}
+				py={4}
 				mt={0}
 			>
-				<Text fz={'1.5rem'}>
+				<Text fw={600} fz={'1.5rem'}>
 					{selectedDay.time.toLocaleDateString('en-US', { weekday: 'long' })}
 				</Text>
-				<Text fz={'1.5rem'}>{selectedDay.time.toLocaleDateString()}</Text>
+				<Text fw={600} fz={'1.5rem'}>
+					{selectedDay.time.toLocaleDateString()}
+				</Text>
 			</Group>
 			<Stack align='center' p={16}>
 				<WeatherIcon size={'xl'} code={selectedDay.weatherCode} />

src/components/WeatherModal/WeatherGraphs.tsx

@@ -29,7 +29,7 @@ export default function WeatherGraphs({ hourly }: { hourly: Hourly | undefined }
 			return {
 				dewpoint: hourly.dew_point_2m?.[index].toFixed(0),
 				isDaytime: hourly.is_day?.[index],
-				name: hourly.time[index],
+				name: hourly.time[index].toLocaleString('en-us'),
 				startTime: hourly.time[index],
 				endTime: hourly.time[index + 1],
 				probabilityOfPrecipitation: hourly.precipitation_probability?.[index],
@@ -39,7 +39,6 @@ export default function WeatherGraphs({ hourly }: { hourly: Hourly | undefined }
 			};
 		})
 		.filter((hour: any) => hour.startTime > now && hour.startTime < later);
-
 	return (
 		<Stack
 			style={{
@@ -65,8 +64,8 @@ export default function WeatherGraphs({ hourly }: { hourly: Hourly | undefined }
 					data={[
 						{ value: 12, label: '12 hours' },
 						{ value: 24, label: '24 hours' },
-						{ value: 28, label: '2 days' },
-						{ value: 48, label: '3 days' },
+						{ value: 48, label: '2 days' },
+						{ value: 72, label: '3 days' },
 						{ value: 168, label: '7 days' },
 					]}
 					onChange={(value: any) => setTimeFrame(value)}
@@ -78,10 +77,7 @@ export default function WeatherGraphs({ hourly }: { hourly: Hourly | undefined }
 						type='category'
 						stroke={'var(--mantine-color-primary-0)'}
 						dataKey={(data) => {
-							return new Date(data.startTime).toLocaleTimeString('en-US', {
-								hour: 'numeric',
-								minute: 'numeric',
-							});
+							return new Date(data.startTime).toLocaleString('en-US');
 						}}
 					/>
 					<YAxis
@@ -154,10 +150,7 @@ export default function WeatherGraphs({ hourly }: { hourly: Hourly | undefined }
 						type='category'
 						stroke={'var(--mantine-color-primary-0)'}
 						dataKey={(data) => {
-							return new Date(data.startTime).toLocaleTimeString('en-US', {
-								hour: 'numeric',
-								minute: 'numeric',
-							});
+							return new Date(data.startTime).toLocaleTimeString('en-US');
 						}}
 					/>
 					<YAxis stroke={'var(--mantine-color-primary-0)'} unit={'%'} domain={[0, 100]} />

src/components/WeatherModal/WeatherModal.tsx

@@ -72,7 +72,10 @@ export function WeatherModal({
 								}}
 							>
 								<Stack w={'65%'} align={'center'} justify={'center'}>
-									<ExtendedForecastDetails selectedDay={selectedDay} />
+									<ExtendedForecastDetails
+										selectedDay={selectedDay}
+										setSelectedDay={setSelectedDay}
+									/>
 								</Stack>
 							</Overlay>
 						)}