Updates to help modal

src/pages/homepage/Homepage.tsx

@@ -92,6 +92,8 @@ export function Homepage() {
 		windDirection: 0,
 		pressure: 0,
 	});
+	const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
+		useDisclosure(false);
 	const extendedForecast = forecast?.properties?.periods.map(
 		(item: ExtendedForecast) => ({
 			detailedForecast: item.detailedForecast,
@@ -209,6 +211,9 @@ export function Homepage() {
 						openWeatherModal={openWeatherModal}
 						position='top'
 						personal={personal}
+						providerModalOpened={providerModalOpened}
+						openProviderModal={openProviderModal}
+						closeProviderModal={closeProviderModal}
 					/>
 					<Header
 						greet={displayedGreeting}
@@ -235,10 +240,13 @@ export function Homepage() {
 						openWeatherModal={openWeatherModal}
 						position='center'
 						personal={personal}
+						providerModalOpened={providerModalOpened}
+						openProviderModal={openProviderModal}
+						closeProviderModal={closeProviderModal}
 					/>
 				</Box>
 			)}
-			<SettingsButton />
+			<SettingsButton openProviderModal={openProviderModal} />
 		</Stack>
 	);
 }

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

@@ -23,6 +23,8 @@ function Header({
 		theme,
 		textShadowStyle,
 		largeTextShadowStyle,
+		timeFormat,
+		setTimeFormat,
 	} = useCommonHooks();
 
 	useEffect(() => {
@@ -119,14 +121,19 @@ function Header({
 						style={{
 							textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
 						}}
+						onClick={() =>
+							timeFormat === '12h' ? setTimeFormat('24h') : setTimeFormat('12h')
+						}
 					>
-						{`${
-							time.getHours() === 0
-								? 12
-								: time.getHours() > 12
-									? time.getHours() - 12
-									: time.getHours()
-						}:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? 'PM' : 'AM'}`}
+						{timeFormat === '12h'
+							? `${
+									time.getHours() === 0
+										? 12
+										: time.getHours() > 12
+											? time.getHours() - 12
+											: time.getHours()
+								}:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? 'PM' : 'AM'}`
+							: `${fixDigits(time.getHours())}:${fixDigits(time.getMinutes())}`}
 					</Text>
 				</Group>
 			</Stack>

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

@@ -12,6 +12,8 @@ function LargeHeader({ greet, date }: { greet: string | undefined; date: string
 		theme,
 		textShadowStyle,
 		largeTextShadowStyle,
+		timeFormat,
+		setTimeFormat,
 	} = useCommonHooks();
 
 	useEffect(() => {
@@ -58,15 +60,21 @@ function LargeHeader({ greet, date }: { greet: string | undefined; date: string
 				classNames={textClasses}
 				style={{
 					textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
+					zIndex: 1,
 				}}
+				onClick={() =>
+					timeFormat === '12h' ? setTimeFormat('24h') : setTimeFormat('12h')
+				}
 			>
-				{`${
-					time.getHours() === 0
-						? 12
-						: time.getHours() > 12
-							? time.getHours() - 12
-							: time.getHours()
-				}:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? 'PM' : 'AM'}`}
+				{timeFormat === '12h'
+					? `${
+							time.getHours() === 0
+								? 12
+								: time.getHours() > 12
+									? time.getHours() - 12
+									: time.getHours()
+						}:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? 'PM' : 'AM'}`
+					: `${fixDigits(time.getHours())}:${fixDigits(time.getMinutes())}`}
 			</Text>
 		</Stack>
 	);

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

@@ -38,6 +38,9 @@ export default function Search({
 	openWeatherModal,
 	position,
 	personal,
+	providerModalOpened,
+	openProviderModal,
+	closeProviderModal,
 }: {
 	current: CurrentWeather;
 	extendedForecast: ExtendedForecast[];
@@ -46,6 +49,9 @@ export default function Search({
 	openWeatherModal: () => void;
 	position: string;
 	personal: PersonalData;
+	providerModalOpened: boolean;
+	openProviderModal: () => void;
+	closeProviderModal: () => void;
 }) {
 	const {
 		isMobile,
@@ -138,8 +144,6 @@ export default function Search({
 	const [historyMultiplier, setHistoryMultiplier] = useState(1);
 
 	const [dropdownOpened, { open: openDropdown, close: closeDropdown }] = useDisclosure();
-	const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
-		useDisclosure(false);
 
 	const handleResetSearch = () => {
 		setSearchValue('');

src/pages/homepage/components/SettingsButton/SettingsButton.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Group, Menu, Overlay, Stack } from '@mantine/core';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useState } from 'react';
-import { FiMenu, FiSettings } from 'react-icons/fi';
+import { FiHelpCircle, FiMenu, FiSettings } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 import { buttonClasses, menuClasses } from 'styles';
 import type { AppCategory, WolClient } from 'types';
@@ -9,7 +9,7 @@ import SettingsCard from './SettingsCard';
 import ThemingCard from './ThemingCard';
 import WakeOnLan from './WakeOnLanCard';
 
-function SettingsButton() {
+function SettingsButton({ openProviderModal }: { openProviderModal: () => void }) {
 	const { data: appCategoryData } = useQueryAPI({
 		endpoint: 'api/appCategories',
 	});
@@ -32,7 +32,7 @@ function SettingsButton() {
 		: [{ value: 'All', label: 'All' }];
 	const [selectedClient, setSelectedClient] = useState<WolClient>(wolClientData?.[0]);
 	const navigate = useNavigate();
-
+	const [isOpen, setIsOpen] = useState(false);
 	const {
 		theme,
 		isMobile,
@@ -72,10 +72,16 @@ function SettingsButton() {
 			withOverlay
 			overlayProps={{
 				blur: 5,
+				onClick: () => setIsOpen(false),
 			}}
+			opened={isOpen}
 		>
 			<Menu.Target>
-				<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
+				<Button
+					className={buttonClasses.settingsButton}
+					classNames={buttonClasses}
+					onClick={() => setIsOpen(true)}
+				>
 					<FiMenu />
 				</Button>
 			</Menu.Target>
@@ -149,6 +155,17 @@ function SettingsButton() {
 					>
 						Settings
 					</Button>
+					<Button
+						leftSection={<FiHelpCircle />}
+						className={buttonClasses.settingsMenuButton}
+						classNames={buttonClasses}
+						onClick={() => {
+							setIsOpen(false);
+							openProviderModal();
+						}}
+					>
+						Help
+					</Button>
 				</Group>
 			</Menu.Dropdown>
 		</Menu>