[extensions-web: 49/75] Put the "error report" advert in a box.

[Jasper St. Pierre <jstpierre src gnome org>]

commit ad0edafe26019f40f888a00e52be4f6cc17d5e2d
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Tue Sep 20 17:30:17 2011 -0400

    Put the "error report" advert in a box.

 .../extensions/templates/extensions/comments.html  |   18 +++++++-----
 sweettooth/static/css/sweettooth.css               |   29 ++++++++++++++++---
 2 files changed, 35 insertions(+), 12 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/comments.html b/sweettooth/extensions/templates/extensions/comments.html
index 3ef7f77..7fc631f 100644
--- a/sweettooth/extensions/templates/extensions/comments.html
+++ b/sweettooth/extensions/templates/extensions/comments.html
@@ -24,13 +24,17 @@
 <div id="new-comment-form">
   <div>
     <h4>Your opinion</h4>
-    <span class="report rating">It worked, and...</span>
-    {% render_comment_form for extension %}
+    <div class="report rating">
+      <span class="txt">It worked, and...</span>
+      {% render_comment_form for extension %}
+    </div>
 
-    <a href="{% url extensions-error pk=version.pk %}" class="report error">Help! It didn't work!</a>
-    <p>
-      Errors should be reported through the error reporting tool &mdash; it
-      helps extension authors be known about bugs in their extension!
-    </p>
+    <div class="report error">
+      <a class="txt" href="{% url extensions-error pk=version.pk %}" class="report error">Help! It didn't work!</a>
+      <p>
+        Errors should be reported through the error reporting tool &mdash; it
+        helps extension authors be known about bugs in their extension!
+      </p>
+    </div>
   </div>
 </div>
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 41f189b..d2b76c7 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -253,25 +253,44 @@ li.extension {
 }
 
 .extension .report {
+    overflow: auto;
+}
+
+.extension .report .txt {
     display: block;
     height: 32px;
     padding-left: 36px;
     font-size: 16pt;
     background-repeat: no-repeat;
-    margin-top: 1em;
 }
 
-.extension .report.error {
+.extension .report.error .txt {
     background-image: url(../images/face-angry.png);
 }
 
-.extension .report + p {
+.extension .report.rating .txt {
+    background-image: url(../images/face-smile.png);
+    margin-left: 24px;
+    margin-bottom: 10px;
+}
+
+.extension .report p {
     padding-left: 16px;
     line-height: 1.7em;
 }
 
-.extension .report.rating {
-    background-image: url(../images/face-smile.png);
+.extension .report.error {
+    background: #EEEEEC;
+    border: 1px solid #BABDB6;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    clear: both;
+    padding: 20px;
+
+    /* Extra margin on the bottom, left and right is for
+     * the shadow -- we use overflow: hidden on the parent
+     * to establish a BFC, so it will clip the shadow. */
+    margin: 20px 4px 4px 4px;
 }
 
 #error_report input {