Use trino color palette

trinodb · Oct 9, 2024 · 0179713 · 0179713
1 parent 4d36e5c
commit 0179713
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 50 deletions.
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
@@ -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,24 +50,28 @@
     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;
 }
 #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
@@ -59,15 +59,15 @@ $(document).ready(function () {
                 group: stageId,
                 start: task.time.create,
                 end: task.time.firstStart,
-                className: 'red',
+                className: 'gray',
                 subgroup: taskNumber,
                 sort: -taskNumber,
             });
             items.add({
                 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...highlightjs/styles/stackoverflow-dark.css → ...ebapp/vendor/highlightjs/styles/trino.css b/...highlightjs/styles/stackoverflow-dark.css → ...ebapp/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: #001C93;
 }
 
 .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,