From 6f969601dc68100cd6fd1bee162889c39d73ce8f Mon Sep 17 00:00:00 2001
From: Keith Daulton <keith.daulton@gitkraken.com>
Date: Thu, 3 Aug 2023 14:32:15 -0400
Subject: [PATCH] Updates type badge and hover colors

---
 package.json                                       |  2 +-
 .../apps/plus/focus/components/gk-issue-row.ts     | 22 ++++++++++------
 .../plus/focus/components/gk-pull-request-row.ts   | 29 ++++++++++++++++------
 src/webviews/apps/plus/focus/focus.scss            |  2 ++
 yarn.lock                                          |  8 +++---
 5 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 9a0cef51..e113f7d 100644
--- a/package.json
+++ b/package.json
@@ -14708,7 +14708,7 @@
 	},
 	"dependencies": {
 		"@gitkraken/gitkraken-components": "10.1.9",
-		"@gitkraken/shared-web-components": "^0.1.1-rc.3",
+		"@gitkraken/shared-web-components": "^0.1.1-rc.4",
 		"@microsoft/fast-element": "1.12.0",
 		"@microsoft/fast-react-wrapper": "0.3.18",
 		"@octokit/core": "4.2.4",
diff --git a/src/webviews/apps/plus/focus/components/gk-issue-row.ts b/src/webviews/apps/plus/focus/components/gk-issue-row.ts
index 37d9656..ff46ef9 100644
--- a/src/webviews/apps/plus/focus/components/gk-issue-row.ts
+++ b/src/webviews/apps/plus/focus/components/gk-issue-row.ts
@@ -42,6 +42,10 @@ export class GkIssueRow extends LitElement {
 			a:hover {
 				text-decoration: underline;
 			}
+			a:focus {
+				outline: 1px solid var(--vscode-focusBorder);
+				outline-offset: -1px;
+			}
 
 			.actions {
 			}
@@ -60,10 +64,6 @@ export class GkIssueRow extends LitElement {
 				text-decoration: none;
 				cursor: pointer;
 			}
-			.actions a:focus {
-				outline: 1px solid var(--vscode-focusBorder);
-				outline-offset: -1px;
-			}
 			.actions a:hover {
 				background-color: var(--vscode-toolbar-hoverBackground);
 			}
@@ -74,6 +74,14 @@ export class GkIssueRow extends LitElement {
 			.actions a code-icon {
 				font-size: 1.6rem;
 			}
+
+			.deemphasize {
+				opacity: 0.5;
+			}
+
+			.title {
+				font-size: 1.4rem;
+			}
 		`,
 	];
 
@@ -118,15 +126,13 @@ export class GkIssueRow extends LitElement {
 			<gk-focus-row>
 				<span slot="key"></span>
 				<gk-focus-item>
-					<span slot="type"
-						><code-icon icon="${this.issue.closed === true ? 'pass' : 'issues'}"></code-icon
-					></span>
 					<p>
-						<strong>${this.issue.title} <a href="${this.issue.url}">#${this.issue.id}</a></strong>
+						<span class="title">${this.issue.title} <a href="${this.issue.url}">#${this.issue.id}</a></span>
 						<!-- &nbsp;
 						<gk-badge>pending suggestions</gk-badge> -->
 					</p>
 					<p>
+						<gk-badge variant="outline" class="deemphasize">Issue</gk-badge>
 						<gk-tooltip
 							><gk-tag variant="ghost" slot="trigger">
 								<span slot="prefix"><code-icon icon="comment-discussion"></code-icon></span>
diff --git a/src/webviews/apps/plus/focus/components/gk-pull-request-row.ts b/src/webviews/apps/plus/focus/components/gk-pull-request-row.ts
index ebd635c..a9f74bc 100644
--- a/src/webviews/apps/plus/focus/components/gk-pull-request-row.ts
+++ b/src/webviews/apps/plus/focus/components/gk-pull-request-row.ts
@@ -43,6 +43,10 @@ export class GkPullRequestRow extends LitElement {
 			a:hover {
 				text-decoration: underline;
 			}
+			a:focus {
+				outline: 1px solid var(--vscode-focusBorder);
+				outline-offset: -1px;
+			}
 
 			.actions gk-tooltip {
 				display: inline-block;
@@ -62,10 +66,6 @@ export class GkPullRequestRow extends LitElement {
 				text-decoration: none;
 				cursor: pointer;
 			}
-			.actions a:focus {
-				outline: 1px solid var(--vscode-focusBorder);
-				outline-offset: -1px;
-			}
 			.actions a:hover {
 				background-color: var(--vscode-toolbar-hoverBackground);
 			}
@@ -93,6 +93,19 @@ export class GkPullRequestRow extends LitElement {
 			.indicator-neutral {
 				color: var(--color-alert-neutralBorder);
 			}
+
+			.deemphasize {
+				opacity: 0.5;
+			}
+
+			.title {
+				font-size: 1.4rem;
+			}
+
+			.add-delete {
+				margin-left: 0.4rem;
+				margin-right: 0.2rem;
+			}
 		`,
 	];
 
@@ -197,17 +210,17 @@ export class GkPullRequestRow extends LitElement {
 					)}
 				</span>
 				<gk-focus-item>
-					<span slot="type"><code-icon icon="git-pull-request"></code-icon></span>
 					<p>
-						<strong
+						<span class="title"
 							>${this.pullRequest.title}
-							<a href="${this.pullRequest.url}">#${this.pullRequest.id}</a></strong
+							<a href="${this.pullRequest.url}">#${this.pullRequest.id}</a></span
 						>
 						<!-- &nbsp;
 						<gk-badge>pending suggestions</gk-badge> -->
 					</p>
 					<p>
-						<gk-additions-deletions>
+						<gk-badge variant="outline" class="deemphasize">PR</gk-badge>
+						<gk-additions-deletions class="add-delete">
 							<span slot="additions">${this.pullRequest.additions}</span>
 							<span slot="deletions">${this.pullRequest.deletions}</span>
 						</gk-additions-deletions>
diff --git a/src/webviews/apps/plus/focus/focus.scss b/src/webviews/apps/plus/focus/focus.scss
index b0a9a4c..c514771 100644
--- a/src/webviews/apps/plus/focus/focus.scss
+++ b/src/webviews/apps/plus/focus/focus.scss
@@ -37,6 +37,8 @@ body {
 	--gk-badge-filled-background-color: var(--vscode-badge-background);
 	--gk-badge-filled-color: var(--vscode-badge-foreground);
 	--gk-tooltip-padding: 0.4rem 0.8rem;
+	--gk-focus-background-color-hover: var(--background-05);
+	--gk-divider-color: var(--background-05);
 }
 
 .vscode-high-contrast,
diff --git a/yarn.lock b/yarn.lock
index b275846..84c0e1e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -235,10 +235,10 @@
     react-dom "16.8.4"
     react-dragula "1.1.17"
 
-"@gitkraken/shared-web-components@^0.1.1-rc.3":
-  version "0.1.1-rc.3"
-  resolved "https://registry.npmjs.org/@gitkraken/shared-web-components/-/shared-web-components-0.1.1-rc.3.tgz#ad23607c356707aba509b6488dcd1d4ec3ee8cd9"
-  integrity sha512-mjhyyMR+eYDfp8RR4v+ecyoRV2vx9jV/gEMfrDe/Mf1PTqUVYPCEyAEx/YD6ogNhZlCdQ/on42Y2NaLy3kQHKg==
+"@gitkraken/shared-web-components@^0.1.1-rc.4":
+  version "0.1.1-rc.4"
+  resolved "https://registry.npmjs.org/@gitkraken/shared-web-components/-/shared-web-components-0.1.1-rc.4.tgz#eaccecad7b7079ef276e3b9e8e61b2ce5d53d3d4"
+  integrity sha512-BsJa5UDPiRyydC/yv8blXBIMMRVH3rFZJj4CgrdiVn+T5IeiodIlPSnvJ5rYYQvywLD/TsCwA9+hkdfk5sdvCA==
   dependencies:
     "@floating-ui/dom" "^1.4.2"
     typescript "^4.9.5"