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',
 				}}