Fixes #4791 - Update Favorite button on MyShots and Shot page

locales/en-US/server.ftl

@@ -307,13 +307,11 @@ shotIndexPagePreviousPage =
     .title = Previous page
 shotIndexPageNextPage =
     .title = Next page
-# This symbol is used in the lower right corner of the card for a shot on the
-# My Shots page to indicate that the shot does not expire. It should be a
-# single character (or simply nothing if no such symbol is available for a
-# language/culture).
-shotIndexNoExpirationSymbol = ∞
-    .title = This shot does not expire
-# This is the tooltip for a "heart" symbol in the lower right corner of the
+# This is tooltip for a "blank heart" symbol used in the upper top corner of the card for a shot on the
+# My Shots page to indicate that the shot does expire.
+shotIndexNonFavoriteIcon =
+    .title = This is not a favorite shot and it will expire
+# This is the tooltip for a "heart" symbol in the upper top corner of the
 # card for a shot on the My Shots page. It indicate that the shot was marked as
 # a favorite by the owner.
 shotIndexFavoriteIcon =

server/src/pages/shot/view.js

@@ -341,10 +341,10 @@ class Body extends React.Component {
     let editButton = null;
     const highlight = this.state.highlightEditButton ? <div className="edit-highlight" onClick={ this.onClickEdit.bind(this) } onMouseOver={ this.onMouseOverHighlight.bind(this) } onMouseOut={ this.onMouseOutHighlight.bind(this) }></div> : null;
     const activeFavClass = this.props.expireTime ? "" : "is-fav";
-    const shouldShow = this.props.isFxaAuthenticated ? "" : "hidden";
+    const shouldDisable = this.props.isFxaAuthenticated ? "" : "disabled";
 
     favoriteShotButton = <div className="favorite-shot-button"><Localized id="shotPagefavoriteButton">
-      <button className={`nav-button ${shouldShow} `} onClick={this.onClickFavorite.bind(this)}>
+      <button className={`nav-button ${shouldDisable} `} onClick={this.onClickFavorite.bind(this)}>
         <span className={`icon-favorite favorite ${activeFavClass}`} ></span>
         <Localized id="shotPageFavorite">
           <span className={`favorite-text favorite ${activeFavClass} `}>Favorite</span>
@@ -490,6 +490,9 @@ class Body extends React.Component {
   }
 
   onClickFavorite() {
+    if (!this.props.isFxaAuthenticated) {
+      return;
+    }
     if (this.props.expireTime) {
       sendEvent("set-favorite", "navbar");
       const INDEFINITE = 0;

server/src/pages/shotindex/view.js

@@ -313,12 +313,12 @@ class Card extends React.Component {
       imageUrl = this.props.staticLink("img/question-mark.svg");
     }
 
-    let neverExpireIndicator = null;
-    if (!shot.expireTime) {
-      if (this.props.hasFxa) {
-        neverExpireIndicator = <Localized id="shotIndexFavoriteIcon"><div className="favorite-shot" title=""></div></Localized>;
+    let favoriteIndicator = null;
+    if (this.props.hasFxa) {
+      if (!shot.expireTime) {
+        favoriteIndicator = <Localized id="shotIndexFavoriteIcon"><div className="fav-shot" title=""></div></Localized>;
       } else {
-        neverExpireIndicator = <Localized id="shotIndexNoExpirationSymbol"><div className="never-expires" title=""></div></Localized>;
+        favoriteIndicator = <Localized id="shotIndexNonFavoriteIcon"><div className="non-fav-shot" title=""></div></Localized>;
       }
     }
 
@@ -360,7 +360,7 @@ class Card extends React.Component {
             confirmDeleteHandler={this.confirmDeleteHandler.bind(this, shot)}
             cancelDeleteHandler={this.cancelDeleteHandler.bind(this)} />
         </div>
-        {neverExpireIndicator}
+        {favoriteIndicator}
       </div>
     );
   }

static/css/partials/_header.scss

@@ -91,7 +91,7 @@
     }
 
     .icon-favorite {
-      background-image: url("../img/icon-heart.svg");
+      background-image: url("../img/icon-heart-outline.svg");
     }
 
     &.icon-trash {
@@ -112,14 +112,18 @@
         height: 24px;
         margin: 0 0 8px;
         background-size: 24px 24px;
-        filter: brightness(2.4);
 
         &.is-fav {
-          filter: brightness(1);
+          background-image: url("../img/icon-heart.svg");
         }
       }
     }
 
+    &.disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+
     span {
       margin-top: 30px;
       color: #2a2a2e;
@@ -131,10 +135,9 @@
     .favorite-text {
       &.favorite {
         margin-top: 0;
-        color: #95929a;
 
         &.is-fav {
-          color: #4a4a4a;
+          color: #b5007f;
         }
       }
     }

static/css/shot-index.scss

@@ -110,9 +110,9 @@
     .alt-actions-container {
       opacity: 1;
     }
-    .favorite-shot,
-    .never-expires {
-      display: none;
+
+    .non-fav-shot {
+      display: block;
     }
   }
 
@@ -190,22 +190,27 @@
     margin: 12px;
   }
 
-  .favorite-shot,
-  .never-expires {
-    bottom: 0;
-    color: #9e9e9e;
-    font-size: 1.2em;
+  .fav-shot,
+  .non-fav-shot {
     position: absolute;
-    right: 8px;
+    right: 12px;
+    top: 8px;
+    background-color: #fff;
+    border-radius: 20px;
+    width: 40px;
+    height: 40px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 23px 20px;
   }
 
-  .favorite-shot {
+  .fav-shot {
     background-image: url("../img/icon-heart.svg");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 16px 16px;
-    width: 16px;
-    height: 26px;
+  }
+
+  .non-fav-shot {
+    display: none;
+    background-image: url("../img/icon-heart-outline.svg");
   }
 }