Friendlier YSOD modal

src/Umbraco.Web.UI.Client/src/less/modals.less

@@ -185,33 +185,3 @@
 .umb-modal .breadcrumb input {
 	height: 12px
 }
-
-/* YSOD */
-/* These styles are an exact replica of a real .Net YSOD */
-.umb-modal .ysod {
-    font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;padding:5px;
-}
-.umb-modal .ysod > div {
-    font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
-    line-height: 13px;
-    font-size: 11px;
-}
-.umb-modal .ysod hr {
-    margin: 0px;
-    color: silver;
-    background-color: silver;
-    height: 1px;
-}
-.umb-modal .ysod p {font-family:"Verdana";font-weight:normal;color:black;}
-.umb-modal .ysod b {font-family:"Verdana";font-weight:bold;color:black;}
-.umb-modal .ysod h1 { font-family:"Verdana";font-weight:normal;font-size:18pt;color:red;padding: 0px;text-transform: none !important;margin: 0px; }
-.umb-modal .ysod h2 { font-style:italic; font-family:"Verdana";font-weight:normal;font-size:14pt;color:maroon; }
-.umb-modal .ysod pre {border:none;font-family:"Consolas","Lucida Console",Monospace;font-size:13px;margin:0;padding:0.5em;line-height:17px;}
-.umb-modal .ysod .marker {font-weight: bold; color: black;text-decoration: none;}
-.umb-modal .ysod .version {color: gray;}
-.umb-modal .ysod .error {margin-bottom: 10px;}
-.umb-modal .ysod .expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:pointer; }
-.umb-modal .ysod table {background-color:#ffffcc;width:100%;}
-.umb-modal .ysod table pre {background-color: inherit;}
-.umb-modal .ysod table code {background-color: inherit;}
-.umb-modal .ysod a.btn { margin-top:10px;margin-right:10px;float:right;}

src/Umbraco.Web.UI.Client/src/views/common/dialogs/ysod.html

@@ -1,28 +1,28 @@
-<div class="umb-modalcolumn ysod" ng-controller="Umbraco.Dialogs.YsodController">
+<div class="umb-panel ysod" ng-controller="Umbraco.Dialogs.YsodController">
     
-    <a href="" ng-click="closeDialog()" class="btn">Close</a>
+    <div class="umb-panel-body with-footer no-header">
 
-    <h1>{{error.errorMsg}}</h1>
-    <hr />
-    <h2>{{error.data.ExceptionMessage || error.data.Message}}</h2>
-    <div>
-        <b>Description: </b>An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
-        <br />
-        <br />
-        <b>Exception Details: </b>{{error.data.ExceptionType}}: {{error.data.ExceptionMessage}}
-      
-        <br />
-        <br />
-        <b>Stack Trace:</b>
-        <br />
-        <br />
-
-        <table>
-            <tr>
-                <td>
-                    <pre>{{error.data.StackTrace}}</pre>
-                </td>
-            </tr>
+        <h3 style="padding-left: 20px" class="headline red">Received an error from the server</h3>
 
+        <umb-pane>
+            <h4>{{error.errorMsg}}</h4>
+            <p>{{error.data.ExceptionMessage || error.data.Message}}</p>
+        </umb-pane>    
+        
+        <umb-pane>    
+            <h5>Exception Details: </h5>
+            {{error.data.ExceptionType}}: {{error.data.ExceptionMessage}}
+        </umb-pane>   
+        
+        <umb-pane>
+            <h5>Stacktrace: </h5>
+            <pre style="white-space: pre-wrap; overflow-x: auto;">{{error.data.StackTrace}}</pre>
+        </umb-pane>
     </div>
-    </div>
+
+    <div class="umb-panel-footer">
+            <a href ng-click="close()" class="btn pull-right">
+                <localize key="general_close">Close</localize>
+            </a>
+    </div>
+</umb-panel>