Update UI component heights and general settings header

Author: richiemcilroy

apps/desktop/src/routes/(window-chrome)/new-main/CameraSelect.tsx

@@ -20,7 +20,7 @@ export default function CameraSelect(props: {
 		<CameraSelectBase
 			{...props}
 			PillComponent={InfoPill}
-			class="flex flex-row gap-2 items-center px-2 w-full h-9 rounded-lg transition-colors cursor-default disabled:opacity-70 bg-gray-3 disabled:text-gray-11 KSelect"
+			class="flex flex-row gap-2 items-center px-2 w-full h-10 rounded-lg transition-colors cursor-default disabled:opacity-70 bg-gray-3 disabled:text-gray-11 KSelect"
 			iconClass="text-gray-10 size-4"
 		/>
 	);

apps/desktop/src/routes/(window-chrome)/new-main/MicrophoneSelect.tsx

@@ -27,7 +27,7 @@ export default function MicrophoneSelect(props: {
 	return (
 		<MicrophoneSelectBase
 			{...props}
-			class="flex overflow-hidden relative z-10 flex-row gap-2 items-center px-2 w-full h-9 rounded-lg transition-colors cursor-default disabled:opacity-70 bg-gray-3 disabled:text-gray-11 KSelect"
+			class="flex overflow-hidden relative z-10 flex-row gap-2 items-center px-2 w-full h-10 rounded-lg transition-colors cursor-default disabled:opacity-70 bg-gray-3 disabled:text-gray-11 KSelect"
 			levelIndicatorClass="bg-blue-7"
 			iconClass="text-gray-10 size-4"
 			PillComponent={InfoPill}

apps/desktop/src/routes/(window-chrome)/new-main/SystemAudio.tsx

@@ -12,7 +12,7 @@ import InfoPill from "./InfoPill";
 export default function SystemAudio() {
 	return (
 		<SystemAudioToggleRoot
-			class="flex flex-row gap-2 items-center px-2 w-full h-9 rounded-lg transition-colors cursor-default disabled:opacity-70 bg-gray-3 disabled:text-gray-11 KSelect"
+			class="flex flex-row gap-2 items-center px-2 w-full h-10 rounded-lg transition-colors cursor-default disabled:opacity-70 bg-gray-3 disabled:text-gray-11 KSelect"
 			PillComponent={InfoPill}
 			icon={<IconPhMonitorBold class="text-gray-10 size-4" />}
 		/>

apps/desktop/src/routes/(window-chrome)/new-main/TargetDropdownButton.tsx

@@ -27,7 +27,7 @@ export default function TargetDropdownButton<
 			aria-expanded={local.expanded ? "true" : "false"}
 			data-expanded={local.expanded ? "true" : "false"}
 			class={cx(
-				"flex h-[3.75rem] w-5 shrink-0 items-center justify-center rounded-lg bg-gray-4 text-gray-12 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1 hover:bg-gray-5",
+				"flex h-[4rem] w-5 shrink-0 items-center justify-center rounded-lg bg-gray-4 text-gray-12 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1 hover:bg-gray-5",
 				local.expanded && "bg-gray-5",
 				local.disabled && "pointer-events-none opacity-60",
 				local.class,

apps/desktop/src/routes/(window-chrome)/settings/general.tsx

@@ -152,11 +152,8 @@ function AppearanceSection(props: {
 
 	return (
 		<div class="flex flex-col gap-4">
-			<div class="flex flex-col pb-4 border-b border-gray-2">
-				<h2 class="text-lg font-medium text-gray-12">General</h2>
-				<p class="text-sm text-gray-10">
-					General settings of your Cap application.
-				</p>
+			<div class="flex flex-col border-b border-gray-2">
+				<h2 class="text-lg font-medium text-gray-12">General Settings</h2>
 			</div>
 			<div
 				class="flex justify-start items-center text-gray-12"