From 1c206dca958703a655f8c19397ceaad483a15405 Mon Sep 17 00:00:00 2001
From: Scott <scott.downe@gmail.com>
Date: Thu, 14 Apr 2022 18:42:55 +0000
Subject: [PATCH] Bug 1764799 - Save to Pocket panel dark mode border fix.
 r=gvn

Differential Revision: https://phabricator.services.mozilla.com/D143742
---
 .../content/panels/css/main.compiled.css      |  2 +-
 .../content/panels/img/pocketlogo-dark.svg    | 28 +++++++++----------
 .../panels/js/components/Header/Header.scss   |  2 +-
 .../shared/customizableui/panelUI-shared.css  |  8 ++++--
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/browser/components/pocket/content/panels/css/main.compiled.css b/browser/components/pocket/content/panels/css/main.compiled.css
index a897094ecc7f..32daf888bd74 100644
--- a/browser/components/pocket/content/panels/css/main.compiled.css
+++ b/browser/components/pocket/content/panels/css/main.compiled.css
@@ -2247,7 +2247,7 @@ body.theme_dark .stp_article_list .stp_article_list_publisher {
   width: 121px;
 }
 body.theme_dark .stp_header .stp_header_logo {
-  background: url(../img/pocketlogo-dark.svg) bottom center no-repeat;
+  background-image: url(../img/pocketlogo-dark.svg);
 }
 
 .stp_header .stp_button {
diff --git a/browser/components/pocket/content/panels/img/pocketlogo-dark.svg b/browser/components/pocket/content/panels/img/pocketlogo-dark.svg
index 70e6ad7bf106..7ec3f7dac05f 100644
--- a/browser/components/pocket/content/panels/img/pocketlogo-dark.svg
+++ b/browser/components/pocket/content/panels/img/pocketlogo-dark.svg
@@ -1,16 +1,14 @@
-<svg width="91" height="24" viewBox="0 0 91 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0243 10.9259L7.67738 14.0734C7.59482 14.1599 7.49547 14.2286 7.38541 14.2752C7.27536 14.3219 7.15692 14.3456 7.03738 14.3449C6.91026 14.3482 6.78379 14.3258 6.66549 14.2792C6.5472 14.2326 6.43951 14.1626 6.34885 14.0734L3.0518 10.9259C2.87395 10.7405 2.77463 10.4936 2.77463 10.2367C2.77463 9.9798 2.87395 9.73286 3.0518 9.5475C3.42033 9.20259 4.03541 9.15406 4.40525 9.5475L7.03738 12.0826L9.71934 9.5475C10.0643 9.15406 10.6793 9.20259 11.0308 9.5475C11.1972 9.73853 11.2889 9.98333 11.2889 10.2367C11.2889 10.49 11.1972 10.7348 11.0308 10.9259H11.0243ZM12.7213 5.70881H1.35344C1.17883 5.70499 1.00519 5.73573 0.842512 5.79927C0.679831 5.86281 0.531322 5.9579 0.405531 6.07906C0.279741 6.20022 0.179152 6.34506 0.109555 6.50524C0.0399574 6.66543 0.00272483 6.83779 0 7.01242L0 11.2209C0 15.0347 3.14754 18.2098 7.03738 18.2098C8.88984 18.2043 10.6649 17.4664 11.9755 16.1571C13.286 14.8478 14.0255 13.0734 14.0328 11.2209V7.01242C14.0337 6.84032 14.0003 6.66976 13.9346 6.51069C13.8689 6.35161 13.7722 6.2072 13.6501 6.08588C13.5281 5.96455 13.3831 5.86872 13.2236 5.80399C13.0642 5.73925 12.8934 5.7069 12.7213 5.70881Z" fill="#EF4056"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M90.1613 15.8229C89.9241 15.8402 89.6992 15.9351 89.5213 16.0931C89.1764 16.3882 88.7581 16.6832 88.1679 16.6832C87.1594 16.6832 86.5941 16.0682 86.5941 14.6662V7.08192L89.7194 7.13045C90.1626 7.13045 90.4577 6.86028 90.4577 6.44192C90.4577 5.99865 90.1626 5.72848 89.7194 5.72848L86.5941 5.75209V3.22356C86.5941 2.73176 86.2492 2.38684 85.8308 2.38684C85.722 2.38661 85.6143 2.40828 85.5141 2.45056C85.4138 2.49285 85.3231 2.55488 85.2474 2.63296C85.1716 2.71104 85.1124 2.80357 85.0731 2.90503C85.0339 3.0065 85.0155 3.11483 85.019 3.22356V5.75733L83.6905 5.73373C83.5952 5.72756 83.4997 5.74179 83.4103 5.77546C83.321 5.80913 83.2398 5.86148 83.1723 5.929C83.1048 5.99652 83.0524 6.07766 83.0188 6.16702C82.9851 6.25637 82.9709 6.35188 82.977 6.44717C82.9755 6.54015 82.9931 6.63246 83.0287 6.71835C83.0643 6.80425 83.1172 6.8819 83.1841 6.94648C83.2511 7.01105 83.3305 7.06118 83.4176 7.09373C83.5047 7.12628 83.5976 7.14056 83.6905 7.13569L85.0177 7.08192V14.7147C85.0177 17.1016 86.4695 18.2098 88.143 18.2098C88.5814 18.2216 89.0176 18.1424 89.4239 17.9771C89.8302 17.8119 90.1978 17.5642 90.5036 17.2498C90.6767 17.0531 90.8485 16.8314 90.8485 16.5363C90.8554 16.443 90.8426 16.3493 90.8107 16.2613C90.7789 16.1732 90.7289 16.0929 90.6639 16.0256C90.5989 15.9583 90.5204 15.9054 90.4336 15.8705C90.3468 15.8355 90.2535 15.8193 90.16 15.8229" fill="#ffffff"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M82.484 11.2459C82.484 8.4918 80.0722 5.58557 76.8446 5.58557C73.3495 5.58557 70.7423 8.47082 70.7423 11.9344C70.7423 15.398 73.3994 18.2098 76.8695 18.2098C78.5915 18.2098 80.2649 17.5698 81.3718 16.4866C81.6184 16.2413 81.8151 15.9698 81.8151 15.6997C81.8213 15.6044 81.807 15.5089 81.7734 15.4195C81.7397 15.3302 81.6874 15.249 81.6198 15.1815C81.5523 15.114 81.4712 15.0616 81.3818 15.028C81.2925 14.9943 81.197 14.9801 81.1017 14.9862C80.8467 14.9906 80.6019 15.0865 80.4118 15.2564C79.3784 16.1666 78.3213 16.6833 76.8708 16.6833C74.6112 16.6833 72.5954 14.9639 72.3856 12.4013H81.1725C82.0158 12.4013 82.484 11.9593 82.484 11.2459ZM72.4315 11.0492C72.7935 8.46557 74.7017 7.11475 76.8485 7.11475C79.1371 7.11475 80.7358 9.03475 80.8341 11.0492H72.4315Z" fill="#ffffff"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M64.9587 11.3115L69.5397 7.18557C69.958 6.81574 70.0079 6.27541 69.6879 5.93049C69.343 5.56066 68.8262 5.66033 68.4577 6.00393L62.2321 11.8452V0.935082C62.2321 0.368525 61.9856 0 61.4689 0C60.9023 0 60.6321 0.368525 60.6321 0.935082V17.2984C60.6321 17.84 60.9521 18.2098 61.4689 18.2098C61.9357 18.2098 62.2321 17.84 62.2321 17.2984V13.7705L63.8269 12.3279L68.8525 17.9134C69.1725 18.2584 69.7141 18.3816 70.0577 18.0616C70.4511 17.6931 70.3292 17.2 70.0341 16.8564L64.9587 11.3115Z" fill="#ffffff"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M57.7285 14.3213C57.5069 14.3213 57.2616 14.4932 57.1135 14.6899C56.4249 15.6013 54.9482 16.6833 53.2997 16.6833C50.838 16.6833 48.7226 14.7397 48.7226 11.9345C48.7226 8.9325 50.838 7.13578 53.2997 7.13578C55.0951 7.13578 56.08 7.99742 56.9167 9.00594C56.9923 9.10609 57.0886 9.18874 57.1991 9.24827C57.3095 9.30779 57.4315 9.34279 57.5567 9.35086C57.9253 9.35086 58.2951 9.08069 58.2951 8.71086C58.2951 8.4407 58.122 8.16922 57.9751 7.94758C56.9653 6.49578 55.2682 5.65906 53.2997 5.65906C51.6427 5.66808 50.0569 6.33372 48.8899 7.51006C47.7229 8.6864 47.0699 10.2775 47.0741 11.9345C47.0741 15.3548 49.8794 18.2099 53.2997 18.2099C55.4151 18.2099 57.2341 16.9784 58.1954 15.6997C58.353 15.5215 58.4483 15.2969 58.4669 15.0597C58.4708 14.9617 58.4543 14.864 58.4186 14.7726C58.3829 14.6813 58.3286 14.5983 58.2593 14.529C58.1899 14.4596 58.1069 14.4054 58.0156 14.3697C57.9243 14.3339 57.8265 14.3175 57.7285 14.3213Z" fill="#ffffff"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M39.3718 16.6833C36.8367 16.6833 34.7213 14.543 34.7213 11.9344C34.7213 9.30099 36.8367 7.11083 39.3718 7.11083C41.9554 7.11083 44.0223 9.30099 44.0223 11.9344C44.0223 14.543 41.9554 16.6833 39.3718 16.6833ZM39.4203 5.58558C38.5873 5.58401 37.7622 5.74734 36.9927 6.06615C36.2231 6.38496 35.5242 6.85295 34.9363 7.44314C34.3485 8.03332 33.8832 8.73403 33.5674 9.50487C33.2517 10.2757 33.0916 11.1014 33.0964 11.9344C33.0964 15.4046 35.8505 18.2098 39.4203 18.2098C42.7672 18.2098 45.6708 15.4046 45.6708 11.9344C45.6708 8.46427 42.7423 5.58558 39.4203 5.58558Z" fill="#ffffff"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M25.419 16.6832C22.8852 16.6832 20.7685 14.5429 20.7685 11.9344C20.7685 9.30095 22.8852 7.11079 25.419 7.11079C28.0026 7.11079 30.0695 9.30095 30.0695 11.9344C30.0695 14.5429 28.0026 16.6832 25.419 16.6832ZM25.4426 5.58554C23.5226 5.58554 21.8255 6.66882 20.619 8.12063L20.5704 6.39735C20.5455 5.78226 20.2504 5.48718 19.8072 5.48718C19.3403 5.48718 19.0203 5.85702 19.0203 6.37374V23.1606C19.0145 23.2699 19.0313 23.3792 19.0697 23.4817C19.1081 23.5842 19.1673 23.6777 19.2435 23.7562C19.3197 23.8348 19.4113 23.8967 19.5126 23.9382C19.6139 23.9797 19.7227 23.9998 19.8321 23.9973C20.3239 23.9973 20.619 23.6275 20.619 23.1357V15.798C21.8255 17.2249 23.5226 18.2098 25.4426 18.2098C26.2662 18.2123 27.0822 18.0514 27.8434 17.7366C28.6045 17.4218 29.2958 16.9593 29.8771 16.3758C30.4584 15.7923 30.9183 15.0993 31.2303 14.337C31.5422 13.5746 31.6999 12.7581 31.6944 11.9344C31.6944 8.46423 28.9403 5.58554 25.4439 5.58554" fill="#ffffff"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="90.8852" height="24" fill="white"/>
-</clipPath>
-</defs>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 91 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g>
+        <rect x="2.51" y="8.703" width="9.226" height="6.26" style="fill:white;"/>
+        <path d="M12.721,5.709L1.353,5.709C1.179,5.705 1.005,5.736 0.843,5.799C0.68,5.863 0.531,5.958 0.406,6.079C0.28,6.2 0.179,6.345 0.11,6.505C0.04,6.665 0.003,6.838 0,7.012L0,11.221C0,15.035 3.148,18.21 7.037,18.21C8.89,18.204 10.665,17.466 11.976,16.157C13.286,14.848 14.025,13.073 14.033,11.221L14.033,7.012C14.034,6.84 14,6.67 13.935,6.511C13.869,6.352 13.772,6.207 13.65,6.086C13.528,5.965 13.383,5.869 13.224,5.804C13.064,5.739 12.893,5.707 12.721,5.709ZM11.024,10.926L7.677,14.073C7.595,14.16 7.495,14.229 7.385,14.275C7.275,14.322 7.157,14.346 7.037,14.345C6.91,14.348 6.784,14.326 6.665,14.279C6.547,14.233 6.44,14.163 6.349,14.073L3.052,10.926C2.874,10.741 2.775,10.494 2.775,10.237C2.775,9.98 2.874,9.733 3.052,9.548C3.42,9.203 4.035,9.154 4.405,9.548L7.037,12.083L9.719,9.548C10.064,9.154 10.679,9.203 11.031,9.548C11.197,9.739 11.289,9.983 11.289,10.237C11.289,10.49 11.197,10.735 11.031,10.926L11.024,10.926Z" style="fill:rgb(239,64,86);"/>
+        <path d="M90.161,15.823C89.924,15.84 89.699,15.935 89.521,16.093C89.176,16.388 88.758,16.683 88.168,16.683C87.159,16.683 86.594,16.068 86.594,14.666L86.594,7.082L89.719,7.13C90.163,7.13 90.458,6.86 90.458,6.442C90.458,5.999 90.163,5.728 89.719,5.728L86.594,5.752L86.594,3.224C86.594,2.732 86.249,2.387 85.831,2.387C85.722,2.387 85.614,2.408 85.514,2.451C85.414,2.493 85.323,2.555 85.247,2.633C85.172,2.711 85.112,2.804 85.073,2.905C85.034,3.007 85.016,3.115 85.019,3.224L85.019,5.757L83.691,5.734C83.595,5.728 83.5,5.742 83.41,5.775C83.321,5.809 83.24,5.861 83.172,5.929C83.105,5.997 83.052,6.078 83.019,6.167C82.985,6.256 82.971,6.352 82.977,6.447C82.976,6.54 82.993,6.632 83.029,6.718C83.064,6.804 83.117,6.882 83.184,6.946C83.251,7.011 83.331,7.061 83.418,7.094C83.505,7.126 83.598,7.141 83.691,7.136L85.018,7.082L85.018,14.715C85.018,17.102 86.47,18.21 88.143,18.21C88.581,18.222 89.018,18.142 89.424,17.977C89.83,17.812 90.198,17.564 90.504,17.25C90.677,17.053 90.849,16.831 90.849,16.536C90.855,16.443 90.843,16.349 90.811,16.261C90.779,16.173 90.729,16.093 90.664,16.026C90.599,15.958 90.52,15.905 90.434,15.871C90.347,15.836 90.254,15.819 90.16,15.823" style="fill:white;"/>
+        <path d="M82.484,11.246C82.484,8.492 80.072,5.586 76.845,5.586C73.35,5.586 70.742,8.471 70.742,11.934C70.742,15.398 73.399,18.21 76.87,18.21C78.592,18.21 80.265,17.57 81.372,16.487C81.618,16.241 81.815,15.97 81.815,15.7C81.821,15.604 81.807,15.509 81.773,15.419C81.74,15.33 81.687,15.249 81.62,15.182C81.552,15.114 81.471,15.062 81.382,15.028C81.293,14.994 81.197,14.98 81.102,14.986C80.847,14.991 80.602,15.086 80.412,15.256C79.378,16.167 78.321,16.683 76.871,16.683C74.611,16.683 72.595,14.964 72.386,12.401L81.173,12.401C82.016,12.401 82.484,11.959 82.484,11.246ZM72.432,11.049C72.794,8.466 74.702,7.115 76.849,7.115C79.137,7.115 80.736,9.035 80.834,11.049L72.432,11.049Z" style="fill:white;"/>
+        <path d="M64.959,11.312L69.54,7.186C69.958,6.816 70.008,6.275 69.688,5.93C69.343,5.561 68.826,5.66 68.458,6.004L62.232,11.845L62.232,0.935C62.232,0.369 61.986,0 61.469,0C60.902,0 60.632,0.369 60.632,0.935L60.632,17.298C60.632,17.84 60.952,18.21 61.469,18.21C61.936,18.21 62.232,17.84 62.232,17.298L62.232,13.771L63.827,12.328L68.853,17.913C69.173,18.258 69.714,18.382 70.058,18.062C70.451,17.693 70.329,17.2 70.034,16.856L64.959,11.312Z" style="fill:white;"/>
+        <path d="M57.728,14.321C57.507,14.321 57.262,14.493 57.114,14.69C56.425,15.601 54.948,16.683 53.3,16.683C50.838,16.683 48.723,14.74 48.723,11.935C48.723,8.932 50.838,7.136 53.3,7.136C55.095,7.136 56.08,7.997 56.917,9.006C56.992,9.106 57.089,9.189 57.199,9.248C57.31,9.308 57.432,9.343 57.557,9.351C57.925,9.351 58.295,9.081 58.295,8.711C58.295,8.441 58.122,8.169 57.975,7.948C56.965,6.496 55.268,5.659 53.3,5.659C51.643,5.668 50.057,6.334 48.89,7.51C47.723,8.686 47.07,10.278 47.074,11.935C47.074,15.355 49.879,18.21 53.3,18.21C55.415,18.21 57.234,16.978 58.195,15.7C58.353,15.522 58.448,15.297 58.467,15.06C58.471,14.962 58.454,14.864 58.419,14.773C58.383,14.681 58.329,14.598 58.259,14.529C58.19,14.46 58.107,14.405 58.016,14.37C57.924,14.334 57.827,14.318 57.728,14.321Z" style="fill:white;"/>
+        <path d="M39.372,16.683C36.837,16.683 34.721,14.543 34.721,11.934C34.721,9.301 36.837,7.111 39.372,7.111C41.955,7.111 44.022,9.301 44.022,11.934C44.022,14.543 41.955,16.683 39.372,16.683ZM39.42,5.586C38.587,5.584 37.762,5.747 36.993,6.066C36.223,6.385 35.524,6.853 34.936,7.443C34.349,8.033 33.883,8.734 33.567,9.505C33.252,10.276 33.092,11.101 33.096,11.934C33.096,15.405 35.85,18.21 39.42,18.21C42.767,18.21 45.671,15.405 45.671,11.934C45.671,8.464 42.742,5.586 39.42,5.586Z" style="fill:white;"/>
+        <path d="M25.419,16.683C22.885,16.683 20.769,14.543 20.769,11.934C20.769,9.301 22.885,7.111 25.419,7.111C28.003,7.111 30.07,9.301 30.07,11.934C30.07,14.543 28.003,16.683 25.419,16.683ZM25.443,5.586C23.523,5.586 21.826,6.669 20.619,8.121L20.57,6.397C20.546,5.782 20.25,5.487 19.807,5.487C19.34,5.487 19.02,5.857 19.02,6.374L19.02,23.161C19.015,23.27 19.031,23.379 19.07,23.482C19.108,23.584 19.167,23.678 19.244,23.756C19.32,23.835 19.411,23.897 19.513,23.938C19.614,23.98 19.723,24 19.832,23.997C20.324,23.997 20.619,23.628 20.619,23.136L20.619,15.798C21.826,17.225 23.523,18.21 25.443,18.21C26.266,18.212 27.082,18.051 27.843,17.737C28.605,17.422 29.296,16.959 29.877,16.376C30.458,15.792 30.918,15.099 31.23,14.337C31.542,13.575 31.7,12.758 31.694,11.934C31.694,8.464 28.94,5.586 25.444,5.586" style="fill:white;"/>
+    </g>
 </svg>
diff --git a/browser/components/pocket/content/panels/js/components/Header/Header.scss b/browser/components/pocket/content/panels/js/components/Header/Header.scss
index 0ca8ed1742f4..f6e4eca9d55d 100644
--- a/browser/components/pocket/content/panels/js/components/Header/Header.scss
+++ b/browser/components/pocket/content/panels/js/components/Header/Header.scss
@@ -12,7 +12,7 @@
     width: 121px;
 
     @include theme_dark {
-      background: url(../img/pocketlogo-dark.svg) bottom center no-repeat;
+      background-image: url(../img/pocketlogo-dark.svg);
     }
   }
 
diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css
index cfaf0e91736f..89c9e63bd5c5 100644
--- a/browser/themes/shared/customizableui/panelUI-shared.css
+++ b/browser/themes/shared/customizableui/panelUI-shared.css
@@ -2009,9 +2009,11 @@ panelview:not([mainview]) #PanelUI-whatsNew-title {
 }
 
 /* Override themes for the Pocket panel, because the Pocket
-   panel doesn't currently support multiple themes. */
-#customizationui-widget-panel[viewId="PanelUI-savetopocket"] {
-  --arrowpanel-background: #fbfbfb;
+   panel currently only supports dark and light themes. */
+@media not (prefers-color-scheme: dark){
+  #customizationui-widget-panel[viewId="PanelUI-savetopocket"] {
+    --arrowpanel-background: #fbfbfb;
+  }
 }
 
 #PanelUI-profiler-content {