From ffb981c655c0cb27d278dc4e58a1ecd075c5672e Mon Sep 17 00:00:00 2001
From: Hannes Braun <hannes@hannesbraun.net>
Date: Thu, 5 Dec 2024 16:37:12 +0100
Subject: [PATCH] Use icons for visualization step buttons

---
 media/programflow-visualization/webview.css               | 4 ++++
 .../frontend/visualization_panel.ts                       | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/media/programflow-visualization/webview.css b/media/programflow-visualization/webview.css
index 500af36d..c5d5a385 100644
--- a/media/programflow-visualization/webview.css
+++ b/media/programflow-visualization/webview.css
@@ -192,3 +192,7 @@ body {
 .traceback-text {
   color: red;
 }
+
+#bottom-area button {
+  line-height: 18px;
+}
diff --git a/src/programflow-visualization/frontend/visualization_panel.ts b/src/programflow-visualization/frontend/visualization_panel.ts
index 170d48dd..4b7a7906 100644
--- a/src/programflow-visualization/frontend/visualization_panel.ts
+++ b/src/programflow-visualization/frontend/visualization_panel.ts
@@ -169,10 +169,10 @@ export class VisualizationPanel {
               <p id="traceMax">/?</p>
             </div>
             <div class="row margin-vertical">
-              <button class="margin-horizontal" id="firstButton" type="button" onclick="onClick('first')">First</button>
-              <button class="margin-horizontal" id="prevButton" type="button" onclick="onClick('prev')">Prev</button>
-              <button class="margin-horizontal" id="nextButton" type="button" onclick="onClick('next')">Next</button>
-              <button class="margin-horizontal" id="lastButton" type="button" onclick="onClick('last')">Last</button>
+              <button class="margin-horizontal" id="firstButton" type="button" onclick="onClick('first')">&#9198</button>
+              <button class="margin-horizontal" id="prevButton" type="button" onclick="onClick('prev')">&#9664</button>
+              <button class="margin-horizontal" id="nextButton" type="button" onclick="onClick('next')">&#9654</button>
+              <button class="margin-horizontal" id="lastButton" type="button" onclick="onClick('last')">&#9197</button>
             </div>
           </div>
           <div class="column floating-right">