Use entypo icons for left navbar

app/assets/javascripts/app/views/aspect_view.js

@@ -8,7 +8,7 @@ app.views.Aspect = app.views.Base.extend({
   className: 'hoverable',
 
   events: {
-    'click .icons-check_yes_ok+a': 'toggleAspect'
+    'click .entypo.check+a': 'toggleAspect'
   },
 
   toggleAspect: function(evt) {

app/assets/javascripts/app/views/aspects_list_view.js

@@ -58,9 +58,9 @@ app.views.AspectsList = app.views.Base.extend({
     this.collection.each(function(aspect) {
       var element = this.$("li[data-aspect_id="+aspect.get('id')+"]");
       if (aspect.get('selected')) {
-        element.find('.icons-check_yes_ok').addClass('selected');
+        element.find('.entypo.check').addClass('selected');
       } else {
-        element.find('.icons-check_yes_ok').removeClass('selected');
+        element.find('.entypo.check').removeClass('selected');
       }
     });
   },

app/assets/stylesheets/aspects.scss

@@ -31,13 +31,6 @@
   }
 }
 
-.modify_aspect {
-  background: url("icons/pencil.png") no-repeat;
-  width: 12px;
-  height: 12px;
-  display: inline-block;
-}
-
 #new_aspect {
   .checkbox {
     margin: 0px;

app/assets/stylesheets/leftnavbar.scss

@@ -41,15 +41,34 @@
     text-overflow: ellipsis;
   }
 
-  .action {
-    width: 12px;
-    height: 12px;
-    display: none;
+  #aspects_list, #tags_list {
+    .hoverable > .action {
+      visibility: hidden;
       float: right;
-    margin: 3px;
+      margin: 0 3px;
     }
 
     .hoverable:hover  > .action {
-    display: block;
+      visibility: visible;
+    }
+  }
+
+  #aspects_list {
+    .entypo.check {
+      float: left;
+      visibility: hidden;
+      &.selected { visibility: visible; }
+    }
+
+    .selected + a {
+      color: #333333;
+    }
+  }
+
+  #tags_list {
+    .delete_tag_following {
+      font-size: 20px;
+      line-height: 15px;
+    }
   }
 }

app/assets/stylesheets/sidebar.scss

@@ -26,36 +26,7 @@
 	}
 }
 
-#aspects_list {
-	.icons-check_yes_ok {
-		height:18px;
-		width:18px;
-		background: url('icons/check_yes_ok.png') no-repeat;
-		float: left;
-		visibility: hidden;
-	}
-
-	.selected {
-		visibility: visible;
-	}
-
-	.selected + a {
-		color: #333333;
-	}
-}
-
-.modify_aspect {
-	background: url("icons/pencil.png") no-repeat;
-	width: 12px;
-	height: 12px;
-	display: inline-block;
-}
-
 #tags_list {
-	.delete_tag_following {
-		background: url("icons/deletelabel.png") no-repeat;
-	}
-
 	/* ---- override app/stylesheets/vendor/autoSuggest.css ---- */
 	.tag_input {
 		width: 100%;

app/assets/templates/aspect_tpl.jst.hbs

@@ -1,7 +1,9 @@
-<a href="/contacts?a_id={{id}}" class="action modify_aspect"></a>
+<a href="/contacts?a_id={{id}}" class="action modify_aspect">
+  <i class="entypo pencil"></i>
+</a>
 {{#if selected}}
-  <div class="icons-check_yes_ok selected"></div>
+  <i class="entypo check selected"></i>
 {{else}}
-  <div class="icons-check_yes_ok"></div>
+  <div class="entypo check"></div>
 {{/if}}
 <a href="/aspects/query" class="selectable" data-guid="{{id}}"> {{name}} </a>

app/assets/templates/tag_following_tpl.jst.hbs

@@ -1,4 +1,4 @@
-<a href="#" id="unfollow_{{name}}" rel="nofollow" class="action delete_tag_following" title="{{t "delete"}}"><a/>
+<a href="#" id="unfollow_{{name}}" rel="nofollow" class="action delete_tag_following" title="{{t "delete"}}">&times;<a/>
 <a href="/tags/{{name}}" class="selectable">
   #{{ name }}
 </a>

features/step_definitions/tag_steps.rb

@@ -1,5 +1,8 @@
 When(/^I unfollow the "(.*?)" tag$/) do |tag|
-  page.execute_script("$('#unfollow_#{tag}').css('display', 'block')")
-  find("#unfollow_#{tag}").click
+  within("#tags_list") do
+    li = find('li', text: tag)
+    li.hover
+    li.find('.delete_tag_following').click
+  end
   step 'I confirm the alert'
 end

spec/javascripts/app/views/aspect_view_spec.js

@@ -10,7 +10,7 @@ describe("app.views.Aspect", function(){
     });
 
     it('should show the aspect selected', function(){
-      expect(this.view.$el.children('.icons-check_yes_ok').hasClass('selected')).toBeTruthy();
+      expect(this.view.$el.children('.entypo.check').hasClass('selected')).toBeTruthy();
     });
 
     it('should show the name of the aspect', function(){

spec/javascripts/app/views/aspects_list_view_spec.js

@@ -24,7 +24,7 @@ describe("app.views.AspectsList", function(){
     });
 
     it('should show all the aspects', function(){
-      var aspect_selectors = this.view.$('.icons-check_yes_ok + a.selectable');
+      var aspect_selectors = this.view.$('.entypo.check + a.selectable');
       expect(aspect_selectors.length).toBe(3);
       expect(aspect_selectors[0].text).toMatch('Work');
       expect(aspect_selectors[1].text).toMatch('Friends');