touch up front end of notification system

jinja2/base.html

@@ -20,7 +20,7 @@
 			{% if request.user.is_authenticated %}
 			<span id="profileLink"><a href="{{ url('user:profile', args=[request.user.id]) }}">{{ request.user.username }}</a></span>
 			<span id="subscriptions">
-				<button id="subbtn">{{ get_sub_msgs(request=request)|length }}</button>
+				<button id="subbtn" class={% if get_sub_msgs(request=request) %}"newSubs"{% else %}"noNewSubs"{% endif %}>{{ get_sub_msgs(request=request)|length }}</button>
 				<div id="subscriptionsContent">
 					{% for sub in get_sub_msgs(request=request) %}
 					<div id="notification-{{ sub.id }}" >
@@ -29,6 +29,9 @@
 						<br>
 					</div>
 					{% endfor %}
+					{% if not get_sub_msgs(request=request) %}
+					<span id="noNewSubs">No new notifications</span>
+					{% endif %}
 				</div>
 			</span>
 			{% endif %}

static/base.css

@@ -63,10 +63,18 @@ a:hover {
 #subbtn {
 	width: 1.5em;
 	height: 1.5em;
-	background-color: orange;
 	border: none;
 }
 
+.newSubs {
+	background-color: orange;
+}
+
+.noNewSubs {
+	background-color: #F0F0F0;
+}
+
+
 #subscriptionsContent {
 	display: none;
 	position: absolute;

static/base.js

@@ -28,4 +28,7 @@ function clear_notification(msg_id) {
 	elem.parentNode.removeChild(elem);
 	elem = document.getElementById('subbtn');
 	elem.innerText = elem.innerText - 1;
+	if (elem.innerText === '0') {
+		elem.className = 'noNewSubs';
+	}
 }