commit 1b9dd39952e5451b12cc1423e1ca28e24ef0a232
parent 7b1e1e9d228e5e49d6f5254e04a2fb0352f171fc
Author: Benjamin VanderSloot <bvandersloot@mozilla.com>
Date: Mon, 29 Dec 2025 13:28:34 +0000
Bug 1988811 - Add images for security-privacy-card to indicate the status - r=desktop-theme-reviewers,hjones,frontend-codestyle-reviewers
Differential Revision: https://phabricator.services.mozilla.com/D275502
Diffstat:
6 files changed, 303 insertions(+), 0 deletions(-)
diff --git a/browser/components/preferences/widgets/security-privacy/security-privacy-card/security-privacy-card.css b/browser/components/preferences/widgets/security-privacy/security-privacy-card/security-privacy-card.css
@@ -72,4 +72,5 @@ moz-card {
.status-image {
margin-inline-start: var(--space-xsmall);
+ max-width: 100px;
}
diff --git a/browser/components/preferences/widgets/security-privacy/security-privacy-card/security-privacy-card.mjs b/browser/components/preferences/widgets/security-privacy/security-privacy-card/security-privacy-card.mjs
@@ -112,6 +112,13 @@ export default class SecurityPrivacyCard extends MozLitElement {
};
}
+ getStatusImageSrc() {
+ if (this.configIssueCount > 0) {
+ return "chrome://global/skin/illustrations/kit-looking-left.svg";
+ }
+ return "chrome://global/skin/illustrations/kit-looking-forward.svg";
+ }
+
/**
* Create the bullet point for the current count of "issues" in the user profile.
* Really only depends on `this.configIssueCount`
@@ -322,6 +329,7 @@ export default class SecurityPrivacyCard extends MozLitElement {
${this.buildIssuesElement()} ${this.buildTrackersElement()}
${this.buildUpdateElement()}
</div>
+ <img class="status-image" src=${this.getStatusImageSrc()} />
</div>
</moz-card>
`;
diff --git a/stylelint-rollouts.config.js b/stylelint-rollouts.config.js
@@ -58,6 +58,7 @@ module.exports = [
"browser/components/places/metadataViewer/interactionsViewer.css",
"browser/components/preferences/dialogs/sitePermissions.css",
"browser/components/preferences/widgets/placeholder-message/placeholder-message.css",
+ "browser/components/preferences/widgets/security-privacy/security-privacy-card/security-privacy-card.css",
"browser/components/profiles/content/avatar.css",
"browser/components/profiles/content/edit-profile-card.css",
"browser/components/profiles/content/profile-avatar-selector.css",
diff --git a/toolkit/themes/shared/desktop-jar.inc.mn b/toolkit/themes/shared/desktop-jar.inc.mn
@@ -128,6 +128,8 @@
skin/classic/global/icons/warning.svg (../../shared/icons/warning.svg)
skin/classic/global/icons/warning-fill-12.svg (../../shared/icons/warning-fill-12.svg)
skin/classic/global/illustrations/about-license.svg (../../shared/illustrations/about-license.svg)
+ skin/classic/global/illustrations/kit-looking-forward.svg (../../shared/illustrations/kit-looking-forward.svg)
+ skin/classic/global/illustrations/kit-looking-left.svg (../../shared/illustrations/kit-looking-left.svg)
skin/classic/global/illustrations/security-error.svg (../../shared/illustrations/security-error.svg)
skin/classic/global/media/picture-in-picture-open.svg (../../shared/media/picture-in-picture-open.svg)
skin/classic/global/media/picture-in-picture-closed.svg (../../shared/media/picture-in-picture-closed.svg)
diff --git a/toolkit/themes/shared/illustrations/kit-looking-forward.svg b/toolkit/themes/shared/illustrations/kit-looking-forward.svg
@@ -0,0 +1,174 @@
+<!-- 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 https://mozilla.org/MPL/2.0/. -->
+<svg width="251" height="295" viewBox="0 0 251 295" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M246.139 67.709C244.533 63.6045 234.858 65.389 228.93 60.4305C226.674 58.5439 225.259 54.6689 224.252 51.1125C223.704 49.2005 223.271 47.3776 222.888 46.0137C220.568 37.8047 219.918 33.8022 216.158 21.8201C212.793 11.0872 208.803 2.16429 204.189 1.7054C199.612 1.24651 194.807 6.79143 188.459 17.5116C184.877 23.5664 182.519 28.9583 179.931 32.8206C179.804 33.0119 179.676 33.2158 179.549 33.3943C179.396 33.611 173.137 33.0756 170.294 33.3943C169.95 33.4325 169.657 33.2541 169.377 32.8716C168.089 31.1381 166.955 25.1852 162.098 15.3956C156.209 3.52821 151.658 0.74938 146.521 1.84562C142.188 2.76339 137.063 15.3064 133.494 26.7914C130.792 35.4848 130.945 36.428 129.912 39.6275C128.829 43.0437 127.541 47.3649 125.961 51.3802C124.24 55.7651 122.162 59.7677 119.6 61.8072C113.354 66.7657 107.197 65.1214 105.068 68.9709C103.348 72.0812 107.159 72.1067 107.299 72.8842C127.197 71.4183 144.622 91.8771 152.143 87.5942C154.578 86.2048 156.897 83.9103 161.308 80.252C164.597 76.9633 167.796 74.1717 172.27 73.4451C181.652 71.9282 186.674 81.6796 195.074 87.9384C195.215 88.0403 195.342 88.155 195.47 88.2698C198.363 88.9454 202.761 88.7414 208.663 86.3322C218.771 82.2022 231.786 73.6745 243.87 72.1322C243.028 71.0359 247.107 70.2201 246.126 67.6962L246.139 67.709Z" fill="url(#paint0_linear_7_381)"/>
+<path d="M139.077 272.373C139.179 272.348 139.255 272.335 139.306 272.322C139.574 272.246 115.227 263.846 118.898 241.488C120.555 231.328 124.316 227.135 127.617 221.131C128.28 219.933 128.803 218.671 129.249 217.358C126.738 216.848 123.411 216.032 119.038 214.286C79.3191 198.416 77.7639 158.059 80.377 118.964C82.4038 88.7668 48.9304 75.8669 48.9304 75.8669C48.9304 75.8669 58.2739 91.7368 41.9196 106.421C23.0031 123.413 4.78777 147.696 5.56533 184.203C5.60357 185.911 5.92224 190.283 5.92224 190.283C5.92224 190.283 4.66032 189.671 3.00322 187.951C0.874488 185.745 0.0331697 184.343 0.0331697 184.343C0.0331697 184.343 -0.65518 194.757 4.23964 210.627C11.5309 234.26 26.6742 254.999 49.9884 269.276C72.7034 283.183 91.1354 284.011 124.545 284.062C124.545 282.788 125.106 281.245 126.712 279.27C131.275 273.686 137.534 272.679 139.064 272.361L139.077 272.373Z" fill="url(#paint1_linear_7_381)"/>
+<path d="M39.5742 166.421C38.3505 155.714 38.7329 143.26 38.7329 143.26C38.7329 143.26 34.8578 152.705 32.6144 164.764C30.9445 173.725 30.0778 183.324 30.1925 185.478C29.6444 184.7 28.0637 182.227 26.7253 178.225C25.0427 173.177 23.8573 169.009 23.8573 169.009C23.921 168.971 19.7145 186.077 27.4264 217.498C37.216 242.112 53.838 250.972 61.5117 241.806C69.1853 232.641 59.4594 223.91 53.3664 215.293C45.8075 204.598 41.6265 184.292 39.5742 166.434V166.421Z" fill="url(#paint2_linear_7_381)"/>
+<path d="M161.142 275.292C161.32 274.234 161.46 273.24 161.524 272.399C161.792 269.021 161.83 264.814 161.703 260.072C160.951 265.311 159.192 270.232 156.617 274.629C158.223 274.859 159.74 275.075 161.142 275.292Z" fill="url(#paint3_linear_7_381)"/>
+<path d="M172.27 73.4453C167.796 74.1719 164.597 76.9635 161.308 80.2522C158.809 82.7506 156.247 85.5549 153.01 87.9513C145.795 93.305 156.4 111.584 179.192 109.175C195.788 107.416 202.085 93.9169 195.482 88.2827C195.355 88.168 195.227 88.0533 195.087 87.9513C186.687 81.6798 181.665 71.9284 172.283 73.4581L172.27 73.4453Z" fill="#FFC635"/>
+<path d="M192.831 72.412C197.139 72.3228 200.428 73.9672 200.084 67.7722C199.587 59.0405 197.088 56.7333 192.678 57.0138C187.923 57.3197 187.044 61.3222 186.916 68.2565C186.814 73.3426 190.587 72.4503 192.844 72.3993L192.831 72.412Z" fill="url(#paint4_linear_7_381)"/>
+<path d="M195.138 65.4267C196.285 65.4267 197.215 64.4965 197.215 63.349C197.215 62.2015 196.285 61.2712 195.138 61.2712C193.99 61.2712 193.06 62.2015 193.06 63.349C193.06 64.4965 193.99 65.4267 195.138 65.4267Z" fill="white"/>
+<path d="M153.06 72.4249C157.407 72.3356 160.16 73.4319 160.377 69.6715C160.848 61.488 159.255 56.5549 153.188 57.0138C149.363 57.307 147.681 61.5645 147.388 67.2496C147.031 74.2604 150.753 72.4631 153.06 72.4121V72.4249Z" fill="url(#paint5_linear_7_381)"/>
+<path d="M156.005 65.3118C157.165 65.3118 158.095 64.3686 158.095 63.2214C158.095 62.0741 157.152 61.1309 156.005 61.1309C154.857 61.1309 153.914 62.0741 153.914 63.2214C153.914 64.3686 154.857 65.3118 156.005 65.3118Z" fill="white"/>
+<path d="M174.041 78.4294C170.447 78.3912 168.484 79.9081 167.91 81.323C167.196 83.0821 168.713 86.7659 173.124 86.8169C177.317 86.8679 179.752 83.4517 179.217 81.5014C178.834 80.112 177.215 78.4677 174.041 78.4294Z" fill="#00073A"/>
+<path d="M224.239 51.113C223.691 49.2009 223.258 47.3781 222.875 46.0142C220.556 37.8052 219.905 33.8027 216.145 21.8205C212.78 11.0876 208.79 2.16477 204.176 1.70588C199.6 1.24699 194.794 6.79192 188.446 17.5121C184.864 23.5669 182.506 28.9588 179.918 32.8211C184.52 32.9104 194.118 33.7644 203.054 38.9906C211.454 43.8855 220.058 48.8313 224.227 51.1257L224.239 51.113Z" fill="url(#paint6_linear_7_381)"/>
+<path d="M169.377 32.8716C168.089 31.1381 166.955 25.1852 162.098 15.3956C156.209 3.52821 151.658 0.74938 146.521 1.84562C142.187 2.76339 137.063 15.3064 133.494 26.7914C130.792 35.4848 130.945 36.428 129.912 39.6275C128.829 43.0437 127.541 47.3649 125.961 51.3802C129.899 49.2259 138.86 44.1017 147.618 38.9902C155.737 34.2483 164.405 33.1011 169.377 32.8716Z" fill="url(#paint7_linear_7_381)"/>
+<path d="M156.616 274.63C152.652 274.069 148.037 273.457 142.709 272.807C141.537 272.667 140.326 272.514 139.076 272.374C137.559 272.692 131.288 273.699 126.725 279.282C125.106 281.258 124.57 282.801 124.558 284.075C124.558 284.929 124.774 285.656 125.106 286.306C126.61 289.225 133.914 288.945 138.133 287.823C140.53 287.186 143.614 286.472 147.056 285.783C150.804 285.031 154.946 284.318 159.025 283.744C159.153 283.285 159.293 282.826 159.446 282.354C160.045 280.595 160.708 277.778 161.129 275.28C159.726 275.076 158.21 274.847 156.603 274.617L156.616 274.63Z" fill="url(#paint8_linear_7_381)"/>
+<path d="M237.355 279.92C236.399 278.748 234.742 277.422 232.065 275.867C228.662 273.891 225.628 273.024 226.036 272.412C225.488 272.501 224.952 272.591 224.391 272.705C212.855 275.038 205.105 276.389 199.879 277.141C200.274 279.092 200.759 281.029 201.217 282.355C201.37 282.801 201.511 283.26 201.625 283.706C201.676 283.897 201.715 284.076 201.766 284.267C211.836 285.797 216.272 287.709 224.353 288.116C233.416 288.575 236.233 287.67 237.763 284.955C238.591 283.477 238.999 281.921 237.355 279.907V279.92Z" fill="url(#paint9_linear_7_381)"/>
+<path d="M250.867 77.2564C250.498 73.5343 246.011 73.3558 244.545 72.6293C244.201 72.4636 243.997 72.2978 243.869 72.1449C231.785 73.6873 218.77 82.2149 208.662 86.3449C202.76 88.7541 198.363 88.9581 195.469 88.2825C202.072 93.9166 195.775 107.416 179.178 109.175C156.4 111.584 145.782 93.3048 152.996 87.9511C156.234 85.5546 158.796 82.7631 161.295 80.2519C156.871 83.9103 154.564 86.2047 152.13 87.5941C144.609 91.8899 127.197 71.431 107.286 72.8842C107.286 72.9479 107.286 73.0244 107.248 73.1009C106.266 74.809 99.7396 74.0569 99.4464 78.2252C99.2043 81.6413 105.565 80.3284 105.539 81.8835C105.501 84.0123 100.912 84.8663 100.912 87.0078C100.912 92.3742 105.539 87.7344 124.316 102.126C134.322 109.787 136.017 124.165 135.112 140.264C134.653 148.346 131.327 166.23 130.855 175.701C130.077 191.227 132.448 204.292 130.065 214.554C129.835 215.51 129.555 216.44 129.249 217.358C128.803 218.658 128.28 219.92 127.617 221.131C124.303 227.135 120.555 231.328 118.898 241.488C115.24 263.846 139.574 272.246 139.306 272.323C139.255 272.335 139.166 272.361 139.077 272.374C140.326 272.527 141.537 272.667 142.71 272.807C148.025 273.457 152.639 274.069 156.616 274.63C159.179 270.232 160.95 265.312 161.702 260.073C161.83 264.802 161.792 269.008 161.524 272.399C161.46 273.228 161.32 274.235 161.142 275.293C160.721 277.791 160.058 280.608 159.459 282.367C159.306 282.826 159.166 283.298 159.038 283.757C158.108 287.16 158.108 290.321 158.949 291.749C161.498 296.057 177.317 295.407 178.057 290.321C178.414 287.836 178.656 284.789 178.796 281.335C179.408 281.309 180.02 281.284 180.581 281.284C181.014 281.284 181.435 281.309 181.868 281.322C182.008 284.776 182.25 287.823 182.607 290.308C183.347 295.394 199.166 296.045 201.715 291.736C202.505 290.398 202.544 287.466 201.753 284.279C201.702 284.088 201.664 283.91 201.613 283.718C201.486 283.272 201.358 282.826 201.205 282.367C200.746 281.029 200.262 279.091 199.867 277.154C205.093 276.402 212.856 275.05 224.379 272.718C224.94 272.603 225.488 272.514 226.023 272.425C226.087 272.323 226.227 272.233 226.482 272.157C236.807 268.588 248.535 252.769 243.117 237.982C240.02 229.518 234.271 225.503 231.046 219.856C224.379 208.155 229.465 205.414 226.533 174.184C225.259 160.583 221.689 144.56 220.236 136.262C217.368 119.793 220.122 105.134 229.044 98.3143C239.369 90.424 244.736 92.2085 245.22 87.9766C245.45 85.9753 242.212 85.5929 242.288 83.5916C242.416 80.4431 251.135 80.3921 250.816 77.2564H250.867Z" fill="url(#paint10_linear_7_381)"/>
+<path d="M176.986 229.072C176.195 230.028 175.724 236.223 174.704 236.746C173.888 237.153 173.48 231.876 172.639 227.109C172.409 225.821 171.543 221.64 171.313 220.417C170.242 214.451 170.242 214.923 169.35 210.053C169.172 213.941 168.815 214.974 168.101 220.939C167.757 223.833 167.26 227.313 166.852 229.238C166.495 230.92 165.947 224.661 165.603 223.017C163.945 215.037 162.798 212.909 160.555 204.967C159.293 200.481 155.329 196.338 154.946 193.47C156.756 205.719 159.357 226 160.759 243.96C161.205 249.684 161.536 255.178 161.664 260.098C161.791 264.827 161.753 269.033 161.485 272.424C161.422 273.253 161.281 274.26 161.103 275.318C160.682 277.816 160.019 280.633 159.42 282.392C159.267 282.851 159.127 283.323 159 283.782C158.069 287.185 158.069 290.346 158.91 291.774C161.46 296.082 177.279 295.432 178.018 290.346C178.375 287.861 178.617 284.814 178.757 281.36C179.293 268.358 178.388 249.263 176.947 229.097L176.986 229.072Z" fill="url(#paint11_linear_7_381)"/>
+<path opacity="0.6" d="M193.035 175.905C196.387 147.352 179.09 136.811 179.09 136.811C179.09 136.811 162.659 148.958 167.082 177.32C170.626 200.035 173.532 205.287 175.776 219.704C178.019 234.121 180.403 250.768 180.403 250.768C180.403 250.768 182.417 234.682 185.132 219.347C187.069 208.397 190.957 193.636 193.035 175.905Z" fill="url(#paint12_linear_7_381)"/>
+<path d="M201.626 283.718C201.498 283.272 201.371 282.826 201.218 282.367C200.759 281.029 200.275 279.091 199.879 277.154C199.535 275.433 199.255 273.712 199.153 272.399C197.725 254.451 202.76 213.368 205.705 193.457C205.322 196.325 201.358 200.468 200.096 204.955C197.865 212.896 196.705 215.025 195.048 223.005C194.704 224.649 194.156 230.908 193.799 229.225C193.391 227.3 192.894 223.833 192.55 220.927C191.836 214.961 191.479 213.929 191.301 210.041C190.408 214.91 190.408 214.451 189.338 220.404C189.121 221.641 188.241 225.809 188.012 227.096C187.171 231.864 186.776 237.141 185.947 236.733C184.915 236.21 184.456 230.015 183.665 229.059C182.225 249.225 181.32 268.32 181.855 281.309C181.995 284.763 182.238 287.81 182.595 290.296C183.334 295.382 199.153 296.032 201.702 291.723C202.493 290.385 202.531 287.453 201.74 284.266C201.689 284.075 201.651 283.897 201.6 283.705L201.626 283.718Z" fill="url(#paint13_linear_7_381)"/>
+<path opacity="0.38" d="M160.785 243.948C156.923 229.289 145.042 217.855 130.078 214.553C129.848 215.509 129.568 216.44 129.262 217.357C128.816 218.658 128.293 219.92 127.63 221.131C124.316 227.134 120.568 231.328 118.911 241.487C115.253 263.846 139.587 272.246 139.319 272.322C139.268 272.335 139.179 272.36 139.09 272.373C140.339 272.526 141.55 272.666 142.722 272.807C148.038 273.457 152.652 274.069 156.629 274.629C159.192 270.232 160.963 265.311 161.715 260.072C161.575 255.152 161.257 249.658 160.81 243.935L160.785 243.948Z" fill="url(#paint14_radial_7_381)"/>
+<defs>
+<linearGradient id="paint0_linear_7_381" x1="175.036" y1="8.39753" x2="176.859" y2="273.368" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6600"/>
+<stop offset="0.24" stop-color="#FF9C00"/>
+<stop offset="0.31" stop-color="#FF9200"/>
+<stop offset="0.44" stop-color="#FF7900"/>
+<stop offset="0.52" stop-color="#FF6600"/>
+<stop offset="0.96" stop-color="#FB2872"/>
+</linearGradient>
+<linearGradient id="paint1_linear_7_381" x1="7.22243" y1="91.1249" x2="107.923" y2="290.997" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEB49"/>
+<stop offset="0.45" stop-color="#FF6600"/>
+<stop offset="0.54" stop-color="#FF6109"/>
+<stop offset="0.69" stop-color="#FF5322"/>
+<stop offset="0.82" stop-color="#FF453F"/>
+<stop offset="1" stop-color="#FB2872"/>
+</linearGradient>
+<linearGradient id="paint2_linear_7_381" x1="34.9343" y1="142.508" x2="45.0809" y2="224.203" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEB49"/>
+<stop offset="0.09" stop-color="#FFE545" stop-opacity="0.96"/>
+<stop offset="0.24" stop-color="#FFD63D" stop-opacity="0.84"/>
+<stop offset="0.44" stop-color="#FFBD2F" stop-opacity="0.66"/>
+<stop offset="0.67" stop-color="#FF9A1C" stop-opacity="0.4"/>
+<stop offset="0.94" stop-color="#FF6F05" stop-opacity="0.07"/>
+<stop offset="1" stop-color="#FF6600" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_7_381" x1="157.598" y1="5.51623" x2="159.281" y2="285.4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6600"/>
+<stop offset="0.2" stop-color="#FF9C00"/>
+<stop offset="0.29" stop-color="#FF9200"/>
+<stop offset="0.43" stop-color="#FF7900"/>
+<stop offset="0.52" stop-color="#FF6600"/>
+<stop offset="1" stop-color="#FB2872"/>
+</linearGradient>
+<linearGradient id="paint4_linear_7_381" x1="190.524" y1="52.0935" x2="194.488" y2="72.9092" gradientUnits="userSpaceOnUse">
+<stop offset="0.16" stop-color="#A030B9"/>
+<stop offset="0.88" stop-color="#00073A"/>
+</linearGradient>
+<linearGradient id="paint5_linear_7_381" x1="151.798" y1="53.075" x2="154.5" y2="71.0227" gradientUnits="userSpaceOnUse">
+<stop offset="0.16" stop-color="#A030B9"/>
+<stop offset="0.88" stop-color="#00073A"/>
+</linearGradient>
+<linearGradient id="paint6_linear_7_381" x1="203.694" y1="34.558" x2="214.112" y2="-11.5188" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6600" stop-opacity="0"/>
+<stop offset="0.03" stop-color="#FF6600" stop-opacity="0.17"/>
+<stop offset="0.07" stop-color="#FF6600" stop-opacity="0.36"/>
+<stop offset="0.11" stop-color="#FF6600" stop-opacity="0.53"/>
+<stop offset="0.16" stop-color="#FF6600" stop-opacity="0.68"/>
+<stop offset="0.2" stop-color="#FF6600" stop-opacity="0.8"/>
+<stop offset="0.25" stop-color="#FF6600" stop-opacity="0.89"/>
+<stop offset="0.3" stop-color="#FF6600" stop-opacity="0.95"/>
+<stop offset="0.36" stop-color="#FF6600" stop-opacity="0.99"/>
+<stop offset="0.43" stop-color="#FF6600"/>
+<stop offset="0.72" stop-color="#FD4737"/>
+<stop offset="1" stop-color="#FB2872"/>
+</linearGradient>
+<linearGradient id="paint7_linear_7_381" x1="145.704" y1="33.1004" x2="135.286" y2="-12.9637" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6600" stop-opacity="0"/>
+<stop offset="0.03" stop-color="#FF6600" stop-opacity="0.17"/>
+<stop offset="0.07" stop-color="#FF6600" stop-opacity="0.36"/>
+<stop offset="0.11" stop-color="#FF6600" stop-opacity="0.53"/>
+<stop offset="0.16" stop-color="#FF6600" stop-opacity="0.68"/>
+<stop offset="0.2" stop-color="#FF6600" stop-opacity="0.8"/>
+<stop offset="0.25" stop-color="#FF6600" stop-opacity="0.89"/>
+<stop offset="0.3" stop-color="#FF6600" stop-opacity="0.95"/>
+<stop offset="0.36" stop-color="#FF6600" stop-opacity="0.99"/>
+<stop offset="0.43" stop-color="#FF6600"/>
+<stop offset="0.71" stop-color="#FD4737"/>
+<stop offset="0.98" stop-color="#FB2872"/>
+</linearGradient>
+<linearGradient id="paint8_linear_7_381" x1="243.741" y1="240.06" x2="84.8764" y2="303.374" gradientUnits="userSpaceOnUse">
+<stop offset="0.02" stop-color="#BE0449" stop-opacity="0"/>
+<stop offset="0.51" stop-color="#FB2872"/>
+<stop offset="0.67" stop-color="#A31C5E"/>
+<stop offset="0.83" stop-color="#4C104A"/>
+<stop offset="0.94" stop-color="#15093E"/>
+<stop offset="1" stop-color="#00073A"/>
+</linearGradient>
+<linearGradient id="paint9_linear_7_381" x1="154.729" y1="255.217" x2="263.155" y2="297.613" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BE0449" stop-opacity="0"/>
+<stop offset="0.41" stop-color="#FB2872"/>
+<stop offset="1" stop-color="#00073A"/>
+</linearGradient>
+<linearGradient id="paint10_linear_7_381" x1="177.228" y1="18.952" x2="166.317" y2="331.252" gradientUnits="userSpaceOnUse">
+<stop offset="0.02" stop-color="#FF7408"/>
+<stop offset="0.03" stop-color="#FFAF28"/>
+<stop offset="0.04" stop-color="#FFC534"/>
+<stop offset="0.05" stop-color="#FFD63D"/>
+<stop offset="0.06" stop-color="#FFE244"/>
+<stop offset="0.07" stop-color="#FFE947"/>
+<stop offset="0.11" stop-color="#FFEB49"/>
+<stop offset="0.21" stop-color="#FFC936"/>
+<stop offset="0.43" stop-color="#FF7508"/>
+<stop offset="0.47" stop-color="#FF6600"/>
+<stop offset="0.85" stop-color="#FB2872"/>
+</linearGradient>
+<linearGradient id="paint11_linear_7_381" x1="165.526" y1="195.063" x2="170.153" y2="317.867" gradientUnits="userSpaceOnUse">
+<stop offset="0.01" stop-color="#BE0449" stop-opacity="0"/>
+<stop offset="0.06" stop-color="#BF054A" stop-opacity="0.04"/>
+<stop offset="0.14" stop-color="#C2084C" stop-opacity="0.16"/>
+<stop offset="0.23" stop-color="#C70D51" stop-opacity="0.36"/>
+<stop offset="0.35" stop-color="#CE1457" stop-opacity="0.63"/>
+<stop offset="0.48" stop-color="#D71E5F" stop-opacity="0.97"/>
+<stop offset="0.49" stop-color="#D81F60"/>
+<stop offset="0.56" stop-color="#D31E5F"/>
+<stop offset="0.63" stop-color="#C71D5D"/>
+<stop offset="0.7" stop-color="#B31A59"/>
+<stop offset="0.77" stop-color="#971754"/>
+<stop offset="0.84" stop-color="#73134E"/>
+<stop offset="0.91" stop-color="#460E46"/>
+<stop offset="0.98" stop-color="#13093D"/>
+<stop offset="1" stop-color="#00073A"/>
+</linearGradient>
+<linearGradient id="paint12_linear_7_381" x1="179.561" y1="161.055" x2="184.456" y2="268.703" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEB49"/>
+<stop offset="0.09" stop-color="#FFE545" stop-opacity="0.96"/>
+<stop offset="0.24" stop-color="#FFD63D" stop-opacity="0.84"/>
+<stop offset="0.44" stop-color="#FFBD2F" stop-opacity="0.66"/>
+<stop offset="0.68" stop-color="#FF9A1C" stop-opacity="0.4"/>
+<stop offset="0.94" stop-color="#FF6F05" stop-opacity="0.07"/>
+<stop offset="1" stop-color="#FF6600" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint13_linear_7_381" x1="195.724" y1="172.552" x2="190.612" y2="318.785" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D81F60" stop-opacity="0"/>
+<stop offset="0.11" stop-color="#D81F60" stop-opacity="0.01"/>
+<stop offset="0.19" stop-color="#D81F60" stop-opacity="0.06"/>
+<stop offset="0.27" stop-color="#D81F60" stop-opacity="0.14"/>
+<stop offset="0.35" stop-color="#D81F60" stop-opacity="0.25"/>
+<stop offset="0.42" stop-color="#D81F60" stop-opacity="0.39"/>
+<stop offset="0.49" stop-color="#D81F60" stop-opacity="0.57"/>
+<stop offset="0.55" stop-color="#D81F60" stop-opacity="0.77"/>
+<stop offset="0.62" stop-color="#D81F60"/>
+<stop offset="0.66" stop-color="#D21E5F"/>
+<stop offset="0.71" stop-color="#C21C5C"/>
+<stop offset="0.77" stop-color="#A81957"/>
+<stop offset="0.83" stop-color="#841551"/>
+<stop offset="0.9" stop-color="#551049"/>
+<stop offset="0.97" stop-color="#1D0A3F"/>
+<stop offset="1" stop-color="#00073A"/>
+</linearGradient>
+<radialGradient id="paint14_radial_7_381" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(121.41 259.83) scale(67.291 67.291)">
+<stop stop-color="#FFEB49"/>
+<stop offset="0.07" stop-color="#FFE546" stop-opacity="0.96"/>
+<stop offset="0.18" stop-color="#FFD73E" stop-opacity="0.85"/>
+<stop offset="0.32" stop-color="#FFC031" stop-opacity="0.68"/>
+<stop offset="0.49" stop-color="#FFA01F" stop-opacity="0.44"/>
+<stop offset="0.69" stop-color="#FF7709" stop-opacity="0.13"/>
+<stop offset="0.77" stop-color="#FF6600" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/toolkit/themes/shared/illustrations/kit-looking-left.svg b/toolkit/themes/shared/illustrations/kit-looking-left.svg
@@ -0,0 +1,117 @@
+<!-- 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 https://mozilla.org/MPL/2.0/. -->
+<svg width="207" height="276" viewBox="0 0 207 276" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M205.461 200.228C201.474 181.381 178.114 172.433 178.114 172.433C178.114 172.433 186.142 185.509 177.72 197.556C174.018 202.857 169.408 206.471 160.23 206.832C157.219 206.953 154.503 206.361 154.503 206.361C154.503 206.361 156.288 205.419 157.974 203.853C159.475 202.463 160.143 200.196 160.143 200.196C160.143 200.196 154.765 202.145 151.338 202.791C148.315 203.35 142.828 202.791 138.261 202.145C135.26 201.718 132.303 201.324 129.39 200.94C129.292 200.929 129.193 200.918 129.095 200.907C124.802 200.349 120.596 199.845 116.478 199.385C112.295 198.925 108.199 198.509 104.201 198.148C73.3616 195.41 48.1399 196.067 30.6829 202.123C27.3426 203.284 24.2871 204.631 21.5382 206.197C16.0953 209.285 11.8022 212.845 8.57147 216.689C0.44533 226.315 -0.912691 237.661 3.42417 247.43C6.80824 255.052 13.6421 261.722 23.4876 265.884C59.431 281.085 158.226 280.329 186.985 255.545C209.48 236.161 208.33 213.644 205.494 200.228H205.461Z" fill="url(#paint0_linear_7_385)"/>
+<path d="M145.38 50.519C138.283 40.6187 132.358 36.7199 127.222 27.641C119.052 13.1629 108.462 -1.07432 101.453 2.6602C98.7367 4.10582 97.4992 10.414 96.9735 17.0726C96.2945 25.6806 96.7873 34.88 96.7873 34.88C96.7873 34.88 87.336 34.3215 77.2166 39.7754C74.8401 41.0568 72.4198 42.6776 70.0762 44.7037C62.4209 51.3623 63.6147 52.7641 55.7076 61.175C48.9942 68.3045 43.9893 69.794 38.5134 70.8015C38.6996 71.5791 39.0172 72.3457 39.5758 73.0795C43.7593 78.632 48.8956 79.8038 55.1709 80.2199C60.9753 80.2418 68.8496 78.8181 78.2461 73.7475C85.2442 69.9801 91.8591 66.837 99.2733 65.249C121.943 60.4084 133.026 63.9019 131.438 67.6912C130.409 70.1553 124.375 69.8049 125.733 71.4805C126.685 72.6414 136.027 71.1848 134.603 75.1274C133.18 79.0591 125.809 78.2486 126.214 79.7928C126.598 81.2604 132.829 79.4971 131.92 82.8484C131.132 85.7615 122.535 84.6663 115.931 87.7985C99.6019 95.5413 141.963 108.694 149.552 138.089C151.951 147.365 148.457 160.331 143.671 172.148C150.253 160.55 156.54 149.752 159.387 138.417C166.232 111.224 165.224 78.2048 145.38 50.5081V50.519Z" fill="url(#paint1_linear_7_385)"/>
+<path d="M96.7874 34.88C96.7874 34.88 96.2836 25.6916 96.9735 17.0726C92.6038 10.3811 87.7304 4.59866 83.7111 4.76294C78.301 4.98197 77.3701 30.5651 77.2058 39.7754C87.3251 34.3106 96.7764 34.88 96.7764 34.88H96.7874Z" fill="url(#paint2_linear_7_385)"/>
+<path d="M96.7874 34.88C96.7874 34.88 96.2836 25.6916 96.9735 17.0726C92.6038 10.3811 87.7304 4.59866 83.7111 4.76294C78.301 4.98197 77.3701 30.5651 77.2058 39.7754C87.3251 34.3106 96.7764 34.88 96.7764 34.88H96.7874Z" fill="url(#paint3_linear_7_385)"/>
+<path d="M99.2625 65.2596C121.921 60.4191 133.015 63.9128 131.428 67.702C130.387 70.1659 124.365 69.8268 125.722 71.491C126.674 72.6629 136.016 71.2068 134.593 75.1385C133.169 79.0699 125.799 78.2705 126.204 79.8035C126.587 81.2601 132.818 79.4971 131.909 82.8592C131.12 85.7723 122.524 84.6772 115.92 87.8094C99.5912 95.5522 141.952 108.705 149.542 138.099L149.531 138.089C151.918 147.354 148.424 160.331 143.649 172.148C142.707 173.813 141.755 175.489 140.813 177.186C142.697 167.275 144.482 158.634 145.84 153.848C145.193 156.247 141.262 157.047 136.684 166.683C132.38 175.74 130.573 182.191 130.453 180.723C130.322 179.037 129.905 176.353 129.938 173.846C129.993 168.687 130.661 163.485 130.661 163.485C130.661 163.485 127.824 167.899 126.324 172.882C124.88 177.695 122.955 182.958 122.951 182.969C122.951 182.969 121.002 175.313 120.432 174.415C118.768 182.541 117.443 191.193 116.446 199.374C112.263 198.903 108.166 198.487 104.169 198.137C73.3289 195.399 48.1181 196.067 30.6502 202.112C27.3209 203.273 24.2655 204.62 21.5057 206.186C16.0641 209.274 11.7713 212.843 8.54084 216.675C8.54383 216.675 8.54664 216.677 8.54963 216.678C0.423598 226.304 -0.93448 237.639 3.40217 247.419C2.09905 245.437 1.22295 243.137 0.839668 240.475C-0.496171 231.135 -0.179691 222.539 1.37482 214.6C1.37167 214.599 1.36821 214.599 1.36506 214.597C11.0244 165.392 68.5542 141.714 77.6004 122.713C80.3821 116.854 83.7658 108.07 73.077 101.4C59.4751 92.9128 52.4764 98.3783 40.3201 92.3768C53.2212 90.8107 61.2379 80.5048 59.869 80.45C58.2263 80.3843 56.6603 80.3298 55.16 80.2313C60.9643 80.2641 68.8387 78.8292 78.2352 73.7586C85.2333 69.9803 91.8482 66.8476 99.2625 65.2596Z" fill="url(#paint4_linear_7_385)"/>
+<path d="M59.8911 80.4499C58.2484 80.3842 56.6823 80.3294 55.1819 80.2309C48.9066 79.8147 43.7703 78.6429 39.5867 73.0904C39.0282 72.3566 38.7106 71.59 38.5244 70.8124C37.0459 71.0862 35.5237 71.3272 33.9357 71.6338C34.2094 72.4661 34.319 73.5175 34.1437 74.8755C33.7495 78.172 29.0622 78.2048 28.416 78.0515C28.4051 78.0515 28.3941 78.0515 28.3832 78.0405C28.4598 79.4862 28.8541 80.7456 29.2483 81.2275C29.6864 81.7532 30.8035 87.6233 40.2219 92.3215C40.2657 92.3434 40.3095 92.3653 40.3533 92.3872C53.2544 90.8211 61.271 80.5156 59.9021 80.4609L59.8911 80.4499Z" fill="#FFC635"/>
+<path d="M34.1325 74.8645C34.2968 73.5065 34.1873 72.4552 33.9244 71.6229C33.333 71.7324 32.7307 71.8528 32.1174 71.9952C29.0071 72.6852 28.2405 75.6202 28.3719 78.0296C28.3829 78.0296 28.3939 78.0296 28.4048 78.0405C29.0619 78.2048 33.7382 78.161 34.1325 74.8645Z" fill="#00073A"/>
+<path d="M129.369 200.94C129.555 200.447 129.752 199.955 129.949 199.473C129.599 200.053 129.303 200.535 129.084 200.907C129.183 200.918 129.281 200.929 129.38 200.94H129.369Z" fill="url(#paint5_linear_7_385)"/>
+<path d="M136.706 166.694C132.402 175.751 130.595 182.202 130.474 180.734C130.343 179.048 129.927 176.365 129.96 173.857C130.014 168.699 130.682 163.497 130.682 163.497C130.682 163.497 127.835 167.91 126.346 172.893C124.9 177.712 122.972 182.98 122.972 182.98C122.972 182.98 121.023 175.324 120.454 174.426C118.8 182.552 117.475 191.204 116.467 199.385C120.585 199.845 124.79 200.349 129.083 200.907C129.313 200.535 129.598 200.053 129.949 199.473C133.103 191.522 136.936 184.195 140.835 177.197C142.718 167.286 144.503 158.645 145.861 153.859C145.215 156.257 141.284 157.057 136.706 166.694Z" fill="url(#paint6_linear_7_385)"/>
+<path d="M136.706 166.694C132.402 175.751 130.595 182.202 130.474 180.734C130.343 179.048 129.927 176.365 129.96 173.857C130.014 168.699 130.682 163.497 130.682 163.497C130.682 163.497 127.835 167.91 126.346 172.893C124.9 177.712 122.972 182.98 122.972 182.98C122.972 182.98 121.023 175.324 120.454 174.426C118.8 182.552 117.475 191.204 116.467 199.385C120.585 199.845 124.79 200.349 129.083 200.907C129.313 200.535 129.598 200.053 129.949 199.473C133.103 191.522 136.936 184.195 140.835 177.197C142.718 167.286 144.503 158.645 145.861 153.859C145.215 156.257 141.284 157.057 136.706 166.694Z" fill="url(#paint7_linear_7_385)"/>
+<path d="M190.742 227.18C190.742 227.18 179.757 230.893 169.977 232.7C153.681 235.712 135.129 236.314 123.214 234.332C122.995 234.299 122.776 234.255 122.557 234.222C119.95 233.784 117.289 233.335 114.682 232.985C105.833 231.769 97.7402 231.671 95.3856 237.223C91.892 245.47 92.8777 254.636 112.043 257.451C116.457 258.097 121.834 258.415 128.339 258.294C159.354 258.185 172.08 247.178 172.069 247.255C172.069 247.255 168.072 247.332 163.165 247.211C159.321 247.112 156.693 246.39 155.839 246.116C157.755 245.645 165.991 242.272 173.449 238.384C183.481 233.149 190.764 227.18 190.764 227.18H190.742Z" fill="url(#paint8_linear_7_385)"/>
+<path d="M77.0413 53.465C74.7853 52.4246 71.1494 54.3521 70.3937 60.3974C69.9775 63.7815 71.3903 65.0957 74.8839 64.9971C76.7785 64.9424 79.4507 65.4024 79.9764 60.2113C80.4473 55.6225 78.6403 54.2207 77.0413 53.476V53.465Z" fill="url(#paint9_linear_7_385)"/>
+<path d="M73.471 56.4438C72.7482 56.3343 72.0253 57.1228 71.8611 58.218C71.6968 59.3131 72.1568 60.2988 72.8796 60.4083C73.6024 60.5178 74.3252 59.7293 74.4895 58.6341C74.6537 57.539 74.1938 56.5533 73.471 56.4438Z" fill="white"/>
+<path opacity="0.7" d="M104.191 198.148C103.742 196.056 101.08 185.279 92.1219 177.044C82.1559 167.877 67.8421 167.702 53.8349 172.838C45.3145 175.96 28.1532 198.52 28.1532 198.52L30.6502 202.123C48.1181 196.078 73.3289 195.41 104.169 198.148H104.191Z" fill="url(#paint10_linear_7_385)"/>
+<defs>
+<linearGradient id="paint0_linear_7_385" x1="178.695" y1="155.195" x2="35.7207" y2="298.18" gradientUnits="userSpaceOnUse">
+<stop offset="0.11" stop-color="#FFEB49"/>
+<stop offset="0.12" stop-color="#FFE644"/>
+<stop offset="0.2" stop-color="#FFC626"/>
+<stop offset="0.27" stop-color="#FFAE11"/>
+<stop offset="0.35" stop-color="#FFA004"/>
+<stop offset="0.41" stop-color="#FF9C00"/>
+<stop offset="0.47" stop-color="#FF9200"/>
+<stop offset="0.57" stop-color="#FF7900"/>
+<stop offset="0.63" stop-color="#FF6600"/>
+<stop offset="0.76" stop-color="#FE5029"/>
+<stop offset="0.99" stop-color="#FB2872"/>
+</linearGradient>
+<linearGradient id="paint1_linear_7_385" x1="100.872" y1="6.66851" x2="100.872" y2="183.768" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6600"/>
+<stop offset="0.07" stop-color="#FF6F05"/>
+<stop offset="0.19" stop-color="#FF8813"/>
+<stop offset="0.34" stop-color="#FFB029"/>
+<stop offset="0.46" stop-color="#FF9218"/>
+<stop offset="0.63" stop-color="#FF6600"/>
+<stop offset="0.77" stop-color="#FD4F29"/>
+<stop offset="1" stop-color="#FB2872"/>
+</linearGradient>
+<linearGradient id="paint2_linear_7_385" x1="84.7953" y1="3.38303" x2="108.604" y2="262.96" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6600"/>
+<stop offset="0.26" stop-color="#FFB029"/>
+<stop offset="0.34" stop-color="#FFA623"/>
+<stop offset="0.47" stop-color="#FF8D15"/>
+<stop offset="0.63" stop-color="#FF6600"/>
+<stop offset="1" stop-color="#FB2872"/>
+</linearGradient>
+<linearGradient id="paint3_linear_7_385" x1="77.622" y1="-4.44742" x2="102.373" y2="81.4575" gradientUnits="userSpaceOnUse">
+<stop offset="0.09" stop-color="#FB2872" stop-opacity="0"/>
+<stop offset="0.2" stop-color="#E91D66" stop-opacity="0.17"/>
+<stop offset="0.33" stop-color="#D9145B" stop-opacity="0.33"/>
+<stop offset="0.47" stop-color="#CD0D53" stop-opacity="0.45"/>
+<stop offset="0.62" stop-color="#C4084D" stop-opacity="0.53"/>
+<stop offset="0.78" stop-color="#BF044A" stop-opacity="0.58"/>
+<stop offset="1" stop-color="#BE0449" stop-opacity="0.6"/>
+</linearGradient>
+<linearGradient id="paint4_linear_7_385" x1="77.1072" y1="21.3437" x2="75.355" y2="241.44" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6600"/>
+<stop offset="0.07" stop-color="#FFA221"/>
+<stop offset="0.14" stop-color="#FFD63D"/>
+<stop offset="0.17" stop-color="#FFEB49"/>
+<stop offset="0.35" stop-color="#FFAC26"/>
+<stop offset="0.51" stop-color="#FF790A"/>
+<stop offset="0.59" stop-color="#FF6600"/>
+<stop offset="1" stop-color="#FB2872"/>
+</linearGradient>
+<linearGradient id="paint5_linear_7_385" x1="130.957" y1="17.7193" x2="129.248" y2="233.576" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6700"/>
+<stop offset="0.18" stop-color="#FF9B1D"/>
+<stop offset="0.27" stop-color="#FFB029"/>
+<stop offset="0.42" stop-color="#FF9218"/>
+<stop offset="0.63" stop-color="#FF6600"/>
+<stop offset="1" stop-color="#FB2872"/>
+</linearGradient>
+<linearGradient id="paint6_linear_7_385" x1="132.424" y1="17.7296" x2="130.715" y2="233.587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6700"/>
+<stop offset="0.18" stop-color="#FF9B1D"/>
+<stop offset="0.27" stop-color="#FFB029"/>
+<stop offset="0.42" stop-color="#FF9218"/>
+<stop offset="0.63" stop-color="#FF6600"/>
+<stop offset="1" stop-color="#FB2872"/>
+</linearGradient>
+<linearGradient id="paint7_linear_7_385" x1="134.058" y1="158.14" x2="116.271" y2="263.248" gradientUnits="userSpaceOnUse">
+<stop offset="0.02" stop-color="#FB2872" stop-opacity="0"/>
+<stop offset="0.49" stop-color="#BE0449"/>
+<stop offset="0.52" stop-color="#AA0447"/>
+<stop offset="0.61" stop-color="#760543"/>
+<stop offset="0.7" stop-color="#4C0540"/>
+<stop offset="0.78" stop-color="#2B063D"/>
+<stop offset="0.86" stop-color="#13063B"/>
+<stop offset="0.94" stop-color="#04063A"/>
+<stop offset="1" stop-color="#00073A"/>
+</linearGradient>
+<linearGradient id="paint8_linear_7_385" x1="173.811" y1="208.53" x2="113.96" y2="258.119" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEB49"/>
+<stop offset="0.1" stop-color="#FFE847" stop-opacity="0.98"/>
+<stop offset="0.22" stop-color="#FFE042" stop-opacity="0.92"/>
+<stop offset="0.36" stop-color="#FFD23B" stop-opacity="0.82"/>
+<stop offset="0.51" stop-color="#FFBF31" stop-opacity="0.67"/>
+<stop offset="0.66" stop-color="#FFA723" stop-opacity="0.49"/>
+<stop offset="0.83" stop-color="#FF8A13" stop-opacity="0.27"/>
+<stop offset="0.99" stop-color="#FF6700" stop-opacity="0.01"/>
+<stop offset="1" stop-color="#FF6600" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_7_385" x1="69.8874" y1="52.151" x2="77.7993" y2="63.6542" gradientUnits="userSpaceOnUse">
+<stop offset="0.16" stop-color="#A030B9"/>
+<stop offset="0.88" stop-color="#00073A"/>
+</linearGradient>
+<linearGradient id="paint10_linear_7_385" x1="89.6359" y1="169.794" x2="70.2953" y2="193.23" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEB49"/>
+<stop offset="1" stop-color="#FF6600" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
