ui: Make CSS .well reusable for error/warn

ui/src/Page/Mailbox.elm

@@ -602,7 +602,7 @@ messageErrors message =
         row error =
             li []
                 [ span
-                    [ classList [ ( "warn-severe", error.severe ) ] ]
+                    [ classList [ ( "message-warn-severe", error.severe ) ] ]
                     [ text (error.name ++ ": ") ]
                 , text error.detail
                 ]
@@ -612,7 +612,7 @@ messageErrors message =
             text ""
 
         errors ->
-            div [ class "warn" ]
+            div [ class "well well-warn message-warn" ]
                 [ div [] [ h3 [] [ text "MIME problems detected" ] ]
                 , ul [] (List.map row errors)
                 ]

ui/src/Views/Page.elm

@@ -100,7 +100,7 @@ errorFlash controls maybeFlash =
             text ""
 
         Just flash ->
-            div [ class "error" ]
+            div [ class "well well-error" ]
                 [ div [ class "flash-header" ]
                     [ h2 [] [ text flash.title ]
                     , a [ href "#", Events.onClick controls.clearFlash ] [ text "Close" ]

ui/src/main.css

@@ -73,15 +73,36 @@ a.button {
 }
 
 .well {
-  background-color: var(--selected-color);
+  --light: #f5f5f5;
-  background-image: linear-gradient(to bottom, #e8e8e8 0, #f5f5f5 100%);
+  --dark: #e8e8e8;
-  border: 1px solid var(--border-color);
+  background-color: var(--light);
+  background-image: linear-gradient(to bottom, var(--dark) 0, var(--light) 100%);
+  border: 1px solid var(--dark);
   border-radius: 4px;
   box-shadow: 0 1px 2px rgba(0,0,0,.05);
-  padding: 4px 10px;
+  padding: 6px 10px;
   margin: 20px 0;
 }
 
+.well a:hover {
+  text-decoration: underline;
+}
+
+.well-error {
+  --light: #f58080;
+  --dark: #e86060;
+}
+
+.well-error a {
+  color: #a00000;
+  font-weight: bold;
+}
+
+.well-warn {
+  --light: #fff8cf;
+  --dark: #fff899;
+}
+
 /** APP */
 
 .app {
@@ -146,31 +167,6 @@ h3 {
   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: 6px 10px;
-  margin: 20px 0;
-}
-
-.error a {
-  color: #a00000;
-  font-weight: bold;
-}
-
-.error a:hover {
-  text-decoration: underline;
-}
-
-.error th {
-  padding-right: 5px;
-  text-align: left;
-  white-space: nowrap;
-}
-
 .flash-header {
   display: flex;
   justify-content: space-between;
@@ -183,6 +179,12 @@ h3 {
   padding-left: 4px;
 }
 
+.flash-table th {
+  padding-right: 5px;
+  text-align: left;
+  white-space: nowrap;
+}
+
 .greeting {
   max-width: 1000px;
 }
@@ -208,26 +210,6 @@ h3 {
   padding: 10px !important;
 }
 
-.warn {
-  --light: #f5f580;
-  --dark: #e8e860;
-  background-color: var(--light);
-  background-image: linear-gradient(to bottom, var(--dark) 0, var(--light) 100%);
-  border: 1px solid var(--dark);
-  border-radius: 4px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.05);
-  padding: 6px 10px;
-  margin: 20px 0;
-}
-
-.warn li {
-  margin-left: 20px;
-  padding-left: 0px;
-}
-
-.warn-severe {
-  font-weight: 700;
-}
 
 /** NAV BAR */
 
@@ -464,6 +446,16 @@ li.navbar-active span,
   padding: 5px;
 }
 
+.message-warn li {
+  margin-left: 20px;
+  padding-left: 0px;
+}
+
+.message-warn-severe {
+  font-weight: 700;
+}
+
+
 nav.tab-bar {
   border-bottom: 1px solid var(--border-color);
   display: flex;