Weather styling

src/components/WeatherModal/WeatherGraphs.tsx

@@ -1,6 +1,7 @@
 import { Stack, Text } from '@mantine/core';
 import {
 	Area,
+	AreaChart,
 	CartesianGrid,
 	ComposedChart,
 	Legend,
@@ -61,18 +62,12 @@ export default function WeatherGraphs({
 					<YAxis
 						stroke={'var(--mantine-color-primary-0)'}
 						unit={'°F'}
-						domain={['dataMin', 'dataMax']}
+						domain={([dataMin, dataMax]) => {
+							return [dataMin - 5, dataMax + 5];
+						}}
 					/>
 					<CartesianGrid stroke='#f5f5f522' />
 					<Tooltip content={<CustomTooltip />} />
-					<Line
-						unit={'°F'}
-						type='monotone'
-						name='Temperature'
-						dataKey='temperature'
-						stroke={'var(--mantine-color-primary-0)'}
-						dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
-					/>
 					<Line
 						unit={'°F'}
 						type='monotone'
@@ -81,13 +76,57 @@ export default function WeatherGraphs({
 							return (data.dewpoint.value * 9) / 5 + 32;
 						}}
 						stroke={'var(--mantine-color-accent-0)'}
-						dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
+						strokeWidth={2}
+						dot={{
+							stroke: 'var(--mantine-color-accent-0)',
+							strokeWidth: 0,
+							fill: 'var(--mantine-color-accent-0)',
+						}}
+					/>
+					<Line
+						unit={'°F'}
+						type='monotone'
+						name='Temperature'
+						dataKey='temperature'
+						stroke={'var(--mantine-color-primary-0)'}
+						strokeWidth={2}
+						dot={{
+							stroke: 'var(--mantine-color-primary-0)',
+							strokeWidth: 0,
+							fill: 'var(--mantine-color-primary-0)',
+						}}
 					/>
 					<Legend style={{ background: 'var(--mantine-color-search-0)' }} />
 				</ComposedChart>
 			</ResponsiveContainer>
 			<ResponsiveContainer width={'100%'} height={150}>
-				<ComposedChart data={hourlyForecast}>
+				<AreaChart data={hourlyForecast}>
+					<defs>
+						<linearGradient id='colorPrecipitation' x1='0' y1='0' x2='0' y2='1'>
+							<stop
+								offset='40%'
+								stopColor='var(--mantine-color-primary-0)'
+								stopOpacity={1}
+							/>
+							<stop
+								offset='100%'
+								stopColor='var(--mantine-color-primary-0)'
+								stopOpacity={0}
+							/>
+						</linearGradient>
+						<linearGradient id='colorHumidity' x1='0' y1='0' x2='0' y2='1'>
+							<stop
+								offset='20%'
+								stopColor='var(--mantine-color-accent-0)'
+								stopOpacity={1}
+							/>
+							<stop
+								offset='80%'
+								stopColor='var(--mantine-color-accent-0)'
+								stopOpacity={0}
+							/>
+						</linearGradient>
+					</defs>
 					<XAxis
 						type='category'
 						stroke={'var(--mantine-color-primary-0)'}
@@ -101,17 +140,6 @@ export default function WeatherGraphs({
 					<YAxis stroke={'var(--mantine-color-primary-0)'} unit={'%'} domain={[0, 100]} />
 					<CartesianGrid stroke='#f5f5f522' />
 					<Tooltip content={<CustomTooltip />} />
-					<Area
-						unit={'%'}
-						type='monotone'
-						name='Precipitation'
-						dataKey={(data: HourlyForecast) => {
-							return data.probabilityOfPrecipitation.value;
-						}}
-						stroke={'var(--mantine-color-primary-0)'}
-						fill={'var(--mantine-color-primary-0)'}
-						dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
-					/>
 					<Area
 						unit={'%'}
 						type='monotone'
@@ -120,11 +148,32 @@ export default function WeatherGraphs({
 							return data.relativeHumidity.value;
 						}}
 						stroke={'var(--mantine-color-accent-0)'}
-						fill={'var(--mantine-color-accent-0)'}
+						strokeWidth={2}
-						dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
+						fill={'url(#colorHumidity)'}
+						dot={{
+							stroke: 'var(--mantine-color-accent-0)',
+							strokeWidth: 0,
+							fill: 'var(--mantine-color-accent-0)',
+						}}
+					/>
+					<Area
+						unit={'%'}
+						type='monotone'
+						name='Precipitation'
+						dataKey={(data: HourlyForecast) => {
+							return data.probabilityOfPrecipitation.value;
+						}}
+						stroke={'var(--mantine-color-primary-0)'}
+						strokeWidth={2}
+						fill={'url(#colorPrecipitation)'}
+						dot={{
+							stroke: 'var(--mantine-color-primary-0)',
+							strokeWidth: 0,
+							fill: 'var(--mantine-color-primary-0)',
+						}}
 					/>
 					<Legend style={{ background: 'var(--mantine-color-search-0)' }} />
-				</ComposedChart>
+				</AreaChart>
 			</ResponsiveContainer>
 		</Stack>
 	);