Style fixes

src/components/WeatherModal/HourlyCard.tsx

@@ -12,9 +12,9 @@ export enum WindDirection {
 	NW = 315,
 }
 
-export default function HourlyCard({ weather }: any) {
+export default function HourlyCard({ weather, isMobile }: any) {
 	return (
-		<Stack gap={0} align='center'>
+		<Stack gap={0} align='center' mx={isMobile ? '.25rem' : 0}>
 			<Card
 				style={{
 					height: '8rem',
@@ -34,7 +34,7 @@ export default function HourlyCard({ weather }: any) {
 								day: 'numeric',
 							})}
 						</Text>
-						<Text fz={12} style={{ zIndex: 2 }}>
+						<Text fz={12} style={{ zIndex: 2, color: 'black' }}>
 							{new Date(weather.startTime).toLocaleTimeString('en-US', {
 								hour: 'numeric',
 								minute: 'numeric',
@@ -73,11 +73,16 @@ export default function HourlyCard({ weather }: any) {
 								style={{
 									position: 'absolute',
 									transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
+									color: 'black',
 								}}
 							/>
-							<Icon fontSize={28} icon={'mdi:circle-outline'} />
+							<Icon
+								fontSize={28}
+								icon={'mdi:circle-outline'}
+								style={{ color: 'black' }}
+							/>
 						</Center>
-						<Text mt={-6} fz={12}>
+						<Text mt={-6} fz={12} style={{ color: 'black' }}>
 							{weather.windSpeed}
 						</Text>
 					</Stack>
@@ -91,6 +96,7 @@ export default function HourlyCard({ weather }: any) {
 					textAlign: 'center',
 					borderRadius: '4px',
 					background: 'rgba(0, 0, 0, 0.6)',
+					color: 'white',
 				}}
 			>
 				{weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity.value}%
@@ -103,6 +109,7 @@ export default function HourlyCard({ weather }: any) {
 					textAlign: 'center',
 					borderRadius: '4px',
 					background: 'rgba(0, 0, 0, 0.6)',
+					color: 'white',
 				}}
 			>
 				<Group gap={0} justify='center'>