Styling

Author: kishikawakatsumi

Public/css/highlight.css

@@ -85,8 +85,8 @@
   color: #c0c;
 }
 
-.exp-error {
-  background: #d22;
+.exp-syntax-error {
+  border-top: solid 2px #d22;
 }
 
 span.match-char {

Public/js/views/expression_field.js

@@ -53,7 +53,7 @@ export class ExpressionField extends EventDispatcher {
       this.highlighter.clearError();
     }
 
-    tippy(".exp-error", {
+    tippy(".exp-syntax-error", {
       allowHTML: true,
       animation: false,
       placement: "bottom",

Public/js/views/expression_highlighter.js

@@ -74,17 +74,20 @@ export default class ExpressionHighlighter extends EventDispatcher {
           error.location.end - error.location.start
         );
         const widget = document.createElement("span");
-        widget.className = `${pre}-error`;
+        widget.className = `${pre}-syntax-error`;
 
-        widget.style.height = `2px`;
+        widget.style.height = `5px`;
         widget.style.zIndex = "10";
-        widget.setAttribute("data-tippy-content", error.message);
+        widget.setAttribute(
+          "data-tippy-content",
+          `<span class="fw-bolder text-danger">${error.behavior}:</span> ${error.message}`
+        );
 
         editor.addWidget(location.startPos, widget);
         const startCoords = editor.charCoords(location.startPos, "local");
         const endCoords = editor.charCoords(location.endPos, "local");
         widget.style.left = `${startCoords.left + 1}px`;
-        widget.style.top = `${startCoords.bottom}px`;
+        widget.style.top = `${startCoords.bottom - 1}px`;
         widget.style.width = `${endCoords.left - startCoords.left - 2}px`;
 
         this.widgets.push(widget);