From 0033237b4e229f35f46a00cb5f2d53a1ed0c2e33 Mon Sep 17 00:00:00 2001
From: danielgrippi <danielgrippi@gmail.com>
Date: Mon, 24 Oct 2011 17:33:01 -0700
Subject: [PATCH] made flash messages awesome this time

---
 app/views/layouts/application.html.haml      |  5 ++-
 public/javascripts/widgets/flash-messages.js |  2 +-
 public/stylesheets/sass/application.sass     | 40 +++++++++++---------
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index a5414a608..64eb7c5e2 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -92,9 +92,10 @@
         &#8679;
 
       #notifications
-
       - flash.each do |name, msg|
-        %div{:id => "flash_#{name}"}= msg
+        %div{:id => "flash_#{name}"}
+          .message
+            = msg
 
     %header{:class=>('landing' unless current_user)}
       = render 'layouts/header'
diff --git a/public/javascripts/widgets/flash-messages.js b/public/javascripts/widgets/flash-messages.js
index d296eff6e..7f55cd97f 100644
--- a/public/javascripts/widgets/flash-messages.js
+++ b/public/javascripts/widgets/flash-messages.js
@@ -10,7 +10,7 @@
       var flashMessages = $("#flash_notice, #flash_error, #flash_alert");
       flashMessages.animate({
         top: 0
-      }).delay(2000).animate({
+      }).delay(4000).animate({
         top: -100
       }, flashMessages.remove);
     };
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index aa5a20976..6d09e1512 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -73,36 +73,42 @@ form
 #flash_notice,
 #flash_error,
 #flash_alert
-  @include box-shadow(0, 1px, 2px, #333)
-  :z-index 100
+  :z-index 999
   :position fixed
-  :color #fff
-
+  :color #666
   :top -100px
+
   :left 0
 
   :width 100%
-  :padding 1em
 
   :font
     :weight bold
+  :text
+    :align center
+
+  .message
+    @include border-radius(6px)
+    @include box-shadow(0, 1px, 5px, rgba(0,0,0,0.4))
+    :display inline-block
+    :width 400px
+    :padding
+      :top 45px
+      :bottom 8px
 
 #flash_notice
-  :background
-    :color rgb(126,240,77)
-    :color rgba(126,240,77,0.98)
-  :text
-    :shadow 0 1px #6C6
+  .message
+    :background
+      :color #F4F899
+    :border 1px solid darken(#F4F899, 40%)
 
 #flash_error,
 #flash_alert
-  :background
-    :color rgb(208,49,43)
-    :color rgba(208,49,43,0.98)
-  :border
-    :bottom solid 1px #C66
-  :text
-    :shadow 0 1px #C66
+  .message
+    :color #fff
+    :background
+      :color #CA410B
+    :border 1px solid darken(#CA410B, 10%)
 
 .login_error,
 .login_alert