Add hover to article save button (#2597)

app/assets/javascripts/utilities/buildArticleHTML.js.erb

@@ -78,8 +78,8 @@ function buildArticleHTML(article) {
     var saveButton = '';
     if (article.class_name === "Article") {
       var saveButton = '<button class="article-engagement-count bookmark-engage" data-reactable-id="'+article.id+'">\
-                        <span class="bm-success">SAVED</span>\
-                        <span class="bm-initial">SAVE</span>\
+                        <span class="bm-success"></span>\
+                        <span class="bm-initial"></span>\
                       </button>'
     } else if (article.class_name === "User") {
       var saveButton = '<button style="width: 122px" class="article-engagement-count bookmark-engage follow-action-button"\

app/assets/stylesheets/articles.scss

@@ -695,6 +695,11 @@
         .bm-success {
           display: none;
         }
+        .bm-initial {
+          &:after{
+            content: "SAVE";
+          }
+        }
         &.selected {
           color: darken($purple, 33%);
           background: transparent;
@@ -703,7 +708,14 @@
             display: none;
           }
           .bm-success {
-            display: block;
+            display: inline-block;
+
+            &:before{
+              content: "SAVED";
+            }
+            &:hover:before{
+              content: "UNSAVE";
+            }
           }
         }
         &.following-butt {

app/assets/stylesheets/more-articles.scss

@@ -135,7 +135,7 @@
       }
     }
     .content-author{
-      
+
       img{
         border-radius: 100%;
         width: 28px;

app/views/articles/_single_story.html.erb

@@ -64,7 +64,7 @@
     data-reactable-id="<%= story.id %>"
     aria-label="Save to reading list"
     title="Save to reading list">
-    <span class="bm-success">SAVED</span>
-    <span class="bm-initial">SAVE</span>
+    <span class="bm-success"></span>
+    <span class="bm-initial"></span>
   </button>
 </div>

app/views/articles/index.html.erb

@@ -130,8 +130,8 @@
               data-reactable-id="<%= @featured_story.id %>"
               aria-label="Add to reading list"
               title="Add to reading list">
-              <span class="bm-success">SAVED</span>
-              <span class="bm-initial">SAVE</span>
+              <span class="bm-success"></span>
+              <span class="bm-initial"></span>
             </button>
           </div>
         </a>