Legend for colors in stats

src/styles/_dashboard.sass

@@ -95,10 +95,21 @@
 			padding: 10px
 
 			.progress
-				margin-bottom: 0
+				margin-bottom: 10px
+				height: 4px
 			h4
 				margin-top: 0
 
+		.d-stats-card-legend
+			display: flex
+			justify-content: space-between
+			font-size: .95em
+
+			.d-stats-card-item
+				@include status-color-property(color, '', 'dark')
+
+			label
+
 	.d-activity
 		margin: 0 20px 15px
 		a

src/templates/attract/index.jade

@@ -6,7 +6,7 @@
 #col_main
 	.dashboard
 		.d-stats
-			h3
+			h4
 				i.pi-attract
 				|  Attract
 	| {% if current_user.is_authenticated %}
@@ -19,7 +19,7 @@
 #col_right
 	.dashboard
 		.d-stats
-			h3 Statistics
+			h4 Statistics
 
 			| {% for proj, summary in projs_with_summaries %}
 			.d-stats-card
@@ -39,14 +39,21 @@
 						title="{{ status | undertitle }} ({{percentage}}%)",
 						role="progressbar",
 						style="width:{{percentage}}%")
-						| {{ status | undertitle }}
+					| {% endfor %}
+
+				.d-stats-card-legend
+					| {% for status, percentage in summary.percentages() %}
+					label.d-stats-card-item(
+						class="status-{{status}}",
+						title="{{ status | undertitle }} ({{percentage}}%)")
+						| {{percentage}}% {{ status | undertitle }}
 					| {% endfor %}
 			| {% endfor %}
 
 		hr
 
 		.d-activity
-			h3 Activity Stream
+			h4 Activity Stream
 
 			ul
 				| {% for act in activities['_items'] %}