Minor updates to styles and package updates

2026-10-15 13:58:35 -05:00
parent 142a45ef54
commit ffd241dad8
7 changed files with 265 additions and 275 deletions
--- a/src/components/Applications/AppItem.tsx
+++ b/src/components/Applications/AppItem.tsx
@@ -57,7 +57,7 @@ export function AppItem({
 				h={height}
 				w={width}
 				duration={3}
-				beamMode={'conic'}
+				beamMode={'wedge'}
 				borderWidth={scale * 3}
 				borderOpacity={0.75}
 				size={(scale * 48) / (width / height < 2 ? 2 : 1)}
--- a/src/components/WeatherModal/ExtendedForecastDetails.tsx
+++ b/src/components/WeatherModal/ExtendedForecastDetails.tsx
@@ -1,7 +1,7 @@
 import { ActionIcon, Box, Card, Group, Stack, Text } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
-import { FaLocationArrow, FaSun, FaWind } from 'react-icons/fa';
-import { FaDroplet, FaX } from 'react-icons/fa6';
+import { FaArrowLeft, FaLocationArrow, FaSun, FaWind } from 'react-icons/fa';
+import { FaDroplet } from 'react-icons/fa6';
 import { WiRain, WiSunrise, WiSunset } from 'react-icons/wi';
 import { textClasses } from 'styles';
 import { WeatherCodes } from 'types';
@@ -32,29 +32,12 @@ export default function ExtendedForecastDetails({
 				borderRadius: '8px',
 				overflow: 'visible',
 				cursor: 'default',
-				boxShadow:
-					'15px 15px 2px color-mix(in srgb, var(--mantine-color-border-0), transparent 50%)',
 			}}
 			onClick={(e) => {
 				e.stopPropagation();
 			}}
 			p={0}
 		>
-			<ActionIcon
-				pos={'absolute'}
-				top={-12}
-				right={-12}
-				style={{
-					borderRadius: '100%',
-					boxShadow: '2px 2px var(--mantine-color-search-0)',
-				}}
-				onClick={() => {
-					setSelectedDay(undefined);
-					setSelectedHourly(undefined);
-				}}
-			>
-				<FaX />
-			</ActionIcon>
 			<Group
 				w={'100%'}
 				justify='center'
@@ -66,11 +49,25 @@ export default function ExtendedForecastDetails({
 					borderTopRightRadius: '8px',
 				}}
 			>
+				<ActionIcon
+					pos={'absolute'}
+					left={16}
+					style={{
+						borderRadius: '100%',
+						boxShadow: '2px 2px var(--mantine-color-search-0)',
+					}}
+					onClick={() => {
+						setSelectedDay(undefined);
+						setSelectedHourly(undefined);
+					}}
+				>
+					<FaArrowLeft />
+				</ActionIcon>
 				<Text fw={600} fz={'1.5rem'}>
-					{selectedDay.time.toLocaleDateString('en-US', { weekday: 'long' })}
+					{selectedDay?.time.toLocaleDateString('en-US', { weekday: 'long' })}
 				</Text>
 				<Text fw={600} fz={'1.5rem'}>
-					{selectedDay.time.toLocaleDateString()}
+					{selectedDay?.time.toLocaleDateString()}
 				</Text>
 			</Group>
 			<Stack align='center' p={16}>
@@ -95,8 +92,8 @@ export default function ExtendedForecastDetails({
 								leftSide={<Text>Feels like</Text>}
 								rightSide={
 									<Text>
-										{selectedDay.apparentTemperatureMax?.toFixed(0) ??
-											selectedDay.temperatureMax?.toFixed(0)}
+										{selectedDay?.apparentTemperatureMax?.toFixed(0) ??
+											selectedDay?.temperatureMax?.toFixed(0)}
 										°<sup>F</sup>
 									</Text>
 								}
@@ -105,12 +102,12 @@ export default function ExtendedForecastDetails({
 						</Box>
 						<Group pos={'relative'}>
 							<Text fz={isMobile ? '5rem' : '7rem'} fw={400} style={{ lineHeight: 1 }}>
-								{selectedDay.temperatureMax?.toFixed(0)}
+								{selectedDay?.temperatureMax?.toFixed(0)}
 								<sup style={{ fontSize: '3rem' }}>°F</sup>
 							</Text>

 							<Text style={{ lineHeight: 1 }} pos={'absolute'} bottom={20} right={0}>
-								/ {selectedDay.temperatureMin?.toFixed(0)}°<sup>F</sup>
+								/ {selectedDay?.temperatureMin?.toFixed(0)}°<sup>F</sup>
 							</Text>
 							<Box
 								style={{
@@ -131,7 +128,7 @@ export default function ExtendedForecastDetails({
 						</Group>
 						<Group
 							justify={
-								WeatherCodes[Number(selectedDay.weatherCode)].length > 25
+								WeatherCodes[Number(selectedDay?.weatherCode)]?.length > 25
 									? 'flex-start'
 									: 'center'
 							}
@@ -146,21 +143,21 @@ export default function ExtendedForecastDetails({
 						>
 							<Text
 								className={
-									WeatherCodes[Number(selectedDay.weatherCode)].length > 25
+									WeatherCodes[Number(selectedDay?.weatherCode)]?.length > 25
 										? textClasses.autoScrollText
 										: undefined
 								}
 								classNames={textClasses}
 								style={{ lineHeight: 1 }}
 							>
-								{selectedDay.temperature_2m?.toFixed(0) === '69'
+								{selectedDay?.temperature_2m?.toFixed(0) === '69'
 									? 'Nice'
-									: WeatherCodes[Number(selectedDay.weatherCode)]}
+									: WeatherCodes[Number(selectedDay?.weatherCode)]}
 							</Text>
 						</Group>
 					</Stack>
 					<Stack>
-						<WeatherIcon size={'xl'} code={selectedDay.weatherCode} />
+						<WeatherIcon size={'xl'} code={selectedDay?.weatherCode} />
 					</Stack>
 				</Group>

@@ -174,7 +171,7 @@ export default function ExtendedForecastDetails({
 										<Text>Wind</Text>
 									</Group>
 								}
-								rightSide={<Text>{selectedDay.windSpeed?.toFixed(0)}mph</Text>}
+								rightSide={<Text>{selectedDay?.windSpeed?.toFixed(0)}mph</Text>}
 								highlight='right'
 							/>
 							<WeatherFeaturePill
@@ -184,7 +181,7 @@ export default function ExtendedForecastDetails({
 										<Text>Gusts</Text>
 									</Group>
 								}
-								rightSide={<Text>{selectedDay.windGusts?.toFixed(0)}mph</Text>}
+								rightSide={<Text>{selectedDay?.windGusts?.toFixed(0)}mph</Text>}
 								highlight='right'
 							/>
 						</Stack>
@@ -203,11 +200,11 @@ export default function ExtendedForecastDetails({
 								<FaLocationArrow
 									style={{
 										color: 'var(--mantine-color-accent-0)',
-										transform: `rotate(${-48 + (selectedDay.windDirection || 0)}deg)`,
+										transform: `rotate(${-48 + (selectedDay?.windDirection || 0)}deg)`,
 									}}
 								/>
 							</Box>
-							<Text fz={12}>{selectedDay.windDirection?.toFixed(0)}°</Text>
+							<Text fz={12}>{selectedDay?.windDirection?.toFixed(0)}°</Text>
 						</Stack>
 					</Group>
 					<Group justify='space-between'>
@@ -229,7 +226,7 @@ export default function ExtendedForecastDetails({
 									}}
 								/>
 							</Box>
-							<Text fz={12}>UV {selectedDay.uvIndexMax?.toFixed(0)}</Text>
+							<Text fz={12}>UV {selectedDay?.uvIndexMax?.toFixed(0)}</Text>
 						</Stack>
 						<Stack gap={4}>
 							<WeatherFeaturePill
@@ -246,7 +243,7 @@ export default function ExtendedForecastDetails({
 										/>
 									</Group>
 								}
-								rightSide={<Text>{selectedDay.sunrise}</Text>}
+								rightSide={<Text>{selectedDay?.sunrise}</Text>}
 								highlight='left'
 							/>
 							<WeatherFeaturePill
@@ -263,7 +260,7 @@ export default function ExtendedForecastDetails({
 										/>
 									</Group>
 								}
-								rightSide={<Text>{selectedDay.sunset}</Text>}
+								rightSide={<Text>{selectedDay?.sunset}</Text>}
 								highlight='left'
 							/>
 						</Stack>
@@ -297,7 +294,7 @@ export default function ExtendedForecastDetails({
 									<Text>Precipitation %</Text>
 								</Group>
 							}
-							rightSide={<Text>{selectedDay.precipitationProbability}%</Text>}
+							rightSide={<Text>{selectedDay?.precipitationProbability}%</Text>}
 							highlight='right'
 						/>
 						<WeatherFeaturePill
@@ -307,7 +304,7 @@ export default function ExtendedForecastDetails({
 									<Text>Precipitation In.</Text>
 								</Group>
 							}
-							rightSide={<Text>{selectedDay.precipitationSum.toFixed(2)} in.</Text>}
+							rightSide={<Text>{selectedDay?.precipitationSum.toFixed(2)} in.</Text>}
 							highlight='right'
 						/>
 					</Stack>
--- a/src/components/WeatherModal/WeatherGraphs.tsx
+++ b/src/components/WeatherModal/WeatherGraphs.tsx
@@ -82,7 +82,7 @@ export default function WeatherGraphs({
 				</Group>
 			)}
 			<ResponsiveContainer width={'100%'} height={150}>
-				<ComposedChart data={hourlyForecast}>
+				<ComposedChart data={hourlyForecast} responsive>
 					<XAxis
 						type='category'
 						stroke={'var(--mantine-color-primary-0)'}
@@ -129,7 +129,7 @@ export default function WeatherGraphs({
 				</ComposedChart>
 			</ResponsiveContainer>
 			<ResponsiveContainer width={'100%'} height={150}>
-				<AreaChart data={hourlyForecast}>
+				<AreaChart data={hourlyForecast} responsive>
 					<defs>
 						<linearGradient id={colorPrecipitation} x1='0' y1='0' x2='0' y2='1'>
 							<stop
--- a/src/components/WeatherModal/WeatherModal.tsx
+++ b/src/components/WeatherModal/WeatherModal.tsx
@@ -1,4 +1,4 @@
-import { Group, Modal, Overlay, Stack, Text } from '@mantine/core';
+import { Box, Group, Modal, Text } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { modalClasses } from 'styles';
@@ -85,43 +85,37 @@ export function WeatherModal({
 					</Modal.Title>
 					<Modal.CloseButton />
 				</Modal.Header>
-				<Modal.Body m={0}>
-					<Stack w={'100%'} h={'100%'} pos={'relative'}>
-						{selectedDay && (
-							<Overlay
-								h={'100%'}
-								opacity={1}
-								blur={10}
-								onClick={() => setSelectedDay(undefined)}
-								style={{
-									display: 'flex',
-									justifyContent: 'center',
-									alignItems: 'center',
-									backgroundColor: 'color-mix(in srgb, black, transparent 50%)',
-								}}
-							>
-								<Stack
-									w={'65%'}
-									align={'center'}
-									justify={'center'}
-									style={{ cursor: 'pointer' }}
-								>
-									<ExtendedForecastDetails
-										selectedDay={selectedDay}
-										setSelectedDay={setSelectedDay}
-										selectedHourly={selectedHourly}
-										setSelectedHourly={setSelectedHourly}
-									/>
-								</Stack>
-							</Overlay>
-						)}
-						<CurrentWeather current={current} />
-						<WeatherGraphs hourly={current?.hourly} />
-						<ExtendedForecastCard
-							daily={current?.daily}
-							setSelectedDay={setSelectedDay}
-						/>
-					</Stack>
+				<Modal.Body style={{ overflowX: 'hidden', whiteSpace: 'nowrap' }}>
+					<Group w={'200%'} gap={0}>
+						<Box
+							w={'50%'}
+							style={{
+								transition: 'all 0.3s ease-in-out',
+								transform: selectedDay ? 'translateX(-110%)' : 'translateX(0%)',
+							}}
+						>
+							<CurrentWeather current={current} />
+							<WeatherGraphs hourly={current?.hourly} />
+							<ExtendedForecastCard
+								daily={current?.daily}
+								setSelectedDay={setSelectedDay}
+							/>
+						</Box>
+						<Box
+							w={'50%'}
+							style={{
+								transition: 'all 0.3s ease-in-out',
+								transform: selectedDay ? 'translateX(-100%)' : 'translateX(10%)',
+							}}
+						>
+							<ExtendedForecastDetails
+								selectedDay={selectedDay}
+								setSelectedDay={setSelectedDay}
+								selectedHourly={selectedHourly}
+								setSelectedHourly={setSelectedHourly}
+							/>
+						</Box>
+					</Group>
 				</Modal.Body>
 			</Modal.Content>
 		</Modal.Root>