commit 737abc822d76ead4e4d5d601e4db9c4786efb862 parent 33e024d6c51efe74479d43cb0a18b8215baa168b Author: Irene Ni <ini@mozilla.com> Date: Fri, 5 Dec 2025 21:54:23 +0000 Bug 2004465 - Add Kit to inferred personalization messaging card. r=home-newtab-reviewers,nbarrett Differential Revision: https://phabricator.services.mozilla.com/D275308 Diffstat:
6 files changed, 31 insertions(+), 18 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PersonalizedCard/PersonalizedCard.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PersonalizedCard/PersonalizedCard.jsx @@ -13,8 +13,7 @@ export const PersonalizedCard = ({ handleBlock, messageData, }) => { - const wavingFox = - "chrome://newtab/content/data/content/assets/waving-fox.svg"; + const kitFox = "chrome://newtab/content/data/content/assets/kit.png"; const onDismiss = useCallback(() => { handleDismiss(); @@ -41,7 +40,7 @@ export const PersonalizedCard = ({ ></moz-button> </div> <div className="personalized-card-inner"> - <img src={wavingFox} alt="" /> + <img src={kitFox} alt="" /> <h2>{messageData.content.cardTitle}</h2> <p>{messageData.content.cardMessage}</p> <div className="personalized-card-cta-wrapper"> diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PersonalizedCard/_PersonalizedCard.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PersonalizedCard/_PersonalizedCard.scss @@ -52,6 +52,7 @@ gap: var(--space-large); img { + width: 100px; justify-self: initial; } @@ -66,7 +67,9 @@ gap: var(--space-large); img { - width: 75px; + width: 130px; + align-self: end; + grid-row: 1 / span 2; } .personalized-card-cta-wrapper { @@ -75,10 +78,16 @@ grid-template-columns: subgrid; grid-row: 2; grid-column: 2 / span 2; + padding-block-end: var(--space-xxlarge); } p { - width: 230px; + width: 210px; + margin: 0; + } + + h2 { + margin: 0; } } @@ -88,7 +97,8 @@ gap: var(--space-large); img { - width: 75px; + width: 100px; + align-self: end; } h2 { @@ -134,6 +144,6 @@ } @media (min-width: $break-point-layout-variant) { - padding: var(--space-xxlarge); + padding-block-end: 0; } } diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css @@ -9145,6 +9145,7 @@ dialog:dir(rtl)::after { gap: var(--space-large); } .personalized-card-wrapper .personalized-card-inner img { + width: 100px; justify-self: initial; } .personalized-card-wrapper .personalized-card-inner h2 { @@ -9157,7 +9158,9 @@ dialog:dir(rtl)::after { gap: var(--space-large); } .personalized-card-wrapper .personalized-card-inner img { - width: 75px; + width: 130px; + align-self: end; + grid-row: 1/span 2; } .personalized-card-wrapper .personalized-card-inner .personalized-card-cta-wrapper { align-items: center; @@ -9165,9 +9168,14 @@ dialog:dir(rtl)::after { grid-template-columns: subgrid; grid-row: 2; grid-column: 2/span 2; + padding-block-end: var(--space-xxlarge); } .personalized-card-wrapper .personalized-card-inner p { - width: 230px; + width: 210px; + margin: 0; + } + .personalized-card-wrapper .personalized-card-inner h2 { + margin: 0; } } @media (min-width: 1122px) { @@ -9176,7 +9184,8 @@ dialog:dir(rtl)::after { gap: var(--space-large); } .personalized-card-wrapper .personalized-card-inner img { - width: 75px; + width: 100px; + align-self: end; } .personalized-card-wrapper .personalized-card-inner h2 { grid-column: 2; @@ -9215,6 +9224,6 @@ dialog:dir(rtl)::after { } @media (min-width: 724px) { .personalized-card-wrapper { - padding: var(--space-xxlarge); + padding-block-end: 0; } } diff --git a/browser/extensions/newtab/data/content/activity-stream.bundle.js b/browser/extensions/newtab/data/content/activity-stream.bundle.js @@ -10691,7 +10691,7 @@ const PersonalizedCard = ({ handleBlock, messageData }) => { - const wavingFox = "chrome://newtab/content/data/content/assets/waving-fox.svg"; + const kitFox = "chrome://newtab/content/data/content/assets/kit.png"; const onDismiss = (0,external_React_namespaceObject.useCallback)(() => { handleDismiss(); handleBlock(); @@ -10717,7 +10717,7 @@ const PersonalizedCard = ({ })), /*#__PURE__*/external_React_default().createElement("div", { className: "personalized-card-inner" }, /*#__PURE__*/external_React_default().createElement("img", { - src: wavingFox, + src: kitFox, alt: "" }), /*#__PURE__*/external_React_default().createElement("h2", null, messageData.content.cardTitle), /*#__PURE__*/external_React_default().createElement("p", null, messageData.content.cardMessage), /*#__PURE__*/external_React_default().createElement("div", { className: "personalized-card-cta-wrapper" diff --git a/browser/extensions/newtab/data/content/assets/kit.png b/browser/extensions/newtab/data/content/assets/kit.png Binary files differ. diff --git a/browser/extensions/newtab/data/content/assets/waving-fox.svg b/browser/extensions/newtab/data/content/assets/waving-fox.svg @@ -1,4 +0,0 @@ -<!-- This Source Code Form is subject to the terms of the Mozilla Public - - License, v. 2.0. If a copy of the MPL was not distributed with this - - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -<svg xmlns="http://www.w3.org/2000/svg" width="73" height="59" fill="none" xmlns:v="https://vecta.io/nano"><g clip-path="url(#A)"><path d="M17.757 58.168l37.05-.694 14.737-.238 1.782-22.264-2.202-5.144-4.935 3.029-7.144 11.14-2.87.782-1.075-3.121 4.606-9.346.85-3.065-7.906-5.238-8.144-21.825-5.371 5.042-2.752 8.352-17.284 1.59-13.642-6.743-1.668 5.114 3.342 17.316-.479 9.577-1.56 6.007 9.121 4.56 5.863 1.629-.319 3.538z" fill="#fff"/><path d="M61.96 40.737c1.479-.042 2.599 2.414 4 2.821 1.235.531 4.003-.765 4.886-.326 1.062.508.036 1.88-.019 2.919-.173 2.616-.632 5.205-1.196 7.762-.287 1.453 1.466 3.039-.088 3.326-3.528.492-9.697.059-13.264.107-1.974.078-3.42-.573-3.707-2.687-.443-3.153-.697-6.332-.743-9.528 0-.648-.12-3.329.124-3.857.375-.648 1.072 2.169 1.424 2.567 2.01 2.977 4.173 1.218 6.055-1.02.743-.886 1.668-2.033 2.485-2.082l.046-.006-.003.003z" fill="#fb9031"/><path d="M68.286 35.451c.019-.042.143-.182.238-.257.222-.16-.173.244-.231.264l-.007-.007z" fill="#fdfdfd"/><path d="M69.4 39.229c.844 1.964-1.909 1.498-2.961 1.104-2.309-.769-2.29-2.639-.137-2.456 1.059.15 2.424.397 3.072 1.306l.026.046z" fill="#0f0d0a"/><path d="M3.607 13.059c-1.391-2.642 7.303 1.182 9.196 2.935 1.358 1.257 2.886 2.036 4.635 2.186 2.049.202 3.893-.974 5.85-1.332 1.922-.407 4.476-.951 6.515-.977 5.313.013 4.857.713 6.841-4.886l1.955-4.56c.557-1.225 2.446-2.694 2.932-2.932.586-.277.977.326.345 2.02s-1.088 3.821-1.586 5.603c-1.322 4.489-1.287 5.665 2.394 7.818l4.026 2.241c1.547.945 2.062 2.489 3.081 3.814.71.857 1.847 1.209 3.192 1.788 2.098 1.095 7.7 2.557 4.727 5.538-2.446 2.195-6.297 1.993-8.991 3.766-2.573 1.55-5.958 4.16-7.922 6.381-.743.866-1.521 1.691-2.726 1.759-1.648.078-3.45.026-4.987.792-1.248.544-2.271 1.456-3.375 1.941-1.15.547-2.427.56-3.684.417-5.694-.586-11.645-1.098-16.955 1.078-2.834 1.124-5.951 2.049-5.075-2.41.179-1.192.407-2.427.661-3.606.436-2.244 1.225-3.977 1.88-6.072.534-1.674.505-3.202 1.342-4.772 1.29-2.371 2.801-4.867 4.124-7.202 1.264-1.99.814-2.87-.691-4.3-1.857-1.847-3.733-3.727-5.828-5.274-.651-.495-1.41-1.091-1.853-1.726l-.023-.033v.006zm33.75 18.04c-2.326-1.43-2.228 3.212-1.547 4.948.86 2.134 3.182.994 3.075-1.033.033-1.313-.479-3.088-1.482-3.883l-.046-.032zm-10.482 8.29c1.306-1.345-.824-6.889-3.003-4.883-1.694 1.632.254 6.909 2.968 4.922l.039-.039h-.003z" fill="#fb9031"/><g fill="#0f0d0a"><path d="M63.097 37.412c-1.28 1.935-2.059 4.046-3.498 5.883-1.254 1.511-3.352 4.023-5.446 2.538-1.059-.782-1.941-2.293-2.222-3.665-.482-2.29 1.248-3.893 2.596-5.834l1.775-2.648c1.104-1.717 2.081-3.704.101-4.906-1.528-.964-3.3-1.674-4.942-2.427-2.821-.984-3.378-3.453-4.179-6.023-1.313-4.332-2.306-8.059-3.935-12.245-1.717-4.554-2.114-5.531-4.371-.283-1.205 2.707-2.01 5.394-3.528 7.916-.648 1.186-1.798 1.124-3.235 1.101-1.599-.007-3.322 0-4.925 0-1.697 0-3.199-.013-4.684.456-1.479.462-3.036 1.209-4.639 1.111-1.805-.068-3.476-1.182-5.134-2.16a78.49 78.49 0 0 0-6.111-3.222c-2.029-1-3.192-.746-2.941 1.87.564 5.564 1.362 10.274 3.039 15.649 1.192 3.518.332 5.841-.821 9.14-.388 1.205-.713 2.645-.961 3.977-.401 2.746-1.489 5.518 1.994 6.091l.059.013c2.873.577 5.534 1.84 8.28 2.759 2.73.792 5.958 2.368 3.759 5.345-.378.476-1.046 1-1.375.309-.691-1.968.319-2.557-3.635-3.941-3.583-1.254-7.515-1.958-10.844-3.772-1.476-.964-1.485-1.358-1.169-4.482.225-2.202.749-4.199 1.538-6.245 1.186-2.899 1.306-5.062.179-7.987-1.557-4.785-5.056-17.548-2.557-21.743 3.391-3.678 11.649 2.479 14.707 4.857 2.388 2.033 4.466 1.065 7.407.534 1.27-.208 2.551-.329 3.834-.423 2.336-.241 5.287.107 6.713-2.14C35.917 9.675 37.272.847 41.214.007c2.407-.205 3.541 4.117 4.528 5.942 2.225 4.691 3.896 10.01 4.821 15.264.235 1.283.619 2.573 1.668 3.358 1.472 1.085 4.023 1.756 5.668 2.974.958.658 2.196 1.678 2.235 2.671.062 1.651-.639 2.476-1.577 3.974a156.93 156.93 0 0 1-2.766 4.104c-1.189 1.648-2.391 3.847-.919 5.31 1.671 1.14 3.199-2.183 4.111-3.228 1.378-1.928 2.427-3.769 3.586-5.938.746-1.365 1.544-2.808 2.652-3.902 2.349-2.469 5.345-1.313 6.619 1.567 1.844 5.114 1.414 21.02-1.319 24.483-1.841 2.108-1.433-1.267-1.137-2.469.821-3.867 3.345-21.45-.808-23.082-1.365-.401-2.068 1.466-2.752 2.573"/><use href="#B"/><path d="M65.055 35.415c.671-.987 2.303-.16 1.883.961-.58 1.456-2.691.443-1.922-.906l.036-.055h.003zm2.117-2.118c.671-.987 2.303-.16 1.883.961-.58 1.456-2.691.443-1.922-.906l.036-.055h.003zM38.836 44.522c1.225 2.541-1.945 4.218-4.254 4.622-1.404.342-3.358.244-4.313-.629-1.212-1.003-.44-2.401.723-3.169 1.723-1.238 6.267-2.853 7.815-.866l.029.042zm-11.997-5.094c-2.71 1.987-4.658-3.29-2.968-4.922 2.179-2.01 4.31 3.531 3.003 4.883l-.039.039h.003zm10.563-8.294c1.003.795 1.515 2.567 1.482 3.883.104 2.023-2.215 3.166-3.075 1.033-.678-1.733-.779-6.375 1.547-4.948l.046.032z"/></g></g><defs><clipPath id="A"><path fill="#fff" transform="translate(.392)" d="M0 0h72.565v58.5H0z"/></clipPath><path id="B" d="M68.312 35.415c.671-.987 2.303-.16 1.883.961-.58 1.456-2.691.443-1.922-.906l.036-.055h.003z"/></defs></svg> -\ No newline at end of file
