Redesign error pages

app/assets/stylesheets/error_pages.scss

@@ -3,46 +3,31 @@
 
 html { min-height: 100%; }
 
-#big-number {
+.error-404 {
-  color: $light-grey;
+  background: image-url('peeping-tom.png') no-repeat bottom;
-  font-family: Helvetica, Arial, sans-serif;
+  background-attachment: fixed;
-  font-size: 250px;
-  line-height: 1em;
-  padding-top: 80px;
-  text-align: center;
-  text-shadow: 0 2px 0 #fff, 0 -1px 0 #999;
 }
-.transparent {
+
-  opacity: 0.8;
+.error-404,
-}
+.error-422,
-#content {
+.error-500,
+.error-not-public {
+  background-color: $background-grey;
+  bottom:0px;
   color: $text-dark-grey;
   font-family: Helvetica, Arial, sans-serif;
-  font-size: 1.25em;
-  left: 0;
-  line-height: 1.5em;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  text-shadow: 0 1px 0 $white;
-}
-
-#error_404 {
-  width: 100%;
   height: 100%;
-  bottom:0px;
   margin: 0px;
-  font-family: Helvetica, Arial, sans-serif;
   text-align: center;
   text-shadow: 0 1px 0 #fff;
-  color: #666;
+  width: 100%;
-  background: image-url("peeping-tom.png") no-repeat bottom;
-  background-attachment: fixed;
 
-  #big-number {
+  .big-number {
-    color: $light-grey;
+    color: $text-grey;
     font-family: Helvetica, Arial, sans-serif;
     font-size: 250px;
+    line-height: 1em;
+    padding-top: 50px;
     text-shadow: 0 2px 0 #fff, 0 -1px 0 #999;
   }
 
@@ -56,55 +41,7 @@ html { min-height: 100%; }
   }
 
   .transparent {
-    filter: alpha(opacity=80);
+    filter: alpha(opacity = 60);
-    opacity: 0.6;
+    opacity: .6;
-  }
-}
-
-#error_422 {
-  background-color: #fff;
-  color: #666;
-  text-align: center;
-  font-family: arial, sans-serif;
-
-  div.dialog {
-    width: 25em;
-    padding: 0 4em;
-    margin: 4em auto 0 auto;
-    border: 1px solid #ccc;
-    border-right-color: #999;
-    border-bottom-color: #999;
-  }
-
-  h1 {
-    font-size: 100%;
-    color: #f00;
-    line-height: 1.5em;
-  }
-}
-
-#error_500 {
-  text-align: center;
-  background-color: rgb(252,252,252);
-  color: #444;
-  font-family: 'helvetica neue', 'helvetica', 'arial', sans-serif;
-  margin: 0;
-  padding: 1em;
-
-  header {
-    height: 100px;
-    background-color: #333;
-    position:relative;
-  }
-
-  #diaspora_logo {
-    position: relative;
-    margin-top: 50px;
-  }
-
-  h1 {
-    font-size: 100%;
-    color: #444;
-    line-height: 1.5em;
   }
 }

app/controllers/posts_controller.rb

@@ -11,8 +11,9 @@ class PostsController < ApplicationController
   respond_to :html, :mobile, :json, :xml
 
   rescue_from Diaspora::NonPublic do
+    @code = "not-public"
     respond_to do |format|
-      format.all { render template: "errors/not_public", status: 404, layout: "application" }
+      format.all { render template: "errors/not_public", status: 404, layout: "error_page" }
     end
   end
 

app/views/errors/error_404.haml

@@ -1,9 +1,9 @@
 - content_for(:page_title) do
   The page you were looking for doesn't exist (404)
 
-#big-number.transparent
+.transparent.big-number
   404
-%p
+%h3
   These are not the kittens you're looking for. Move along.
 %p
   %a{href: "javascript:history.back()"}

app/views/errors/error_422.haml

@@ -1,8 +1,13 @@
 - content_for(:page_title) do
   The change you wanted was rejected (422)
 
-.dialog
+.transparent.big-number
-  %h1
+  422
-    The change you wanted was rejected.
+%h3
-  %p
+  The change you wanted was rejected.
-    Maybe you tried to change something you didn't have access to.
+%p
+  Maybe you tried to change something you didn't have access to.
+
+%p
+  %a{href: "javascript:history.back()"}
+    Go Back?

app/views/errors/error_500.haml

@@ -1,10 +1,12 @@
 - content_for(:page_title) do
   We're sorry, but something went wrong (500)
 
-%header
+.transparent.big-number
-  = image_tag "branding/logos/white2x.png", id: "diaspora_logo"
+  500
-
-%h1
-  500: Internal server error.
 %h3
+  Internal server error.
   Our bad! Sorry about that. :(
+
+%p
+  %a{href: "javascript:history.back()"}
+    Go Back?

app/views/errors/not_public.haml

@@ -2,13 +2,9 @@
 -# licensed under the Affero General Public License version 3 or later. See
 -# the COPYRIGHT file.
 
-- content_for :head do
+.transparent.big-number
-  = stylesheet_link_tag :error_pages, :media => 'all'
-
-#big-number.transparent
   404
-
+%h3
-#content
+  = t("error_messages.post_not_public_or_not_exist")
-  = t('error_messages.post_not_public_or_not_exist')
+%p
-  %br
+  = t("error_messages.login_try_again", login_link: new_user_session_path).html_safe
-  = t('error_messages.login_try_again', :login_link => new_user_session_path).html_safe

app/views/layouts/error_page.haml

@@ -10,5 +10,5 @@
 
     = yield(:head)
 
-  %body{id: "error_#{@code}"}
+  %body{class: "error-#{@code}", id: "error_#{@code}"}
     = yield