From 58fc993c35da4a39d9bec7b890d61a68e5cdb46a Mon Sep 17 00:00:00 2001
From: Keith Daulton <kdaulton@d13design.com>
Date: Thu, 4 Aug 2022 14:59:30 -0400
Subject: [PATCH] Updates commit details to better match theming

---
 src/webviews/apps/commitDetails/commitDetails.html |  6 ++--
 src/webviews/apps/commitDetails/commitDetails.scss |  4 ---
 .../apps/shared/components/commit/commit-stats.ts  | 14 ++++++--
 .../shared/components/commit/file-change-item.ts   |  2 +-
 .../apps/shared/components/webview-pane.ts         | 37 +++++++++++++++++-----
 5 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/src/webviews/apps/commitDetails/commitDetails.html b/src/webviews/apps/commitDetails/commitDetails.html
index ace98f0..e8b8807 100644
--- a/src/webviews/apps/commitDetails/commitDetails.html
+++ b/src/webviews/apps/commitDetails/commitDetails.html
@@ -65,10 +65,8 @@
 				</webview-pane>
 
 				<webview-pane class="commit-details__files" collapsable expanded>
-					<span slot="title"
-						>Files changed
-						<span class="commit-details__stats" data-region="stats"></span>
-					</span>
+					<span slot="title">Files changed </span>
+					<span slot="subtitle" data-region="stats"></span>
 					<ul class="change-list" data-region="files">
 						<li class="change-list__item commit-details__item-skeleton">
 							<skeleton-loader></skeleton-loader>
diff --git a/src/webviews/apps/commitDetails/commitDetails.scss b/src/webviews/apps/commitDetails/commitDetails.scss
index 639d27c..f6aae0f 100644
--- a/src/webviews/apps/commitDetails/commitDetails.scss
+++ b/src/webviews/apps/commitDetails/commitDetails.scss
@@ -235,10 +235,6 @@ ul {
 		}
 	}
 
-	&__stats {
-		margin-left: 0.5rem;
-	}
-
 	// &__files {
 	//     border-top: 1px solid var(--color-background--lighten-075);
 	//     padding: {
diff --git a/src/webviews/apps/shared/components/commit/commit-stats.ts b/src/webviews/apps/shared/components/commit/commit-stats.ts
index 7586e38..7268495 100644
--- a/src/webviews/apps/shared/components/commit/commit-stats.ts
+++ b/src/webviews/apps/shared/components/commit/commit-stats.ts
@@ -8,7 +8,15 @@ export class CommitStats extends LitElement {
         :host {
             display: inline-flex;
             flex-direction: row;
+            align-items: center;
             gap: 0.5rem;
+            vertical-align: middle;
+        }
+
+        .stat {
+            display: inline-flex;
+            flex-direction: row;
+            align-items: center;
         }
 
         .added {
@@ -34,9 +42,9 @@ export class CommitStats extends LitElement {
 
 	override render() {
 		return html`
-			<span class="added"><code-icon icon="diff-added"></code-icon> ${this.added}</span>
-			<span class="modified"><code-icon icon="diff-modified"></code-icon> ${this.modified}</span>
-			<span class="deleted"><code-icon icon="diff-removed"></code-icon> ${this.removed}</span>
+			<span class="stat added"><code-icon icon="diff-added"></code-icon> ${this.added}</span>
+			<span class="stat modified"><code-icon icon="diff-modified"></code-icon> ${this.modified}</span>
+			<span class="stat deleted"><code-icon icon="diff-removed"></code-icon> ${this.removed}</span>
 		`;
 	}
 }
diff --git a/src/webviews/apps/shared/components/commit/file-change-item.ts b/src/webviews/apps/shared/components/commit/file-change-item.ts
index b3c625a..f5346e8 100644
--- a/src/webviews/apps/shared/components/commit/file-change-item.ts
+++ b/src/webviews/apps/shared/components/commit/file-change-item.ts
@@ -96,7 +96,7 @@ export class FileChangeItem extends LitElement {
 		}
 
 		.change-list__path {
-			color: var(--color-background--lighten-50);
+			color: var(--vscode-descriptionForeground);
 		}
 
 		.change-list__actions {
diff --git a/src/webviews/apps/shared/components/webview-pane.ts b/src/webviews/apps/shared/components/webview-pane.ts
index e39f897..b977022 100644
--- a/src/webviews/apps/shared/components/webview-pane.ts
+++ b/src/webviews/apps/shared/components/webview-pane.ts
@@ -9,7 +9,6 @@ export class WebviewPane extends LitElement {
 			display: flex;
 			flex-direction: column;
 			background-color: var(--color-view-background);
-			color: var(--color-view-foreground);
 		}
 
 		* {
@@ -20,7 +19,7 @@ export class WebviewPane extends LitElement {
 			flex: none;
 			display: flex;
 			background-color: var(--color-view-background);
-			color: var(--color-view-header-foreground);
+			color: var(--vscode-foreground);
 			border-top: 1px solid var(--vscode-panel-border);
 		}
 
@@ -29,18 +28,34 @@ export class WebviewPane extends LitElement {
 			outline-offset: -1px;
 		}
 
-		.title {
+		.label {
 			appearance: none;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
 			width: 100%;
 			padding: 0;
 			border: none;
 			text-align: left;
+			font-family: var(--font-family);
+			font-size: 1.1rem;
 			line-height: 2.2rem;
-			font-weight: bold;
+			height: 2.2rem;
 			background: transparent;
 			color: inherit;
 			cursor: pointer;
 			outline: none;
+			text-overflow: ellipsis;
+		}
+
+		.title {
+			font-weight: bold;
+			text-transform: uppercase;
+		}
+
+		.subtitle {
+			margin-left: 0.5rem;
+			color: var(--vscode-descriptionForeground);
 		}
 
 		.icon {
@@ -50,8 +65,10 @@ export class WebviewPane extends LitElement {
 
 		.content {
 			overflow: auto;
-			/* scrollbar-gutter: stable; */
+			/*
+			scrollbar-gutter: stable;
 			box-shadow: #000000 0 0.6rem 0.6rem -0.6rem inset;
+			*/
 			padding-top: 0.6rem;
 		}
 
@@ -68,17 +85,21 @@ export class WebviewPane extends LitElement {
 
 	renderTitle() {
 		if (!this.collapsable) {
-			return html`<div class="title">${this.title}</div>`;
+			return html`<div class="label">
+				<span class="title"><slot name="title">Section</slot></span>
+				<span class="subtitle"><slot name="subtitle"></slot></span>
+			</div>`;
 		}
 		return html`<button
 			type="button"
-			class="title"
+			class="label"
 			aria-controls="content"
 			aria-expanded=${this.expanded}
 			@click="${this.toggleExpanded}"
 		>
 			<code-icon class="icon" icon=${this.expanded ? 'chevron-down' : 'chevron-right'}></code-icon
-			><slot name="title">Section</slot>
+			><span class="title"><slot name="title">Section</slot></span>
+			<span class="subtitle"><slot name="subtitle"></slot></span>
 		</button>`;
 	}