From aabf40558ec4704c7ba1f66dbdfe254962d766fd Mon Sep 17 00:00:00 2001
From: "Mateusz \"Serafin\" Gajewski" <github@wendigo.pl>
Date: Wed, 9 Oct 2024 19:01:28 +0200
Subject: [PATCH] Use trino color palette

---
 .../resources/webapp/assets/css/timeline.css  | 42 ++++++++++---------
 .../resources/webapp/assets/js/timeline.js    |  4 +-
 .../main/resources/webapp/assets/trino.css    |  4 +-
 .../main/resources/webapp/embedded_plan.html  |  2 +-
 .../src/main/resources/webapp/index.html      |  2 +-
 .../src/main/resources/webapp/plan.html       |  2 +-
 .../src/main/resources/webapp/query.html      |  2 +-
 .../src/main/resources/webapp/stage.html      |  2 +-
 .../src/main/resources/webapp/timeline.html   |  4 +-
 .../{stackoverflow-dark.css => trino.css}     | 26 +++---------
 10 files changed, 40 insertions(+), 50 deletions(-)
 rename core/trino-web-ui/src/main/resources/webapp/vendor/highlightjs/styles/{stackoverflow-dark.css => trino.css} (74%)

diff --git a/core/trino-web-ui/src/main/resources/webapp/assets/css/timeline.css b/core/trino-web-ui/src/main/resources/webapp/assets/css/timeline.css
index 3f205d0c1548..195c85a16199 100644
--- a/core/trino-web-ui/src/main/resources/webapp/assets/css/timeline.css
+++ b/core/trino-web-ui/src/main/resources/webapp/assets/css/timeline.css
@@ -19,23 +19,23 @@
     padding: 0px;
 }
 .vis-timeline .vis-item.vis-range {
-    height: 0.6em;
+    height: 0.8em;
 }
 .vis-timeline .red {
-    background-color: #F2DEDE;
-    border-color: #F2AEAE;
+    background-color: #DD00A1;
+    border-color: #252830;
 }
-.vis-timeline .green {
-    background-color: #DFF0DB;
-    border-color: #B8F0AA;
+.vis-timeline .gray {
+    background-color: #9E9E9E;
+    border-color: #252830;
 }
 .vis-timeline .blue {
-    background-color: #E3E9FC;
-    border-color: #B0C3FC;
+    background-color: #001C93;
+    border-color: #252830;
 }
 .vis-timeline .orange {
-    background-color: #FFA500;
-    border-color: #B0C3FC;
+    background-color: #F88600;
+    border-color: #252830;
 }
 #legend {
     padding: 10px 40px
@@ -50,20 +50,20 @@
     margin-left: -20px;
 }
 #legend .red {
-    background-color: #F2DEDE;
-    border-color: #F2AEAE;
+    background-color: #DD00A1;
+    border-color: #252830;
 }
-#legend .green {
-    background-color: #DFF0DB;
-    border-color: #B8F0AA;
+#legend .gray {
+    background-color: #9E9E9E;
+    border-color: #252830;
 }
 #legend .blue {
-    background-color: #E3E9FC;
-    border-color: #B0C3FC;
+    background-color: #001C93;
+    border-color: #252830;
 }
 #legend .orange {
-    background-color: #FFA500;
-    border-color: #B0C3FC;
+    background-color: #F88600;
+    border-color: #252830;
 }
 #legend .empty {
     border-style: none;
@@ -71,3 +71,7 @@
 #legend>div {
     display: inline-block;
 }
+
+.vis-text {
+    color: white !important;
+}
diff --git a/core/trino-web-ui/src/main/resources/webapp/assets/js/timeline.js b/core/trino-web-ui/src/main/resources/webapp/assets/js/timeline.js
index 84fbb9c2ae04..9f5340eca210 100644
--- a/core/trino-web-ui/src/main/resources/webapp/assets/js/timeline.js
+++ b/core/trino-web-ui/src/main/resources/webapp/assets/js/timeline.js
@@ -59,7 +59,7 @@ $(document).ready(function () {
                 group: stageId,
                 start: task.time.create,
                 end: task.time.firstStart,
-                className: 'red',
+                className: 'gray',
                 subgroup: taskNumber,
                 sort: -taskNumber,
             });
@@ -67,7 +67,7 @@ $(document).ready(function () {
                 group: stageId,
                 start: task.time.firstStart,
                 end: task.time.lastStart,
-                className: 'green',
+                className: 'red',
                 subgroup: taskNumber,
                 sort: -taskNumber,
             });
diff --git a/core/trino-web-ui/src/main/resources/webapp/assets/trino.css b/core/trino-web-ui/src/main/resources/webapp/assets/trino.css
index 55dce3a0e7aa..308958be4ee9 100644
--- a/core/trino-web-ui/src/main/resources/webapp/assets/trino.css
+++ b/core/trino-web-ui/src/main/resources/webapp/assets/trino.css
@@ -35,8 +35,8 @@ h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
 pre {
     margin: 0;
     padding: 5px;
-    color: #999;
-    background-color: #2C2F38;
+    color: #9e9e9e;
+    background-color: #212121;
     border: none;
 }
 
diff --git a/core/trino-web-ui/src/main/resources/webapp/embedded_plan.html b/core/trino-web-ui/src/main/resources/webapp/embedded_plan.html
index ed043d7929c0..bb7852bd5286 100644
--- a/core/trino-web-ui/src/main/resources/webapp/embedded_plan.html
+++ b/core/trino-web-ui/src/main/resources/webapp/embedded_plan.html
@@ -22,7 +22,7 @@
     <script type="text/javascript" src="vendor/jquery.sparkline/jquery.sparkline.min.js"></script>
 
     <!-- Code highlighting -->
-    <link rel="stylesheet" href="vendor/highlightjs/styles/stackoverflow-dark.css">
+    <link rel="stylesheet" href="vendor/highlightjs/styles/trino.css">
 
     <!-- CSS loader -->
     <link href="vendor/css-loaders/loader.css" rel="stylesheet">
diff --git a/core/trino-web-ui/src/main/resources/webapp/index.html b/core/trino-web-ui/src/main/resources/webapp/index.html
index d228a3d9cb15..9275eb1a5ce5 100644
--- a/core/trino-web-ui/src/main/resources/webapp/index.html
+++ b/core/trino-web-ui/src/main/resources/webapp/index.html
@@ -13,7 +13,7 @@
     <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
 
     <!-- Code highlighting -->
-    <link href="vendor/highlightjs/styles/stackoverflow-dark.css" rel="stylesheet">
+    <link href="vendor/highlightjs/styles/trino.css" rel="stylesheet">
 
     <!-- jQuery -->
     <script type="text/javascript" src="vendor/jquery/jquery-3.7.1.min.js"></script>
diff --git a/core/trino-web-ui/src/main/resources/webapp/plan.html b/core/trino-web-ui/src/main/resources/webapp/plan.html
index be10cc55d922..a90b28dc71ef 100644
--- a/core/trino-web-ui/src/main/resources/webapp/plan.html
+++ b/core/trino-web-ui/src/main/resources/webapp/plan.html
@@ -22,7 +22,7 @@
     <script type="text/javascript" src="vendor/jquery.sparkline/jquery.sparkline.min.js"></script>
 
     <!-- Code highlighting -->
-    <link rel="stylesheet" href="vendor/highlightjs/styles/stackoverflow-dark.css">
+    <link rel="stylesheet" href="vendor/highlightjs/styles/trino.css">
 
     <!-- Clipboard -->
     <script src="vendor/clipboardjs/clipboard.min.js"></script>
diff --git a/core/trino-web-ui/src/main/resources/webapp/query.html b/core/trino-web-ui/src/main/resources/webapp/query.html
index 662e016a27b2..2d18de6a630e 100644
--- a/core/trino-web-ui/src/main/resources/webapp/query.html
+++ b/core/trino-web-ui/src/main/resources/webapp/query.html
@@ -22,7 +22,7 @@
     <script type="text/javascript" src="vendor/jquery.sparkline/jquery.sparkline.min.js"></script>
 
     <!-- Code highlighting -->
-    <link rel="stylesheet" href="vendor/highlightjs/styles/stackoverflow-dark.css">
+    <link rel="stylesheet" href="vendor/highlightjs/styles/trino.css">
 
     <!-- Clipboard -->
     <script src="vendor/clipboardjs/clipboard.min.js"></script>
diff --git a/core/trino-web-ui/src/main/resources/webapp/stage.html b/core/trino-web-ui/src/main/resources/webapp/stage.html
index b8616d4e24a5..bc4f26f9ae3a 100644
--- a/core/trino-web-ui/src/main/resources/webapp/stage.html
+++ b/core/trino-web-ui/src/main/resources/webapp/stage.html
@@ -22,7 +22,7 @@
     <script type="text/javascript" src="vendor/jquery.sparkline/jquery.sparkline.min.js"></script>
 
     <!-- Code highlighting -->
-    <link rel="stylesheet" href="vendor/highlightjs/styles/stackoverflow-dark.css">
+    <link rel="stylesheet" href="vendor/highlightjs/styles/trino.css">
 
     <!-- Clipboard -->
     <script src="vendor/clipboardjs/clipboard.min.js"></script>
diff --git a/core/trino-web-ui/src/main/resources/webapp/timeline.html b/core/trino-web-ui/src/main/resources/webapp/timeline.html
index 4cda965201ae..90407c52a982 100644
--- a/core/trino-web-ui/src/main/resources/webapp/timeline.html
+++ b/core/trino-web-ui/src/main/resources/webapp/timeline.html
@@ -48,10 +48,10 @@ <h2>Timeline</h2>
 
     <div id="legend">
         <div>
-            <div class="red bar"></div>
+            <div class="gray bar"></div>
             <div class="text">Created</div>
         </div><div>
-            <div class="green bar"></div>
+            <div class="red bar"></div>
             <div class="text">First split started</div>
         </div><div>
             <div class="blue bar"></div>
diff --git a/core/trino-web-ui/src/main/resources/webapp/vendor/highlightjs/styles/stackoverflow-dark.css b/core/trino-web-ui/src/main/resources/webapp/vendor/highlightjs/styles/trino.css
similarity index 74%
rename from core/trino-web-ui/src/main/resources/webapp/vendor/highlightjs/styles/stackoverflow-dark.css
rename to core/trino-web-ui/src/main/resources/webapp/vendor/highlightjs/styles/trino.css
index ef2e7e686f80..8fe005ee4774 100644
--- a/core/trino-web-ui/src/main/resources/webapp/vendor/highlightjs/styles/stackoverflow-dark.css
+++ b/core/trino-web-ui/src/main/resources/webapp/vendor/highlightjs/styles/trino.css
@@ -1,20 +1,6 @@
-/*!
-  Theme: StackOverflow Dark
-  Description: Dark theme as used on stackoverflow.com
-  Author: stackoverflow.com
-  Maintainer: @Hirse
-  Website: https://github.com/StackExchange/Stacks
-  License: MIT
-  Updated: 2021-05-15
-
-  Updated for @stackoverflow/stacks v0.64.0
-  Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
-  Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
-*/
-
-.hljs {
+hljs {
     /* var(--highlight-color) */
-    color: #ffffff;
+    color: #9e9e9e;
     /* var(--highlight-bg) */
 }
 
@@ -25,7 +11,7 @@
 
 .hljs-comment {
     /* var(--highlight-comment) */
-    color: #999999;
+    color: #DD00A1;
 }
 
 .hljs-keyword,
@@ -34,17 +20,17 @@
 .hljs-doctag,
 .hljs-section {
     /* var(--highlight-keyword) */
-    color: #88aece;
+    color: #F8B600;
 }
 
 .hljs-attr {
     /* var(--highlight-attribute); */
-    color: #88aece;
+    color: #F88600;
 }
 
 .hljs-attribute {
     /* var(--highlight-symbol) */
-    color: #c59bc1;
+    color: #DD00A1;
 }
 
 .hljs-name,