Update contextView

src/app/editor/contextView.js

@@ -1,40 +1,43 @@
 'use strict'
 var yo = require('yo-yo')
+var csjs = require('csjs-inject')
 var remix = require('ethereum-remix')
 var styleGuide = remix.ui.styleGuide
-var SourceMappingDecoder = remix.util.SourceMappingDecoder
 var styles = styleGuide()
-var csjs = require('csjs-inject')
+var SourceMappingDecoder = remix.util.SourceMappingDecoder
 
 var css = csjs`
   .contextview            {
-      background-color  : ${styles.colors.backgroundBlue};
       opacity           : 0.8;
-      width             : 20em;
-      height            : 6em;
-      border-color      : transparent;
-      border-radius     : 3px;
-      border            : .3px solid hsla(0, 0%, 40%, .2);
     }
   .container              {
-    padding             : 1em;
+    padding             : 5px 15px;
   }
-  .type                   {
+  .line                   {
-    font-style        : italic;
+    display             : flex;
+    justify-content     : flex-end;
+    align-items         : center;
     text-overflow       : ellipsis;
-    width             : 18em;
     overflow            : hidden;
     white-space         : nowrap;
+    color               : ${styles.editor.text_Primary};
+    font-size           : 11px;
+  }
+  .type                   {
+    font-style        : italic;
+    margin-right      : 5px;
   }
   .name                   {
     font-weight       : bold;
-    text-overflow     : ellipsis;
+    margin-right      : 15px;
-    width             : 18em;
-    overflow          : hidden;
-    white-space       : nowrap;
   }
   .jumpto                 {
     cursor            : pointer;
+    margin-right      : 5px;
+    color             : ${styles.editor.icon_Color_Editor};
+  }
+  jumpto:hover            {
+    color             : ${styles.editor.icon_HoverColor_Editor};
   }
   .referencesnb           {
     float             : right;
@@ -126,7 +129,7 @@ class ContextView {
       }
     }
 
-    return yo`<div>
+    return yo`<div class=${css.line}>
       <div title=${type} class=${css.type} >${type}</div>
       <div title=${node.attributes.name} class=${css.name} >${node.attributes.name}</div>
       <i title='Go to Definition' class="fa fa-share ${css.jumpto}" aria-hidden="true" onclick=${jumpTo}></i>

src/app/editor/editor.js

@@ -15,7 +15,6 @@ var styles = styleGuide()
 var css = csjs`
   .ace-editor {
     background-color  : ${styles.editor.backgroundColor_Editor};
-    border-top: 20px solid ${styles.editor.backgroundColor_Tabs_Highlights};
     width     : 100%;
   }
 `

src/app/panels/editor-panel.js

@@ -170,11 +170,9 @@ var css = csjs`
     width             : 100%;
   }
   .contextviewcontainer{
-    position          : absolute;
+    width             : 100%;
-    z-index           : 100;
+    height            : 30px;
-    right             : 20px;
+    background-color  : ${styles.editor.backgroundColor_Tabs_Highlights};
-    top               : 10px;
-    width             : 20em;
   }
   .banner             {
     width             : 25em;