Minor css tweaks

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;
 }

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>

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;