Fix selected tab background color

Nfinger · Oct 4, 2017 · 9b551f4 · 9b551f4
1 parent fb3dda1
commit 9b551f4
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/src/app/files/file-explorer.js b/src/app/files/file-explorer.js
@@ -21,6 +21,7 @@ var css = csjs`
   .folder,
   .file               {
     font-size         : 14px;
+    cursor            : pointer;
   }
   .hasFocus           {
     background-color  : ${styles.colors.backgroundBlue};

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
@@ -51,7 +51,6 @@ var css = csjs`
     min-width: 60px;
     font-size: 0.9em;
     cursor: pointer;
-    background-color: ${styles.colors.transparent};
     font-size: 1em;
     text-align: center;
   }
@@ -61,12 +60,6 @@ var css = csjs`
     margin: 0;
     padding: 0;
   }
-  .opts_li:active {
-    background-color: ${styles.colors.backgroundBlue};
-  }
-  .opts_li a {
-    color: inherit;
-  }
   .opts_li {
     display: block;
   }

diff --git a/src/app/tabs/tabbed-menu.js b/src/app/tabs/tabbed-menu.js
@@ -1,7 +1,19 @@
 var $ = require('jquery')
 
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
+var styles = styleGuide()
+
 module.exports = tabbedMenu
 
+var css = csjs`
+  .active {
+    background-color: ${styles.colors.backgroundBlue};
+  }
+`
+
 function tabbedMenu (container, appAPI, events, opts) {
   var lis = container.querySelectorAll('li')
   for (var li = 0; li < lis.length; ++li) {
@@ -20,15 +32,17 @@ function tabbedMenu (container, appAPI, events, opts) {
   selectTab(container.querySelector('.compileView'))
 
   // select tab
+
   function selectTab (el) {
-    el = $(el)
-    var match = /[a-z]+View/.exec(el.get(0).className)
+    var match = /[a-z]+View/.exec(el.className)
     if (!match) return
     var cls = match[0]
-    if (!el.hasClass('active')) {
-      el.parent().find('li').removeClass('active')
+    if (!el.classList.contains(css.active)) {
+      el.parentNode.querySelectorAll('li').forEach(function (x) {
+        x.classList.remove(css.active)
+      })
       $('#optionViews').attr('class', '').addClass(cls)
-      el.addClass('active')
+      el.classList.add(css.active)
     }
     events.app.trigger('tabChanged', [cls])
   }