make signup page look better

app/views/devise/registrations/new.html.haml

@@ -1,7 +1,6 @@
 = image_tag "http://needcoffee.cachefly.net/needcoffee/uploads/2009/02/predator-arnold-schwarzenegger.jpg"
 
 
-%h2 Sign up
 = form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f|
   = devise_error_messages!
   %p
@@ -15,7 +14,7 @@
     = f.password_field :password_confirmation
 
   = f.fields_for :person do |p|
-    = p.hidden_field :url, :value => "http://google.com/"
+    = p.hidden_field :url, :value => request.path
 
     = p.fields_for :profile do |pr|
       %p
@@ -25,5 +24,5 @@
         = pr.label :last_name
         = pr.text_field :last_name
 
-  %p= f.submit "Sign up"
+  = f.submit "Sign up"
 = render :partial => "devise/shared/links"

app/views/layouts/session_wall.html.haml

@@ -10,6 +10,8 @@
     = stylesheet_link_tag "sessions"
     /= javascript_include_tag"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
     = javascript_include_tag 'jquery142', 'google'
+    = javascript_include_tag 'jquery.infieldlabel'
+    = javascript_include_tag 'session_wall.js'
 
     :javascript
       $(document).ready(function(){

public/javascripts/session_wall.js

@@ -0,0 +1,5 @@
+
+$(document).ready(function(){
+  $("label").inFieldLabels();
+});
+

public/stylesheets/sass/sessions.sass

@@ -2,8 +2,6 @@ body
   :padding 2em
 
 #huge_text
-  :margin
-    :top 10%
   :display inline block
   :font
     :size 40px
@@ -33,3 +31,33 @@ input
   :text
     :align center
 
+form p
+  :position relative
+  :padding 0
+  :margin-left 32.8%
+
+label
+  :color #999
+  :position absolute
+  :top 3px
+  :left 0.48em
+  :font
+    :size 14px
+    :weight normal
+
+input[type='text'],
+input[type='password']
+  :font
+    :family 'lucida grande', 'sans-serif'
+    :size 14px
+  :padding 0.3em
+  :display block
+  :width 50%
+  :box-shadow 0 2px 0px #fff
+  :-webkit-box-shadow 0 2px 0px #fff
+  :-moz-box-shadow 0 2px 0px #fff
+  :border-top 1px solid #999
+  :height auto
+  :border-radius 3px
+  :-moz-border-radius 3px
+

public/stylesheets/sessions.css

@@ -2,7 +2,6 @@ body {
   padding: 2em; }
 
 #huge_text {
-  margin-top: 10%;
   display: inline block;
   font-size: 40px;
   font-weight: bold;
@@ -24,3 +23,31 @@ input {
 .container {
   top: 30%;
   text-align: center; }
+
+form p {
+  position: relative;
+  padding: 0;
+  margin-left: 32.8%; }
+
+label {
+  color: #999999;
+  position: absolute;
+  top: 3px;
+  left: 0.48em;
+  font-size: 14px;
+  font-weight: normal; }
+
+input[type='text'],
+input[type='password'] {
+  font-family: "lucida grande", "sans-serif";
+  font-size: 14px;
+  padding: 0.3em;
+  display: block;
+  width: 50%;
+  box-shadow: 0 2px 0px white;
+  -webkit-box-shadow: 0 2px 0px white;
+  -moz-box-shadow: 0 2px 0px white;
+  border-top: 1px solid #999999;
+  height: auto;
+  border-radius: 3px;
+  -moz-border-radius: 3px; }