From 7457baa6068a56c5f2cbe1ddbbe38c8d8b62c3da Mon Sep 17 00:00:00 2001
From: Eric Amodio <eamodio@gmail.com>
Date: Tue, 6 Jun 2023 12:33:11 -0400
Subject: [PATCH] Adds color swatches to minimap options

---
 src/webviews/apps/plus/graph/GraphWrapper.tsx | 10 ++++++++++
 src/webviews/apps/plus/graph/graph.scss       | 25 +++++++++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/src/webviews/apps/plus/graph/GraphWrapper.tsx b/src/webviews/apps/plus/graph/GraphWrapper.tsx
index ee8eaf8..1302cbc 100644
--- a/src/webviews/apps/plus/graph/GraphWrapper.tsx
+++ b/src/webviews/apps/plus/graph/GraphWrapper.tsx
@@ -1266,6 +1266,10 @@ export function GraphWrapper({
 													graphConfig?.minimapMarkerTypes?.includes('localBranches') ?? false
 												}
 											>
+												<span
+													className="minimap-marker-swatch"
+													data-marker="localBranches"
+												></span>
 												Local Branches
 											</VSCodeCheckbox>
 										</MenuItem>
@@ -1277,6 +1281,10 @@ export function GraphWrapper({
 													graphConfig?.minimapMarkerTypes?.includes('remoteBranches') ?? true
 												}
 											>
+												<span
+													className="minimap-marker-swatch"
+													data-marker="remoteBranches"
+												></span>
 												Remote Branches
 											</VSCodeCheckbox>
 										</MenuItem>
@@ -1288,6 +1296,7 @@ export function GraphWrapper({
 													graphConfig?.minimapMarkerTypes?.includes('stashes') ?? false
 												}
 											>
+												<span className="minimap-marker-swatch" data-marker="stashes"></span>
 												Stashes
 											</VSCodeCheckbox>
 										</MenuItem>
@@ -1299,6 +1308,7 @@ export function GraphWrapper({
 													graphConfig?.minimapMarkerTypes?.includes('tags') ?? true
 												}
 											>
+												<span className="minimap-marker-swatch" data-marker="tags"></span>
 												Tags
 											</VSCodeCheckbox>
 										</MenuItem>
diff --git a/src/webviews/apps/plus/graph/graph.scss b/src/webviews/apps/plus/graph/graph.scss
index ba0dd64..4aeb987 100644
--- a/src/webviews/apps/plus/graph/graph.scss
+++ b/src/webviews/apps/plus/graph/graph.scss
@@ -1079,3 +1079,28 @@ button:not([disabled]),
 		white-space: break-spaces;
 	}
 }
+
+.minimap-marker-swatch {
+	display: inline-block;
+	width: 1.6rem;
+	height: 1.6rem;
+	border-radius: 3px;
+	margin-right: 0.75rem;
+	vertical-align: bottom;
+
+	&[data-marker='localBranches'] {
+		background-color: var(--color-graph-minimap-marker-local-branches);
+	}
+
+	&[data-marker='remoteBranches'] {
+		background-color: var(--color-graph-minimap-marker-remote-branches);
+	}
+
+	&[data-marker='stashes'] {
+		background-color: var(--color-graph-minimap-marker-stashes);
+	}
+
+	&[data-marker='tags'] {
+		background-color: var(--color-graph-minimap-marker-tags);
+	}
+}