Merge pull request #3102 from gitbutlerapp/remove-hover-event-notification

SectionCard card and credential checks

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

@@ -41,7 +41,7 @@
 	<div class="analytics-settings__actions">
 		<SectionCard labelFor="errorReportngToggle" on:click={toggleErrorReporting} orientation="row">
 			<svelte:fragment slot="title">Error reporting</svelte:fragment>
-			<svelte:fragment slot="body">
+			<svelte:fragment slot="caption">
 				Toggle reporting of application crashes and errors.
 			</svelte:fragment>
 			<svelte:fragment slot="actions">
@@ -55,7 +55,7 @@
 
 		<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="caption">Toggle sharing of usage statistics.</svelte:fragment>
 			<svelte:fragment slot="actions">
 				<Toggle id="metricsEnabledToggle" checked={$metricsEnabled} on:change={toggleMetrics} />
 			</svelte:fragment>

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

@@ -64,7 +64,7 @@
 	<div class="aigen-wrap">
 		<SectionCard labelFor="aiGenEnabled" on:click={aiGenToggle} orientation="row">
 			<svelte:fragment slot="title">Enable branch and commit message generation</svelte:fragment>
-			<svelte:fragment slot="body">
+			<svelte:fragment slot="caption">
 				Uses OpenAI's API. If enabled, diffs will sent to OpenAI's servers when pressing the
 				"Generate message" button.
 			</svelte:fragment>
@@ -97,7 +97,7 @@
 		<h3 class="text-base-15 text-bold">Full data synchronization</h3>
 
 		<SectionCard labelFor="historySync" on:change={(e) => onSyncChange(e.detail)} orientation="row">
-			<svelte:fragment slot="body">
+			<svelte:fragment slot="caption">
 				Sync my history, repository and branch data for backup, sharing and team features.
 			</svelte:fragment>
 			<svelte:fragment slot="actions">

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

@@ -25,7 +25,10 @@
 		try {
 			checks = [
 				{ name: 'Fetch', promise: authService.checkGitFetch(projectId, remoteName) },
-				{ name: 'Push', promise: authService.checkGitPush(projectId, remoteName, branchName) }
+				{
+					name: 'Push',
+					promise: authService.checkGitPush(projectId, remoteName, branchName)
+				}
 			];
 			await Promise.allSettled(
 				checks.map((c) =>
@@ -48,7 +51,11 @@
 <div class="credential-check">
 	{#if checks.length > 0}
 		<div transition:slide={{ duration: 250 }}>
-			<InfoMessage style={errors > 0 ? 'warn' : 'neutral'} filled outlined={false}>
+			<InfoMessage
+				style={errors > 0 ? 'warn' : loading ? 'neutral' : 'success'}
+				filled
+				outlined={false}
+			>
 				<svelte:fragment slot="title">
 					{#if loading}
 						Checking git credentials …
@@ -61,15 +68,17 @@
 				<svelte:fragment slot="content">
 					<div class="checks-list" transition:slide={{ duration: 250, delay: 1000 }}>
 						{#each checks as check}
-							<div class="check-result">
-								{#await check.promise}
-									<Icon name="spinner" spinnerRadius={3.5} />
-								{:then}
-									<Icon name="success-small" color="success" />
-								{:catch}
-									<Icon name="error-small" color="error" />
-								{/await}
-								{check.name}
+							<div class="text-base-body-12 check-result">
+								<i class="check-icon">
+									{#await check.promise}
+										<Icon name="spinner" spinnerRadius={4} />
+									{:then}
+										<Icon name="success-small" color="success" />
+									{:catch}
+										<Icon name="error-small" color="error" />
+									{/await}
+								</i>{check.name}
+
 								{#await check.promise catch err}
 									- {err}
 								{/await}
@@ -77,12 +86,16 @@
 						{/each}
 					</div>
 					{#if errors > 0}
-						<div class="help-text" transition:slide>
-							Try another setting and test again? You can also refer to our
-							<Link href="https://docs.gitbutler.com/troubleshooting/fetch-push">
-								fetch & pull documentation
-							</Link>
-							for help fixing this problem.
+						<div class="text-base-body-12 help-text" transition:slide>
+							<span>
+								Try another setting and test again?
+								<br />
+								Consult our
+								<Link href="https://docs.gitbutler.com/troubleshooting/fetch-push">
+									fetch / push guide
+								</Link>
+								for help fixing this problem.
+							</span>
 						</div>
 					{/if}
 				</svelte:fragment>
@@ -113,9 +126,13 @@
 	.checks-list {
 		display: flex;
 		flex-direction: column;
-		gap: var(--space-6);
-		padding-left: var(--space-4);
-		margin-top: var(--space-12);
+		gap: var(--space-4);
+		margin-top: var(--space-4);
+	}
+
+	.check-icon {
+		display: flex;
+		margin-top: 0.063rem;
 	}
 
 	.check-result {
@@ -130,7 +147,7 @@
 	.disclaimer {
 		color: var(--clr-theme-scale-ntrl-50);
 		background: var(--clr-theme-container-pale);
-		border-radius: var(--m, 6px);
+		border-radius: var(--radius-m);
 		background: var(--clr-theme-container-pale);
 		padding: var(--space-10) var(--space-12);
 	}

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

@@ -91,7 +91,7 @@
 			</div>
 		</svelte:fragment>
 		<svelte:fragment slot="title">GitHub</svelte:fragment>
-		<svelte:fragment slot="body">
+		<svelte:fragment slot="caption">
 			Allows you to view and create Pull Requests from GitButler.
 		</svelte:fragment>
 		{#if $user$?.github_access_token}

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

@@ -17,7 +17,6 @@
 	class="icon-wrapper"
 	viewBox="0 0 16 16"
 	fill-rule="evenodd"
-	class:spinner={name == 'spinner'}
 	class:success={color == 'success'}
 	class:error={color == 'error'}
 	class:pop={color == 'pop'}
@@ -29,15 +28,17 @@
 	style="--spinner-radius: {spinnerRadius}"
 >
 	{#if name == 'spinner'}
-		<circle class="spinner-path" cx="8" cy="8" r={spinnerRadius} fill="none" />
-		<circle
-			class="spinner-back-path"
-			cx="8"
-			cy="8"
-			r={spinnerRadius}
-			fill="none"
-			vector-effect="non-scaling-stroke"
-		/>
+		<g class:spinner={name == 'spinner'}>
+			<circle class="spinner-path" cx="8" cy="8" r={spinnerRadius} fill="none" />
+			<circle
+				class="spinner-back-path"
+				cx="8"
+				cy="8"
+				r={spinnerRadius}
+				fill="none"
+				vector-effect="non-scaling-stroke"
+			/>
+		</g>
 	{:else}
 		<path fill="currentColor" d={iconsJson[name]} />
 	{/if}

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

@@ -59,7 +59,7 @@
 	<div class="info-message__inner">
 		<div class="info-message__content">
 			{#if title || SLOTS.title}
-				<div class="info-message__title text-base-13 text-semibold">
+				<div class="info-message__title text-base-body-13 text-semibold">
 					{#if title}
 						{title}
 					{:else}
@@ -98,6 +98,9 @@
 		border-radius: var(--radius-m);
 		gap: var(--space-12);
 		background-color: var(--clr-theme-container-light);
+		transition:
+			background-color var(--transition-slow),
+			border-color var(--transition-slow);
 	}
 	.info-message__inner {
 		display: flex;

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

@@ -92,7 +92,7 @@
 				<RadioButton name="credentialType" id="credential-default" value="default" />
 			</svelte:fragment>
 
-			<svelte:fragment slot="body">
+			<svelte:fragment slot="caption">
 				GitButler will attempt all available authentication flows automatically.
 			</svelte:fragment>
 		</SectionCard>
@@ -110,7 +110,7 @@
 				<RadioButton name="credentialType" id="credential-local" value="local" />
 			</svelte:fragment>
 
-			<svelte:fragment slot="body">
+			<svelte:fragment slot="caption">
 				Add the path to an existing SSH key that GitButler can use.
 			</svelte:fragment>
 		</SectionCard>
@@ -159,7 +159,7 @@
 				<RadioButton name="credentialType" id="credential-generated" value="generated" />
 			</svelte:fragment>
 
-			<svelte:fragment slot="body">
+			<svelte:fragment slot="caption">
 				GitButler will use a locally generated SSH key. For this to work you need to add the
 				following public key to your Git remote provider:
 			</svelte:fragment>
@@ -199,7 +199,7 @@
 		>
 			<svelte:fragment slot="title">Use a Git credentials helper</svelte:fragment>
 
-			<svelte:fragment slot="body">
+			<svelte:fragment slot="caption">
 				GitButler will use the system's git credentials helper.
 				<Link target="_blank" rel="noreferrer" href="https://git-scm.com/doc/credential-helpers">
 					Learn more
@@ -210,16 +210,15 @@
 				<RadioButton name="credentialType" value="gitCredentialsHelper" id="credential-helper" />
 			</svelte:fragment>
 		</SectionCard>
+
 		<SectionCard roundedTop={false} orientation="row">
-			<svelte:fragment slot="body">
-				<CredentialCheck
-					bind:this={credentialCheck}
-					projectId={project.id}
-					{authService}
-					remoteName={remoteName || $base$?.remoteName}
-					branchName={branchName || $base$?.shortName}
-				/>
-			</svelte:fragment>
+			<CredentialCheck
+				bind:this={credentialCheck}
+				projectId={project.id}
+				{authService}
+				remoteName={remoteName || $base$?.remoteName}
+				branchName={branchName || $base$?.shortName}
+			/>
 		</SectionCard>
 	</form>
 </div>

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

@@ -23,7 +23,7 @@
 <section class="wrapper">
 	<SectionCard orientation="row" labelFor="allowForcePush">
 		<svelte:fragment slot="title">Allow force pushing</svelte:fragment>
-		<svelte:fragment slot="body">
+		<svelte:fragment slot="caption">
 			Force pushing allows GitButler to override branches even if they were pushed to remote. We
 			will never force push to the trunk.
 		</svelte:fragment>
@@ -38,7 +38,7 @@
 
 	<SectionCard orientation="row" labelFor="omitCertificateCheck">
 		<svelte:fragment slot="title">Ignore host certificate checks</svelte:fragment>
-		<svelte:fragment slot="body">
+		<svelte:fragment slot="caption">
 			Enabling this will ignore host certificate checks when authenticating with ssh.
 		</svelte:fragment>
 		<svelte:fragment slot="actions">
@@ -52,7 +52,7 @@
 
 	<SectionCard labelFor="runHooks" orientation="row">
 		<svelte:fragment slot="title">Run commit hooks</svelte:fragment>
-		<svelte:fragment slot="body">
+		<svelte:fragment slot="caption">
 			Enabling this will run any git pre and post commit hooks you have configured in your
 			repository.
 		</svelte:fragment>

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

@@ -43,21 +43,23 @@
 		</div>
 	{/if}
 
-	{#if SLOTS.title || SLOTS.body}
+	{#if SLOTS.title || SLOTS.caption}
 		<div class="section-card__content">
 			{#if SLOTS.title}
 				<h3 class="text-base-15 text-bold section-card__title">
 					<slot name="title" />
 				</h3>
 			{/if}
-			{#if SLOTS.body}
+			{#if SLOTS.caption}
 				<p class="text-base-body-12 section-card__text">
-					<slot name="body" />
+					<slot name="caption" />
 				</p>
 			{/if}
 		</div>
 	{/if}
+
 	<slot />
+
 	{#if SLOTS.actions}
 		<div class="section-card__actions">
 			<slot name="actions" />

gitbutler-ui/src/routes/[projectId]/settings/+page.svelte

@@ -77,7 +77,7 @@
 		<PreferencesForm project={$project$} on:updated={onPreferencesUpdated} />
 		<SectionCard>
 			<svelte:fragment slot="title">Remove project</svelte:fragment>
-			<svelte:fragment slot="body">
+			<svelte:fragment slot="caption">
 				You can remove projects from GitButler, your code remains safe as this only clears
 				configuration.
 			</svelte:fragment>

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

@@ -204,7 +204,7 @@
 				</svelte:fragment>
 
 				<svelte:fragment slot="title">Dynamic scrollbar visibility on hover</svelte:fragment>
-				<svelte:fragment slot="body">
+				<svelte:fragment slot="caption">
 					When turned on, this feature shows the scrollbar automatically when you hover over the
 					scroll area, even if you're not actively scrolling. By default, the scrollbar stays hidden
 					until you start scrolling.
@@ -227,7 +227,7 @@
 			{#if $user$}
 				<SectionCard orientation="row">
 					<svelte:fragment slot="title">Signing out</svelte:fragment>
-					<svelte:fragment slot="body">
+					<svelte:fragment slot="caption">
 						Ready to take a break? Click here to log out and unwind.
 					</svelte:fragment>
 
@@ -237,7 +237,7 @@
 
 			<SectionCard orientation="row">
 				<svelte:fragment slot="title">Remove all projects</svelte:fragment>
-				<svelte:fragment slot="body">
+				<svelte:fragment slot="caption">
 					You can delete all projects from the GitButler app.
 					<br />
 					Your code remains safe. it only clears the configuration.
@@ -263,7 +263,7 @@
 		<ContentWrapper title="Git stuff">
 			<SectionCard labelFor="committerSigning" orientation="row">
 				<svelte:fragment slot="title">Credit GitButler as the Committer</svelte:fragment>
-				<svelte:fragment slot="body">
+				<svelte:fragment slot="caption">
 					By default, everything in the GitButler client is free to use. You can opt in to crediting
 					us as the committer in your virtual branch commits to help spread the word.
 					<Link
@@ -287,7 +287,7 @@
 
 			<SectionCard>
 				<svelte:fragment slot="title">SSH Key</svelte:fragment>
-				<svelte:fragment slot="body">
+				<svelte:fragment slot="caption">
 					GitButler uses SSH keys to authenticate with your Git provider. Add the following public
 					key to your Git provider to enable GitButler to push code.
 				</svelte:fragment>
@@ -317,7 +317,7 @@
 
 			<SectionCard labelFor="signingSetting" orientation="row">
 				<svelte:fragment slot="title">Sign Commits with the above SSH Key</svelte:fragment>
-				<svelte:fragment slot="body">
+				<svelte:fragment slot="caption">
 					If you want GitButler to sign your commits with the SSH key we generated, then you can add
 					that key to GitHub as a signing key to have those commits verified.
 					<Link