frontend improvements related to error handling

app.js

@@ -47,6 +47,7 @@ var addressApi = require("./app/api/addressApi.js");
 var electrumAddressApi = require("./app/api/electrumAddressApi.js");
 var coreApi = require("./app/api/coreApi.js");
 var auth = require('./app/auth.js');
+var marked = require("marked");
 
 var package_json = require('./package.json');
 global.appVersion = package_json.version;
@@ -638,6 +639,7 @@ app.use(function(err, req, res, next) {
 app.locals.moment = moment;
 app.locals.Decimal = Decimal;
 app.locals.utils = utils;
+app.locals.marked = marked;
 
 
 

public/css/styling.css

@@ -20,6 +20,14 @@ code, .text-monospace {
 	font-family: "Source Code Pro", monospace !important;
 }
 
+strong {
+	font-weight: 700 !important;
+}
+
+h6, .h6 {
+	margin-bottom: 0 !important;
+}
+
 .text-small {
 	font-size: 80%;
 }
@@ -46,6 +54,10 @@ code, .text-monospace {
 	margin-bottom: 200px;
 }
 
+.user-message-markdown p {
+	margin-bottom: 0 !important;
+}
+
 
 
 .nav-tabs .nav-link.active {

views/layout.pug

@@ -141,15 +141,21 @@ html(lang="en")
 				if (pageErrors && pageErrors.length > 0)
 					include includes/page-errors-modal.pug
 
-					div.float-right
+					div.alert.alert-danger
-						div.alert.alert-danger.py-1.px-3.mb-n2.mt-n1.font-weight-bold(title=`This page encountered ${pageErrors.length.toLocaleString()} error(s). Click for details.` data-toggle="tooltip")
+						- var errorText = `This page encountered ${pageErrors.length.toLocaleString()} error${pageErrors.length == 1 ? "" : "s"}:`;
-							a.text-danger(href="javascript:void(0)" data-toggle="modal" data-target="#pageErrorsModal") Errors
+						span.font-weight-bold #{errorText} 
-							span.badge.badge-danger.ml-2 #{pageErrors.length.toLocaleString()}
+						a(href="javascript:void(0)", data-toggle="modal", data-target="#pageErrorsModal") Error details
+
+				if (userMessageMarkdown)
+					div.alert(class=(userMessageType ? `alert-${userMessageType}` : "alert-warning"), role="alert")
+						div.user-message-markdown
+							| !{marked(userMessageMarkdown)}
 
 				if (userMessage)
 					div.alert(class=(userMessageType ? `alert-${userMessageType}` : "alert-warning"), role="alert")
 						span #{userMessage}
 							
+				
 				block content
 
 				div(style="margin-bottom: 30px;")