Updated styles and now pull title and body from commit methods

Update styles
Update title class
Updated styles
Refactor conditions

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

@@ -39,6 +39,9 @@
 		showFiles = !showFiles;
 		if (showFiles) loadFiles();
 	}
+
+    const isUndoable = isHeadCommit && !isUnapplied;
+    const hasCommitUrl = !commit.isLocal && commitUrl;
 </script>
 
 <div
@@ -50,10 +53,10 @@
 >
 	<div class="commit__header" on:click={onClick} on:keyup={onClick} role="button" tabindex="0">
 		<div class="commit__row">
-			<span class="commit__description text-base-12 truncate">
+			<span class="commit__title text-base-12" class:truncate={!showFiles}>
-				{commit.description}
+				{commit.descriptionTitle}
 			</span>
-			{#if isHeadCommit && !isUnapplied}
+			{#if isUndoable && !showFiles}
 				<Tag
 					color="ghost"
 					icon="undo-small"
@@ -67,7 +70,14 @@
 				>
 			{/if}
 		</div>
-		<div class="commit__row">
+		{#if showFiles && commit.descriptionBody}
+			<div class="commit__row" transition:slide={{ duration: 100 }}>
+				<span class="commit__body text-base-12 whitespace-pre-line">
+					{commit.descriptionBody}
+				</span>
+			</div>
+		{/if}
+		<div class="commit__row mt-1">
 			<div class="commit__author">
 				<img
 					class="commit__avatar"
@@ -99,16 +109,31 @@
 				readonly={true}
 			/>
 
-			{#if !commit.isLocal && commitUrl}
+			{#if hasCommitUrl || isUndoable}
 				<div class="files__footer">
-					<Button
+					{#if isUndoable}
-						color="neutral"
+						<Button
-						kind="outlined"
+							color="neutral"
-						icon="open-link"
+							kind="outlined"
-						on:click={() => {
+							icon="undo-small"
-							if (commitUrl) openExternalUrl(commitUrl);
+							on:click={(e) => {
-						}}>Open commit</Button
+								currentCommitMessage.set(commit.description);
-					>
+								e.stopPropagation();
+								resetHeadCommit();
+							}}>Undo</Button
+						>
+					{/if}
+					{#if hasCommitUrl}
+						<Button
+							color="neutral"
+							kind="outlined"
+							icon="open-link"
+							grow
+							on:click={() => {
+								if (commitUrl) openExternalUrl(commitUrl);
+							}}>Open commit</Button
+						>
+					{/if}
 				</div>
 			{/if}
 		</div>
@@ -137,11 +162,7 @@
 		&:not(.is-commit-open):hover {
 			border: 1px solid
 				color-mix(in srgb, var(--clr-theme-container-outline-light), var(--darken-tint-mid));
-			background-color: color-mix(
+            background-color: var(--clr-theme-container-pale);
-				in srgb,
-				var(--clr-theme-container-light),
-				var(--darken-tint-extralight)
-			);
 		}
 	}
 
@@ -161,6 +182,7 @@
 
 		& .commit__header {
 			padding-bottom: var(--space-16);
+            border-bottom: 1px solid var(--clr-theme-container-outline-light);
 
 			&:hover {
 				background-color: color-mix(
@@ -172,7 +194,7 @@
 		}
 	}
 
-	.commit__description {
+	.commit__title {
 		flex: 1;
 		display: block;
 		color: var(--clr-theme-scale-ntrl-0);
@@ -181,6 +203,14 @@
 	}
 
 	.commit__row {
+	.commit__body {
+		flex: 1;
+		display: block;
+		color: var(--clr-theme-scale-ntrl-0);
+		line-height: 120%;
+		width: 100%;
+		color: var(--clr-theme-scale-ntrl-40);
+	}
 		display: flex;
 		align-items: center;
 		gap: var(--space-8);
@@ -206,7 +236,7 @@
 
 	.commit__time,
 	.commit__author-name {
-		color: var(--clr-theme-scale-ntrl-50);
+		color: var(--clr-theme-scale-ntrl-40);
 	}
 
 	.files-container {
@@ -215,7 +245,10 @@
 
 	.files__footer {
 		text-align: right;
+		display: flex;
+		gap: var(--space-16);
 		padding: var(--space-12);
 		border-top: 1px solid var(--clr-theme-container-outline-light);
+		background-color: var(--clr-theme-container-pale);
 	}
 </style>

gitbutler-ui/src/lib/vbranches/types.ts

@@ -115,9 +115,21 @@ export class Commit {
 		}
 	}
 
+	get descriptionTitle(): string | undefined {
+		return this.descriptionParagraphs[0];
+	}
+
+	get descriptionBody(): string | undefined {
+		return this.descriptionParagraphs.slice(1).join('\n\n');
+	}
+
 	isParentOf(possibleChild: Commit) {
 		return possibleChild.parentIds.includes(this.id);
 	}
+
+	private get descriptionParagraphs() {
+		return this.description.split('\n\n');
+	}
 }
 
 export class RemoteCommit {
@@ -130,6 +142,18 @@ export class RemoteCommit {
 	get isLocal() {
 		return false;
 	}
+
+	get descriptionTitle(): string | undefined {
+		return this.descriptionParagraphs[0];
+	}
+
+	get descriptionBody(): string | undefined {
+		return this.descriptionParagraphs.slice(1).join('\n\n');
+	}
+
+	private get descriptionParagraphs() {
+		return this.description.split('\n\n');
+	}
 }
 
 export class RemoteHunk {