apache · shamrickus · Oct 7, 2021 · Oct 7, 2021 · Oct 7, 2021 · Oct 7, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 ### Fixed
 - Fixed Traffic Router crs/stats to prevent overflow and to correctly record the time used in averages.
 - [#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
 - Updated `t3c` to request less unnecessary deliveryservice-server assignment and invalidation jobs data via new query params supported by Traffic Ops

diff --git 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
@@ -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
@@ -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
@@ -17,13 +17,13 @@
 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>