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} />