Color the follow tag button

app/views/tags/show.haml

@@ -2,6 +2,7 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
+
 - content_for :page_title do
   - if params[:name]
     = "##{params[:name]}"
@@ -11,10 +12,19 @@
 - content_for :head do
   = include_javascripts :home
   :javascript
-    $(".people_stream .pagination a").live("click", function() {
+    $(document).ready(function(){
-      $.getScript(this.href);
+      $(".button.tag_following").hover(function(){
-      return false;
+        $this = $(this);
+        $this.removeClass("in_aspects");
+        $this.val("#{t('.stop_following', :tag => params[:name])}");
+      },
+      function(){
+        $this = $(this);
+        $this.addClass("in_aspects");
+        $this.val("#{t('.following', :tag => params[:name])}");
+      });
     });
+
 - content_for :body_class do
   = "tags_show"
 
@@ -33,7 +43,7 @@
           - unless tag_followed?
             = button_to t('.follow', :tag => params[:name]), tag_tag_followings_path(:name => params[:name]), :method => :post,   :class => 'button take_action'
           - else
-            = button_to t('.stop_following', :tag => params[:name]), tag_tag_followings_path(:name => params[:name]), :method => :delete,   :class => 'button take_action'
+            = button_to t('.following', :tag => params[:name]), tag_tag_followings_path(:name => params[:name]), :method => :delete,   :class => 'button red_on_hover tag_following in_aspects take_action'
       %h2
         = "##{params[:name]}"
 

config/locales/diaspora/en.yml

@@ -699,6 +699,7 @@ en:
       nobody_talking: "Nobody is talking about %{tag} yet."
       people_tagged_with: "People tagged with %{tag}"
       follow: "Follow #%{tag}"
+      following: "Following #%{tag}"
       stop_following: "Stop Following #%{tag}"
 
   tag_followings:

features/signs_up.feature

@@ -16,7 +16,7 @@ Feature: new user registration
     And I fill in "profile_last_name" with "Hai"
     And I fill in "tags" with "#tags"
     And I press "Save and continue"
-    And I wait for "step 2" to load
+    And I wait for the ajax to finish
     Then I should see "Profile updated"
     And I should see "Would you like to find your Facebook friends on Diaspora?"
     And I follow "Skip"
@@ -31,5 +31,4 @@ Feature: new user registration
   
   Scenario: new user skips the setup wizard
     When I follow "skip getting started"
-    And I wait for "the aspects page" to load
     Then I should be on the aspects page

features/step_definitions/custom_web_steps.rb

@@ -129,15 +129,6 @@ When /^I click ok in the confirm dialog to appear next$/ do
   JS
 end
 
-When /^I wait for "([^\"]*)" to load$/ do |page_name|
-  wait_until(10) do
-    uri = URI.parse(current_url)
-    current_location = uri.path
-    current_location << "?#{uri.query}" unless uri.query.blank?
-    current_location == path_to(page_name)
-  end
-end
-
 Then /^I should get download alert$/ do
   page.evaluate_script("window.alert = function() { return true; }")
 end
@@ -183,7 +174,7 @@ And /^I scroll down$/ do
   wait_until(10) { evaluate_script('$("#infscr-loading:visible").length') == 0 }
 end
 
-When /^I wait for (\d+) seconds$/ do |seconds|
+When /^I wait for (\d+) seconds?$/ do |seconds|
   sleep seconds.to_i
 end
 

public/stylesheets/sass/ui.sass

@@ -11,6 +11,7 @@
   @include border-radius(2px)
   @include linear-gradient(rgb(248,250,250),rgb(228,223,223))
   @include box-shadow(0,1px,1px,#cfcfcf)
+  @include transition(width, 3s)
 
   :font
     :style normal
@@ -82,6 +83,11 @@
   &:hover
     @include linear-gradient(lighten($creation-blue,3%), darken($creation-blue, 8%))
 
+.button.red_on_hover
+  &:hover
+    @include linear-gradient(desaturate(lighten($red, 20%),20%), desaturate(lighten($red,14%),20%))
+    :color black
+
 .right
   :position absolute
   :right 0