From 22845a0cc8c7b6687c8f6a4ca93a2c304bb5cb61 Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Thu, 6 Aug 2020 15:52:55 +0200
Subject: [PATCH] Minor css tweaks

---
 src/components/JSONNode.scss   | 10 +++++++++-
 src/components/JSONNode.svelte |  4 ++--
 src/styles.scss                |  1 -
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/JSONNode.scss b/src/components/JSONNode.scss
index 928e2ec..d5cd336 100644
--- a/src/components/JSONNode.scss
+++ b/src/components/JSONNode.scss
@@ -114,7 +114,8 @@
   cursor: pointer;
   background: transparent;
   color: $gray-icon;
-  font-size: $font-size-icon;
+  font-size: $font-size;
+  line-height: $line-height;
 }
 
 .key,
@@ -236,7 +237,14 @@ div.empty {
   }
 }
 
+// TODO: create a class shared by .expand and .validation-error buttons
 .validation-error {
   color: $warning-color;
   padding: 0 $input-padding;
+  width: $line-height;
+  height: $line-height;
+  line-height: $line-height;
+  font-size: $font-size;
+  position: relative;
+  top: 2px;
 }
diff --git a/src/components/JSONNode.svelte b/src/components/JSONNode.svelte
index 5ebd2b7..684c413 100644
--- a/src/components/JSONNode.svelte
+++ b/src/components/JSONNode.svelte
@@ -459,13 +459,13 @@
         <span class="delimiter">&rbrace;</span>
         {#if validationError}
           <!-- FIXME: implement proper tooltip -->
-          <button 
+          <span 
             class='validation-error' 
             title={validationError.isChildError ? 'Contains invalid properties' : validationError.message}
             on:click={handleExpand}
           >
             <Icon data={faExclamationTriangle} />
-          </button>
+          </span>
         {/if}
       {/if}
     </div>
diff --git a/src/styles.scss b/src/styles.scss
index 1db3698..0818587 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,7 +3,6 @@ $font-family: consolas, monaco, "lucida console", "courier new",  "dejavu sans m
 $font-size: 14px;
 $font-size-small: 11px;
 $font-family-menu: arial, "sans-serif";
-$font-size-icon: 16px;
 
 $white: #fff;
 $black: #1A1A1A;