Updates type badge and hover colors

Author: d13

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",

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>

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>

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,

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"