From a9c83b9ae3f6d1beb1d6ab3cf1591a86b3a76a89 Mon Sep 17 00:00:00 2001
From: Eric Amodio <eamodio@gmail.com>
Date: Wed, 28 Sep 2022 15:04:17 -0400
Subject: [PATCH] Improves graph repo picker

---
 src/webviews/apps/plus/graph/GraphWrapper.tsx |  6 ++++++
 src/webviews/apps/plus/graph/graph.scss       | 31 ++++++++++++++++++++++-----
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/webviews/apps/plus/graph/GraphWrapper.tsx b/src/webviews/apps/plus/graph/GraphWrapper.tsx
index 8607093..d4dcba3 100644
--- a/src/webviews/apps/plus/graph/GraphWrapper.tsx
+++ b/src/webviews/apps/plus/graph/GraphWrapper.tsx
@@ -741,6 +741,12 @@ export function GraphWrapper({
 										onClick={() => handleSelectRepository(item)}
 										disabled={item.path === currentRepository?.path}
 									>
+										<span
+											className={`${
+												item.path === currentRepository?.path ? 'codicon codicon-check ' : ''
+											}actioncombo__icon`}
+											aria-label="Checked"
+										></span>
 										{item.formattedName}
 									</button>
 								))
diff --git a/src/webviews/apps/plus/graph/graph.scss b/src/webviews/apps/plus/graph/graph.scss
index 80378fc..a244bfd 100644
--- a/src/webviews/apps/plus/graph/graph.scss
+++ b/src/webviews/apps/plus/graph/graph.scss
@@ -81,6 +81,7 @@ a {
 
 	--actioncombo-height: 2.2rem;
 	--actioncombo-items: 1;
+	--actioncombo-items-height: 2.6rem;
 
 	position: relative;
 	display: inline-flex;
@@ -99,27 +100,47 @@ a {
 		border: none;
 		color: inherit;
 		padding: 0 0.75rem;
-		height: var(--actioncombo-height);
-		line-height: var(--actioncombo-height);
 		cursor: pointer;
 		background-color: var(--actionbar-background-color);
 		text-align: left;
 
 		&:hover {
-			background-color: var(--actionbar-hover-background-color);
+			color: var(--vscode-menu-selectionForeground);
+			background-color: var(--vscode-menu-selectionBackground);
 		}
 
 		&[disabled] {
 			pointer-events: none;
+			cursor: default;
 			opacity: 0.5;
 		}
+
+		&[aria-selected='true'] {
+			opacity: 1;
+			background-color: var(--actionbar-hover-background-color);
+		}
 	}
 
 	&__label {
+		height: var(--actioncombo-height);
+		line-height: var(--actioncombo-height);
+	}
+
+	&__item {
+		display: flex;
+		align-items: center;
+		height: var(--actioncombo-items-height);
+		line-height: var(--actioncombo-items-height);
 	}
 
 	&__icon.codicon[class*='codicon-'] {
-		margin-right: 0.25rem;
+		margin-right: 0.4rem;
+	}
+
+	&__icon:not(.codicon) {
+		display: inline-block;
+		margin-right: 0.4rem;
+		width: 16px;
 	}
 
 	&__list {
@@ -131,7 +152,7 @@ a {
 		justify-content: stretch;
 		min-width: 100%;
 		width: max-content;
-		z-index: 100;
+		z-index: 10000;
 		background-color: var(--actionbar-background-color);
 	}