Style fixes

README.md

@@ -28,3 +28,5 @@ sudo pm2 start server.cjs
 - Image uploads for backgrounds
 
 - Improve mobile
+
+- Update weather modal with design from https://github.com/esnz/react-weather-app?tab=readme-ov-file

src/components/WeatherModal/HourlyCard.tsx

@@ -29,13 +29,6 @@ export default function HourlyCard({ weather }: any) {
 			>
 				<Stack gap={0} h={'100%'} w={'100%'} align='center'>
 					<Stack gap={0} align='center'>
-						<Text mb={-6} fz={12} style={{ zIndex: 2 }}>
-							{new Date(weather.startTime).toLocaleString('en-US', {
-								weekday: 'short',
-								month: 'numeric',
-								day: 'numeric',
-							})}
-						</Text>
 						<Text fz={12} style={{ zIndex: 2, color: 'black' }}>
 							{new Date(weather.startTime).toLocaleTimeString('en-US', {
 								hour: 'numeric',

src/components/WeatherModal/WeatherModal.tsx

@@ -1,4 +1,4 @@
-import { Box, Center, Divider, Group, Modal, Stack } from '@mantine/core';
+import { Box, Center, Divider, Group, Modal, Stack, Text } from '@mantine/core';
 import { modalClasses } from 'styles';
 import SmallOutlookCard from './SmallOutlookCard';
 import SmallWeatherCard from './SmallWeatherCard';
@@ -15,8 +15,15 @@ export function WeatherModal({
 }: any) {
 	const [hourlyForecast, setHourlyForecast] = useState<any>([]);
 	const [sunset, setSunset] = useState(100);
-	const { theme, isMobile, hourly, setProviderLabel, setSearchValue, setProviderURL } =
+	const {
-		useCommonHooks();
+		theme,
+		isMobile,
+		hourly,
+		setProviderLabel,
+		setSearchValue,
+		setProviderURL,
+		personal,
+	} = useCommonHooks();
 	useEffect(() => {
 		if (hourly) {
 			setHourlyForecast(hourly.properties.periods.slice(1, 13));
@@ -62,7 +69,16 @@ export function WeatherModal({
 			<Modal.Overlay />
 			<Modal.Content>
 				<Modal.Header>
-					<Modal.Title>Weather Forecast</Modal.Title>
+					<Modal.Title>
+						<Group gap={8} style={{ borderBottom: `1px solid ${theme.borderColor}` }}>
+							<Text fz={18} fw={200}>
+								Weather Forecast for{' '}
+							</Text>
+							<Text fz={18} fw={600}>
+								{personal?.[0].physicalAddress}
+							</Text>
+						</Group>
+					</Modal.Title>
 					<Modal.CloseButton />
 				</Modal.Header>
 				<Modal.Body pb={'2rem'}>

src/hooks/useCommonHooks.ts

@@ -158,8 +158,8 @@ export function useCommonHooks() {
 	const { data: weatherMetadata } = useOSMAPI({ address: personal?.[0].physicalAddress });
 	const { data: points } = useWeatherAPI({
 		endpoint: 'points',
-		lat: weatherMetadata?.[0].lat,
+		lat: weatherMetadata?.[0].lat || 0,
-		lon: weatherMetadata?.[0].lon,
+		lon: weatherMetadata?.[0].lon || 0,
 	});
 	const { data: basicWeather } = useWeatherAPI({
 		endpoint: 'baseline',

src/pages/homepage/Homepage.tsx

@@ -23,6 +23,7 @@ export function Homepage() {
 		forecast,
 		personal,
 	} = useCommonHooks();
+
 	const [current, setCurrent] = useState<CurrentWeather>({
 		icon: '',
 		temperature: 0,

src/styles/ActionIcon.module.css

@@ -5,6 +5,7 @@
         width: 2rem;
         height: 2rem;
         margin-right: 1rem;
+        margin-top: 1.5rem;
         .icon {
             font-size: 24px;
         }

src/styles/Modal.module.css

@@ -1,9 +1,14 @@
 .helpModal {
     &.root {
         .content {
+            border-radius: 15px;
             color: var(--color-text-pri);
             background-color: var(--color-background);
             .header {
+                color: var(--color-text-pri);
+                .title {
+                    font-size: 22px;
+                }
                 .close {
                     color: white;
                     background-color: var(--mantine-color-red-6);
@@ -15,6 +20,9 @@
                     }
                 }
             }
+            .body {
+                margin-top: 1rem;
+            }
         }
     }