Mobile and style improvements

src/pages/homepage/components/Header/Header.tsx

@@ -1,5 +1,4 @@
 import { Group, Stack, Text } from '@mantine/core';
-import { WeatherModal } from 'components';
 import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
@@ -9,12 +8,8 @@ function Header({
 	date,
 	current,
 	setCurrent,
-	outlook,
-	extendedForecast,
 	weather,
 	basicWeather,
-	weatherModalOpened,
-	closeWeatherModal,
 	openWeatherModal,
 }: any) {
 	const [time, setTime] = useState(new Date());
@@ -127,6 +122,7 @@ function Header({
 							position: 'absolute',
 							bottom: isMobile ? -32 : 0,
 							right: 16,
+							cursor: 'pointer',
 						}}
 						onClick={openWeatherModal}
 					>
@@ -158,13 +154,6 @@ function Header({
 					</Text>
 				</Group>
 			</Stack>
-			<WeatherModal
-				current={current}
-				outlook={outlook}
-				extendedForecast={extendedForecast}
-				closeWeatherModal={closeWeatherModal}
-				weatherModalOpened={weatherModalOpened}
-			/>
 		</Stack>
 	);
 }

src/pages/homepage/components/Search/Search.tsx

@@ -43,6 +43,7 @@ export default function Search({
 	const [listIndex, setListIndex] = useState(0);
 	const {
 		theme,
+		isMobile,
 		urlPattern,
 		providerLabel,
 		setProviderLabel,
@@ -263,7 +264,13 @@ export default function Search({
 		const [showFillButton, setShowFillButton] = useState(false);
 		if (item.option.searchTerm !== undefined) {
 			const m = new Date(item.option.dateTimeStamp);
-			const dateString = `${m.getUTCFullYear()}/${`0${m.getUTCMonth() + 1}`.slice(-2)}/${`0${m.getUTCDate()}`.slice(-2)} ${`0${m.getUTCHours()}`.slice(-2)}:${`0${m.getUTCMinutes()}`.slice(-2)}:${`0${m.getUTCSeconds()}`.slice(-2)}`;
+			const year = m.getUTCFullYear();
+			const month = `0${m.getUTCMonth() + 1}`.slice(-2);
+			const day = `0${m.getUTCDate()}`.slice(-2);
+			const hours = `0${m.getUTCHours()}`.slice(-2);
+			const minutes = `0${m.getUTCMinutes()}`.slice(-2);
+			const seconds = `0${m.getUTCSeconds()}`.slice(-2);
+			const dateString = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
 			return (
 				<Group
 					w={'100%'}
@@ -446,7 +453,7 @@ export default function Search({
 				}}
 				spellCheck='true'
 				searchable
-				autoFocus
+				autoFocus={!isMobile}
 				leftSection={providerLabel}
 				rightSection={<Stack />}
 				renderOption={RenderOption}
@@ -478,6 +485,9 @@ export default function Search({
 				closeProviderModal={closeProviderModal}
 			/>
 			<WeatherModal
+				setSearchValue={setSearchValue}
+				setProviderLabel={setProviderLabel}
+				setProviderURL={setProviderURL}
 				current={current}
 				outlook={outlook}
 				extendedForecast={extendedForecast}