Favorite icon hover on shot page

mozilla-services · Sep 11, 2018 · f0e86f3 · f0e86f3
1 parent 56ee277
commit f0e86f3
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/locales/en-US/server.ftl b/locales/en-US/server.ftl
@@ -126,7 +126,7 @@ shotPageDownloadShot =
     .title = Download
 shotPageEditButton =
     .title = Edit this image
-shotPagefavoriteButton =
+shotPageFavoriteButton =
     .title = Favorite this shot
 shotPageBackToHomeButton =
     .title = Homepage

diff --git a/server/src/pages/shot/view.js b/server/src/pages/shot/view.js
@@ -344,10 +344,11 @@ class Body extends React.Component {
     const activeFavClass = this.props.expireTime ? "" : "is-fav";
     const shouldShow = this.props.isFxaAuthenticated ? "" : "hidden";
 
-    favoriteShotButton = <Localized id="shotPagefavoriteButton">
-      <button className={`nav-button favorite icon-favorite ${activeFavClass} ${shouldShow} `} onClick={this.onClickFavorite.bind(this)}>
+    favoriteShotButton = <Localized id="shotPageFavoriteButton">
+      <button className={`nav-button ${shouldShow} `} onClick={this.onClickFavorite.bind(this)}>
+        <div className={`icon-favorite favorite ${activeFavClass}`} ></div>
         <Localized id="shotPageFavorite">
-          <span className={` ${activeFavClass} `}>Favorite</span>
+          <span className={`favorite ${activeFavClass} `}>Favorite</span>
         </Localized>
       </button></Localized>;
 

diff --git a/static/css/partials/_header.scss b/static/css/partials/_header.scss
@@ -83,7 +83,7 @@
       background-image: url("../img/icon-settings.svg");
     }
 
-    &.icon-favorite {
+    .icon-favorite {
       background-image: url("../img/icon-heart.svg");
     }
 
@@ -99,26 +99,34 @@
       background-image: url("../img/icon-download.svg");
     }
 
-    &.favorite {
-      filter: brightness(2.4);
+    div {
+      &.favorite {
+        width: 24px;
+        height: 24px;
+        margin: 0 0 8px;
+        background-size: 24px 24px;
+        filter: brightness(2.4);
 
-      &.is-fav {
-        filter: brightness(1);
+        &.is-fav {
+          filter: brightness(1);
+        }
       }
-
     }
 
     span {
-      cursor: pointer;
       margin-top: 30px;
-      color: #95929a;
-      filter: brightness(0.4);
+      color: #2a2a2e;
       overflow: hidden;
       text-overflow: ellipsis;
       width: 96px;
 
-      &.is-fav {
-        color: #4a4a4a;
+      &.favorite {
+        margin-top: 0;
+        color: #95929a;
+
+        &.is-fav {
+          color: #4a4a4a;
+        }
       }
     }
   }