Bug 1787521 - Adjust button for newtab save to pocket action r=thecou…

…nt,fluent-reviewers,flod Differential Revision: https://phabricator.services.mozilla.com/D155995
dothq · Sep 9, 2022 · 8e0b6c3 · 8e0b6c3
1 parent 817aa44
commit 8e0b6c3
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 70 deletions.
diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
@@ -402,12 +402,12 @@ export class _DSCard extends React.PureComponent {
                 {this.props.context_type === "pocket" ? (
                   <>
                     <span className="story-badge-icon icon icon-pocket" />
-                    <span data-l10n-id="newtab-pocket-saved-to-pocket" />
+                    <span data-l10n-id="newtab-pocket-saved" />
                   </>
                 ) : (
                   <>
                     <span className="story-badge-icon icon icon-pocket-save" />
-                    <span data-l10n-id="newtab-pocket-save-to-pocket" />
+                    <span data-l10n-id="newtab-pocket-save" />
                   </>
                 )}
               </button>

diff --git a/...er/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss b/...er/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
@@ -38,12 +38,10 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 1);
 
     .card-stp-button-position-wrapper {
       position: absolute;
-      margin-top: -16px;
-      left: 0;
-      right: 0;
-      top: 50%;
+      inset-inline-end: 10px;
+      top: 10px;
       display: flex;
-      justify-content: center;
+      justify-content: end;
       align-items: center;
     }
 
@@ -53,15 +51,13 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 1);
       height: 15px;
       width: 15px;
       background-size: 15px;
-    }
-
-    .icon-pocket {
-      fill: $pocket-icon-fill;
+      fill: $white;
     }
 
     .context-menu-button {
       position: static;
       transition: none;
+      border-radius: 3px;
     }
 
     .context-menu-position-container {
@@ -77,21 +73,16 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 1);
 
     .card-stp-button {
       display: flex;
-      margin-inline-end: 12px;
+      margin-inline-end: 7px;
       font-weight: 400;
       font-size: 13px;
       line-height: 16px;
-      background-color: var(--newtab-background-color-secondary);
+      background-color: $pocket-icon-fill;
       border: 0;
       border-radius: 4px;
-      padding: 8px;
+      padding: 6px;
       white-space: nowrap;
-
-      &:hover {
-        .icon-pocket-save {
-          fill: $pocket-icon-fill;
-        }
-      }
+      color: $white;
     }
 
     button,

diff --git a/browser/components/newtab/content-src/styles/_icons.scss b/browser/components/newtab/content-src/styles/_icons.scss
@@ -102,7 +102,8 @@
   }
 
   &.icon-pocket-save {
-    background-image: url('chrome://global/skin/icons/pocket-outline.svg');
+    background-image: url('chrome://global/skin/icons/pocket.svg');
+    fill: $white;
   }
 
   &.icon-pocket-delete {

diff --git a/browser/components/newtab/css/activity-stream-linux.css b/browser/components/newtab/css/activity-stream-linux.css
@@ -170,7 +170,8 @@ body[lwt-newtab-brighttext] {
   background-image: url("chrome://global/skin/icons/pocket.svg");
 }
 .icon.icon-pocket-save {
-  background-image: url("chrome://global/skin/icons/pocket-outline.svg");
+  background-image: url("chrome://global/skin/icons/pocket.svg");
+  fill: #FFF;
 }
 .icon.icon-pocket-delete {
   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-delete-16.svg");
@@ -3292,12 +3293,10 @@ main.has-snippet {
 }
 .ds-card .card-stp-button-hover-background .card-stp-button-position-wrapper {
   position: absolute;
-  margin-top: -16px;
-  left: 0;
-  right: 0;
-  top: 50%;
+  inset-inline-end: 10px;
+  top: 10px;
   display: flex;
-  justify-content: center;
+  justify-content: end;
   align-items: center;
 }
 .ds-card .card-stp-button-hover-background .icon-pocket-save,
@@ -3306,13 +3305,12 @@ main.has-snippet {
   height: 15px;
   width: 15px;
   background-size: 15px;
-}
-.ds-card .card-stp-button-hover-background .icon-pocket {
-  fill: #EF4056;
+  fill: #FFF;
 }
 .ds-card .card-stp-button-hover-background .context-menu-button {
   position: static;
   transition: none;
+  border-radius: 3px;
 }
 .ds-card .card-stp-button-hover-background .context-menu-position-container {
   position: relative;
@@ -3325,18 +3323,16 @@ main.has-snippet {
 }
 .ds-card .card-stp-button-hover-background .card-stp-button {
   display: flex;
-  margin-inline-end: 12px;
+  margin-inline-end: 7px;
   font-weight: 400;
   font-size: 13px;
   line-height: 16px;
-  background-color: var(--newtab-background-color-secondary);
+  background-color: #EF4056;
   border: 0;
   border-radius: 4px;
-  padding: 8px;
+  padding: 6px;
   white-space: nowrap;
-}
-.ds-card .card-stp-button-hover-background .card-stp-button:hover .icon-pocket-save {
-  fill: #EF4056;
+  color: #FFF;
 }
 .ds-card .card-stp-button-hover-background button,
 .ds-card .card-stp-button-hover-background .context-menu {

diff --git a/browser/components/newtab/css/activity-stream-mac.css b/browser/components/newtab/css/activity-stream-mac.css
@@ -174,7 +174,8 @@ body[lwt-newtab-brighttext] {
   background-image: url("chrome://global/skin/icons/pocket.svg");
 }
 .icon.icon-pocket-save {
-  background-image: url("chrome://global/skin/icons/pocket-outline.svg");
+  background-image: url("chrome://global/skin/icons/pocket.svg");
+  fill: #FFF;
 }
 .icon.icon-pocket-delete {
   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-delete-16.svg");
@@ -3296,12 +3297,10 @@ main.has-snippet {
 }
 .ds-card .card-stp-button-hover-background .card-stp-button-position-wrapper {
   position: absolute;
-  margin-top: -16px;
-  left: 0;
-  right: 0;
-  top: 50%;
+  inset-inline-end: 10px;
+  top: 10px;
   display: flex;
-  justify-content: center;
+  justify-content: end;
   align-items: center;
 }
 .ds-card .card-stp-button-hover-background .icon-pocket-save,
@@ -3310,13 +3309,12 @@ main.has-snippet {
   height: 15px;
   width: 15px;
   background-size: 15px;
-}
-.ds-card .card-stp-button-hover-background .icon-pocket {
-  fill: #EF4056;
+  fill: #FFF;
 }
 .ds-card .card-stp-button-hover-background .context-menu-button {
   position: static;
   transition: none;
+  border-radius: 3px;
 }
 .ds-card .card-stp-button-hover-background .context-menu-position-container {
   position: relative;
@@ -3329,18 +3327,16 @@ main.has-snippet {
 }
 .ds-card .card-stp-button-hover-background .card-stp-button {
   display: flex;
-  margin-inline-end: 12px;
+  margin-inline-end: 7px;
   font-weight: 400;
   font-size: 13px;
   line-height: 16px;
-  background-color: var(--newtab-background-color-secondary);
+  background-color: #EF4056;
   border: 0;
   border-radius: 4px;
-  padding: 8px;
+  padding: 6px;
   white-space: nowrap;
-}
-.ds-card .card-stp-button-hover-background .card-stp-button:hover .icon-pocket-save {
-  fill: #EF4056;
+  color: #FFF;
 }
 .ds-card .card-stp-button-hover-background button,
 .ds-card .card-stp-button-hover-background .context-menu {

diff --git a/browser/components/newtab/css/activity-stream-windows.css b/browser/components/newtab/css/activity-stream-windows.css
@@ -170,7 +170,8 @@ body[lwt-newtab-brighttext] {
   background-image: url("chrome://global/skin/icons/pocket.svg");
 }
 .icon.icon-pocket-save {
-  background-image: url("chrome://global/skin/icons/pocket-outline.svg");
+  background-image: url("chrome://global/skin/icons/pocket.svg");
+  fill: #FFF;
 }
 .icon.icon-pocket-delete {
   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-delete-16.svg");
@@ -3292,12 +3293,10 @@ main.has-snippet {
 }
 .ds-card .card-stp-button-hover-background .card-stp-button-position-wrapper {
   position: absolute;
-  margin-top: -16px;
-  left: 0;
-  right: 0;
-  top: 50%;
+  inset-inline-end: 10px;
+  top: 10px;
   display: flex;
-  justify-content: center;
+  justify-content: end;
   align-items: center;
 }
 .ds-card .card-stp-button-hover-background .icon-pocket-save,
@@ -3306,13 +3305,12 @@ main.has-snippet {
   height: 15px;
   width: 15px;
   background-size: 15px;
-}
-.ds-card .card-stp-button-hover-background .icon-pocket {
-  fill: #EF4056;
+  fill: #FFF;
 }
 .ds-card .card-stp-button-hover-background .context-menu-button {
   position: static;
   transition: none;
+  border-radius: 3px;
 }
 .ds-card .card-stp-button-hover-background .context-menu-position-container {
   position: relative;
@@ -3325,18 +3323,16 @@ main.has-snippet {
 }
 .ds-card .card-stp-button-hover-background .card-stp-button {
   display: flex;
-  margin-inline-end: 12px;
+  margin-inline-end: 7px;
   font-weight: 400;
   font-size: 13px;
   line-height: 16px;
-  background-color: var(--newtab-background-color-secondary);
+  background-color: #EF4056;
   border: 0;
   border-radius: 4px;
-  padding: 8px;
+  padding: 6px;
   white-space: nowrap;
-}
-.ds-card .card-stp-button-hover-background .card-stp-button:hover .icon-pocket-save {
-  fill: #EF4056;
+  color: #FFF;
 }
 .ds-card .card-stp-button-hover-background button,
 .ds-card .card-stp-button-hover-background .context-menu {

diff --git a/browser/components/newtab/data/content/activity-stream.bundle.js b/browser/components/newtab/data/content/activity-stream.bundle.js
@@ -7761,11 +7761,11 @@ class _DSCard extends (external_React_default()).PureComponent {
     }, this.props.context_type === "pocket" ? /*#__PURE__*/external_React_default().createElement((external_React_default()).Fragment, null, /*#__PURE__*/external_React_default().createElement("span", {
       className: "story-badge-icon icon icon-pocket"
     }), /*#__PURE__*/external_React_default().createElement("span", {
-      "data-l10n-id": "newtab-pocket-saved-to-pocket"
+      "data-l10n-id": "newtab-pocket-saved"
     })) : /*#__PURE__*/external_React_default().createElement((external_React_default()).Fragment, null, /*#__PURE__*/external_React_default().createElement("span", {
       className: "story-badge-icon icon icon-pocket-save"
     }), /*#__PURE__*/external_React_default().createElement("span", {
-      "data-l10n-id": "newtab-pocket-save-to-pocket"
+      "data-l10n-id": "newtab-pocket-save"
     }))), /*#__PURE__*/external_React_default().createElement(DSLinkMenu, {
       id: this.props.id,
       index: this.props.pos,

diff --git a/browser/locales/en-US/browser/newtab/newtab.ftl b/browser/locales/en-US/browser/newtab/newtab.ftl
@@ -237,8 +237,8 @@ newtab-pocket-cta-text = Save the stories you love in { -pocket-brand-name }, an
 newtab-pocket-pocket-firefox-family = { -pocket-brand-name } is part of the { -brand-product-name } family
 
 # A save to Pocket button that shows over the card thumbnail on hover.
-newtab-pocket-save-to-pocket = Save to { -pocket-brand-name }
-newtab-pocket-saved-to-pocket = Saved to { -pocket-brand-name }
+newtab-pocket-save = Save
+newtab-pocket-saved = Saved
 
 ## Error Fallback Content.
 ## This message and suggested action link are shown in each section of UI that fails to render.