Style fixes

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 } =
-		useCommonHooks();
+	const {
+		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'}>