fixed the border between terminal and editor status line

replaced gas image with fa icon

src/app/editor/contextView.js

@@ -40,11 +40,12 @@ class ContextView {
   }
 
   render () {
-    const view = yo`<div class="${css.contextview} ${css.contextviewcontainer} badge bg-light border-0">
-      <div class=${css.container}>
-        ${this._renderTarget()}
-      </div>
-    </div>`
+    const view = yo`
+      <div class="${css.contextview} ${css.contextviewcontainer} bg-light text-dark border-0">
+        <div class=${css.container}>
+          ${this._renderTarget()}
+        </div>
+      </div>`
     if (!this._view) {
       this._view = view
     }
@@ -156,24 +157,28 @@ class ContextView {
     const showGasEstimation = () => {
       if (node.name === 'FunctionDefinition') {
         const result = this.contextualListener.gasEstimation(node)
-        const executionCost = 'Execution cost: ' + result.executionCost + ' gas'
+        const executionCost = ' Execution cost: ' + result.executionCost + ' gas'
         const codeDepositCost = 'Code deposit cost: ' + result.codeDepositCost + ' gas'
         const estimatedGas = result.codeDepositCost ? `${codeDepositCost}, ${executionCost}` : `${executionCost}`
-        return yo`<div class=${css.gasEstimation}>
-        <img class=${css.gasStationIcon} title='Gas estimation' src='assets/img/gasStation_50.png'>
-        ${estimatedGas}
-        </div>`
+        return yo`
+          <div class=${css.gasEstimation}>
+            <i class="fas fa-gas-pump ${css.gasStationIcon}" title='Gas estimation'></i>
+            <span>${estimatedGas}</span>
+          </div>
+        `
       }
     }
 
-    return yo`<div class=${css.line}>${showGasEstimation()}
-      <div title=${type} class=${css.type}>${type}</div>
-      <div title=${node.attributes.name} class=${css.name}>${node.attributes.name}</div>
-      <i class="fas fa-share ${css.jump}" aria-hidden="true" onclick=${jumpTo}></i>
-      <span class=${css.referencesnb}>${references}</span>
-      <i data-action='previous' class="fas fa-chevron-up ${css.jump}" aria-hidden="true" onclick=${jump}></i>
-      <i data-action='next' class="fas fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${jump}></i>
-    </div>`
+    return yo`
+      <div class=${css.line}>${showGasEstimation()}
+        <div title=${type} class=${css.type}>${type}</div>
+        <div title=${node.attributes.name} class=${css.name}>${node.attributes.name}</div>
+        <i class="fas fa-share ${css.jump}" aria-hidden="true" onclick=${jumpTo}></i>
+        <span class=${css.referencesnb}>${references}</span>
+        <i data-action='previous' class="fas fa-chevron-up ${css.jump}" aria-hidden="true" onclick=${jump}></i>
+        <i data-action='next' class="fas fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${jump}></i>
+      </div>
+    `
   }
 }
 

src/app/editor/styles/contextView-styles.js

@@ -1,15 +1,15 @@
 var csjs = require('csjs-inject')
 
 var css = csjs`
-  .contextview            {
+  .contextview {
     opacity             : 1;
     position            : relative;
-    height              : 20px;
+    height              : 25px;
   }
-  .container              {
+  .container {
     padding             : 1px 15px;
   }
-  .line                   {
+  .line {
     display             : flex;
     justify-content     : flex-end;
     align-items         : center;
@@ -18,32 +18,36 @@ var css = csjs`
     white-space         : nowrap;
     font-size           : 13px;
   }
-  .type                   {
+  .type {
     font-style        : italic;
     margin-right      : 5px;
   }
-  .name                   {
+  .name  {
     font-weight       : bold;
   }
-  .jump                   {
+  .jump {
     cursor            : pointer;
     margin            : 0 5px;
   }
   .jump:hover              {
     color             : var(--secondary);
   }
-  .referencesnb           {
+  .referencesnb {
     float             : right;
     margin-left       : 15px;
   }
   .gasEstimation {
-    margin-right: 15px;
-    display: flex;
-    align-items: center;
+    margin-right      : 15px;
+    display           : flex;
+    align-items       : center;
   }
   .gasStationIcon {
-    height: 13px;
-    margin-right: 5px;
+    margin-right      : 5px;
+  }
+  .contextviewcontainer {
+    z-index           : 50;
+    border-radius     : 1px;
+    border            : 2px solid var(--secondary);
   }
   .contextviewcontainer{
     z-index           : 50;

src/app/panels/terminal.js

@@ -136,7 +136,7 @@ class Terminal extends BaseApi {
     self._view.bar = yo`
       <div class="${css.bar}">
         ${self._view.dragbar}
-        <div class="${css.menu} border-top bg-light">
+        <div class="${css.menu} border-top border-dark bg-light">
           ${self._view.icon}
           <div class=${css.clear} onclick=${clear}>
             <i class="fas fa-ban" aria-hidden="true" title="Clear console"