From 84bf0fdb0890f707464d59e1579c1f405ad5710b Mon Sep 17 00:00:00 2001
From: jayati <gaurijove@gmail.com>
Date: Fri, 3 Apr 2020 13:15:58 +0000
Subject: [PATCH] Bug 1619314 - Improve visibility of mobile protection icons
 in high contrast mode. r=ntim

Differential Revision: https://phabricator.services.mozilla.com/D68701

--HG--
rename : browser/base/content/logos/etp-mobile-light.svg => browser/base/content/logos/etp-mobile.svg
rename : browser/base/content/logos/lockwise-light.svg => browser/base/content/logos/lockwise-mobile.svg
extra : moz-landing-system : lando
---
 .../base/content/logos/etp-mobile-dark.svg    |  4 --
 .../base/content/logos/etp-mobile-light.svg   |  4 --
 browser/base/content/logos/etp-mobile.svg     | 13 ++++
 browser/base/content/logos/lockwise-dark.svg  |  4 --
 browser/base/content/logos/lockwise-light.svg |  4 --
 .../base/content/logos/lockwise-mobile.svg    | 64 +++++++++++++++++++
 browser/base/jar.mn                           |  8 +--
 .../protections/content/protections.css       | 13 +---
 .../protections/content/protections.html      |  6 +-
 9 files changed, 84 insertions(+), 36 deletions(-)
 delete mode 100644 browser/base/content/logos/etp-mobile-dark.svg
 delete mode 100644 browser/base/content/logos/etp-mobile-light.svg
 create mode 100644 browser/base/content/logos/etp-mobile.svg
 delete mode 100644 browser/base/content/logos/lockwise-dark.svg
 delete mode 100644 browser/base/content/logos/lockwise-light.svg
 create mode 100644 browser/base/content/logos/lockwise-mobile.svg

diff --git a/browser/base/content/logos/etp-mobile-dark.svg b/browser/base/content/logos/etp-mobile-dark.svg
deleted file mode 100644
index 933e54ed4715..000000000000
--- a/browser/base/content/logos/etp-mobile-dark.svg
+++ /dev/null
@@ -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 width="50" height="58" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="13.375%" y1="0%" x2="86.625%" y2="100%" id="a"><stop stop-color="#C689FF" offset="0%"/><stop stop-color="#00B3F4" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M43.542 35.285c.174 1.234.01 1.996-.49 2.285L23.83 48.668c-.75.432-1.745.113-2.225-.718L4.08 17.598c-.478-.828-.258-1.853.491-2.286L23.793 4.215c.752-.434 1.747-.11 2.225.718l17.524 30.352zM33.997 49.68l4.618-2.666-1.616-2.8-4.618 2.667 1.616 2.8zM2.845 11.74c-2.548 1.47-3.17 5.164-1.388 8.249l19.382 33.57c1.781 3.086 5.29 4.394 7.838 2.923l18.487-10.673c2.548-1.471 3.17-5.164 1.388-8.25L29.17 3.989C27.389.903 23.88-.406 21.332 1.065L2.845 11.74z" fill="#D7D7DB"/><path d="M5.5 5.088c0 2.234-.067 3.795 0 4.537.036 2.173.751 4.28 2.045 6.025A5.807 5.807 0 0011 17.857a5.804 5.804 0 003.454-2.207A10.411 10.411 0 0016.5 9.625c.067-.742 0-2.303 0-4.537L11 4.146l-5.5.942zM11 20.633l-.154-.016A8.585 8.585 0 015.33 17.28a12.733 12.733 0 01-2.476-7.269C2.75 8.858 2.75 6.325 2.75 4.916a2.537 2.537 0 012.1-2.506L11 1.354l6.148 1.056a2.537 2.537 0 012.102 2.507c0 1.407 0 3.94-.11 5.094a12.732 12.732 0 01-2.475 7.269 8.585 8.585 0 01-5.516 3.337l-.149.016zm0-14.395l-3.438.589c.013 1.295.042 2.275.086 2.75A7.927 7.927 0 009.2 14.43a3.692 3.692 0 001.788 1.296H11V6.238z" transform="rotate(-30 45.883 -4.83)" fill="url(#a)"/></g></svg>
diff --git a/browser/base/content/logos/etp-mobile-light.svg b/browser/base/content/logos/etp-mobile-light.svg
deleted file mode 100644
index 976cc68544bf..000000000000
--- a/browser/base/content/logos/etp-mobile-light.svg
+++ /dev/null
@@ -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 width="50" height="57" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="13.375%" y1="0%" x2="86.625%" y2="100%" id="a"><stop stop-color="#9059FF" offset="0%"/><stop stop-color="#0250BB" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M43.436 34.835c.173 1.234.01 1.996-.491 2.286L23.723 48.218c-.749.433-1.745.113-2.225-.718L3.975 17.148c-.479-.828-.258-1.853.49-2.285L23.688 3.765c.751-.434 1.747-.11 2.225.718l17.524 30.352zM33.89 49.232l4.619-2.667-1.616-2.8-4.619 2.668 1.616 2.799zM2.738 11.289C.191 12.76-.43 16.453 1.351 19.538l19.382 33.571c1.78 3.085 5.29 4.393 7.838 2.923l18.487-10.674c2.547-1.47 3.169-5.164 1.388-8.249L29.063 3.538C27.283.453 23.773-.855 21.226.615L2.738 11.29z" fill-opacity=".8" fill="#0C0C0D"/><path d="M5.5 5.088c0 2.234-.067 3.795 0 4.537.036 2.173.751 4.28 2.045 6.025A5.807 5.807 0 0011 17.857a5.804 5.804 0 003.454-2.207A10.411 10.411 0 0016.5 9.625c.067-.742 0-2.303 0-4.537L11 4.146l-5.5.942zM11 20.633l-.154-.016A8.585 8.585 0 015.33 17.28a12.733 12.733 0 01-2.476-7.269C2.75 8.858 2.75 6.325 2.75 4.916a2.537 2.537 0 012.1-2.506L11 1.354l6.148 1.056a2.537 2.537 0 012.102 2.507c0 1.407 0 3.94-.11 5.094a12.732 12.732 0 01-2.475 7.269 8.585 8.585 0 01-5.516 3.337l-.149.016zm0-14.395l-3.438.589c.013 1.295.042 2.275.086 2.75A7.927 7.927 0 009.2 14.43a3.692 3.692 0 001.788 1.296H11V6.238z" transform="rotate(-30 44.99 -4.856)" fill="url(#a)"/></g></svg>
diff --git a/browser/base/content/logos/etp-mobile.svg b/browser/base/content/logos/etp-mobile.svg
new file mode 100644
index 000000000000..dfb6eed9c514
--- /dev/null
+++ b/browser/base/content/logos/etp-mobile.svg
@@ -0,0 +1,13 @@
+<!-- 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="50" height="57">
+  <defs>
+    <linearGradient id="a" x1="13.375%" x2="86.625%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#9059FF"/>
+      <stop offset="100%" stop-color="#0250BB"/>
+    </linearGradient>
+  </defs>
+  <path fill="context-fill" fill-opacity=".8" fill-rule="evenodd" d="M43.436 34.835c.173 1.234.01 1.996-.491 2.286L23.723 48.218c-.749.433-1.745.113-2.225-.718L3.975 17.148c-.479-.828-.258-1.853.49-2.285L23.688 3.765c.751-.434 1.747-.11 2.225.718l17.524 30.352zM33.89 49.232l4.619-2.667-1.616-2.8-4.619 2.668 1.616 2.799zM2.738 11.289C.191 12.76-.43 16.453 1.351 19.538l19.382 33.571c1.78 3.085 5.29 4.393 7.838 2.923l18.487-10.674c2.547-1.47 3.169-5.164 1.388-8.249L29.063 3.538C27.283.453 23.773-.855 21.226.615L2.738 11.29z"/>
+  <path fill="url(#a)" d="M15.763 23.5c1.117 1.935 1.84 3.32 2.268 3.93a10.404 10.404 0 0 0 4.784 4.195 5.807 5.807 0 0 0 4.095.184 5.804 5.804 0 0 0 1.888-3.638 10.411 10.411 0 0 0-1.24-6.241c-.314-.676-1.152-1.995-2.27-3.93l-5.233 1.935-4.292 3.566zm12.535 10.713l-.141.063a8.585 8.585 0 0 1-6.446-.132 12.733 12.733 0 0 1-5.778-5.057c-.667-.946-1.933-3.14-2.638-4.36a2.537 2.537 0 0 1 .566-3.22l4.798-3.99 5.852-2.16a2.537 2.537 0 0 1 3.074 1.12c.704 1.22 1.97 3.413 2.452 4.467a12.732 12.732 0 0 1 1.49 7.533 8.585 8.585 0 0 1-3.108 5.648l-.12.088zm-7.197-12.466l-2.683 2.229c.659 1.115 1.174 1.949 1.45 2.338a7.927 7.927 0 0 0 3.77 3.427 3.692 3.692 0 0 0 2.196.229l.01-.006-4.743-8.217z"/>
+</svg>
diff --git a/browser/base/content/logos/lockwise-dark.svg b/browser/base/content/logos/lockwise-dark.svg
deleted file mode 100644
index b00c95741216..000000000000
--- a/browser/base/content/logos/lockwise-dark.svg
+++ /dev/null
@@ -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 width="50" height="58" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="71.971%" y1="11.845%" x2="26.855%" y2="90.324%" id="a"><stop stop-color="#FF980E" offset="0%"/><stop stop-color="#FF851B" offset="11%"/><stop stop-color="#FF3750" offset="57%"/><stop stop-color="#F92261" offset="80%"/><stop stop-color="#F5156C" offset="100%"/></linearGradient><linearGradient x1="71.573%" y1="-.991%" x2="34.706%" y2="86.287%" id="b"><stop stop-color="#FFF261" stop-opacity=".8" offset="0%"/><stop stop-color="#FFF261" stop-opacity=".68" offset="6%"/><stop stop-color="#FFF261" stop-opacity=".48" offset="19%"/><stop stop-color="#FFF261" stop-opacity=".31" offset="31%"/><stop stop-color="#FFF261" stop-opacity=".17" offset="42%"/><stop stop-color="#FFF261" stop-opacity=".08" offset="53%"/><stop stop-color="#FFF261" stop-opacity=".02" offset="63%"/><stop stop-color="#FFF261" stop-opacity="0" offset="72%"/></linearGradient><linearGradient x1="50.51%" y1="200.063%" x2="50.51%" y2="-34.412%" id="c"><stop stop-color="#0090ED" offset="0%"/><stop stop-color="#9059FF" offset="50%"/><stop stop-color="#B833E1" offset="81%"/></linearGradient><linearGradient x1="24.563%" y1="80.696%" x2="79.944%" y2="4.059%" id="d"><stop stop-color="#0090ED" offset="2%"/><stop stop-color="#9059FF" offset="49%"/><stop stop-color="#B833E1" offset="100%"/></linearGradient><linearGradient x1="68.874%" y1="81.415%" x2="32.528%" y2="18.585%" id="e"><stop stop-color="#592ACB" stop-opacity="0" offset="14%"/><stop stop-color="#542BC8" stop-opacity=".03" offset="33%"/><stop stop-color="#462FBF" stop-opacity=".11" offset="53%"/><stop stop-color="#2F35B1" stop-opacity=".25" offset="74%"/><stop stop-color="#0F3D9C" stop-opacity=".44" offset="95%"/><stop stop-color="#054096" stop-opacity=".5" offset="100%"/></linearGradient><linearGradient x1="62.189%" y1="16.96%" x2="36.167%" y2="93.672%" id="f"><stop stop-color="#722291" stop-opacity=".5" offset="0%"/><stop stop-color="#B833E1" stop-opacity="0" offset="50%"/></linearGradient><linearGradient x1="86.967%" y1="8.374%" x2="37.025%" y2="60.939%" id="g"><stop stop-color="#054096" stop-opacity=".5" offset="0%"/><stop stop-color="#0F3D9C" stop-opacity=".44" offset="3%"/><stop stop-color="#2F35B1" stop-opacity=".25" offset="17%"/><stop stop-color="#462FBF" stop-opacity=".11" offset="30%"/><stop stop-color="#542BC8" stop-opacity=".03" offset="43%"/><stop stop-color="#592ACB" stop-opacity="0" offset="56%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M43.537 35.343c.174 1.235.01 1.997-.49 2.286L23.825 48.727c-.749.432-1.745.113-2.225-.718L4.076 17.657c-.478-.828-.258-1.853.491-2.286L23.79 4.274c.751-.434 1.747-.11 2.225.717l17.523 30.352zM33.992 49.74l4.619-2.666-1.616-2.8-4.619 2.667 1.616 2.8zM2.84 11.798c-2.547 1.47-3.169 5.164-1.388 8.249l19.383 33.57c1.78 3.086 5.29 4.394 7.837 2.923L47.16 45.867c2.547-1.471 3.169-5.164 1.388-8.25L29.165 4.048c-1.78-3.085-5.29-4.394-7.837-2.923L2.84 11.798z" fill="#D7D7DB"/><g fill-rule="nonzero"><path d="M20.476 8.09A83.755 83.755 0 0013.348.95a4.136 4.136 0 00-5.273 0A83.756 83.756 0 00.947 8.094a4.157 4.157 0 000 5.282 83.755 83.755 0 007.131 7.142 3.977 3.977 0 002.635.947 3.993 3.993 0 002.646-.955 84.445 84.445 0 003.663-3.506 1.196 1.196 0 00-.091-1.64l-3.54-3.308a4.076 4.076 0 001.36-3.22 4.128 4.128 0 00-3.856-3.927 4.066 4.066 0 00-3.042 1.116 4.103 4.103 0 00.08 6.031l-1.28 1.162a1.037 1.037 0 00-.062 1.448c.376.42 1.018.46 1.444.092l1.417-1.288.037-.035c.384-.385.589-.913.565-1.457a1.97 1.97 0 00-.68-1.419 2.036 2.036 0 01-.598-2.252 2.03 2.03 0 013.813 0 2.036 2.036 0 01-.599 2.252 1.984 1.984 0 00-.701 1.428c-.021.54.183 1.065.565 1.448l.024.024 2.972 2.79c-.91.905-1.858 1.8-2.868 2.718a2.11 2.11 0 01-2.533 0 82.378 82.378 0 01-6.962-6.975 2.125 2.125 0 010-2.538 81.622 81.622 0 016.962-6.976 2.11 2.11 0 012.53 0 81.622 81.622 0 016.963 6.976 2.12 2.12 0 010 2.535c-.357.403-.713.805-1.071 1.173a1.035 1.035 0 00.06 1.46 1.03 1.03 0 001.458-.06c.353-.384.717-.786 1.07-1.2a4.157 4.157 0 00.017-5.271z" fill="url(#a)" transform="rotate(-30 45.49 -5.758)"/><path d="M20.476 8.09A83.755 83.755 0 0013.348.95a4.136 4.136 0 00-5.273 0A83.756 83.756 0 00.947 8.094a4.157 4.157 0 000 5.282 83.755 83.755 0 007.131 7.142 3.977 3.977 0 002.635.947 3.993 3.993 0 002.646-.955 84.445 84.445 0 003.663-3.506 1.196 1.196 0 00-.091-1.64l-3.54-3.308a4.076 4.076 0 001.36-3.22 4.128 4.128 0 00-3.856-3.927 4.066 4.066 0 00-3.042 1.116 4.103 4.103 0 00.08 6.031l-1.28 1.162a1.037 1.037 0 00-.062 1.448c.376.42 1.018.46 1.444.092l1.417-1.288.037-.035c.384-.385.589-.913.565-1.457a1.97 1.97 0 00-.68-1.419 2.036 2.036 0 01-.598-2.252 2.03 2.03 0 013.813 0 2.036 2.036 0 01-.599 2.252 1.984 1.984 0 00-.701 1.428c-.021.54.183 1.065.565 1.448l.024.024 2.972 2.79c-.91.905-1.858 1.8-2.868 2.718a2.11 2.11 0 01-2.533 0 82.378 82.378 0 01-6.962-6.975 2.125 2.125 0 010-2.538 81.622 81.622 0 016.962-6.976 2.11 2.11 0 012.53 0 81.622 81.622 0 016.963 6.976 2.12 2.12 0 010 2.535c-.357.403-.713.805-1.071 1.173a1.035 1.035 0 00.06 1.46 1.03 1.03 0 001.458-.06c.353-.384.717-.786 1.07-1.2a4.157 4.157 0 00.017-5.271z" fill="url(#b)" transform="rotate(-30 45.49 -5.758)"/><path d="M18.93 9.465a2.12 2.12 0 010 2.535c-.355.402-.711.805-1.07 1.172a1.035 1.035 0 00.533 1.71c.36.08.735-.037.985-.31.354-.383.718-.785 1.071-1.198 1.29-1.43-1.518-3.91-1.518-3.91z" fill="url(#c)" transform="rotate(-30 45.49 -5.758)"/><path d="M14.85 16.25c-.91.904-1.858 1.8-2.868 2.717a2.11 2.11 0 01-2.533 0 82.378 82.378 0 01-6.962-6.975 2.125 2.125 0 010-2.538l-.469.536a3.463 3.463 0 00.056 4.634 83.038 83.038 0 006.004 5.894 3.977 3.977 0 002.635.947 3.993 3.993 0 002.646-.955c.747-.676 1.577-1.457 2.321-2.176a.905.905 0 000-1.304l-.83-.78z" fill="url(#d)" transform="rotate(-30 45.49 -5.758)"/><path d="M2.085 14.632c.782.85 1.561 1.663 2.36 2.457l.318-.52c.268-.427.535-.845.822-1.264a91.046 91.046 0 01-3.09-3.3 2.125 2.125 0 010-2.538l-.469.537a3.463 3.463 0 00.048 4.62l.011.008z" fill="url(#e)" opacity=".9" transform="rotate(-30 45.49 -5.758)"/><path d="M18.93 9.465a2.12 2.12 0 010 2.535c-.355.402-.711.805-1.07 1.172a1.035 1.035 0 00.533 1.71c.36.08.735-.037.985-.31.354-.383.718-.785 1.071-1.198 1.29-1.43-1.518-3.91-1.518-3.91z" fill="url(#f)" transform="rotate(-30 45.49 -5.758)"/><path d="M15.67 17.03l-.82-.78a86.49 86.49 0 01-2.87 2.717c-.462.357-1.052.5-1.626.398v2.084c.118 0 .236.016.356.016a3.993 3.993 0 002.646-.955c.747-.676 1.577-1.457 2.321-2.176a.902.902 0 00-.008-1.304z" fill="url(#g)" opacity=".9" transform="rotate(-30 45.49 -5.758)"/></g></g></svg>
diff --git a/browser/base/content/logos/lockwise-light.svg b/browser/base/content/logos/lockwise-light.svg
deleted file mode 100644
index 3bafe18f91b7..000000000000
--- a/browser/base/content/logos/lockwise-light.svg
+++ /dev/null
@@ -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 width="50" height="58" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="71.971%" y1="11.845%" x2="26.855%" y2="90.324%" id="a"><stop stop-color="#FF980E" offset="0%"/><stop stop-color="#FF851B" offset="11%"/><stop stop-color="#FF3750" offset="57%"/><stop stop-color="#F92261" offset="80%"/><stop stop-color="#F5156C" offset="100%"/></linearGradient><linearGradient x1="71.573%" y1="-.991%" x2="34.706%" y2="86.287%" id="b"><stop stop-color="#FFF261" stop-opacity=".8" offset="0%"/><stop stop-color="#FFF261" stop-opacity=".68" offset="6%"/><stop stop-color="#FFF261" stop-opacity=".48" offset="19%"/><stop stop-color="#FFF261" stop-opacity=".31" offset="31%"/><stop stop-color="#FFF261" stop-opacity=".17" offset="42%"/><stop stop-color="#FFF261" stop-opacity=".08" offset="53%"/><stop stop-color="#FFF261" stop-opacity=".02" offset="63%"/><stop stop-color="#FFF261" stop-opacity="0" offset="72%"/></linearGradient><linearGradient x1="50.51%" y1="200.063%" x2="50.51%" y2="-34.412%" id="c"><stop stop-color="#0090ED" offset="0%"/><stop stop-color="#9059FF" offset="50%"/><stop stop-color="#B833E1" offset="81%"/></linearGradient><linearGradient x1="24.563%" y1="80.696%" x2="79.944%" y2="4.059%" id="d"><stop stop-color="#0090ED" offset="2%"/><stop stop-color="#9059FF" offset="49%"/><stop stop-color="#B833E1" offset="100%"/></linearGradient><linearGradient x1="68.874%" y1="81.415%" x2="32.528%" y2="18.585%" id="e"><stop stop-color="#592ACB" stop-opacity="0" offset="14%"/><stop stop-color="#542BC8" stop-opacity=".03" offset="33%"/><stop stop-color="#462FBF" stop-opacity=".11" offset="53%"/><stop stop-color="#2F35B1" stop-opacity=".25" offset="74%"/><stop stop-color="#0F3D9C" stop-opacity=".44" offset="95%"/><stop stop-color="#054096" stop-opacity=".5" offset="100%"/></linearGradient><linearGradient x1="62.189%" y1="16.96%" x2="36.167%" y2="93.672%" id="f"><stop stop-color="#722291" stop-opacity=".5" offset="0%"/><stop stop-color="#B833E1" stop-opacity="0" offset="50%"/></linearGradient><linearGradient x1="86.967%" y1="8.374%" x2="37.025%" y2="60.939%" id="g"><stop stop-color="#054096" stop-opacity=".5" offset="0%"/><stop stop-color="#0F3D9C" stop-opacity=".44" offset="3%"/><stop stop-color="#2F35B1" stop-opacity=".25" offset="17%"/><stop stop-color="#462FBF" stop-opacity=".11" offset="30%"/><stop stop-color="#542BC8" stop-opacity=".03" offset="43%"/><stop stop-color="#592ACB" stop-opacity="0" offset="56%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M43.537 35.343c.174 1.235.01 1.997-.49 2.286L23.825 48.727c-.749.432-1.745.113-2.225-.718L4.076 17.657c-.478-.828-.258-1.853.491-2.286L23.79 4.274c.751-.434 1.747-.11 2.225.717l17.523 30.352zM33.992 49.74l4.619-2.666-1.616-2.8-4.619 2.667 1.616 2.8zM2.84 11.798c-2.547 1.47-3.169 5.164-1.388 8.249l19.383 33.57c1.78 3.086 5.29 4.394 7.837 2.923L47.16 45.867c2.547-1.471 3.169-5.164 1.388-8.25L29.165 4.048c-1.78-3.085-5.29-4.394-7.837-2.923L2.84 11.798z" fill-opacity=".8" fill="#0C0C0D"/><g fill-rule="nonzero"><path d="M20.476 8.09A83.755 83.755 0 0013.348.95a4.136 4.136 0 00-5.273 0A83.756 83.756 0 00.947 8.094a4.157 4.157 0 000 5.282 83.755 83.755 0 007.131 7.142 3.977 3.977 0 002.635.947 3.993 3.993 0 002.646-.955 84.445 84.445 0 003.663-3.506 1.196 1.196 0 00-.091-1.64l-3.54-3.308a4.076 4.076 0 001.36-3.22 4.128 4.128 0 00-3.856-3.927 4.066 4.066 0 00-3.042 1.116 4.103 4.103 0 00.08 6.031l-1.28 1.162a1.037 1.037 0 00-.062 1.448c.376.42 1.018.46 1.444.092l1.417-1.288.037-.035c.384-.385.589-.913.565-1.457a1.97 1.97 0 00-.68-1.419 2.036 2.036 0 01-.598-2.252 2.03 2.03 0 013.813 0 2.036 2.036 0 01-.599 2.252 1.984 1.984 0 00-.701 1.428c-.021.54.183 1.065.565 1.448l.024.024 2.972 2.79c-.91.905-1.858 1.8-2.868 2.718a2.11 2.11 0 01-2.533 0 82.378 82.378 0 01-6.962-6.975 2.125 2.125 0 010-2.538 81.622 81.622 0 016.962-6.976 2.11 2.11 0 012.53 0 81.622 81.622 0 016.963 6.976 2.12 2.12 0 010 2.535c-.357.403-.713.805-1.071 1.173a1.035 1.035 0 00.06 1.46 1.03 1.03 0 001.458-.06c.353-.384.717-.786 1.07-1.2a4.157 4.157 0 00.017-5.271z" fill="url(#a)" transform="rotate(-30 45.49 -5.758)"/><path d="M20.476 8.09A83.755 83.755 0 0013.348.95a4.136 4.136 0 00-5.273 0A83.756 83.756 0 00.947 8.094a4.157 4.157 0 000 5.282 83.755 83.755 0 007.131 7.142 3.977 3.977 0 002.635.947 3.993 3.993 0 002.646-.955 84.445 84.445 0 003.663-3.506 1.196 1.196 0 00-.091-1.64l-3.54-3.308a4.076 4.076 0 001.36-3.22 4.128 4.128 0 00-3.856-3.927 4.066 4.066 0 00-3.042 1.116 4.103 4.103 0 00.08 6.031l-1.28 1.162a1.037 1.037 0 00-.062 1.448c.376.42 1.018.46 1.444.092l1.417-1.288.037-.035c.384-.385.589-.913.565-1.457a1.97 1.97 0 00-.68-1.419 2.036 2.036 0 01-.598-2.252 2.03 2.03 0 013.813 0 2.036 2.036 0 01-.599 2.252 1.984 1.984 0 00-.701 1.428c-.021.54.183 1.065.565 1.448l.024.024 2.972 2.79c-.91.905-1.858 1.8-2.868 2.718a2.11 2.11 0 01-2.533 0 82.378 82.378 0 01-6.962-6.975 2.125 2.125 0 010-2.538 81.622 81.622 0 016.962-6.976 2.11 2.11 0 012.53 0 81.622 81.622 0 016.963 6.976 2.12 2.12 0 010 2.535c-.357.403-.713.805-1.071 1.173a1.035 1.035 0 00.06 1.46 1.03 1.03 0 001.458-.06c.353-.384.717-.786 1.07-1.2a4.157 4.157 0 00.017-5.271z" fill="url(#b)" transform="rotate(-30 45.49 -5.758)"/><path d="M18.93 9.465a2.12 2.12 0 010 2.535c-.355.402-.711.805-1.07 1.172a1.035 1.035 0 00.533 1.71c.36.08.735-.037.985-.31.354-.383.718-.785 1.071-1.198 1.29-1.43-1.518-3.91-1.518-3.91z" fill="url(#c)" transform="rotate(-30 45.49 -5.758)"/><path d="M14.85 16.25c-.91.904-1.858 1.8-2.868 2.717a2.11 2.11 0 01-2.533 0 82.378 82.378 0 01-6.962-6.975 2.125 2.125 0 010-2.538l-.469.536a3.463 3.463 0 00.056 4.634 83.038 83.038 0 006.004 5.894 3.977 3.977 0 002.635.947 3.993 3.993 0 002.646-.955c.747-.676 1.577-1.457 2.321-2.176a.905.905 0 000-1.304l-.83-.78z" fill="url(#d)" transform="rotate(-30 45.49 -5.758)"/><path d="M2.085 14.632c.782.85 1.561 1.663 2.36 2.457l.318-.52c.268-.427.535-.845.822-1.264a91.046 91.046 0 01-3.09-3.3 2.125 2.125 0 010-2.538l-.469.537a3.463 3.463 0 00.048 4.62l.011.008z" fill="url(#e)" opacity=".9" transform="rotate(-30 45.49 -5.758)"/><path d="M18.93 9.465a2.12 2.12 0 010 2.535c-.355.402-.711.805-1.07 1.172a1.035 1.035 0 00.533 1.71c.36.08.735-.037.985-.31.354-.383.718-.785 1.071-1.198 1.29-1.43-1.518-3.91-1.518-3.91z" fill="url(#f)" transform="rotate(-30 45.49 -5.758)"/><path d="M15.67 17.03l-.82-.78a86.49 86.49 0 01-2.87 2.717c-.462.357-1.052.5-1.626.398v2.084c.118 0 .236.016.356.016a3.993 3.993 0 002.646-.955c.747-.676 1.577-1.457 2.321-2.176a.902.902 0 00-.008-1.304z" fill="url(#g)" opacity=".9" transform="rotate(-30 45.49 -5.758)"/></g></g></svg>
diff --git a/browser/base/content/logos/lockwise-mobile.svg b/browser/base/content/logos/lockwise-mobile.svg
new file mode 100644
index 000000000000..ee0a1e665059
--- /dev/null
+++ b/browser/base/content/logos/lockwise-mobile.svg
@@ -0,0 +1,64 @@
+<!-- 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 width="50" height="58" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient x1="71.971%" y1="11.845%" x2="26.855%" y2="90.324%" id="a">
+      <stop stop-color="#FF980E" offset="0%"/>
+      <stop stop-color="#FF851B" offset="11%"/>
+      <stop stop-color="#FF3750" offset="57%"/>
+      <stop stop-color="#F92261" offset="80%"/>
+      <stop stop-color="#F5156C" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="71.573%" y1="-.991%" x2="34.706%" y2="86.287%" id="b">
+      <stop stop-color="#FFF261" stop-opacity=".8" offset="0%"/>
+      <stop stop-color="#FFF261" stop-opacity=".68" offset="6%"/>
+      <stop stop-color="#FFF261" stop-opacity=".48" offset="19%"/>
+      <stop stop-color="#FFF261" stop-opacity=".31" offset="31%"/>
+      <stop stop-color="#FFF261" stop-opacity=".17" offset="42%"/>
+      <stop stop-color="#FFF261" stop-opacity=".08" offset="53%"/>
+      <stop stop-color="#FFF261" stop-opacity=".02" offset="63%"/>
+      <stop stop-color="#FFF261" stop-opacity="0" offset="72%"/>
+    </linearGradient>
+    <linearGradient x1="50.51%" y1="200.063%" x2="50.51%" y2="-34.412%" id="c">
+      <stop stop-color="#0090ED" offset="0%"/>
+      <stop stop-color="#9059FF" offset="50%"/>
+      <stop stop-color="#B833E1" offset="81%"/>
+    </linearGradient>
+    <linearGradient x1="24.563%" y1="80.696%" x2="79.944%" y2="4.059%" id="d">
+      <stop stop-color="#0090ED" offset="2%"/>
+      <stop stop-color="#9059FF" offset="49%"/>
+      <stop stop-color="#B833E1" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="68.874%" y1="81.415%" x2="32.528%" y2="18.585%" id="e">
+      <stop stop-color="#592ACB" stop-opacity="0" offset="14%"/>
+      <stop stop-color="#542BC8" stop-opacity=".03" offset="33%"/>
+      <stop stop-color="#462FBF" stop-opacity=".11" offset="53%"/>
+      <stop stop-color="#2F35B1" stop-opacity=".25" offset="74%"/>
+      <stop stop-color="#0F3D9C" stop-opacity=".44" offset="95%"/>
+      <stop stop-color="#054096" stop-opacity=".5" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="62.189%" y1="16.96%" x2="36.167%" y2="93.672%" id="f">
+      <stop stop-color="#722291" stop-opacity=".5" offset="0%"/>
+      <stop stop-color="#B833E1" stop-opacity="0" offset="50%"/>
+    </linearGradient>
+    <linearGradient x1="86.967%" y1="8.374%" x2="37.025%" y2="60.939%" id="g">
+      <stop stop-color="#054096" stop-opacity=".5" offset="0%"/>
+      <stop stop-color="#0F3D9C" stop-opacity=".44" offset="3%"/>
+      <stop stop-color="#2F35B1" stop-opacity=".25" offset="17%"/>
+      <stop stop-color="#462FBF" stop-opacity=".11" offset="30%"/>
+      <stop stop-color="#542BC8" stop-opacity=".03" offset="43%"/>
+      <stop stop-color="#592ACB" stop-opacity="0" offset="56%"/>
+    </linearGradient>
+  </defs>
+  <path fill="context-fill" fill-opacity=".8" fill-rule="evenodd" d="M43.537 35.343c.174 1.235.01 1.997-.49 2.286L23.825 48.727c-.749.432-1.745.113-2.225-.718L4.076 17.657c-.478-.828-.258-1.853.491-2.286L23.79 4.274c.751-.434 1.747-.11 2.225.717l17.523 30.352zM33.992 49.74l4.619-2.666-1.616-2.8-4.619 2.667 1.616 2.8zM2.84 11.798c-2.547 1.47-3.169 5.164-1.388 8.249l19.383 33.57c1.78 3.086 5.29 4.394 7.837 2.923L47.16 45.867c2.547-1.471 3.169-5.164 1.388-8.25L29.165 4.048c-1.78-3.085-5.29-4.394-7.837-2.923L2.84 11.798z"/>
+  <g transform="rotate(-30 45.49 -5.758)">
+    <path d="M20.476 8.09A83.755 83.755 0 0013.348.95a4.136 4.136 0 00-5.273 0A83.756 83.756 0 00.947 8.094a4.157 4.157 0 000 5.282 83.755 83.755 0 007.131 7.142 3.977 3.977 0 002.635.947 3.993 3.993 0 002.646-.955 84.445 84.445 0 003.663-3.506 1.196 1.196 0 00-.091-1.64l-3.54-3.308a4.076 4.076 0 001.36-3.22 4.128 4.128 0 00-3.856-3.927 4.066 4.066 0 00-3.042 1.116 4.103 4.103 0 00.08 6.031l-1.28 1.162a1.037 1.037 0 00-.062 1.448c.376.42 1.018.46 1.444.092l1.417-1.288.037-.035c.384-.385.589-.913.565-1.457a1.97 1.97 0 00-.68-1.419 2.036 2.036 0 01-.598-2.252 2.03 2.03 0 013.813 0 2.036 2.036 0 01-.599 2.252 1.984 1.984 0 00-.701 1.428c-.021.54.183 1.065.565 1.448l.024.024 2.972 2.79c-.91.905-1.858 1.8-2.868 2.718a2.11 2.11 0 01-2.533 0 82.378 82.378 0 01-6.962-6.975 2.125 2.125 0 010-2.538 81.622 81.622 0 016.962-6.976 2.11 2.11 0 012.53 0 81.622 81.622 0 016.963 6.976 2.12 2.12 0 010 2.535c-.357.403-.713.805-1.071 1.173a1.035 1.035 0 00.06 1.46 1.03 1.03 0 001.458-.06c.353-.384.717-.786 1.07-1.2a4.157 4.157 0 00.017-5.271z" fill="url(#a)"/>
+    <path d="M20.476 8.09A83.755 83.755 0 0013.348.95a4.136 4.136 0 00-5.273 0A83.756 83.756 0 00.947 8.094a4.157 4.157 0 000 5.282 83.755 83.755 0 007.131 7.142 3.977 3.977 0 002.635.947 3.993 3.993 0 002.646-.955 84.445 84.445 0 003.663-3.506 1.196 1.196 0 00-.091-1.64l-3.54-3.308a4.076 4.076 0 001.36-3.22 4.128 4.128 0 00-3.856-3.927 4.066 4.066 0 00-3.042 1.116 4.103 4.103 0 00.08 6.031l-1.28 1.162a1.037 1.037 0 00-.062 1.448c.376.42 1.018.46 1.444.092l1.417-1.288.037-.035c.384-.385.589-.913.565-1.457a1.97 1.97 0 00-.68-1.419 2.036 2.036 0 01-.598-2.252 2.03 2.03 0 013.813 0 2.036 2.036 0 01-.599 2.252 1.984 1.984 0 00-.701 1.428c-.021.54.183 1.065.565 1.448l.024.024 2.972 2.79c-.91.905-1.858 1.8-2.868 2.718a2.11 2.11 0 01-2.533 0 82.378 82.378 0 01-6.962-6.975 2.125 2.125 0 010-2.538 81.622 81.622 0 016.962-6.976 2.11 2.11 0 012.53 0 81.622 81.622 0 016.963 6.976 2.12 2.12 0 010 2.535c-.357.403-.713.805-1.071 1.173a1.035 1.035 0 00.06 1.46 1.03 1.03 0 001.458-.06c.353-.384.717-.786 1.07-1.2a4.157 4.157 0 00.017-5.271z" fill="url(#b)"/>
+    <path d="M18.93 9.465a2.12 2.12 0 010 2.535c-.355.402-.711.805-1.07 1.172a1.035 1.035 0 00.533 1.71c.36.08.735-.037.985-.31.354-.383.718-.785 1.071-1.198 1.29-1.43-1.518-3.91-1.518-3.91z" fill="url(#c)"/>
+    <path d="M14.85 16.25c-.91.904-1.858 1.8-2.868 2.717a2.11 2.11 0 01-2.533 0 82.378 82.378 0 01-6.962-6.975 2.125 2.125 0 010-2.538l-.469.536a3.463 3.463 0 00.056 4.634 83.038 83.038 0 006.004 5.894 3.977 3.977 0 002.635.947 3.993 3.993 0 002.646-.955c.747-.676 1.577-1.457 2.321-2.176a.905.905 0 000-1.304l-.83-.78z" fill="url(#d)"/>
+    <path d="M2.085 14.632c.782.85 1.561 1.663 2.36 2.457l.318-.52c.268-.427.535-.845.822-1.264a91.046 91.046 0 01-3.09-3.3 2.125 2.125 0 010-2.538l-.469.537a3.463 3.463 0 00.048 4.62l.011.008z" fill="url(#e)" opacity=".9"/>
+    <path d="M18.93 9.465a2.12 2.12 0 010 2.535c-.355.402-.711.805-1.07 1.172a1.035 1.035 0 00.533 1.71c.36.08.735-.037.985-.31.354-.383.718-.785 1.071-1.198 1.29-1.43-1.518-3.91-1.518-3.91z" fill="url(#f)"/>
+    <path d="M15.67 17.03l-.82-.78a86.49 86.49 0 01-2.87 2.717c-.462.357-1.052.5-1.626.398v2.084c.118 0 .236.016.356.016a3.993 3.993 0 002.646-.955c.747-.676 1.577-1.457 2.321-2.176a.902.902 0 00-.008-1.304z" fill="url(#g)" opacity=".9"/>
+  </g>
+</svg>
diff --git a/browser/base/jar.mn b/browser/base/jar.mn
index 92c13e927db3..2000c15d9fa1 100644
--- a/browser/base/jar.mn
+++ b/browser/base/jar.mn
@@ -14,11 +14,9 @@ browser.jar:
         content/browser/aboutRobots.xhtml             (content/aboutRobots.xhtml)
         content/browser/aboutRobots.js                (content/aboutRobots.js)
         content/browser/aboutRobots.css               (content/aboutRobots.css)
-        content/browser/logos/etp-mobile-dark.svg     (content/logos/etp-mobile-dark.svg)
-        content/browser/logos/etp-mobile-light.svg    (content/logos/etp-mobile-light.svg)
-        content/browser/logos/lockwise-light.svg      (content/logos/lockwise-light.svg)
-        content/browser/logos/lockwise-dark.svg       (content/logos/lockwise-dark.svg)
-        content/browser/logos/lockwise.svg             (content/logos/lockwise.svg)
+        content/browser/logos/etp-mobile.svg          (content/logos/etp-mobile.svg)
+        content/browser/logos/lockwise-mobile.svg     (content/logos/lockwise-mobile.svg)
+        content/browser/logos/lockwise.svg            (content/logos/lockwise.svg)
         content/browser/logos/monitor.svg             (content/logos/monitor.svg)
         content/browser/logos/proxy.svg               (content/logos/proxy.svg)
         content/browser/logos/send.svg                (content/logos/send.svg)
diff --git a/browser/components/protections/content/protections.css b/browser/components/protections/content/protections.css
index 338cf3dfcecf..b9c5d41ce326 100644
--- a/browser/components/protections/content/protections.css
+++ b/browser/components/protections/content/protections.css
@@ -113,7 +113,6 @@ h2 {
 .etp-card.custom-not-blocking #protection-details,
 #manage-protections,
 .etp-card .icon.dark,
-.mobile-app-icon.dark,
 a.hidden,
 .loading .card-body,
 .lockwise-card.hidden,
@@ -160,17 +159,8 @@ a.hidden,
   .etp-card .icon.light {
     display: none;
   }
-
-  .mobile-app-icon.dark {
-    display: block;
-  }
-
-  .mobile-app-icon.light {
-    display: none;
-  }
 }
 
-
 .card {
   display: grid;
   grid-template-columns: 100%;
@@ -602,10 +592,11 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
   grid-gap: 10px;
 }
 
-.lockwise-mobile-app-icon,
 .mobile-app-icon {
   height: 56px;
   width: auto;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 #lockwise-app-links,
diff --git a/browser/components/protections/content/protections.html b/browser/components/protections/content/protections.html
index 34902aca8ae7..b4687ccd7d77 100644
--- a/browser/components/protections/content/protections.html
+++ b/browser/components/protections/content/protections.html
@@ -118,8 +118,7 @@
           <div class="body-wrapper">
             <button class="exit-icon" data-l10n-id="protections-close-button"></button>
             <div id="etp-mobile-content">
-              <img class="mobile-app-icon light" src="chrome://browser/content/logos/etp-mobile-light.svg"/>
-              <img class="mobile-app-icon dark" src="chrome://browser/content/logos/etp-mobile-dark.svg"/>
+              <img class="mobile-app-icon" src="chrome://browser/content/logos/etp-mobile.svg"/>
               <span>
                 <h2 class="card-title" data-l10n-id="mobile-app-title"></h2>
                 <p class="content">
@@ -224,8 +223,7 @@
           <div id="lockwise-body-content" class="body-wrapper">
             <div class="no-logins hidden">
               <button class="exit-icon" data-l10n-id="protections-close-button"></button>
-              <img class="mobile-app-icon light" src="chrome://browser/content/logos/lockwise-light.svg"/>
-              <img class="mobile-app-icon dark" src="chrome://browser/content/logos/lockwise-dark.svg"/>
+              <img class="mobile-app-icon" src="chrome://browser/content/logos/lockwise-mobile.svg"/>
               <span>
                 <h2 class="card-title" data-l10n-id="lockwise-mobile-app-title"></h2>
                 <p class="content">