From 37865c053107c4a129b854eda9ab08f8eef65765 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Sat, 10 Sep 2016 23:30:08 -0400
Subject: [PATCH] active tab styles, bottom border on list to not go full width
 like iOS

---
 src/popup/app/global/tabs.html         |  8 ++++----
 src/popup/app/global/tabsController.js |  4 ++--
 src/popup/less/components.less         | 15 +++++++++++++--
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/popup/app/global/tabs.html b/src/popup/app/global/tabs.html
index 9d23e04f..1edcba19 100644
--- a/src/popup/app/global/tabs.html
+++ b/src/popup/app/global/tabs.html
@@ -1,9 +1,9 @@
 <div ui-view></div>
 <div class="tabs" ng-controller="tabsController">
     <ul>
-        <li class="active"><a ui-sref="tabs.current"><i class="fa fa-star fa-2x"></i> Current</a></li>
-        <li><a ui-sref="tabs.vault"><i class="fa fa-lock fa-2x"></i> My Vault</a></li>
-        <li><a ui-sref="tabs.tools"><i class="fa fa-wrench fa-2x"></i> Tools</a></li>
-        <li><a ui-sref="tabs.settings"><i class="fa fa-cogs fa-2x"></i> Settings</a></li>
+        <li ng-class="{active: $state.includes('tabs.current')}"><a ui-sref="tabs.current"><i class="fa fa-star fa-2x"></i> Current</a></li>
+        <li ng-class="{active: $state.includes('tabs.vault')}"><a ui-sref="tabs.vault"><i class="fa fa-lock fa-2x"></i> My Vault</a></li>
+        <li ng-class="{active: $state.includes('tabs.tools')}"><a ui-sref="tabs.tools"><i class="fa fa-wrench fa-2x"></i> Tools</a></li>
+        <li ng-class="{active: $state.includes('tabs.settings')}"><a ui-sref="tabs.settings"><i class="fa fa-cogs fa-2x"></i> Settings</a></li>
     </ul>
 </div>
diff --git a/src/popup/app/global/tabsController.js b/src/popup/app/global/tabsController.js
index 529a54bf..dc3081af 100644
--- a/src/popup/app/global/tabsController.js
+++ b/src/popup/app/global/tabsController.js
@@ -1,6 +1,6 @@
 angular
     .module('bit.global')
 
-    .controller('tabsController', function ($scope) {
-
+    .controller('tabsController', function ($scope, $state) {
+        $scope.$state = $state;
     });
diff --git a/src/popup/less/components.less b/src/popup/less/components.less
index 1f05afec..242c2d70 100644
--- a/src/popup/less/components.less
+++ b/src/popup/less/components.less
@@ -105,7 +105,7 @@
                 text-overflow: ellipsis;
 
                 &:hover {
-                    background-color: rgba(255, 255, 255, 0.8);
+                    background-color: @list-item-hover;
                 }
 
                 i {
@@ -171,7 +171,18 @@
         overflow: hidden;
         text-overflow: ellipsis;
         color: @text-color;
-        border-bottom: 1px solid @border-color;
+        position: relative;
+        z-index: 1;
+
+        &:before {
+            content: "";
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            height: 1px;
+            width: 97%;
+            border-bottom: 1px solid @border-color;
+        }
 
         &:last-child {
             border: none;