Style uniformity

src/components/HelpModal/HelpModal.tsx

@@ -56,7 +56,7 @@ export function HelpModal({
 								};
 							})}
 						/>
-						<Divider my={8} color={'var(--mantine-color-accent-0)'} />
+						<Divider my={'.5rem'} color={'var(--mantine-color-accent-0)'} />
 						<HelpSection
 							name={'Available Applications'}
 							items={applicationData.map((application: Application) => {

src/components/HelpModal/HelpSection.tsx

@@ -8,9 +8,9 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
 			<h3
 				style={{
 					zIndex: 0,
-					padding: '8px',
+					padding: '.5rem',
 					marginTop: 0,
-					marginBottom: -32,
+					marginBottom: '-2rem',
 					borderRadius: '8px',
 					color: 'var(--mantine-color-background-0)',
 					backgroundColor: 'var(--mantine-color-border-0)',
@@ -18,13 +18,13 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
 			>
 				{name}
 			</h3>
-			<Divider py={8} color={'var(--mantine-color-accent-0)'} />
+			<Divider py={'.5rem'} color={'var(--mantine-color-accent-0)'} />
 			<Group
 				style={{
 					width: '100%',
 					backgroundColor: 'var(--mantine-color-search-0)',
 					borderRadius: '8px',
-					padding: '24px',
+					padding: '1.5rem',
 					justifyItems: 'center',
 				}}
 			>

src/components/HelpModal/HintItem.tsx

@@ -8,7 +8,7 @@ function HintItem({ command, name }: { command: string; name: string }) {
 			justify='center'
 			style={{
 				display: 'flex',
-				padding: '8px',
+				padding: '.5rem',
 				borderRadius: '10px',
 				backgroundColor: 'var(--mantine-color-background-0)',
 			}}
@@ -17,7 +17,7 @@ function HintItem({ command, name }: { command: string; name: string }) {
 				style={{
 					color: 'var(--mantine-color-background-0)',
 					backgroundColor: 'var(--mantine-color-primary-0)',
-					padding: '8px',
+					padding: '.5rem',
 					borderTopLeftRadius: '10px',
 					borderBottomLeftRadius: '10px',
 				}}
@@ -28,7 +28,7 @@ function HintItem({ command, name }: { command: string; name: string }) {
 				style={{
 					color: 'var(--mantine-color-background-0)',
 					backgroundColor: 'var(--mantine-color-accent-0)',
-					padding: '8px',
+					padding: '.5rem',
 					borderTopRightRadius: '10px',
 					borderBottomRightRadius: '10px',
 				}}

src/components/WeatherModal/CurrentWeather.tsx

@@ -48,7 +48,7 @@ export default function CurrentWeather({ current }: { current: CW }) {
 					<Group
 						gap={0}
 						justify='space-between'
-						style={{ width: '100%', paddingLeft: 16 }}
+						style={{ width: '100%', paddingLeft: '1rem' }}
 					>
 						<Text
 							style={{
@@ -85,8 +85,8 @@ export default function CurrentWeather({ current }: { current: CW }) {
 								style={{
 									fontSize: '1.375rem',
 									textAlign: 'right',
-									marginTop: -32,
-									marginLeft: 16,
+									marginTop: '-2rem',
+									marginLeft: '1rem',
 								}}
 							>
 								{current.temperature === 69 ? 'Nice' : current.textDescription}

src/components/WeatherModal/ExtendedForecastCard.tsx

@@ -22,7 +22,10 @@ export default function ExtendedForecastCard({
 				paddingBottom: '.5rem',
 			}}
 		>
-			<Group gap={0} style={{ width: '100%', marginBottom: '8px', paddingLeft: '16px' }}>
+			<Group
+				gap={0}
+				style={{ width: '100%', marginBottom: '.5rem', paddingLeft: '1rem' }}
+			>
 				<Text
 					style={{
 						fontSize: '1.375rem',

src/components/WeatherModal/WeatherGraphs.tsx

@@ -45,7 +45,7 @@ export default function WeatherGraphs({
 			style={{
 				background: 'var(--mantine-color-search-0)',
 				padding: '.5rem',
-				borderRadius: '.5rem',
+				borderRadius: '8px',
 			}}
 		>
 			<ResponsiveContainer width={'100%'} height={150}>

src/components/WeatherModal/WeatherModal.tsx

@@ -65,10 +65,10 @@ export function WeatherModal({
 							gap={8}
 							style={{ borderBottom: '1px solid var(--mantine-color-border-0)' }}
 						>
-							<Text fz={18} fw={200}>
+							<Text fz={'1.125rem'} fw={200}>
 								Weather Forecast for{' '}
 							</Text>
-							<Text fz={18} fw={600}>
+							<Text fz={'1.125rem'} fw={600}>
 								{currentUser.physicalAddress}
 							</Text>
 						</Group>