Style updates

src/components/WeatherModal/ExtendedForecastCard.tsx

@@ -1,4 +1,4 @@
-import { Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import { Card, Group, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { textClasses } from 'styles';
 import type { ExtendedForecast } from 'types';
@@ -13,31 +13,22 @@ export default function ExtendedForecastCard({
 	const day = forecast.slice(2, 14).filter((item: ExtendedForecast) => item.isDaytime);
 	const night = forecast.slice(2, 14).filter((item: ExtendedForecast) => !item.isDaytime);
 	return (
-		<Stack
-			gap={0}
+		<Card
 			w={'100%'}
-			justify='space-between'
 			style={{
+				color: 'var(--mantine-color-primary-0)',
 				backgroundColor: 'var(--mantine-color-search-0)',
 				padding: '1rem',
 				borderRadius: '8px',
 				paddingBottom: '.5rem',
+				marginTop: '.5rem',
+				overflow: 'visible',
 			}}
 		>
-			<Group
-				gap={0}
-				style={{ width: '100%', marginBottom: '.5rem', paddingLeft: '1rem' }}
-			>
-				<Text
-					style={{
-						fontSize: '1.375rem',
-						textAlign: 'left',
-					}}
-				>
-					Extended Forecast
-				</Text>
-			</Group>
-			<SimpleGrid w={'100%'} cols={isMobile ? 3 : 6}>
+			<Text className={textClasses.weatherTitle} classNames={textClasses}>
+				Extended Forecast
+			</Text>
+			<SimpleGrid w={'100%'} pt={'.5rem'} cols={isMobile ? 3 : 6}>
 				{day.map((item: ExtendedForecast, index: number) => {
 					const short = item.shortForecast.includes('And')
 						? item.shortForecast.substring(0, item.shortForecast.indexOf('And'))
@@ -56,7 +47,7 @@ export default function ExtendedForecastCard({
 							}}
 						>
 							<Text>{item.name}</Text>
-							<WeatherIcon textDescription={short} />
+							<WeatherIcon size='md' textDescription={short} />
 							<Group
 								justify={short.length > 15 ? 'flex-start' : 'center'}
 								style={{
@@ -82,6 +73,6 @@ export default function ExtendedForecastCard({
 					);
 				})}
 			</SimpleGrid>
-		</Stack>
+		</Card>
 	);
 }