add displayName && basic restyling

src/app.js

@@ -83,7 +83,6 @@ var css = csjs`
     overflow           : hidden;
   }
   .iconpanel           {
-    background-color   : #fafafa;
     display            : flex;
     flex-direction     : column;
     position           : absolute;
@@ -92,6 +91,7 @@ var css = csjs`
     left               : 0;
     overflow           : hidden;
     width              : 50px;
+    border-right       : 1px solid var(--primary);
   }
   .swappanel          {
     display            : flex;
@@ -185,7 +185,7 @@ class App {
     if (self._view.el) return self._view.el
     // not resizable
     self._view.iconpanel = yo`
-      <div id="icon-panel" class=${css.iconpanel}>
+      <div id="icon-panel" class="${css.iconpanel} bg-primary">
       ${''}
       </div>
     `

src/app/editor/editor.js

@@ -37,14 +37,14 @@ document.head.appendChild(yo`
     .highlightreference {
       position:absolute;
       z-index:20;
-      background-color: var(--secondary);
+      background-color: var(--primary);
       opacity: 0.6
     }
 
     .highlightreferenceline {
       position:absolute;
       z-index:20;
-      background-color: var(--secondary);
+      background-color: var(--primary);
       opacity: 0.6
     }
 

src/app/panels/editor-panel.js

@@ -25,9 +25,12 @@ var css = csjs`
     width             : 100%;
   }
   .contextviewcontainer{
-    width             : 100%;
-    height            : 20px;
-    background-color  : var(--main-bg-color);
+    position          : absolute;
+    top               : 39px;
+    z-index           : 50;
+    left              : 350px;
+    border-radius     : 1px;
+    border            : 2px solid var(--secondary);
   }
 `
 
@@ -182,7 +185,7 @@ class EditorPanel {
     self._view.content = yo`
       <div class=${css.content}>
         ${self.tabProxy.renderTabsbar()}
-        <div class=${css.contextviewcontainer}>
+        <div class="${css.contextviewcontainer} bg-secondary border-top-0">
           ${self._components.contextView.render()}
         </div>
         ${self._view.editor}

src/app/ui/landing-page/landing-page.js

@@ -9,14 +9,12 @@ var css = csjs`
     display         : flex;
     flex-direction  : column;
     flex-wrap       : wrap;
-    justify-content : space-between;
     align-items     : center;
     align-content   : space-around;
     
     border          : 2px solid black;
     width           : 400px;
     padding         : 50px;
-    background-color: #bfbfbf;
     font-family     : "Lucida Console", Monaco, monospace
 }
 `
@@ -28,11 +26,8 @@ class LandingPage {
 
   render () {
     var totalLook = yo`
-      <div class=${css.container}>
+      <div class="${css.container} bg-secondary">
         <h1> Remix </h1>
-        <br>
-        <br>
-        <br>
       </div>
     `
     for (var i = 0; i < this.sections.length; i++) {

src/app/ui/landing-page/section.js

@@ -8,7 +8,6 @@ var css = csjs`
     align-items     : center;
     width           : 400px;
     padding         : 50px;
-    background-color: #bfbfbf;
     font-family     : "Lucida Console", Monaco, monospace
     }
   a:link              {
@@ -26,24 +25,21 @@ class Section {
 
   render () {
     var sectionLook = yo`
-      <div class=${css.item}>
+      <div class="${css.item}">
         <h2> ${this.title} </h2>
-        <br>
-        <br>
-        <br>
       </div>
     `
     for (var i = 0; i < this.actions.length; i++) {
       if (this.actions[i].type === `callback`) {
         sectionLook.appendChild(yo`
                 <div>
-                  <span onclick= ${this.actions[i].payload} > ${this.actions[i].label} </span>
+                  <span class='text-warning h6' style="cursor:pointer;" onclick= ${this.actions[i].payload} > ${this.actions[i].label} </span>
                 </div>
               `)
       } else if (this.actions[i].type === `link`) {
         sectionLook.appendChild(yo`
             <div>
-                <a href= ${this.actions[i].payload} target="_blank" > ${this.actions[i].label} </a> 
+                <a class='text-warning h6' href= ${this.actions[i].payload} target="_blank" > ${this.actions[i].label} </a> 
             </div>
           `)
       }

src/lib/panels-resize.js

@@ -10,7 +10,7 @@ const css = csjs`
     bottom            : 0;
     cursor            : col-resize;
     z-index           : 999;
-    border-right      : var(--primary);
+    border-right      : 2px solid var(--primary);
   }
   .ghostbar           {
     width             : 3px;

src/remixAppManager.js

@@ -60,6 +60,7 @@ export class RemixAppManager extends AppManagerApi {
 
   plugins () {
     let vyper = {
+      displayName: 'vyper',
       name: 'vyper',
       events: ['compilationFinished'],
       methods: [],
@@ -69,7 +70,8 @@ export class RemixAppManager extends AppManagerApi {
       icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMjYyIDEwNzVxLTM3IDEyMS0xMzggMTk1dC0yMjggNzQtMjI4LTc0LTEzOC0xOTVxLTgtMjUgNC00OC41dDM4LTMxLjVxMjUtOCA0OC41IDR0MzEuNSAzOHEyNSA4MCA5Mi41IDEyOS41dDE1MS41IDQ5LjUgMTUxLjUtNDkuNSA5Mi41LTEyOS41cTgtMjYgMzItMzh0NDktNCAzNyAzMS41IDQgNDguNXptLTQ5NC00MzVxMCA1My0zNy41IDkwLjV0LTkwLjUgMzcuNS05MC41LTM3LjUtMzcuNS05MC41IDM3LjUtOTAuNSA5MC41LTM3LjUgOTAuNSAzNy41IDM3LjUgOTAuNXptNTEyIDBxMCA1My0zNy41IDkwLjV0LTkwLjUgMzcuNS05MC41LTM3LjUtMzcuNS05MC41IDM3LjUtOTAuNSA5MC41LTM3LjUgOTAuNSAzNy41IDM3LjUgOTAuNXptMjU2IDI1NnEwLTEzMC01MS0yNDguNXQtMTM2LjUtMjA0LTIwNC0xMzYuNS0yNDguNS01MS0yNDguNSA1MS0yMDQgMTM2LjUtMTM2LjUgMjA0LTUxIDI0OC41IDUxIDI0OC41IDEzNi41IDIwNCAyMDQgMTM2LjUgMjQ4LjUgNTEgMjQ4LjUtNTEgMjA0LTEzNi41IDEzNi41LTIwNCA1MS0yNDguNXptMTI4IDBxMCAyMDktMTAzIDM4NS41dC0yNzkuNSAyNzkuNS0zODUuNSAxMDMtMzg1LjUtMTAzLTI3OS41LTI3OS41LTEwMy0zODUuNSAxMDMtMzg1LjUgMjc5LjUtMjc5LjUgMzg1LjUtMTAzIDM4NS41IDEwMyAyNzkuNSAyNzkuNSAxMDMgMzg1LjV6Ii8+PC9zdmc+'
     }
     let ethDoc = {
-      name: 'eth doc',
+      displayName: 'eth doc',
+      name: 'ethDoc',
       events: ['newDoc'],
       methods: ['getdoc'],
       notifications: {
@@ -79,6 +81,7 @@ export class RemixAppManager extends AppManagerApi {
       description: 'generate solidity documentation'
     }
     var pipeline = {
+      displayName: 'pipeline',
       name: 'pipeline',
       events: [],
       methods: [],