From cc232f195fd1918c4d0f4dad386d15a7fc50ff6c Mon Sep 17 00:00:00 2001
From: Alan Ren <alanren@microsoft.com>
Date: Thu, 20 May 2021 23:32:45 -0700
Subject: [PATCH] use svg for sorting state icons (#15546)

---
 .../base/browser/ui/table/media/sort-asc.gif  | Bin 830 -> 0 bytes
 .../base/browser/ui/table/media/sort-desc.gif | Bin 833 -> 0 bytes
 .../base/browser/ui/table/media/sort_asc.svg  |   8 ++++++
 .../ui/table/media/sort_asc_inverse.svg       |   8 ++++++
 .../base/browser/ui/table/media/sort_desc.svg |   8 ++++++
 .../ui/table/media/sort_desc_inverse.svg      |   8 ++++++
 src/sql/base/browser/ui/table/media/table.css |  26 ++++++++++++++----
 7 files changed, 53 insertions(+), 5 deletions(-)
 delete mode 100644 src/sql/base/browser/ui/table/media/sort-asc.gif
 delete mode 100644 src/sql/base/browser/ui/table/media/sort-desc.gif
 create mode 100644 src/sql/base/browser/ui/table/media/sort_asc.svg
 create mode 100644 src/sql/base/browser/ui/table/media/sort_asc_inverse.svg
 create mode 100644 src/sql/base/browser/ui/table/media/sort_desc.svg
 create mode 100644 src/sql/base/browser/ui/table/media/sort_desc_inverse.svg

diff --git a/src/sql/base/browser/ui/table/media/sort-asc.gif b/src/sql/base/browser/ui/table/media/sort-asc.gif
deleted file mode 100644
index 67a2a4c669fc5821a07fc486228d626e16d6ad9e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 830
zcmZ?wbhEHb<Yi!GXlGzZoN(6Rzr*8qzZpisXb6nF5K#Qd!py+H$e;uAIw(&ta7Z&S
hbMP=EEO2aQ5R!A55%BO(n*cx843CM64mL1Y0{|rI66OE^

diff --git a/src/sql/base/browser/ui/table/media/sort-desc.gif b/src/sql/base/browser/ui/table/media/sort-desc.gif
deleted file mode 100644
index 34db47c3b1eecab2d3873ee2fc556cd3a6e322f9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 833
zcmZ?wbhEHb<Yi!GXlGzZoN(6Rzr*8qzZpisXb6nF5K#Qd!py+H$e;uAIw(&taL55k
i2@ipW1_lm6E}aU4#6zuYvR)!L0u~+a5@Kdzum%7{ff3ID

diff --git a/src/sql/base/browser/ui/table/media/sort_asc.svg b/src/sql/base/browser/ui/table/media/sort_asc.svg
new file mode 100644
index 0000000000..c9c1838171
--- /dev/null
+++ b/src/sql/base/browser/ui/table/media/sort_asc.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 100 50"  xmlns="http://www.w3.org/2000/svg">
+	<style>
+		polygon {
+		fill:black;
+		}
+	</style>
+	<polygon points="0,50 50,0 100,50" />
+</svg>
diff --git a/src/sql/base/browser/ui/table/media/sort_asc_inverse.svg b/src/sql/base/browser/ui/table/media/sort_asc_inverse.svg
new file mode 100644
index 0000000000..2d40e6ca52
--- /dev/null
+++ b/src/sql/base/browser/ui/table/media/sort_asc_inverse.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
+	<style>
+		polygon {
+		fill:white;
+		}
+	</style>
+	<polygon points="0,50 50,0 100,50" />
+</svg>
diff --git a/src/sql/base/browser/ui/table/media/sort_desc.svg b/src/sql/base/browser/ui/table/media/sort_desc.svg
new file mode 100644
index 0000000000..d045a30b02
--- /dev/null
+++ b/src/sql/base/browser/ui/table/media/sort_desc.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
+	<style>
+		polygon {
+		fill:black;
+		}
+	</style>
+	<polygon points="0,0 100,0 50,50" />
+</svg>
diff --git a/src/sql/base/browser/ui/table/media/sort_desc_inverse.svg b/src/sql/base/browser/ui/table/media/sort_desc_inverse.svg
new file mode 100644
index 0000000000..9184cf7626
--- /dev/null
+++ b/src/sql/base/browser/ui/table/media/sort_desc_inverse.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
+	<style>
+		polygon {
+		fill:white;
+		}
+	</style>
+	<polygon points="0,0 100,0 50,50" />
+</svg>
diff --git a/src/sql/base/browser/ui/table/media/table.css b/src/sql/base/browser/ui/table/media/table.css
index 7dcf906bbd..497aeb2448 100644
--- a/src/sql/base/browser/ui/table/media/table.css
+++ b/src/sql/base/browser/ui/table/media/table.css
@@ -18,20 +18,36 @@
 	height: 100%;
 }
 
-.monaco-table .slick-sort-indicator-asc {
-	background: url('sort-asc.gif');
+.monaco-table .slick-sort-indicator {
+	background-size: 8px;
+	background-repeat: no-repeat;
+}
+.vs .monaco-table .slick-sort-indicator-asc {
+	background-image: url('sort_asc.svg');
 }
 
-.monaco-table .slick-sort-indicator-desc {
-	background: url('sort-desc.gif');
+.vs-dark .monaco-table .slick-sort-indicator-asc,
+.hc-black .monaco-table .slick-sort-indicator-asc {
+	background-image: url('sort_asc_inverse.svg');
+}
+
+.vs .monaco-table .slick-sort-indicator-desc {
+	background-image: url('sort_desc.svg');
+}
+
+.vs-dark .monaco-table .slick-sort-indicator-desc,
+.hc-black .monaco-table .slick-sort-indicator-desc {
+	background-image: url('sort_desc_inverse.svg');
 }
 
 .monaco-table .slick-sort-indicator {
 	display: inline-block;
 	width: 8px;
-	height: 5px;
+	height: 8px;
 	margin-left: 4px;
+	margin-right: 4px;
 	margin-top: 6px;
+	flex: 0 0 auto;
 }
 
 .slick-header-menubutton {