Layout change

README.md

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

src/components/WeatherModal/CurrentWeather.tsx

@@ -21,15 +21,15 @@ export default function CurrentWeather({ weather }: any) {
 					c={'var(--color-text-pri)'}
 					style={{
 						fontSize: '1.375rem',
-						textAlign: 'left',
+						textAlign: 'right',
 					}}
 				>
 					Current Weather
 				</Text>
 			</Group>
-			<Group gap={0} w={'100%'}>
-				<Stack gap={0} w={'50%'}>
-					<Group gap={0}>
+			<Group gap={8} w={'100%'} justify='space-between'>
+				<Stack gap={0} w={'45%'}>
+					<Group gap={0} justify='flex-end'>
 						<WeatherIcon textDescription={`${weather.textDescription}`} />
 						<Text fz={'7rem'} fw={200}>
 							{weather.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup>
@@ -39,7 +39,7 @@ export default function CurrentWeather({ weather }: any) {
 						c={'var(--color-text-pri)'}
 						style={{
 							fontSize: '1.375rem',
-							textAlign: 'left',
+							textAlign: 'right',
 							marginTop: -32,
 							marginLeft: 16,
 						}}
@@ -47,7 +47,7 @@ export default function CurrentWeather({ weather }: any) {
 						{weather.textDescription}
 					</Text>
 				</Stack>
-				<Stack gap={4} w={'50%'}>
+				<Stack gap={4} w={'45%'}>
 					<Text>
 						Feels like {weather.heatIndex ?? weather.windChill ?? weather.temperature}°
 						<sup>F</sup>