From ffaf296faa473b290d929908915879bb3d0c0b17 Mon Sep 17 00:00:00 2001
From: James Hillyerd <james@hillyerd.com>
Date: Sat, 15 Dec 2018 21:17:37 -0800
Subject: [PATCH] ui: Make the error flash look nice

---
 ui/src/HttpUtil.elm   |  6 +++---
 ui/src/Views/Page.elm |  7 +++----
 ui/src/main.css       | 16 +++++++++++++++-
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/ui/src/HttpUtil.elm b/ui/src/HttpUtil.elm
index bd089eb..629782f 100644
--- a/ui/src/HttpUtil.elm
+++ b/ui/src/HttpUtil.elm
@@ -63,8 +63,8 @@ errorFlash error =
             { flash
                 | table =
                     flash.table
-                        ++ [ ( "Method", error.request.method )
-                           , ( "URL", error.request.url )
+                        ++ [ ( "Request URL", error.request.url )
+                           , ( "HTTP Method", error.request.method )
                            ]
             }
     in
@@ -92,7 +92,7 @@ errorFlash error =
 
             Http.BadBody body ->
                 { title = "Bad HTTP body"
-                , table = [ ( "Body", body ) ]
+                , table = [ ( "Error", body ) ]
                 }
 
 
diff --git a/ui/src/Views/Page.elm b/ui/src/Views/Page.elm
index 4035e38..5eb1ca0 100644
--- a/ui/src/Views/Page.elm
+++ b/ui/src/Views/Page.elm
@@ -90,10 +90,9 @@ errorFlash : FrameControls msg -> Maybe Session.Flash -> Html msg
 errorFlash controls maybeFlash =
     let
         row ( heading, message ) =
-            pre []
-                [ text heading
-                , text ": "
-                , text message
+            tr []
+                [ th [] [ text (heading ++ ":") ]
+                , td [] [ pre [] [ text message ] ]
                 ]
     in
     case maybeFlash of
diff --git a/ui/src/main.css b/ui/src/main.css
index 638a374..8aa7ff4 100644
--- a/ui/src/main.css
+++ b/ui/src/main.css
@@ -136,13 +136,18 @@ h1 {
   font-weight: 500;
 }
 
+h2 {
+  font-size: 16px;
+  font-weight: 700;
+}
+
 .error {
   background-color: #f58080;
   background-image: linear-gradient(to bottom, #e86060 0, #f58080 100%);
   border: 1px solid #e86060;
   border-radius: 4px;
   box-shadow: 0 1px 2px rgba(0,0,0,.05);
-  padding: 4px 10px;
+  padding: 6px 10px;
   margin: 20px 0;
 }
 
@@ -155,13 +160,22 @@ h1 {
   text-decoration: underline;
 }
 
+.error th {
+  padding-right: 5px;
+  text-align: left;
+  white-space: nowrap;
+}
+
 .flash-header {
   display: flex;
   justify-content: space-between;
 }
 
 .flash-table {
+  border-left: 4px solid rgba(0,0,0,0.2);
   overflow: auto;
+  padding-bottom: 4px;
+  padding-left: 4px;
 }
 
 .greeting {