better right pane sections

app/views/aspects/index.html.haml

@@ -12,7 +12,7 @@
       :aspect_ids => @aspect_ids,
       :posts => @posts
 
-.span-7.last
+.span-7.leftBar.last
   #home_user_badge
     = owner_image_link
     %h3{:style => "position:relative;"}
@@ -20,14 +20,36 @@
       .description
         = link_to current_user.diaspora_handle, person_path(current_user.person)
 
-  %h4.section.invite_friends
-    != t('bookmarklet.explanation', :link => link_to(t('bookmarklet.explanation_link_text'), bookmarklet))
-  %h4.section.invite_friends= link_to "Generate an authentication token for Cubbi.es", token_path
-  - if @invites > 0
-    .section.invite_friends
-      %h4= t('shared.invitations.invite_your_friends')
-      = render "shared/invitations", :invites => @invites
+  .section
+    .title
+      = image_tag('/images/icons/bookmark.png')
+      %h5
+        Diaspora Bookmarklet
+    .content
+      != t('bookmarklet.explanation', :link => link_to(t('bookmarklet.explanation_link_text'), bookmarklet))
 
+  .section
+    .title
+      = image_tag('/images/icons/cubbies.png')
+      %h5
+        Connect to Cubbi.es
+    .content
+      Cubbi.es is the first Diaspora application under development.
+      = link_to "Follow the instructions to get started", token_path
+
+  - if @invites > 0
+    .section
+      .title
+
+        = image_tag('/images/icons/plus.png')
+        %h5
+          .right
+            = t('shared.invitations.invitations_left', :count => @invites)
+          = t('shared.invitations.invite_your_friends')
+      .content
+        = render "shared/invitations", :invites => @invites
+
+  %hr
 
   #aspect_listings.section
     = render 'aspects/aspect_listings', :aspects => @aspects

app/views/shared/_invitations.haml

@@ -3,18 +3,13 @@
 -else
   -if invites > 0
     - if SERVICES['facebook']['app_id'] !=""
-      %h4{:style => 'text-align:center;'}
-        - if defined? remote
-          = link_to t('.from_facebook'), friend_finder_path('facebook', :remote => remote), :rel => 'facebox'
-        -else
-          = link_to t('.from_facebook'), friend_finder_path('facebook'), :rel => 'facebox'
+      - if defined? remote
+        = link_to t('.from_facebook'), friend_finder_path('facebook', :remote => remote), :rel => 'facebox'
+      -else
+        = link_to t('.from_facebook'), friend_finder_path('facebook'), :rel => 'facebox'
 
-        = t('or')
-        = link_to t('.by_email'), new_user_invitation_path, :title => t('.invite_someone'), :rel => 'facebox'
+      = link_to t('.by_email'), new_user_invitation_path, :title => t('.invite_someone'), :rel => 'facebox'
     - else
-      %h4
-        = link_to t('.by_email'), new_user_invitation_path, :title => t('.invite_someone'), :rel => 'facebox'
-    %h5{:style => 'text-align:center;'}
-      = t('.invitations_left', :count => invites) 
+      = link_to t('.by_email'), new_user_invitation_path, :title => t('.invite_someone'), :rel => 'facebox'
   - else
     = t('.dont_have_now')

config/locales/diaspora/en.yml

@@ -160,8 +160,8 @@ en:
   bookmarklet:
     post_success: "Posted! Closing!"
     post_something: "Post something to Diaspora"
-    explanation: "%{link} from anywhere by bookmarking this link."
-    explanation_link_text: "Post to Diaspora"
+    explanation: "Post to Diaspora from anywhere by bookmarking %{link}."
+    explanation_link_text: "this link"
 
   comments:
     zero: "no comments"
@@ -554,7 +554,7 @@ en:
     invitations:
       invites: "Invites"
       invite_someone: "Invite someone"
-      invitations_left: "(%{count} left)"
+      invitations_left: "%{count} left"
       dont_have_now: "You don't have any right now, but more invites are coming soon!"
       invites_closed: "Invites are currently closed on this Diaspora pod"
       invite_your_friends: "Invite your friends"

public/stylesheets/sass/application.sass

@@ -1389,10 +1389,6 @@ ul#settings_nav
   a
     :color #69AEDD
 
-.section
-  :margin
-    :bottom 24px
-
 #aspect_listings
   .contacts
     :margin
@@ -2825,3 +2821,38 @@ h1.tag
     :color #eee !important
     :font
       :weight bold
+
+.leftBar
+  .title 
+    :position relative
+    :border
+      :bottom 1px solid #888
+    :padding 2px 0
+      :left 24px
+
+    .right
+      :right 4px
+      :top 3px
+      :font-size smaller
+      :font-weight bold
+      :color #777
+
+    h5
+      :font-size 13px
+      :font-weight 500
+      :margin 0
+      :color #444
+
+    img
+      :position absolute
+      :left 3px
+      :top 3px
+
+  .section
+    .content
+      :padding 8px
+      :color #999
+      :font-size 11px
+      :height 36px
+    :margin
+      :bottom 4px