From 812e2edb669ca81034e49b7344ca5d5937ac6daf Mon Sep 17 00:00:00 2001
From: Miggy Eusebio <miggy.eusebio@gitkraken.com>
Date: Wed, 17 Aug 2022 15:39:20 -0700
Subject: [PATCH] Move icon styling to gitlens, use better icon keys

Fix spinner
---
 src/webviews/apps/plus/graph/GraphWrapper.tsx |  4 +-
 src/webviews/apps/plus/graph/graph.scss       | 82 +++++++++++++++++++++++++++
 2 files changed, 84 insertions(+), 2 deletions(-)

diff --git a/src/webviews/apps/plus/graph/GraphWrapper.tsx b/src/webviews/apps/plus/graph/GraphWrapper.tsx
index 543e557..98e4af8 100644
--- a/src/webviews/apps/plus/graph/GraphWrapper.tsx
+++ b/src/webviews/apps/plus/graph/GraphWrapper.tsx
@@ -161,10 +161,10 @@ const debounceFrame = (func: DebouncableFn): DebouncedFn => {
 };
 
 const createIconElements = (): { [key: string]: ReactElement<any> } => {
-	const iconList = ['vm', 'cloud', 'tag', 'inbox', 'check', 'loading', 'warning'];
+	const iconList = ['head', 'remote', 'tag', 'stash', 'check', 'loading', 'warning'];
 	const elementLibrary: { [key: string]: ReactElement<any> } = {};
 	iconList.forEach(iconKey => {
-		elementLibrary[iconKey] = createElement('span', { className: `codicon codicon-${iconKey}` });
+		elementLibrary[iconKey] = createElement('span', { className: `graph-icon icon--${iconKey}` });
 	});
 	return elementLibrary;
 };
diff --git a/src/webviews/apps/plus/graph/graph.scss b/src/webviews/apps/plus/graph/graph.scss
index 806d326..f4addc7 100644
--- a/src/webviews/apps/plus/graph/graph.scss
+++ b/src/webviews/apps/plus/graph/graph.scss
@@ -161,6 +161,88 @@ body {
 	}
 }
 
+// TODO: move this to host-side
+.graph-icon {
+	font: normal normal normal 14px/1 codicon;
+	display: inline-block;
+	text-decoration: none;
+	text-rendering: auto;
+	text-align: center;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+
+	vertical-align: middle;
+	line-height: 2rem;
+	letter-spacing: normal;
+}
+
+.icon--head {
+	&::before{
+		// codicon-vm
+		font-family: codicon;
+		content: '\ea7a';
+	}
+}
+
+.icon--remote {
+	&::before{
+		// codicon-cloud
+		font-family: codicon;
+		content: '\ebaa';
+	}
+}
+
+.icon--tag {
+	&::before{
+		// codicon-tag
+		font-family: codicon;
+		content: '\ea66';
+	}
+}
+
+.icon--stash {
+	&::before {
+		// codicon-inbox
+		font-family: codicon;
+		content: '\eb09';
+	}
+}
+
+.icon--check {
+	&::before{
+		// codicon-check
+		font-family: codicon;
+		content: '\eab2';
+	}
+}
+
+.icon--loading {
+	&::before{
+		// codicon-loading
+		font-family: codicon;
+		content: '\eb19';
+	}
+	animation: spin 1s infinite linear;
+	animation-delay: .2s;
+
+	@keyframes spin {
+		0% { transform: rotate(0deg); }
+		100% { transform: rotate(360deg); }
+	}
+}
+
+.icon--warning {
+	:before{
+		// codicon-vm
+		font-family: codicon;
+		content: '\ea6c';
+	}
+	color:  #DE9B43;
+}
+
 .graph-app {
 	--fs-2: 1.3rem;
 	--scroll-thumb-bg: var(--vscode-scrollbarSlider-background);