Make error views look less awful

Summary: These elements look heavy and out of place right now.

Test Plan: Looked at error views in uiexample page.

Reviewers: btrahan, vrana, jungejason

Reviewed By: jungejason

CC: aran

Differential Revision: https://secure.phabricator.com/D2144

src/__celerity_resource_map__.php

@@ -63,7 +63,7 @@ celerity_register_resource_map(array(
   ),
   'aphront-error-view-css' =>
   array(
-    'uri' => '/res/038f6022/rsrc/css/aphront/error-view.css',
+    'uri' => '/res/369e35eb/rsrc/css/aphront/error-view.css',
     'type' => 'css',
     'requires' =>
     array(

src/__phutil_library_map__.php

@@ -562,6 +562,7 @@ phutil_register_library_map(array(
     'PhabricatorEmailTokenController' => 'applications/auth/controller/emailtoken',
     'PhabricatorEnv' => 'infrastructure/env',
     'PhabricatorEnvTestCase' => 'infrastructure/env/__tests__',
+    'PhabricatorErrorExample' => 'applications/uiexample/examples/error',
     'PhabricatorEvent' => 'infrastructure/events/event',
     'PhabricatorEventEngine' => 'infrastructure/events/engine',
     'PhabricatorEventType' => 'infrastructure/events/constant/type',
@@ -1422,6 +1423,7 @@ phutil_register_library_map(array(
     'PhabricatorEmailLoginController' => 'PhabricatorAuthController',
     'PhabricatorEmailTokenController' => 'PhabricatorAuthController',
     'PhabricatorEnvTestCase' => 'PhabricatorTestCase',
+    'PhabricatorErrorExample' => 'PhabricatorUIExample',
     'PhabricatorEvent' => 'PhutilEvent',
     'PhabricatorEventType' => 'PhutilEventType',
     'PhabricatorFeedController' => 'PhabricatorController',

src/applications/uiexample/examples/error/PhabricatorErrorExample.php

@@ -0,0 +1,58 @@
+<?php
+
+/*
+ * Copyright 2012 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+final class PhabricatorErrorExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Errors';
+  }
+
+  public function getDescription() {
+    return 'Use <tt>AphrontErrorView</tt> to render errors, warnings and '.
+           'notices.';
+  }
+
+  public function renderExample() {
+    $request = $this->getRequest();
+    $user = $request->getUser();
+
+    $sevs = array(
+      AphrontErrorView::SEVERITY_ERROR    => 'Error',
+      AphrontErrorView::SEVERITY_WARNING  => 'Warning',
+      AphrontErrorView::SEVERITY_NOTICE   => 'Notice',
+      AphrontErrorView::SEVERITY_NODATA   => 'No Data',
+    );
+
+    $views = array();
+    foreach ($sevs as $sev => $title) {
+      $view = new AphrontErrorView();
+      $view->setSeverity($sev);
+      $view->setTitle($title);
+      $view->appendChild('Several issues were encountered.');
+      $view->setErrors(
+        array(
+          'Overcooked.',
+          'Too much salt.',
+          'Full of sand.',
+        ));
+      $views[] = $view;
+    }
+
+    return $views;
+  }
+}

src/applications/uiexample/examples/error/__init__.php

@@ -0,0 +1,13 @@
+<?php
+/**
+ * This file is automatically generated. Lint this module to rebuild it.
+ * @generated
+ */
+
+
+
+phutil_require_module('phabricator', 'applications/uiexample/examples/base');
+phutil_require_module('phabricator', 'view/form/error');
+
+
+phutil_require_source('PhabricatorErrorExample.php');

src/view/form/error/AphrontErrorView.php

@@ -99,7 +99,12 @@ final class AphrontErrorView extends AphrontView {
           'class' => 'aphront-error-view '.$more_classes,
         ),
         $title.
+        phutil_render_tag(
+          'div',
+          array(
+            'class' => 'aphront-error-view-body',
+          ),
           $this->renderChildren().
-        $list);
+          $list));
   }
 }

webroot/rsrc/css/aphront/error-view.css

@@ -4,11 +4,28 @@
 
 .aphront-error-view {
   margin: 1em auto;
-  padding: 1em;
 
-  -webkit-box-shadow: 2px 2px 2px #999;
-  -mox-box-shadow:    2px 2px 2px #999;
-  box-shadow:         2px 2px 2px #999;
+  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+  -mox-box-shadow:    1px 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow:         1px 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.aphront-error-view-body {
+  padding: 0.5em 1em;
+  font-size: 12px;
+  line-height: 1.6em;
+}
+
+.aphront-error-view h1 {
+  font-size: 13px;
+  padding: 0.5em 1em;
+  font-weight: bold;
+  color: #333333;
+}
+
+.aphront-error-view-body ul {
+  margin: 0.2em 0 0.2em 2em;
+  list-style: disc;
 }
 
 .aphront-error-width-default {
@@ -25,16 +42,28 @@
 
 .aphront-error-severity-error {
   border: 1px solid #aa0000;
-  background: #f9b9bc;
+  background: #fff3f3;
+}
+
+.aphront-error-severity-error h1 {
+  background: #ffe3e3;
 }
 
 .aphront-error-severity-warning {
   border: 1px solid #888800;
-  background: #ffffdd;
+  background: #ffffee;
+}
+
+.aphront-error-severity-warning h1 {
+  background: #ffffcc;
 }
 
 .aphront-error-severity-notice {
   border: 1px solid #000088;
+  background: #f3f3ff;
+}
+
+.aphront-error-severity-notice h1 {
   background: #e3e3ff;
 }
 
@@ -47,6 +76,8 @@
   -webkit-box-shadow: 0px 0px 0px #000;
   -mox-box-shadow:    0px 0px 0px #000;
   box-shadow:         0px 0px 0px #000;
-
 }
 
+.aphront-error-severity-nodata h1 {
+  background: #e3e3e3;
+}