You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@trafficcontrol.apache.org by zr...@apache.org on 2021/10/07 21:30:14 UTC

[trafficcontrol] branch 6.0.x updated: Fix notification text in production environments not visible/accessible (#6258)

This is an automated email from the ASF dual-hosted git repository.

zrhoffman pushed a commit to branch 6.0.x
in repository https://gitbox.apache.org/repos/asf/trafficcontrol.git


The following commit(s) were added to refs/heads/6.0.x by this push:
     new a84b094  Fix notification text in production environments not visible/accessible (#6258)
a84b094 is described below

commit a84b0940f8a84c33e4c98d70e67494d22d635751
Author: ocket8888 <oc...@apache.org>
AuthorDate: Thu Oct 7 15:04:08 2021 -0600

    Fix notification text in production environments not visible/accessible (#6258)
    
    * Fix unreadable/inaccessible CDN notification text in prod environments
    
    Also removes a ton of redundant and/or unused rules and/or selectors
    
    * Fix double-highlighting menu items
    
    * Remove a bunch of duplicate/ineffectual rules/selectors and uses of !important
    
    * Update CHANGELOG
    
    (cherry picked from commit b02bbe74eeb4277299c5ffa5f912bbca449828ed)
---
 CHANGELOG.md                                       |   1 +
 .../app/src/common/modules/chart/_chart.scss       |   6 +-
 .../src/common/modules/header/HeaderController.js  |  17 +-
 .../app/src/common/modules/header/_header.scss     | 264 +++++++++++----------
 .../app/src/common/modules/header/header.tpl.html  |   6 +-
 .../src/common/modules/navigation/_navigation.scss | 123 ++--------
 .../common/modules/navigation/navigation.tpl.html  |  16 +-
 traffic_portal/app/src/styles/theme.scss           |  89 +------
 8 files changed, 187 insertions(+), 335 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 54eb944..ba3fe18 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -108,6 +108,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 - Fixed Traffic Router crs/stats to prevent overflow and to correctly record the time used in averages.
 - [#6093](https://github.com/apache/trafficcontrol/issues/6093) - Fixed Let's Encrypt to work for delivery services where the domain does not contain the XMLID.
 - [#5893](https://github.com/apache/trafficcontrol/issues/5893) - A self signed certificate is created when an HTTPS delivery service is created or an HTTP delivery service is updated to HTTPS.
+- [#6255](https://github.com/apache/trafficcontrol/issues/6255) - Unreadable Prod Mode CDN Notifications in Traffic Portal
 
 ### Changed
 - Migrated completely off of bower in favor of npm
diff --git a/traffic_portal/app/src/common/modules/chart/_chart.scss b/traffic_portal/app/src/common/modules/chart/_chart.scss
index f9b38c1..72e48b3 100644
--- a/traffic_portal/app/src/common/modules/chart/_chart.scss
+++ b/traffic_portal/app/src/common/modules/chart/_chart.scss
@@ -27,10 +27,11 @@
   }
 }
 
+/* is this used anywhere? Possibly content dynamically inserted by a library? */
 .x_content {
   div.legend {
     table {
-      width: initial !important;
+      width: initial;
     }
   }
 }
@@ -47,6 +48,3 @@
   }
 
 }
-
-
-
diff --git a/traffic_portal/app/src/common/modules/header/HeaderController.js b/traffic_portal/app/src/common/modules/header/HeaderController.js
index 37082a0..98f003f 100644
--- a/traffic_portal/app/src/common/modules/header/HeaderController.js
+++ b/traffic_portal/app/src/common/modules/header/HeaderController.js
@@ -17,6 +17,13 @@
  * under the License.
  */
 
+const defaultBannerColor = "#EDEDED";
+const defaultSidebarColor = "#2A3F54";
+const defaultTextColor = "#515356";
+
+const prodTextColor = "white";
+const prodBannerColor = "#B22222";
+
 var HeaderController = function($rootScope, $scope, $state, $uibModal, $location, $anchorScroll, locationUtils, permissionUtils, authService, trafficPortalService, changeLogService, cdnService, changeLogModel, userModel, propertiesModel) {
 
     let getCDNs = function(notifications) {
@@ -35,7 +42,15 @@ var HeaderController = function($rootScope, $scope, $state, $uibModal, $location
 
     $scope.enviroName = (propertiesModel.properties.environment) ? propertiesModel.properties.environment.name : '';
 
-    $scope.isProd = (propertiesModel.properties.environment) ? propertiesModel.properties.environment.isProd : false;
+    if (propertiesModel.properties.environment && propertiesModel.properties.environment.isProd) {
+        document.documentElement.style.setProperty("--banner-color", prodBannerColor);
+        document.documentElement.style.setProperty("--sidebar-color", prodBannerColor);
+        document.documentElement.style.setProperty("--banner-text-color", prodTextColor);
+    } else {
+        document.documentElement.style.setProperty("--banne-color", defaultBannerColor);
+        document.documentElement.style.setProperty("--sidebar-color", defaultSidebarColor);
+        document.documentElement.style.setProperty("--banner-text-color", defaultTextColor);
+    }
 
     /* we don't want real time changes to the user showing up. we want the ability to revert changes
     if necessary. thus, we will only update this on save. see userModel::userUpdated event below.
diff --git a/traffic_portal/app/src/common/modules/header/_header.scss b/traffic_portal/app/src/common/modules/header/_header.scss
index 21f3f18..b2972f6 100644
--- a/traffic_portal/app/src/common/modules/header/_header.scss
+++ b/traffic_portal/app/src/common/modules/header/_header.scss
@@ -1,6 +1,4 @@
 /*
-
-
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
@@ -12,135 +10,143 @@
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-
 */
-body.nav-sm .main_container .top_nav {
-  padding: 0 !important;
-  display: block;
-  margin-left: 70px;
-  z-index: 2;
-}
-
-#alertsButton, #userButton {
-  &:hover, &:focus {
-    text-decoration: none;
-  }
-}
-
-.main_container .top_nav {
-  padding: 0 !important;
-  display: block;
-  padding: 10px 20px 0;
-  margin-left: 230px;
-}
-
-.top_nav .navbar-right {
-  margin: 0;
-  width: 70%;
-  float: right;
-}
-
-.top_nav .navbar-right li {
-  display: inline-block;
-  float: right;
-}
-
-.top_nav .dropdown-menu {
-  min-width: 220px;
-}
-
-.top_nav .dropdown-menu li {
-  width: 100%;
-}
-
-.top_nav .dropdown-menu li a {
-  width: 100%;
-  padding: 12px 20px;
-}
-
-.top_nav li a i {
-  font-size: 15px
-}
-
-.navbar {
-  margin-bottom: 0
-}
-
-.navbar-header {
-  background: #34495E;
-}
-
-.navbar-right {
-  margin-right: 0;
-}
 
-.navbar-static-top {
-  position: fixed;
-  top: 0;
-  width: 100%;
+:root {
+	--banner-color: #EDEDED;
+	--sidebar-color: #2A3F54;
+	--banner-text-color: #515356;
+}
+
+@media (min-width: 480px) {
+	#header {
+		position: static
+	}
+}
+
+#header {
+	float: left;
+	background: var(--banner-color);
+	border-bottom: 1px solid #D9DEE4;
+	margin-bottom: 10px;
+	width: 100%;
+	position: relative;
+
+	.navbar-right {
+		margin: 0;
+		width: 70%;
+		float: right;
+
+		li {
+			display: inline-block;
+		}
+	}
+
+	.dropdown-menu {
+		min-width: 220px;
+
+		li {
+			width: 100%;
+
+			a {
+				width: 100%;
+				padding: 12px 20px;
+			}
+		}
+	}
+
+	li a i {
+		font-size: 15px;
+	}
+
+	.btn-link {
+		margin-bottom: 5px;
+		color: var(--banner-text-color);
+
+		&:hover {
+			text-decoration: none;
+		}
+	}
+
+	.uib-dropdown-menu {
+		padding: 0;
+		.btn-link {
+			color: #337ab7;
+		}
+	}
+
+	.toggle {
+		float: left;
+		margin: 0;
+		padding-top: 16px;
+		padding-bottom: 16px;
+		width: 70px;
+
+		a {
+			padding: 15px 15px 0;
+			margin: 0;
+
+			i {
+				font-size: 26px;
+			}
+		}
+	}
 }
 
-.navbar-brand,
-.navbar-nav>li>.btn-group>.btn-link {
-  margin-bottom: 5px
-}
-
-.nav.navbar-nav>li>.btn-group>.btn-link {
-  color: #515356;
-}
-
-.nav.top_menu>li>a {
-  position: relative;
-  display: block;
-  padding: 10px 15px;
-  color: #34495E;
-}
-
-.nav>li>a:hover,
-.nav>li>a:focus {
-  background-color: transparent;
-}
-
-.toggle {
-  float: left;
-  margin: 0;
-  padding-top: 16px;
-  padding-bottom: 16px;
-  width: 70px;
-}
-
-.toggle a {
-  padding: 15px 15px 0;
-  margin: 0;
-}
-
-.toggle a i {
-  font-size: 26px;
-}
-
-.enviro-banner {
-  float: left;
-  border-radius: 0;
-  height: 57px;
-  text-align: center;
-}
-
-.enviro-banner.prod {
-  background: #B22222;
-}
-
-.notification.btn-link:hover {
-  text-decoration: none;
-}
-
-@media (max-width: 991px) {
-
-  body.nav-md .container.body .top_nav {
-    width: 100%;
-    margin: 0;
-  }
-
+#alertsButton, #userButton {
+	&:hover, &:focus {
+		text-decoration: none;
+	}
+}
+
+#enviro-banner {
+	background: transparent;
+	float: left;
+	border-radius: 0;
+	margin-bottom: 0;
+	height: 57px;
+	text-align: center;
+
+	span {
+		text-overflow: ellipsis;
+		overflow: hidden;
+		font-weight: 400;
+		font-size: 18px;
+		width: 100%;
+		color: var(--banner-text-color);
+		margin-left: 0;
+		line-height: 59px;
+		display: block;
+		height: 55px;
+		margin: 0;
+		padding-left: 10px;
+		text-transform: uppercase;
+	}
+}
+
+.nav_title {
+	width: 230px;
+	float: left;
+	background: var(--sidebar-color);
+	border-radius: 0;
+	height: 57px;
+	text-align: center;
+}
+
+.navbar-nav {
+
+	.open .dropdown-menu {
+		position: absolute;
+		background: #fff;
+		margin-top: 0;
+		border: 1px solid #D9DEE4;
+		box-shadow: none;
+		right: 0;
+		left: auto;
+		width: 220px;
+
+		&.msg_list {
+			width: 300px;
+		}
+	}
 }
-
-
-
diff --git a/traffic_portal/app/src/common/modules/header/header.tpl.html b/traffic_portal/app/src/common/modules/header/header.tpl.html
index 31adc90..8143f66 100644
--- a/traffic_portal/app/src/common/modules/header/header.tpl.html
+++ b/traffic_portal/app/src/common/modules/header/header.tpl.html
@@ -17,13 +17,13 @@ specific language governing permissions and limitations
 under the License.
 -->
 
-<div id="header" class="nav_menu" ng-class="{ 'prod': isProd }">
+<div id="header">
     <nav role="navigation">
         <div class="nav toggle">
             <a id="menu_toggle" class="btn-link"><i class="fa fa-bars"></i></a>
         </div>
-        <div class="navbar enviro-banner" ng-class="{ 'prod': isProd }">
-            <span class="enviro_name" ng-class="{ 'prod': isProd }">{{enviroName}}</span>
+        <div id="enviro-banner" class="navbar">
+            <span>{{enviroName}}</span>
         </div>
         <ul class="nav navbar-nav navbar-right" ng-if="userLoaded">
             <li>
diff --git a/traffic_portal/app/src/common/modules/navigation/_navigation.scss b/traffic_portal/app/src/common/modules/navigation/_navigation.scss
index cab353f..8a5bafb 100644
--- a/traffic_portal/app/src/common/modules/navigation/_navigation.scss
+++ b/traffic_portal/app/src/common/modules/navigation/_navigation.scss
@@ -41,7 +41,7 @@ body.nav-sm .navbar.nav_title a i {
 }
 
 body.nav-sm .nav.side-menu li a {
-  text-align: center !important;
+  text-align: center;
   font-weight: 400;
   font-size: 10px;
   padding: 10px 5px;
@@ -51,18 +51,14 @@ body.nav-sm .nav.side-menu li.active-sm {
   border-right: 5px solid #1ABB9C;
 }
 
-body.nav-sm > .nav.side-menu > li.active-sm > a {
-  color: #1ABB9C !important;
-}
-
-body.nav-sm .nav.side-menu li a i.toggle-up {
-  display: none !important;
+body.nav-sm .side-menu-category.active-sm > a {
+  color: #1ABB9C;
 }
 
 body.nav-sm .nav.side-menu li a i {
-  font-size: 25px !important;
+  font-size: 25px;
   text-align: center;
-  width: 100% !important;
+  width: 100%;
   margin-bottom: 5px;
 }
 
@@ -82,7 +78,7 @@ body.nav-sm ul.nav.child_menu li {
 }
 
 body.nav-sm ul.nav.child_menu li a {
-  text-align: left !important;
+  text-align: left;
 }
 
 body.nav-sm .profile {
@@ -109,47 +105,10 @@ body.nav-sm .profile {
   margin-top: 10px;
 }
 
-#sidebar-menu span.fa {
-  float: right;
-  text-align: center;
-  margin-top: 5px;
-  font-size: 10px !important;
-  min-width: inherit;
-  color: #C4CFDA;
-}
-
-.active a span.fa {
-  text-align: right !important;
-  margin-right: 4px;
-}
-
 body.nav-sm .menu_section {
   margin: 0;
 }
 
-body.nav-sm span.fa,
-body.nav-sm .menu_section h3 {
-  display: none !important;
-}
-
-.nav_menu {
-  float: left;
-  /*background: #F4F6F9;
-  border-bottom: 1px solid #E6E9ED;*/
-
-  background: #EDEDED;
-  border-bottom: 1px solid #D9DEE4;
-  margin-bottom: 10px;
-  width: 100%;
-}
-
-.nav_menu.prod {
-  background: #B22222;
-  .btn-link {
-    color: white !important;
-  }
-}
-
 .main_menu .fa-sm {
   font-size: 12px;
 }
@@ -164,21 +123,7 @@ body.nav-md .container.body .col-md-3.main-nav {
   display: flex;
 }
 
-.nav_title {
-  width: 230px;
-  float: left;
-  background: #2A3F54;
-  border-radius: 0;
-  height: 57px;
-  text-align: center;
-}
-
-.nav_title.prod {
-  background: #B22222;
-}
-
 .nav.child_menu > li > a {
-  color: rgba(255, 255, 255, 0.75) !important;
   font-size: 14px;
   padding: 9px;
 }
@@ -202,7 +147,7 @@ body.nav-md .container.body .col-md-3.main-nav {
 }
 
 .nav.side-menu> li > a:hover {
-  color: #F2F5F7 !important;
+  color: #F2F5F7;
 }
 
 .nav.side-menu>li>a:hover,
@@ -211,8 +156,8 @@ body.nav-md .container.body .col-md-3.main-nav {
   background: transparent;
 }
 
-.nav.child_menu li:hover {
-  background-color: rgba(255, 255, 255, 0.06);
+.side-menu-category .nav.child_menu li:hover a {
+  background: transparent;
 }
 
 .nav.child_menu li {
@@ -246,7 +191,7 @@ body.nav-md ul.nav.child_menu li:after {
 
 .nav.side-menu>li>a,
 .nav.child_menu>li>a {
-  color: #E7E7E7 !important;
+  color: #E7E7E7;
   font-weight: 500;
 }
 
@@ -266,7 +211,6 @@ li.current-page {
 }
 
 .nav.side-menu> li.active > a {
-  color: #ff0000;
   text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5b6479), color-stop(100%, #4c5566)), #686e78;
   background: -webkit-linear-gradient(#334556, #2C4257), #2A3F54;
@@ -278,57 +222,30 @@ li.current-page {
   box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
 }
 
-li.current-page a {
-  color: #1ABB9C !important
-}
-
 .site_title {
   text-overflow: ellipsis;
   overflow: hidden;
   font-weight: 400;
   font-size: 22px;
   width: 100%;
-  color: #ECF0F1 !important;
-  margin-left: 0 !important;
-  line-height: 59px;
-  display: block;
-  height: 55px;
-  margin: 0;
-  padding-left: 10px;
-  text-transform: uppercase;
-}
-
-.enviro_name {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  font-weight: 400;
-  font-size: 18px;
-  width: 100%;
-  color: #777 !important;
-  margin-left: 0 !important;
+  color: #ECF0F1;
   line-height: 59px;
   display: block;
   height: 55px;
   margin: 0;
   padding-left: 10px;
   text-transform: uppercase;
+  text-decoration: none;
 }
 
-.enviro_name.prod {
-  color: #ECF0F1 !important;
-}
-
-.site_title:hover,
-.site_title:focus {
-  text-decoration: none
-}
-
-
-
-
 @media (max-width: 991px) {
-  body.nav-md .container.body .col-md-3.main-nav {
-    display: none;
+  body.nav-md .container.body {
+    .col-md-3.main-nav {
+      display: none;
+    }
+    .top_nav {
+      width: 100%;
+      margin: 0;
+    }
   }
 }
-
diff --git a/traffic_portal/app/src/common/modules/navigation/navigation.tpl.html b/traffic_portal/app/src/common/modules/navigation/navigation.tpl.html
index bf067e9..7d3b4fc 100644
--- a/traffic_portal/app/src/common/modules/navigation/navigation.tpl.html
+++ b/traffic_portal/app/src/common/modules/navigation/navigation.tpl.html
@@ -18,7 +18,7 @@ under the License.
 -->
 
 <div class="main-nav scroll-view">
-    <div class="navbar nav_title" ng-class="{ 'prod': isProd }">
+    <div class="navbar nav_title">
         <span class="site_title">{{appName}}</span>
     </div>
     <div class="clearfix"></div>
@@ -27,20 +27,20 @@ under the License.
             <ul class="nav side-menu">
                 <li class="side-menu-category" ng-class="{'current-page': isState('trafficPortal.private.dashboard')}"><a href="/#!/dashboard"><i class="fa fa-sm fa-bar-chart"></i> Dashboard</a></li>
                 <li class="side-menu-category" ng-if="hasCapability('cdns-read')" ng-class="{'current-page': isState('trafficPortal.private.cdns')}"><a href="/#!/cdns"><i class="fa fa-sm fa-sitemap"></i> CDNs</a></li>
-                <li class="side-menu-category"><a href="javascript:void(0);"><i class="fa fa-sm fa-chevron-right"></i> Monitor</span></a>
+                <li class="side-menu-category"><a href="javascript:void(0);"><i class="fa fa-sm fa-chevron-right"></i> Monitor</a>
                     <ul class="nav child_menu" style="display: none">
                         <li class="side-menu-category-item" ng-if="::showCacheChecks && hasCapability('servers-read')" ng-class="{'current-page': isState('trafficPortal.private.cacheChecks')}"><a href="/#!/cache-checks">Cache Checks</a></li>
                         <li class="side-menu-category-item" ng-if="hasCapability('stats-read')" ng-class="{'current-page': isState('trafficPortal.private.cacheStats')}"><a href="/#!/cache-stats">Cache Stats</a></li>
                     </ul>
                 </li>
-                <li class="side-menu-category"><a href="javascript:void(0);"><i class="fa fa-sm fa-chevron-right"></i> Services</span></a>
+                <li class="side-menu-category"><a href="javascript:void(0);"><i class="fa fa-sm fa-chevron-right"></i> Services</a>
                     <ul class="nav child_menu" style="display: none">
                         <li class="side-menu-category-item" ng-if="hasCapability('delivery-services-read')" ng-class="{'current-page': isState('trafficPortal.private.deliveryServices')}"><a href="/#!/delivery-services">Delivery Services</a></li>
                         <li class="side-menu-category-item" ng-if="::dsRequestsEnabled && hasCapability('delivery-service-requests-read')" ng-class="{'current-page': isState('trafficPortal.private.deliveryServiceRequests')}"><a href="/#!/delivery-service-requests">Delivery Service Requests</a></li>
                         <li class="side-menu-category-item" ng-if="hasCapability('service-categories-read')" ng-class="{'current-page': isState('trafficPortal.private.serviceCategories')}"><a href="/#!/service-categories">Service Categories</a></li>
                     </ul>
                 </li>
-                <li class="side-menu-category"><a href="javascript:void(0);"><i class="fa fa-sm fa-chevron-right"></i> Configure</span></a>
+                <li class="side-menu-category"><a href="javascript:void(0);"><i class="fa fa-sm fa-chevron-right"></i> Configure</a>
                     <ul class="nav child_menu" style="display: none">
                         <li class="side-menu-category-item" ng-if="hasCapability('servers-read')" ng-class="{'current-page': isState('trafficPortal.private.servers')}"><a href="/#!/servers">Servers</a></li>
                         <li class="side-menu-category-item" ng-if="hasCapability('server-capabilities-read')" ng-class="{'current-page': isState('trafficPortal.private.serverCapabilities')}"><a href="/#!/server-capabilities">Server Capabilities</a></li>
@@ -51,7 +51,7 @@ under the License.
                         <li class="side-menu-category-item" ng-if="hasCapability('statuses-read')" ng-class="{'current-page': isState('trafficPortal.private.statuses')}"><a href="/#!/statuses">Statuses</a></li>
                     </ul>
                 </li>
-                <li class="side-menu-category"><a href="javascript:void(0);"><i class="fa fa-sm fa-chevron-right"></i> Topology</span></a>
+                <li class="side-menu-category"><a href="javascript:void(0);"><i class="fa fa-sm fa-chevron-right"></i> Topology</a>
                     <ul class="nav child_menu" style="display: none">
                         <li class="side-menu-category-item" ng-if="hasCapability('topologies-read')" ng-class="{'current-page': isState('trafficPortal.private.topologies')}"><a href="/#!/topologies">Topologies</a></li>
                         <li class="side-menu-category-item" ng-if="hasCapability('cache-groups-read')" ng-class="{'current-page': isState('trafficPortal.private.cacheGroups')}"><a href="/#!/cache-groups">Cache Groups</a></li>
@@ -62,13 +62,13 @@ under the License.
                         <li class="side-menu-category-item" ng-if="hasCapability('asns-read')" ng-class="{'current-page': isState('trafficPortal.private.asns')}"><a href="/#!/asns">ASNs</a></li>
                     </ul>
                 </li>
-                <li class="side-menu-category"><a href="javascript:void(0);"><i class="fa fa-sm fa-chevron-right"></i> Tools</span></a>
+                <li class="side-menu-category"><a href="javascript:void(0);"><i class="fa fa-sm fa-chevron-right"></i> Tools</a>
                     <ul class="nav child_menu" style="display: none">
                         <li class="side-menu-category-item" ng-if="hasCapability('jobs-read')" ng-class="{'current-page': isState('trafficPortal.private.jobs')}"><a href="/#!/jobs">Invalidate Content</a></li>
                         <li class="side-menu-category-item" ng-if="hasCapability('iso-generate')" ng-class="{'current-page': isState('trafficPortal.private.iso')}"><a href="/#!/iso">Generate ISO</a></li>
                     </ul>
                 </li>
-                <li class="side-menu-category"><a href="javascript:void(0);"><i class="fa fa-sm fa-chevron-right"></i> User Admin</span></a>
+                <li class="side-menu-category"><a href="javascript:void(0);"><i class="fa fa-sm fa-chevron-right"></i> User Admin</a>
                     <ul class="nav child_menu" style="display: none">
                         <li class="side-menu-category-item" ng-if="hasCapability('users-read')" ng-class="{'current-page': isState('trafficPortal.private.users')}"><a href="/#!/users">Users</a></li>
                         <li class="side-menu-category-item" ng-if="hasCapability('tenants-read')" ng-class="{'current-page': isState('trafficPortal.private.tenants')}"><a href="/#!/tenants">Tenants</a></li>
@@ -78,7 +78,7 @@ under the License.
                         <li class="side-menu-category-item" ng-if="enforceCapabilities && hasCapability('api-endpoints-read')" ng-class="{'current-page': isState('trafficPortal.private.endpoints')}"><a href="/#!/endpoints">API Endpoints</a></li>
                     </ul>
                 </li>
-                <li class="side-menu-category" ng-if="customMenu.items.length > 0"><a href="javascript:void(0);"><i class="fa fa-sm fa-chevron-right"></i> {{::customMenu.name}}</span></a>
+                <li class="side-menu-category" ng-if="customMenu.items.length > 0"><a href="javascript:void(0);"><i class="fa fa-sm fa-chevron-right"></i> {{::customMenu.name}}</a>
                     <ul class="nav child_menu" style="display: none">
                         <li class="side-menu-category-item" ng-repeat="item in ::customMenu.items"><a href="{{customURL(item)}}" target="{{customTarget(item)}}">{{item.name}}</a></li>
                     </ul>
diff --git a/traffic_portal/app/src/styles/theme.scss b/traffic_portal/app/src/styles/theme.scss
index 06bcbe1..9335016 100644
--- a/traffic_portal/app/src/styles/theme.scss
+++ b/traffic_portal/app/src/styles/theme.scss
@@ -181,7 +181,7 @@
   z-index: 2
 }
 .nav-sm .nav.side-menu li a {
-  text-align: center !important;
+  text-align: center;
   font-weight: 400;
   font-size: 10px;
   padding: 10px 5px
@@ -202,12 +202,6 @@
 .nav-sm .nav.side-menu li a i.toggle-up {
   display: none !important
 }
-.nav-sm .nav.side-menu li a i {
-  font-size: 25px !important;
-  text-align: center;
-  width: 100% !important;
-  margin-bottom: 5px
-}
 .nav-sm ul.nav.child_menu {
   left: 100%;
   position: absolute;
@@ -220,9 +214,6 @@
 .nav-sm ul.nav.child_menu li {
   padding: 0 10px
 }
-.nav-sm ul.nav.child_menu li a {
-  text-align: left !important
-}
 .nav-sm .profile {
   display: none
 }
@@ -311,19 +302,6 @@
 .nav-sm li li span.fa {
   display: inline-block
 }
-.nav_menu {
-  float: left;
-  background: #EDEDED;
-  border-bottom: 1px solid #D9DEE4;
-  margin-bottom: 10px;
-  width: 100%;
-  position: relative
-}
-@media (min-width: 480px) {
-  .nav_menu {
-    position: static
-  }
-}
 .nav-md .container.body .col-md-3.left_col {
   min-height: 100%;
   width: 230px;
@@ -465,11 +443,6 @@ body .container.body .right_col {
   width: 100%;
   padding: 0
 }
-.navbar-nav>li>a,
-.navbar-brand,
-.navbar-nav>li>a {
-  color: #fff !important
-}
 .top_nav .nav>li>a:focus,
 .top_nav .nav>li>a:hover,
 .top_nav .nav .open>a,
@@ -663,9 +636,6 @@ a:focus {
 .navbar {
   margin-bottom: 0
 }
-.navbar-header {
-  background: #34495E
-}
 .navbar-right {
   margin-right: 0
 }
@@ -694,11 +664,6 @@ a:focus {
 .top_nav li a i {
   font-size: 15px
 }
-.navbar-static-top {
-  position: fixed;
-  top: 0;
-  width: 100%
-}
 .sidebar-header {
   border-bottom: 0;
   margin-top: 46px
@@ -714,9 +679,6 @@ a:focus {
 .nav.side-menu>li>a {
   margin-bottom: 6px
 }
-.nav.side-menu>li>a:hover {
-  color: #F2F5F7 !important
-}
 .nav.side-menu>li>a:hover,
 .nav>li>a:focus {
   text-decoration: none;
@@ -782,47 +744,13 @@ a:focus {
   background: none
 }
 .nav li li.current-page a {
-  color: #fff
+  color: #1ABB9C;
 }
 .nav.side-menu>li.active>a {
   text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
   background: linear-gradient(#334556, #2C4257), #2A3F54;
   box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0
 }
-.navbar-brand,
-.navbar-nav>li>a {
-  font-weight: 500;
-  color: #ECF0F1 !important;
-  margin-left: 0 !important;
-  line-height: 32px
-}
-.site_title {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  font-weight: 400;
-  font-size: 22px;
-  width: 100%;
-  color: #ECF0F1 !important;
-  margin-left: 0 !important;
-  line-height: 59px;
-  display: block;
-  height: 55px;
-  margin: 0;
-  padding-left: 10px
-}
-.site_title:hover,
-.site_title:focus {
-  text-decoration: none
-}
-.nav.navbar-nav>li>a {
-  color: #515356 !important
-}
-.nav.top_menu>li>a {
-  position: relative;
-  display: block;
-  padding: 10px 15px;
-  color: #34495E !important
-}
 .nav>li>a:hover,
 .nav>li>a:focus {
   background-color: transparent
@@ -1510,19 +1438,6 @@ ul.msg_list li a .message {
 .dropdown-menu>li>a {
   color: #5A738E
 }
-.navbar-nav .open .dropdown-menu {
-  position: absolute;
-  background: #fff;
-  margin-top: 0;
-  border: 1px solid #D9DEE4;
-  -webkit-box-shadow: none;
-  right: 0;
-  left: auto;
-  width: 220px
-}
-.navbar-nav .open .dropdown-menu.msg_list {
-  width: 300px
-}
 .info-number .badge {
   font-size: 10px;
   font-weight: normal;