section card updates

- added `clickable` and non `clickable` styles
- added hover state if it's clickable
- added `labelFor` where it was missing and removed where the card is not clickable

gitbutler-ui/src/lib/components/AnalyticsSettings.svelte

@@ -39,21 +39,25 @@
 	</div>
 
 	<div class="analytics-settings__actions">
-		<SectionCard on:click={toggleErrorReporting} orientation="row">
+		<SectionCard labelFor="errorReportngToggle" on:click={toggleErrorReporting} orientation="row">
 			<svelte:fragment slot="title">Error reporting</svelte:fragment>
 			<svelte:fragment slot="body">
 				Toggle reporting of application crashes and errors.
 			</svelte:fragment>
 			<svelte:fragment slot="actions">
-				<Toggle checked={$errorReportingEnabled} on:change={toggleErrorReporting} />
+				<Toggle
+					id="errorReportngToggle"
+					checked={$errorReportingEnabled}
+					on:change={toggleErrorReporting}
+				/>
 			</svelte:fragment>
 		</SectionCard>
 
-		<SectionCard on:click={toggleMetrics} orientation="row">
+		<SectionCard labelFor="metricsEnabledToggle" on:click={toggleMetrics} orientation="row">
 			<svelte:fragment slot="title">Usage metrics</svelte:fragment>
 			<svelte:fragment slot="body">Toggle sharing of usage statistics.</svelte:fragment>
 			<svelte:fragment slot="actions">
-				<Toggle checked={$metricsEnabled} on:change={toggleMetrics} />
+				<Toggle id="metricsEnabledToggle" checked={$metricsEnabled} on:change={toggleMetrics} />
 			</svelte:fragment>
 		</SectionCard>
 

gitbutler-ui/src/lib/components/KeysForm.svelte

@@ -152,7 +152,7 @@
 		</SectionCard>
 
 		{#if selectedType === 'generated'}
-			<SectionCard labelFor="sshKey" roundedTop={false} roundedBottom={false}>
+			<SectionCard roundedTop={false} roundedBottom={false}>
 				<TextBox id="sshKey" readonly selectall bind:value={sshKey} wide />
 				<div class="row-buttons">
 					<Button

gitbutler-ui/src/lib/components/SectionCard.svelte

@@ -11,6 +11,7 @@
 	export let background: SectionCardBackground = undefined;
 	export let noBorder = false;
 	export let labelFor = '';
+	export let disabled = false;
 
 	const SLOTS = $$props.$$slots;
 </script>
@@ -27,6 +28,8 @@
 	class:loading={background == 'loading'}
 	class:success={background == 'success'}
 	class:error={background == 'error'}
+	class:clickable={labelFor !== ''}
+	class:disabled
 >
 	{#if SLOTS.iconSide}
 		<div class="section-card__icon-side">
@@ -64,7 +67,7 @@
 		border-left: 1px solid var(--clr-theme-container-outline-light);
 		border-right: 1px solid var(--clr-theme-container-outline-light);
 		background-color: var(--clr-theme-container-light);
-		cursor: pointer;
+		cursor: default;
 		transition:
 			background-color var(--transition-fast),
 			border-color var(--transition-fast);
@@ -122,4 +125,21 @@
 	.no-border {
 		border: none;
 	}
+
+	.clickable {
+		cursor: pointer;
+
+		&:hover {
+			background-color: color-mix(
+				in srgb,
+				var(--clr-theme-container-light),
+				var(--darken-tint-extralight)
+			);
+		}
+	}
+
+	.disabled {
+		pointer-events: none;
+		opacity: 0.5;
+	}
 </style>

gitbutler-ui/src/routes/settings/+page.svelte

@@ -236,7 +236,7 @@
 				</svelte:fragment>
 				<svelte:fragment slot="actions">
 					<Toggle
-						id="commiterSigning"
+						id="committerSigning"
 						checked={annotateCommits}
 						on:change={toggleCommitterSigning}
 					/>
@@ -275,7 +275,7 @@
 				</div>
 			</SectionCard>
 
-			<SectionCard labelFor="signingSetting" orientation="row">
+			<SectionCard labelFor="signingSetting" orientation="row" for="signingSetting">
 				<svelte:fragment slot="title">Sign Commits with the above SSH Key</svelte:fragment>
 				<svelte:fragment slot="body">
 					If you want GitButler to sign your commits with the SSH key we generated, then you can add