Style updates

package-lock.json

@@ -13,9 +13,9 @@
 				"@mantine/form": "^8.1.3",
 				"@mantine/hooks": "^8.1.3",
 				"@mantine/notifications": "^8.1.3",
-				"@tanstack/react-query": "^5.82.0",
+				"@tanstack/react-query": "^5.83.0",
-				"@tanstack/react-query-devtools": "^5.82.0",
+				"@tanstack/react-query-devtools": "^5.83.0",
-				"@tanstack/react-query-persist-client": "^5.82.0",
+				"@tanstack/react-query-persist-client": "^5.83.0",
 				"idb-keyval": "^6.2.2",
 				"jotai": "^2.12.5",
 				"react": "^19.1.0",
@@ -25,7 +25,7 @@
 				"recharts": "^3.1.0"
 			},
 			"devDependencies": {
-				"@types/node": "^24.0.12",
+				"@types/node": "^24.0.13",
 				"@types/react": "^19.1.8",
 				"@types/react-dom": "^19.1.6",
 				"@vitejs/plugin-react": "^4.6.0",
@@ -1630,9 +1630,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@tanstack/query-core": {
-			"version": "5.82.0",
+			"version": "5.83.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.82.0.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.83.0.tgz",
-			"integrity": "sha512-JrjoVuaajBQtnoWSg8iaPHaT4mW73lK2t+exxHNOSMqy0+13eKLqJgTKXKImLejQIfdAHQ6Un0njEhOvUtOd5w==",
+			"integrity": "sha512-0M8dA+amXUkyz5cVUm/B+zSk3xkQAcuXuz5/Q/LveT4ots2rBpPTZOzd7yJa2Utsf8D2Upl5KyjhHRY+9lB/XA==",
 			"license": "MIT",
 			"funding": {
 				"type": "github",
@@ -1650,12 +1650,12 @@
 			}
 		},
 		"node_modules/@tanstack/query-persist-client-core": {
-			"version": "5.82.0",
+			"version": "5.83.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.82.0.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.83.0.tgz",
-			"integrity": "sha512-lcjS9Zj9YKo5HNNB/GilPNZos9jKpNqpxmgPkJx2NsKEbgiVfyzWVxKAa09bkhKyWMQ/gMp8kx2RPuh/tG2wSw==",
+			"integrity": "sha512-hdKgHkr1MYnwZX+QHj/9JjXZx9gL2RUCD5xSX0EHZiqUQhMk4Gcryq9xosn8LmYRMlhkjk7n9uV+X4UXRvgoIg==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-core": "5.82.0"
+				"@tanstack/query-core": "5.83.0"
 			},
 			"funding": {
 				"type": "github",
@@ -1663,12 +1663,12 @@
 			}
 		},
 		"node_modules/@tanstack/react-query": {
-			"version": "5.82.0",
+			"version": "5.83.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.82.0.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.83.0.tgz",
-			"integrity": "sha512-mnk8/ofKEthFeMdhV1dV8YXRf+9HqvXAcciXkoo755d/ocfWq7N/Y9jGOzS3h7ZW9dDGwSIhs3/HANWUBsyqYg==",
+			"integrity": "sha512-/XGYhZ3foc5H0VM2jLSD/NyBRIOK4q9kfeml4+0x2DlL6xVuAcVEW+hTlTapAmejObg0i3eNqhkr2dT+eciwoQ==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-core": "5.82.0"
+				"@tanstack/query-core": "5.83.0"
 			},
 			"funding": {
 				"type": "github",
@@ -1679,9 +1679,9 @@
 			}
 		},
 		"node_modules/@tanstack/react-query-devtools": {
-			"version": "5.82.0",
+			"version": "5.83.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.82.0.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.83.0.tgz",
-			"integrity": "sha512-MC05Zq3zr/59jhgF7dL6JSGPg1krbasDSizmRxjNcvxgh/sUTwRFD9CGN10YYX7LB6jq0ZpFtCjSVGdLiFrKAA==",
+			"integrity": "sha512-yfp8Uqd3I1jgx8gl0lxbSSESu5y4MO2ThOPBnGNTYs0P+ZFu+E9g5IdOngyUGuo6Uz6Qa7p9TLdZEX3ntik2fQ==",
 			"license": "MIT",
 			"dependencies": {
 				"@tanstack/query-devtools": "5.81.2"
@@ -1691,24 +1691,24 @@
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/react-query": "^5.82.0",
+				"@tanstack/react-query": "^5.83.0",
 				"react": "^18 || ^19"
 			}
 		},
 		"node_modules/@tanstack/react-query-persist-client": {
-			"version": "5.82.0",
+			"version": "5.83.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.82.0.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.83.0.tgz",
-			"integrity": "sha512-5gzGHxq7XerI8SWSj19DHS4YrivlszumeyP4fPPhrfB3Awky/3c4lI3WBc1mDFsH21rKb0aXF15FSDsnNeN60w==",
+			"integrity": "sha512-uEqJnSbqlvzlhYJ+RU+2c2DmbbT7cw6eFjiewEXZFXaSGWNjvUG02LePrwL8cdLlRQFcZKas30IdckboOoVg9Q==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-persist-client-core": "5.82.0"
+				"@tanstack/query-persist-client-core": "5.83.0"
 			},
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/react-query": "^5.82.0",
+				"@tanstack/react-query": "^5.83.0",
 				"react": "^18 || ^19"
 			}
 		},
@@ -1847,9 +1847,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@types/node": {
-			"version": "24.0.12",
+			"version": "24.0.13",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.12.tgz",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.13.tgz",
-			"integrity": "sha512-LtOrbvDf5ndC9Xi+4QZjVL0woFymF/xSTKZKPgrrl7H7XoeDvnD+E2IclKVDyaK9UM756W/3BXqSU+JEHopA9g==",
+			"integrity": "sha512-Qm9OYVOFHFYg3wJoTSrz80hoec5Lia/dPp84do3X7dZvLikQvM1YpmvTBEdIr/e+U8HTkFjLHLnl78K/qjf+jQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {

package.json

@@ -15,9 +15,9 @@
 		"@mantine/form": "^8.1.3",
 		"@mantine/hooks": "^8.1.3",
 		"@mantine/notifications": "^8.1.3",
-		"@tanstack/react-query": "^5.82.0",
+		"@tanstack/react-query": "^5.83.0",
-		"@tanstack/react-query-devtools": "^5.82.0",
+		"@tanstack/react-query-devtools": "^5.83.0",
-		"@tanstack/react-query-persist-client": "^5.82.0",
+		"@tanstack/react-query-persist-client": "^5.83.0",
 		"idb-keyval": "^6.2.2",
 		"jotai": "^2.12.5",
 		"react": "^19.1.0",
@@ -27,7 +27,7 @@
 		"recharts": "^3.1.0"
 	},
 	"devDependencies": {
-		"@types/node": "^24.0.12",
+		"@types/node": "^24.0.13",
 		"@types/react": "^19.1.8",
 		"@types/react-dom": "^19.1.6",
 		"@vitejs/plugin-react": "^4.6.0",

src/components/HelpModal/HelpSection.tsx

@@ -1,30 +1,20 @@
-import { Group } from '@mantine/core';
+import { Group, Text } from '@mantine/core';
+import { textClasses } from 'styles';
 import type { SearchShortcut } from 'types';
 import HintItem from './HintItem';
 
 function HelpSection({ name, items }: { name: string; items: SearchShortcut[] }) {
 	return (
-		<>
+		<Group gap={4}>
-			<h3
+			<Text className={textClasses.helpTitle} classNames={textClasses}>
-				style={{
-					zIndex: 0,
-					padding: '.5rem',
-					marginTop: 0,
-					marginBottom: '-1.25rem',
-					borderRadius: '8px',
-					color: 'var(--mantine-color-background-0)',
-					backgroundColor: 'var(--mantine-color-border-0)',
-				}}
-			>
 				{name}
-			</h3>
+			</Text>
 			<Group
 				style={{
 					width: '100%',
 					backgroundColor: 'var(--mantine-color-search-0)',
 					borderRadius: '8px',
 					padding: '1.5rem',
-					justifyItems: 'center',
 				}}
 			>
 				{items
@@ -35,7 +25,7 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
 						<HintItem key={item.command} command={item.command} name={item.name} />
 					))}
 			</Group>
-		</>
+		</Group>
 	);
 }
 

src/components/WeatherModal/CurrentWeather.tsx

@@ -1,11 +1,12 @@
-import { Grid, Group, Stack, Text, ThemeIcon } from '@mantine/core';
+import { Box, Card, Group, Stack, Text } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { useSunStateAPI } from 'hooks/useAPI';
 import { useEffect, useState } from 'react';
 import { FaLongArrowAltDown, FaLongArrowAltUp, FaWind } from 'react-icons/fa';
 import { WiBarometer, WiHumidity, WiSunrise, WiSunset } from 'react-icons/wi';
-import { themeIconClasses } from 'styles';
+import { textClasses } from 'styles';
 import type { CurrentWeather as CW, SunState } from 'types';
+import WeatherFeaturePill from './WeatherFeaturePill';
 import WeatherIcon from './WeatherIcon';
 
 export default function CurrentWeather({ current }: { current: CW }) {
@@ -33,223 +34,251 @@ export default function CurrentWeather({ current }: { current: CW }) {
 	return (
 		<>
 			{current && (
-				<Stack
+				<Card
-					gap={0}
-					justify='space-between'
 					style={{
-						width: '100%',
 						color: 'var(--mantine-color-primary-0)',
 						backgroundColor: 'var(--mantine-color-search-0)',
 						padding: '1rem',
 						borderRadius: '8px',
 						paddingBottom: '.5rem',
+						marginTop: '1rem',
+						overflow: 'visible',
 					}}
 				>
-					<Group
+					<Text className={textClasses.weatherTitle} classNames={textClasses}>
-						gap={0}
+						Current Weather
-						justify='space-between'
+					</Text>
-						style={{ width: '100%', paddingLeft: '1rem' }}
+					<Group gap={32} w={'100%'} align='center' justify='center' pt={'.5rem'}>
-					>
+						<Stack gap={4} align='center'>
-						<Text
+							<Stack
-							style={{
+								gap={0}
-								fontSize: '1.375rem',
-								textAlign: 'right',
-							}}
-						>
-							Current Weather
-						</Text>
-					</Group>
-					<Group gap={8} justify='space-between'>
-						<Stack gap={0} w={isMobile ? '40%' : '45%'}>
-							<Group gap={0} justify='flex-end'>
-								<WeatherIcon
-									textDescription={`${
-										current.textDescription.includes('and')
-											? current.textDescription.substring(
-													0,
-													current.textDescription.indexOf('and'),
-												)
-											: current.textDescription.includes('then')
-												? current.textDescription.substring(
-														0,
-														current.textDescription.indexOf('then'),
-													)
-												: current.textDescription
-									}`}
-								/>
-								<Text fz={isMobile ? '5rem' : '7rem'} fw={200}>
-									{current.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup>
-								</Text>
-							</Group>
-							<Text
 								style={{
-									fontSize: '1.375rem',
+									overflow: 'hidden',
-									textAlign: 'right',
+									backgroundColor: 'var(--mantine-color-background-0)',
-									marginTop: '-2rem',
+									border: 'thin solid var(--mantine-color-primary-0)',
-									marginLeft: '1rem',
+									zIndex: 1,
+									padding: '1rem',
+									borderRadius: '8px',
 								}}
 							>
-								{current.temperature === 69 ? 'Nice' : current.textDescription}
+								<Group pos={'relative'}>
-							</Text>
+									<Box
+										style={{
+											position: 'absolute',
+											right: '-1.25rem',
+											bottom: '-1.25rem',
+											zIndex: -1,
+											opacity: 0.5,
+										}}
+									>
+										<WeatherIcon
+											size={'lg'}
+											textDescription={`${
+												current.textDescription.includes('and')
+													? current.textDescription.substring(
+															0,
+															current.textDescription.indexOf('and'),
+														)
+													: current.textDescription.includes('then')
+														? current.textDescription.substring(
+																0,
+																current.textDescription.indexOf('then'),
+															)
+														: current.textDescription
+											}`}
+										/>
+									</Box>
+									<Text fz={isMobile ? '5rem' : '7rem'} fw={400}>
+										{current.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup>
+									</Text>
+									<Box
+										style={{
+											position: 'absolute',
+											backgroundColor:
+												'color-mix(in srgb, var(--mantine-color-accent-0), transparent 80%)',
+											height: '200%',
+											width: '100%',
+											bottom: -40,
+											right: -72,
+											transform: 'skewX(-25deg)',
+											zIndex: -1,
+											borderRadius: '2px',
+											backdropFilter: 'brightness(0.5)',
+										}}
+									/>
+								</Group>
+								<Group
+									justify={current.textDescription.length > 25 ? 'flex-start' : 'center'}
+									style={{
+										width: '100%',
+										maxWidth: '180px',
+										whiteSpace: 'nowrap',
+										overflow: 'hidden',
+										boxSizing: 'border-box',
+										position: 'relative',
+									}}
+								>
+									<Text
+										className={
+											current.textDescription.length > 25
+												? textClasses.autoScrollText
+												: undefined
+										}
+										classNames={textClasses}
+									>
+										{current.temperature === 69 ? 'Nice' : current.textDescription}
+									</Text>
+								</Group>
+							</Stack>
+							<WeatherFeaturePill
+								leftSide={<Text>Feels like </Text>}
+								rightSide={
+									<Text>
+										{current.heatIndex ?? current.windChill ?? current.temperature}°
+										<sup>F</sup>
+									</Text>
+								}
+								highlight='right'
+							/>
 						</Stack>
-						<Stack gap={4} w={isMobile ? '50%' : '45%'}>
+						<Stack gap={10}>
-							<Text>
+							<Stack gap={0} align='center'>
-								Feels like {current.heatIndex ?? current.windChill ?? current.temperature}
+								<Text
-								°<sup>F</sup>
+									className={textClasses.sectionTitle}
-							</Text>
+									classNames={textClasses}
-							<Grid align='center'>
-								<Grid.Col span={1}>
-									<ThemeIcon
-										className={themeIconClasses.weatherIcon}
-										classNames={themeIconClasses}
-									>
-										<FaLongArrowAltUp size={32} />
-									</ThemeIcon>
-								</Grid.Col>
-								<Grid.Col
-									span={3}
 									style={{
-										marginInlineStart: isMobile ? '1rem' : undefined,
+										textAlign: 'center',
 									}}
+									w={'100%'}
 								>
-									<Text>
+									Temperatures
-										{current.highTemp}°<sup>F</sup>
+								</Text>
-									</Text>
+								<Group justify='center'>
-								</Grid.Col>
+									<WeatherFeaturePill
-								<Grid.Col span={1}>
+										leftSide={
-									<ThemeIcon
+											<Group gap={0}>
-										className={themeIconClasses.weatherIcon}
+												<FaLongArrowAltUp size={16} />
-										classNames={themeIconClasses}
+												High
-									>
+											</Group>
-										<FaLongArrowAltDown size={32} />
+										}
-									</ThemeIcon>
+										rightSide={
-								</Grid.Col>
+											<Text>
-								<Grid.Col
+												{current.highTemp}°<sup>F</sup>
-									span={1}
+											</Text>
+										}
+										highlight='right'
+									/>
+									<WeatherFeaturePill
+										leftSide={
+											<Group gap={0}>
+												<FaLongArrowAltDown size={16} />
+												Low
+											</Group>
+										}
+										rightSide={
+											<Text>
+												{current.lowTemp}°<sup>F</sup>
+											</Text>
+										}
+										highlight='right'
+									/>
+								</Group>
+							</Stack>
+							<Stack gap={0} align='center'>
+								<Text
+									className={textClasses.sectionTitle}
+									classNames={textClasses}
 									style={{
-										marginInlineStart: isMobile ? '1rem' : undefined,
+										textAlign: 'center',
 									}}
+									w={'100%'}
 								>
-									<Text>
+									Conditions
-										{current.lowTemp}°<sup>F</sup>
+								</Text>
-									</Text>
+								<Group justify='center'>
-								</Grid.Col>
+									<WeatherFeaturePill
-							</Grid>
+										leftSide={
-							<Grid align='center'>
+											<Group gap={0}>
-								<Grid.Col span={1}>
+												<WiHumidity size={16} />
-									<ThemeIcon
+												Humidity
-										className={themeIconClasses.weatherIcon}
+											</Group>
-										classNames={themeIconClasses}
+										}
-									>
+										rightSide={<Text>{current.humidity}%</Text>}
-										<WiSunrise size={32} />
+										highlight='right'
-									</ThemeIcon>
+									/>
-								</Grid.Col>
+									<WeatherFeaturePill
-								<Grid.Col
+										leftSide={
-									span={3}
+											<Group gap={0}>
+												<FaWind size={16} />
+												Wind
+											</Group>
+										}
+										rightSide={<Text>{current.windSpeed}mph</Text>}
+										highlight='right'
+									/>
+									<WeatherFeaturePill
+										leftSide={
+											<Group gap={0}>
+												<WiBarometer size={16} />
+												Pressure
+											</Group>
+										}
+										rightSide={<Text>{current.pressure} in</Text>}
+										highlight='right'
+									/>
+								</Group>
+							</Stack>
+							<Stack gap={0} align='center'>
+								<Text
+									className={textClasses.sectionTitle}
+									classNames={textClasses}
 									style={{
-										marginInlineStart: isMobile ? '1rem' : undefined,
+										textAlign: 'center',
 									}}
+									w={'100%'}
 								>
-									<Text>{sunStates[0]?.sunrise}</Text>
+									Sun Cycle
-								</Grid.Col>
+								</Text>
-								<Grid.Col span={1}>
+								<Group justify='center'>
-									<ThemeIcon
+									<WeatherFeaturePill
-										className={themeIconClasses.weatherIcon}
+										leftSide={
-										classNames={themeIconClasses}
+											<Group gap={0}>
-									>
+												<WiSunrise
-										<WiSunset size={32} />
+													size={18}
-									</ThemeIcon>
+													style={{
-								</Grid.Col>
+														marginTop: '2px',
-								<Grid.Col
+														marginBottom: '2px',
-									span={3}
+														marginLeft: -6,
-									style={{
+														marginRight: -6,
-										marginInlineStart: isMobile ? '1rem' : undefined,
+													}}
-									}}
+												/>
-								>
+											</Group>
-									<Text>{sunStates[0]?.sunset}</Text>
+										}
-								</Grid.Col>
+										rightSide={<Text>{sunStates[0]?.sunrise}</Text>}
-							</Grid>
+										highlight='left'
-							<Grid align='center'>
+									/>
-								<Grid.Col span={1}>
+									<WeatherFeaturePill
-									<ThemeIcon
+										leftSide={
-										className={themeIconClasses.weatherIcon}
+											<Group gap={0}>
-										classNames={themeIconClasses}
+												<WiSunset
-									>
+													size={18}
-										<WiHumidity size={32} />
+													style={{
-									</ThemeIcon>
+														marginTop: '2px',
-								</Grid.Col>
+														marginBottom: '2px',
-								<Grid.Col
+														marginLeft: -6,
-									span={isMobile ? 4 : 3}
+														marginRight: -6,
-									style={{
+													}}
-										marginInlineStart: isMobile ? '1rem' : undefined,
+												/>
-									}}
+											</Group>
-								>
+										}
-									<Text>Humidity</Text>
+										rightSide={<Text>{sunStates[0]?.sunset}</Text>}
-								</Grid.Col>
+										highlight='left'
-								<Grid.Col
+									/>
-									span={2}
+								</Group>
-									style={{
+							</Stack>
-										marginInlineStart: isMobile ? '1rem' : undefined,
-									}}
-								>
-									<Text>{current.humidity}%</Text>
-								</Grid.Col>
-							</Grid>
-							<Grid align='center'>
-								<Grid.Col span={1}>
-									<ThemeIcon
-										className={themeIconClasses.weatherIcon}
-										classNames={themeIconClasses}
-									>
-										<FaWind size={28} />
-									</ThemeIcon>
-								</Grid.Col>
-								<Grid.Col
-									span={3}
-									style={{
-										marginInlineStart: isMobile ? '1rem' : undefined,
-									}}
-								>
-									<Text>Wind</Text>
-								</Grid.Col>
-								<Grid.Col
-									span={isMobile ? 4 : 3}
-									style={{
-										marginInlineStart: isMobile ? '1rem' : undefined,
-									}}
-								>
-									<Text>{current.windSpeed}mph</Text>
-								</Grid.Col>
-							</Grid>
-							<Grid align='center'>
-								<Grid.Col span={1}>
-									<ThemeIcon
-										className={themeIconClasses.weatherIcon}
-										classNames={themeIconClasses}
-									>
-										<WiBarometer size={32} />
-									</ThemeIcon>
-								</Grid.Col>
-								<Grid.Col
-									span={3}
-									style={{
-										marginInlineStart: isMobile ? '1rem' : undefined,
-									}}
-								>
-									<Text>Pressure</Text>
-								</Grid.Col>
-								<Grid.Col
-									span={isMobile ? 4 : 3}
-									style={{
-										marginInlineStart: isMobile ? '1rem' : undefined,
-									}}
-								>
-									<Text>{current.pressure} in</Text>
-								</Grid.Col>
-							</Grid>
 						</Stack>
 					</Group>
-				</Stack>
+				</Card>
 			)}
 		</>
 	);

src/components/WeatherModal/ExtendedForecastCard.tsx

@@ -1,4 +1,4 @@
-import { Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import { Card, Group, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { textClasses } from 'styles';
 import type { ExtendedForecast } from 'types';
@@ -13,31 +13,22 @@ export default function ExtendedForecastCard({
 	const day = forecast.slice(2, 14).filter((item: ExtendedForecast) => item.isDaytime);
 	const night = forecast.slice(2, 14).filter((item: ExtendedForecast) => !item.isDaytime);
 	return (
-		<Stack
+		<Card
-			gap={0}
 			w={'100%'}
-			justify='space-between'
 			style={{
+				color: 'var(--mantine-color-primary-0)',
 				backgroundColor: 'var(--mantine-color-search-0)',
 				padding: '1rem',
 				borderRadius: '8px',
 				paddingBottom: '.5rem',
+				marginTop: '.5rem',
+				overflow: 'visible',
 			}}
 		>
-			<Group
+			<Text className={textClasses.weatherTitle} classNames={textClasses}>
-				gap={0}
+				Extended Forecast
-				style={{ width: '100%', marginBottom: '.5rem', paddingLeft: '1rem' }}
+			</Text>
-			>
+			<SimpleGrid w={'100%'} pt={'.5rem'} cols={isMobile ? 3 : 6}>
-				<Text
-					style={{
-						fontSize: '1.375rem',
-						textAlign: 'left',
-					}}
-				>
-					Extended Forecast
-				</Text>
-			</Group>
-			<SimpleGrid w={'100%'} cols={isMobile ? 3 : 6}>
 				{day.map((item: ExtendedForecast, index: number) => {
 					const short = item.shortForecast.includes('And')
 						? item.shortForecast.substring(0, item.shortForecast.indexOf('And'))
@@ -56,7 +47,7 @@ export default function ExtendedForecastCard({
 							}}
 						>
 							<Text>{item.name}</Text>
-							<WeatherIcon textDescription={short} />
+							<WeatherIcon size='md' textDescription={short} />
 							<Group
 								justify={short.length > 15 ? 'flex-start' : 'center'}
 								style={{
@@ -82,6 +73,6 @@ export default function ExtendedForecastCard({
 					);
 				})}
 			</SimpleGrid>
-		</Stack>
+		</Card>
 	);
 }

src/components/WeatherModal/WeatherFeaturePill.tsx

@@ -0,0 +1,61 @@
+import { Box, Group } from '@mantine/core';
+
+function WeatherFeaturePill({
+	leftSide,
+	rightSide,
+	highlight,
+}: {
+	leftSide: React.ReactNode;
+	rightSide: React.ReactNode;
+	highlight?: string;
+}) {
+	return (
+		<Group
+			gap={2}
+			w={'fit-content'}
+			style={{
+				color: 'var(--mantine-color-background-0)',
+				backgroundColor: 'var(--mantine-color-primary-0)',
+				borderRadius: '16px',
+				padding: '2px',
+			}}
+		>
+			<Box
+				style={{
+					color:
+						highlight === 'left'
+							? 'var(--mantine-color-primary-0)'
+							: 'var(--mantine-color-background-0)',
+					backgroundColor:
+						highlight === 'left'
+							? 'var(--mantine-color-background-0)'
+							: 'var(--mantine-color-primary-0)',
+					borderRadius: '16px',
+					paddingLeft: '8px',
+					paddingRight: '8px',
+				}}
+			>
+				{leftSide}
+			</Box>
+			<Box
+				style={{
+					color:
+						highlight === 'right'
+							? 'var(--mantine-color-primary-0)'
+							: 'var(--mantine-color-background-0)',
+					backgroundColor:
+						highlight === 'right'
+							? 'var(--mantine-color-background-0)'
+							: 'var(--mantine-color-primary-0)',
+					borderRadius: '16px',
+					paddingLeft: '8px',
+					paddingRight: '8px',
+				}}
+			>
+				{rightSide}
+			</Box>
+		</Group>
+	);
+}
+
+export default WeatherFeaturePill;

src/components/WeatherModal/WeatherIcon.tsx

@@ -10,7 +10,13 @@ import SunnyIcon from '../../assets/weather/sunny.svg';
 import ThunderstormIcon from '../../assets/weather/thunderstorm.svg';
 import WindyIcon from '../../assets/weather/windy.svg';
 
-export default function WeatherIcon({ textDescription }: { textDescription: string }) {
+export default function WeatherIcon({
+	size,
+	textDescription,
+}: {
+	size: string;
+	textDescription: string;
+}) {
 	const icon = textDescription.includes('then')
 		? textDescription.substring(0, textDescription.trim().indexOf('then'))
 		: textDescription;
@@ -173,7 +179,11 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 
 	return (
 		<Image
-			style={{ width: '75px', height: '75px' }}
+			style={
+				size === 'lg'
+					? { width: '150px', height: '150px' }
+					: { width: '75px', height: '75px' }
+			}
 			src={lookupSource(icon).src}
 			alt={lookupSource(icon).alt}
 		/>

src/pages/homepage/Homepage.tsx

@@ -137,14 +137,17 @@ export function Homepage() {
 			temperatureUnit: 'F',
 		},
 	]);
-
 	useEffect(() => {
 		if (weather !== undefined && basicWeather !== undefined) {
 			setCurrent({
 				icon: weather.features[0]?.properties.icon?.replace('medium', 'large') ?? '',
 				textDescription: weather.features[0]?.properties.textDescription,
 				temperature: Math.round(
-					(weather.features[0]?.properties.temperature.value * 9) / 5 + 32,
+					(weather.features.find((feature: any) => feature.properties.temperature.value)
+						.properties.temperature.value *
+						9) /
+						5 +
+						32,
 				),
 				highTemp: Math.round(
 					(basicWeather.properties.maxTemperature.values[0].value * 9) / 5 + 32,

src/pages/homepage/components/Applications/Applications.tsx

@@ -42,11 +42,7 @@ function Applications({ contentType }: { contentType: string[] }) {
 		<>
 			{applications.length > 0 && contentType.length > 0 && (
 				<Stack gap={0}>
-					<Text
+					<Text className={textClasses.sectionTitle} classNames={textClasses}>
-						fz={appScale * 20}
-						className={textClasses.sectionTitle}
-						classNames={textClasses}
-					>
 						Applications
 					</Text>
 					<Stack

src/pages/homepage/components/Bookmarks/Bookmarks.tsx

@@ -60,9 +60,10 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 				contentType.length > 0 && (
 					<Stack gap={0}>
 						<Text
-							fz={bookmarkScale * 20}
 							className={textClasses.sectionTitle}
 							classNames={textClasses}
+							mb={'-.5rem'}
+							mt={'1.25rem'}
 						>
 							Bookmarks
 						</Text>

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

@@ -53,6 +53,7 @@ function SettingsCard({
 					top: -8,
 					backgroundColor: 'var(--mantine-color-primary-0)',
 					color: 'var(--mantine-color-background-0)',
+					boxShadow: '2px -2px var(--mantine-color-border-0)',
 				}}
 			>
 				{sectionTitle}

src/styles/ActionIcon.module.css

@@ -6,7 +6,7 @@
 		height: 2rem;
 		margin-top: 1.5rem;
 		.icon {
-			font-size: 1.5rem;
+			font-size: 2.5rem;
 		}
 		.loader {
 			display: none;

src/styles/Text.module.css

@@ -28,12 +28,49 @@
 
 .sectionTitle {
 	&.root {
-		text-decoration: underline;
+		width: fit-content;
-		font-weight: 200;
+		font-size: 1.25rem;
-		font-style: italic;
+		font-weight: 600;
-		text-transform: uppercase;
+		margin-top: .75rem;
-		margin-top: 1.25rem;
+		margin-bottom: .5rem;
+		margin-left: -.25rem;
 		color: var(--mantine-color-primary-0);
+		background-color: transparent;
+		box-shadow: 2px 2px color-mix(in srgb, var(--mantine-color-border-0), transparent 50%);
+		border-radius: 4px;
+		padding-left: .5rem;
+		padding-right: .5rem;
+		font-style: italic;
+	}
+}
+
+.weatherTitle {
+	&.root {
+		width: fit-content;
+		font-size: 1.25rem;
+		font-weight: 600;
+		color: var(--mantine-color-background-0);
+		background-color: var(--mantine-color-primary-0);
+		box-shadow: 2px 2px var(--mantine-color-border-0);
+		border-radius: 4px;
+		padding-left: .5rem;
+		padding-right: .5rem;
+		margin-top: -2rem;
+	}
+}
+
+.helpTitle {
+	&.root {
+		width: fit-content;
+		font-weight: 600;
+		z-index: 0;
+		padding: .5rem;
+		margin-top: 0;
+		margin-bottom: -1.25rem;
+		border-radius: 8px;
+		color: var(--mantine-color-background-0);
+		background-color: var(--mantine-color-primary-0);
+		box-shadow: 2px 2px var(--mantine-color-border-0);
 	}
 }
 
@@ -95,8 +132,9 @@
 		font-size: 2rem;
 		font-weight: bold;
 		margin-top: 1.5rem;
-		color: var(--mantine-color-accent-0);
+		color: var(--mantine-color-primary-0);
 		background-color: var(--mantine-color-search-0);
+		box-shadow: 4px -4px color-mix(in srgb, var(--mantine-color-border-0), transparent 50%);
 		border-radius: 8px;
 		padding-left: .5rem;
 		padding-right: .5rem;

src/styles/ThemeIcon.module.css

@@ -1,6 +0,0 @@
-.weatherIcon {
-	height: auto !important;
-	width: auto !important;
-	color: var(--mantine-color-primary-0) !important;
-	background: transparent !important;
-}

src/styles/index.ts

@@ -15,7 +15,6 @@ import switchClasses from './Switch.module.css';
 import tabClasses from './Tabs.module.css';
 import textClasses from './Text.module.css';
 import textInputClasses from './TextInput.module.css';
-import themeIconClasses from './ThemeIcon.module.css';
 
 export {
 	actionIconClasses,
@@ -35,5 +34,4 @@ export {
 	tabClasses,
 	textClasses,
 	textInputClasses,
-	themeIconClasses,
 };