From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 browser/themes/shared/fxa/avatar-color.svg         | 11 +++++
 browser/themes/shared/fxa/avatar-empty.svg         |  8 ++++
 browser/themes/shared/fxa/avatar.svg               |  6 +++
 browser/themes/shared/fxa/fxa-spinner.svg          | 28 ++++++++++++
 browser/themes/shared/fxa/monitor.svg              |  4 ++
 browser/themes/shared/fxa/send-to-device.svg       |  4 ++
 browser/themes/shared/fxa/send.svg                 |  4 ++
 browser/themes/shared/fxa/sync-devices.svg         | 49 ++++++++++++++++++++
 .../themes/shared/fxa/sync-illustration-issue.svg  | 52 ++++++++++++++++++++++
 browser/themes/shared/fxa/sync-illustration.svg    | 50 +++++++++++++++++++++
 10 files changed, 216 insertions(+)
 create mode 100644 browser/themes/shared/fxa/avatar-color.svg
 create mode 100644 browser/themes/shared/fxa/avatar-empty.svg
 create mode 100644 browser/themes/shared/fxa/avatar.svg
 create mode 100644 browser/themes/shared/fxa/fxa-spinner.svg
 create mode 100644 browser/themes/shared/fxa/monitor.svg
 create mode 100644 browser/themes/shared/fxa/send-to-device.svg
 create mode 100644 browser/themes/shared/fxa/send.svg
 create mode 100644 browser/themes/shared/fxa/sync-devices.svg
 create mode 100644 browser/themes/shared/fxa/sync-illustration-issue.svg
 create mode 100644 browser/themes/shared/fxa/sync-illustration.svg

(limited to 'browser/themes/shared/fxa')

diff --git a/browser/themes/shared/fxa/avatar-color.svg b/browser/themes/shared/fxa/avatar-color.svg
new file mode 100644
index 0000000000..5a87586b35
--- /dev/null
+++ b/browser/themes/shared/fxa/avatar-color.svg
@@ -0,0 +1,11 @@
+<!-- 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 enable-background="new 0 0 76.8 76.8" viewBox="0 0 76.8 76.8" xmlns="http://www.w3.org/2000/svg">
+  <linearGradient id="a" gradientTransform="matrix(1.3333 0 0 -1.3333 118.8667 193.9333)" gradientUnits="userSpaceOnUse" x1="-92.971" x2="-32.8" y1="81.79" y2="146.09">
+    <stop offset=".26" stop-color="#9059ff"/>
+    <stop offset=".96" stop-color="#00b3f4"/>
+  </linearGradient>
+  <circle cx="38.4" cy="38.4" fill="#fbfbfe" r="32.7"/>
+  <path d="m38.4 0c-21.2 0-38.4 17.2-38.4 38.4s17.2 38.4 38.4 38.4 38.4-17.2 38.4-38.4-17.2-38.4-38.4-38.4zm0 11c9.1 0 16.5 7.4 16.5 16.5s-7.4 16.5-16.5 16.5-16.5-7.4-16.5-16.5c0-9.2 7.4-16.5 16.5-16.5zm22.6 42.8c-8.4 12.5-25.3 15.8-37.7 7.4-2.9-2-5.5-4.5-7.4-7.4-1.4-2.1-1.2-4.8.4-6.7 5.8-6.7 13.8 2.3 22.2 2.3s16.4-9 22.2-2.3c1.5 1.9 1.7 4.6.3 6.7z" fill="url(#a)"/>
+</svg>
diff --git a/browser/themes/shared/fxa/avatar-empty.svg b/browser/themes/shared/fxa/avatar-empty.svg
new file mode 100644
index 0000000000..9f7a8266f7
--- /dev/null
+++ b/browser/themes/shared/fxa/avatar-empty.svg
@@ -0,0 +1,8 @@
+<!-- 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" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8.5 13.25c1.912 0 3.571-1.038 4.489-2.569A1.993 1.993 0 0 0 11.495 10l-5.99 0c-.596 0-1.126.267-1.494.681.918 1.531 2.577 2.569 4.489 2.569z"/>
+  <path d="M8.5 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/>
+  <path d="M8.5 2.25c3.446 0 6.25 2.804 6.25 6.25s-2.804 6.25-6.25 6.25-6.25-2.804-6.25-6.25S5.054 2.25 8.5 2.25M8.5 1a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15z"/>
+</svg>
diff --git a/browser/themes/shared/fxa/avatar.svg b/browser/themes/shared/fxa/avatar.svg
new file mode 100644
index 0000000000..9391f57540
--- /dev/null
+++ b/browser/themes/shared/fxa/avatar.svg
@@ -0,0 +1,6 @@
+<!-- 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" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8.5 1a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm0 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zm0 9.75c-1.912 0-3.571-1.038-4.489-2.569A1.993 1.993 0 0 1 5.505 11l5.99 0c.596 0 1.126.267 1.494.681-.918 1.531-2.577 2.569-4.489 2.569z"/>
+</svg>
diff --git a/browser/themes/shared/fxa/fxa-spinner.svg b/browser/themes/shared/fxa/fxa-spinner.svg
new file mode 100644
index 0000000000..1c3c739cf5
--- /dev/null
+++ b/browser/themes/shared/fxa/fxa-spinner.svg
@@ -0,0 +1,28 @@
+<!-- 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="73px" height="73px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <defs>
+        <linearGradient x1="93.0928096%" y1="52.7734375%" x2="68.5133398%" y2="119.326007%" id="linearGradient-1">
+            <stop stop-color="#0A84FF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#0A84FF" offset="69.3698182%"></stop>
+            <stop stop-color="#0A84FF" offset="100%"></stop>
+            <stop stop-color="#2484C6" stop-opacity="0.00477766951" offset="100%"></stop>
+            <stop stop-color="#2484C6" stop-opacity="0" offset="100%"></stop>
+            <stop stop-color="#2484C6" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0" y="0" width="48" height="60"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Shape" transform="translate(-5.000000, -1.000000)">
+            <path d="M41.8,73.8 C21.9,73.8 5.8,57.7 5.8,37.8 C5.8,18.1 21.6,2.2 41.1,1.8 C41.3,1.8 41.4,1.8 41.4,1.8 C41.5,1.8 41.7,1.8 41.8,1.8 C44.6,2.2 46.8,4.5 46.8,7.3 C46.8,10.1 44.6,12.5 41.8,12.7 C28,12.8 16.8,24 16.8,37.8 C16.8,51.6 28,62.8 41.8,62.8 C55.6,62.8 66.8,51.6 66.8,37.8 L77.8,37.8 C77.8,57.7 61.7,73.8 41.8,73.8 Z" fill="url(#linearGradient-1)"></path>
+            <mask id="mask-3" fill="white">
+                <use href="#path-2"></use>
+            </mask>
+            <g id="Mask"></g>
+            <path d="M41.8,73.8 C21.9,73.8 5.8,57.7 5.8,37.8 C5.8,18.1 21.6,2.2 41.1,1.8 C41.3,1.8 41.4,1.8 41.4,1.8 C41.5,1.8 41.7,1.8 41.8,1.8 C44.6,2.2 46.8,4.5 46.8,7.3 C46.8,10.1 44.6,12.5 41.8,12.7 C28,12.8 16.8,24 16.8,37.8 C16.8,51.6 28,62.8 41.8,62.8 C55.6,62.8 66.8,51.6 66.8,37.8 L77.8,37.8 C77.8,57.7 61.7,73.8 41.8,73.8 Z" fill="#0A84FF" mask="url(#mask-3)"></path>
+        </g>
+    </g>
+</svg>
diff --git a/browser/themes/shared/fxa/monitor.svg b/browser/themes/shared/fxa/monitor.svg
new file mode 100644
index 0000000000..04df0e0029
--- /dev/null
+++ b/browser/themes/shared/fxa/monitor.svg
@@ -0,0 +1,4 @@
+<!-- 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 height="16" width="16" xmlns="http://www.w3.org/2000/svg"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="11.048" x2="3.442" y1="1.867" y2="15.04"><stop offset="0" stop-color="#ff9640"/><stop offset=".6" stop-color="#fc4055"/><stop offset="1" stop-color="#e31587"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="11.048" x2="3.442" y1="1.867" y2="15.04"><stop offset="0" stop-color="#fff36e" stop-opacity=".8"/><stop offset=".094" stop-color="#fff36e" stop-opacity=".699"/><stop offset=".752" stop-color="#fff36e" stop-opacity="0"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="7.47" x2="13.655" y1="10.491" y2="4.306"><stop offset="0" stop-color="#0090ed"/><stop offset=".325" stop-color="#5b6df8"/><stop offset=".529" stop-color="#9059ff"/><stop offset="1" stop-color="#b833e1"/></linearGradient><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="12.222" x2="14.968" y1="13.939" y2="6.773"><stop offset="0" stop-color="#054096" stop-opacity=".5"/><stop offset=".054" stop-color="#0f3d9c" stop-opacity=".441"/><stop offset=".261" stop-color="#2f35b1" stop-opacity=".249"/><stop offset=".466" stop-color="#462fbf" stop-opacity=".111"/><stop offset=".669" stop-color="#542bc8" stop-opacity=".028"/><stop offset=".864" stop-color="#592acb" stop-opacity="0"/></linearGradient><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="8.46" x2="14.98" y1="1.312" y2="6.859"><stop offset="0" stop-color="#722291" stop-opacity=".5"/><stop offset=".5" stop-color="#722291" stop-opacity="0"/></linearGradient><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="9.229" x2="10.299" y1="11.053" y2="12.327"><stop offset="0" stop-color="#960e18" stop-opacity=".6"/><stop offset=".192" stop-color="#ac1624" stop-opacity=".476"/><stop offset=".579" stop-color="#e42c41" stop-opacity=".156"/><stop offset=".75" stop-color="#ff3750" stop-opacity="0"/></linearGradient><symbol id="g" viewBox="0 0 15 15.929"><path d="m13.7 3.049-5-2.741a2.5 2.5 0 0 0 -2.4 0l-5 2.741a2.5 2.5 0 0 0 -1.3 2.192v5.566a2.5 2.5 0 0 0 1.264 2.173l4.954 2.82a.99.99 0 0 0 .493.131 1 1 0 0 0 .5-1.869l-4.453-2.532a1.5 1.5 0 0 1 -.758-1.304v-4.393a1.5 1.5 0 0 1 .779-1.315l4-2.193a1.5 1.5 0 0 1 1.442 0l4 2.193a1.5 1.5 0 0 1 .779 1.315v4.351a1.5 1.5 0 0 1 -.791 1.322l-1.007.54-.834-1.34a3.992 3.992 0 1 0 -2.868 1.223 3.953 3.953 0 0 0 1.156-.19l1.344 2.161a1 1 0 0 0 1.321.353l2.361-1.267a2.5 2.5 0 0 0 1.318-2.204v-5.541a2.5 2.5 0 0 0 -1.3-2.192zm-8.2 4.88a2 2 0 1 1 2 2 2 2 0 0 1 -2-2z" fill="url(#a)"/><path d="m13.7 3.049-5-2.741a2.5 2.5 0 0 0 -2.4 0l-5 2.741a2.5 2.5 0 0 0 -1.3 2.192v5.566a2.5 2.5 0 0 0 1.264 2.173l4.954 2.82a.99.99 0 0 0 .493.131 1 1 0 0 0 .5-1.869l-4.453-2.532a1.5 1.5 0 0 1 -.758-1.304v-4.393a1.5 1.5 0 0 1 .779-1.315l4-2.193a1.5 1.5 0 0 1 1.442 0l4 2.193a1.5 1.5 0 0 1 .779 1.315v4.351a1.5 1.5 0 0 1 -.791 1.322l-1.007.54-.834-1.34a3.992 3.992 0 1 0 -2.868 1.223 3.953 3.953 0 0 0 1.156-.19l1.344 2.161a1 1 0 0 0 1.321.353l2.361-1.267a2.5 2.5 0 0 0 1.318-2.204v-5.541a2.5 2.5 0 0 0 -1.3-2.192zm-8.2 4.88a2 2 0 1 1 2 2 2 2 0 0 1 -2-2z" fill="url(#b)"/><use height="-32766" transform="translate(16390.518 16390.929)" width="-32766" href="#c"/><path d="m13.288 13.2.394-.211a2.5 2.5 0 0 0 1.318-2.207v-5.541a2.5 2.5 0 0 0 -1.3-2.192l-2.47-1.355a3.434 3.434 0 0 0 -3.305 0l-1.146.63a1.5 1.5 0 0 1 1.442 0l4 2.193a1.5 1.5 0 0 1 .779 1.316v4.351a1.5 1.5 0 0 1 -.791 1.322l-1.007.54.429.7a1.249 1.249 0 0 0 1.657.454z" fill="url(#c)"/><path d="m13 10.184a1.5 1.5 0 0 1 -.791 1.322l-1.007.54.429.7a1.25 1.25 0 0 0 1.658.449l.393-.211a2.5 2.5 0 0 0 1.318-2.203v-2.817h-2z" fill="url(#d)" opacity=".9"/><path d="m13.7 3.049-2.47-1.355a3.434 3.434 0 0 0 -3.305 0l-1.146.63a1.5 1.5 0 0 1 1.442 0l4 2.193a1.5 1.5 0 0 1 .779 1.316v2.131h2v-2.723a2.5 2.5 0 0 0 -1.3-2.192z" fill="url(#e)"/><path d="m11.2 12.046-.834-1.34a3.991 3.991 0 0 1 -1.713 1.033l.808 1.3z" fill="url(#f)" opacity=".9"/></symbol><use height="15.929" transform="translate(.5 .071)" width="15" href="#g"/></svg>
\ No newline at end of file
diff --git a/browser/themes/shared/fxa/send-to-device.svg b/browser/themes/shared/fxa/send-to-device.svg
new file mode 100644
index 0000000000..0d6e6a4253
--- /dev/null
+++ b/browser/themes/shared/fxa/send-to-device.svg
@@ -0,0 +1,4 @@
+<!-- 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 viewBox="0 0 164 119" xmlns="http://www.w3.org/2000/svg"><radialGradient id="b" cx="-309.624" cy="363.081" gradientTransform="matrix(117 0 0 -117 36334.738 42578)" gradientUnits="userSpaceOnUse" r=".951"><stop offset=".4" stop-color="#cdcdd4" stop-opacity="0"/><stop offset=".58" stop-color="#cdcdd4" stop-opacity=".02"/><stop offset=".77" stop-color="#cdcdd4" stop-opacity=".08"/><stop offset=".96" stop-color="#cdcdd4" stop-opacity=".18"/><stop offset="1" stop-color="#cdcdd4" stop-opacity=".2"/></radialGradient><radialGradient id="c" cx="-300.138" cy="354.335" gradientTransform="matrix(27 0 0 -27 8164.136 9661.001)" gradientUnits="userSpaceOnUse" r="3.274"><stop offset=".26" stop-color="#cdcdd4" stop-opacity="0"/><stop offset=".4" stop-color="#cdcdd4" stop-opacity=".02"/><stop offset=".55" stop-color="#cdcdd4" stop-opacity=".08"/><stop offset=".69" stop-color="#cdcdd4" stop-opacity=".18"/><stop offset=".72" stop-color="#cdcdd4" stop-opacity=".2"/></radialGradient><radialGradient id="d" cx="-305.732" cy="357.242" gradientTransform="matrix(40 0 0 -40 12282.452 14394)" gradientUnits="userSpaceOnUse" r="3.229"><stop offset=".27" stop-color="#cdcdd4" stop-opacity="0"/><stop offset=".46" stop-color="#cdcdd4" stop-opacity=".02"/><stop offset=".66" stop-color="#cdcdd4" stop-opacity=".08"/><stop offset=".86" stop-color="#cdcdd4" stop-opacity=".18"/><stop offset=".9" stop-color="#cdcdd4" stop-opacity=".2"/></radialGradient><linearGradient id="a"><stop offset=".22" stop-color="#b833e1"/><stop offset=".91" stop-color="#ff4f5e"/></linearGradient><linearGradient id="e" gradientTransform="matrix(47 0 0 -75 14493.74 27225)" gradientUnits="userSpaceOnUse" x1="-306.295" x2="-305.345" href="#a" y1="361.401" y2="363.112"/><linearGradient id="f" gradientTransform="matrix(13 0 0 -5 3838.739 1639)" gradientUnits="userSpaceOnUse" x1="-290.414" x2="-286.415" href="#a" y1="315.51" y2="317.029"/><linearGradient id="g" gradientTransform="matrix(28 0 0 -36 8546.74 12970)" gradientUnits="userSpaceOnUse" x1="-301.569" x2="-301.162" y1="358.334" y2="358.927"><stop offset="0" stop-color="#ff298a"/><stop offset="1" stop-color="#ff6a75"/></linearGradient><circle cx="85.2" cy="60.5" fill="url(#b)" r="58.5"/><path d="M47.7 43.9c0 4.5-3.6 8.1-8.2 8.1H6.8c-3.4-.1-6-2.9-6-6.2s2.7-6.1 6-6.2c.5 0 1 .1 1.5.2-.1-.5-.2-1-.2-1.4 0-2.4 1.3-4.6 3.4-5.7s4.7-1 6.7.4c1.4-5.2 6.5-8.6 11.9-7.9s9.5 5.2 9.5 10.6c4.5 0 8.2 3.6 8.1 8.1z" fill="url(#c)"/><path d="M154.1 21.6c-.8 0-1.5.1-2.2.3.9-3.8-.7-7.8-4-10s-7.6-2.2-10.9 0C134.9 4.1 127.3-.9 119.2.1S105 7.9 105 15.9c-6.8 0-12.2 5.4-12.2 12s5.5 12 12.2 12h49.2c3.4.1 6.6-1.6 8.3-4.5s1.7-6.5 0-9.3-5-4.6-8.4-4.5z" fill="url(#d)"/><path d="M77.7 74.8V41.4c0-1.9-1.5-3.4-3.4-3.4H29.1c-1.9 0-3.4 1.5-3.4 3.4v32.3c0 1.9 1.5 3.4 3.4 3.4h46.3c1.3-.1 2.3-1.1 2.3-2.3zm-2.2-32.3H27.8v-1.1c0-.6.5-1.1 1.1-1.1h45.4c.6 0 1.1.5 1.1 1.1z" fill="#b1b1bc"/><path d="M101.1 21h36.2c3 0 5.4 2.4 5.4 5.4v64.2c0 3-2.4 5.4-5.4 5.4h-36.2c-3 0-5.4-2.4-5.4-5.4V26.4c0-3 2.5-5.4 5.4-5.4z" fill="url(#e)"/><path d="M123.7 91h-8v-3h8z" fill="#ff848b"/><path d="M85.1 55c-1.3.1-2.4 1.2-2.4 2.5s1.1 2.4 2.4 2.5h10.6v-5z" fill="url(#f)"/><path d="M123 56.1l-15.5-15.4c-1-1-2.6-1-3.7 0-1 1-1 2.6 0 3.6l11.1 11H95.7v5.1h19.1l-11.1 11c-.7.6-.9 1.6-.7 2.5s.9 1.6 1.8 1.8 1.8 0 2.5-.6l.1-.1L123 59.8c.5-.5.8-1.1.8-1.8s-.3-1.4-.8-1.9z" fill="url(#g)"/></svg>
\ No newline at end of file
diff --git a/browser/themes/shared/fxa/send.svg b/browser/themes/shared/fxa/send.svg
new file mode 100644
index 0000000000..e5c36eace8
--- /dev/null
+++ b/browser/themes/shared/fxa/send.svg
@@ -0,0 +1,4 @@
+<!-- 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 height="16" width="16" xmlns="http://www.w3.org/2000/svg"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="11.369" x2="3.641" y1="1.065" y2="14.451"><stop offset="0" stop-color="#ff9640"/><stop offset=".6" stop-color="#fc4055"/><stop offset="1" stop-color="#e31587"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="11.369" x2="3.641" y1="1.065" y2="14.451"><stop offset="0" stop-color="#fff36e" stop-opacity=".8"/><stop offset=".094" stop-color="#fff36e" stop-opacity=".699"/><stop offset=".752" stop-color="#fff36e" stop-opacity="0"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="8.984" x2="12.975" y1="10.186" y2="3.273"><stop offset="0" stop-color="#0090ed"/><stop offset=".386" stop-color="#5b6df8"/><stop offset=".629" stop-color="#9059ff"/><stop offset="1" stop-color="#b833e1"/></linearGradient><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="8.119" x2="14.738" y1="7.437" y2="9.03"><stop offset="0" stop-color="#054096" stop-opacity=".5"/><stop offset=".054" stop-color="#0f3d9c" stop-opacity=".441"/><stop offset=".261" stop-color="#2f35b1" stop-opacity=".249"/><stop offset=".466" stop-color="#462fbf" stop-opacity=".111"/><stop offset=".669" stop-color="#542bc8" stop-opacity=".028"/><stop offset=".864" stop-color="#592acb" stop-opacity="0"/></linearGradient><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="12.93" x2="9.059" y1="3.351" y2="10.055"><stop offset="0" stop-color="#722291" stop-opacity=".5"/><stop offset=".295" stop-color="#722291" stop-opacity="0"/></linearGradient><path d="m8.017 0a8.036 8.036 0 0 0 -7.978 7.374 1.522 1.522 0 0 0 .4 1.151 1.5 1.5 0 0 0 1.096.475h5.465v3.584l-1.293-1.291a1 1 0 0 0 -1.414 1.414l3 3a1 1 0 0 0 .325.216.986.986 0 0 0 .764 0 1 1 0 0 0 .325-.216l3-3a1 1 0 0 0 -1.414-1.414l-1.293 1.293v-3.586h5.5a1.5 1.5 0 0 0 1.1-.478 1.523 1.523 0 0 0 .4-1.148 8.037 8.037 0 0 0 -7.983-7.374zm0 7h-5.917a6 6 0 0 1 11.84 0z" fill="url(#a)"/><path d="m8.017 0a8.036 8.036 0 0 0 -7.978 7.374 1.522 1.522 0 0 0 .4 1.151 1.5 1.5 0 0 0 1.096.475h5.465v3.584l-1.293-1.291a1 1 0 0 0 -1.414 1.414l3 3a1 1 0 0 0 .325.216.986.986 0 0 0 .764 0 1 1 0 0 0 .325-.216l3-3a1 1 0 0 0 -1.414-1.414l-1.293 1.293v-3.586h5.5a1.5 1.5 0 0 0 1.1-.478 1.523 1.523 0 0 0 .4-1.148 8.037 8.037 0 0 0 -7.983-7.374zm0 7h-5.917a6 6 0 0 1 11.84 0z" fill="url(#b)"/><path d="m7 9 1.009-7a6.042 6.042 0 0 1 5.928 5h-2.937a2 2 0 0 0 -2 2h5.5a1.5 1.5 0 0 0 1.5-1.626c-.327-3.574-4.549-5.517-7.991-5.374z" fill="url(#c)"/><path d="m13.937 7h-2.937a2 2 0 0 0 -2 2h5.5a1.5 1.5 0 0 0 1.1-.478z" fill="url(#d)" opacity=".9"/><path d="m15.6 8.522a1.5 1.5 0 0 0 .4-1.148c-.327-3.574-4.549-5.517-7.991-5.374a6.042 6.042 0 0 1 5.928 5z" fill="url(#e)"/></svg>
\ No newline at end of file
diff --git a/browser/themes/shared/fxa/sync-devices.svg b/browser/themes/shared/fxa/sync-devices.svg
new file mode 100644
index 0000000000..9d4f3fb97d
--- /dev/null
+++ b/browser/themes/shared/fxa/sync-devices.svg
@@ -0,0 +1,49 @@
+<!-- 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 height="2in" viewBox="0 0 315.96 144" width="4.39in" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient id="a" cx="101.36" cy="70.18" gradientUnits="userSpaceOnUse" r="58.29">
+    <stop offset=".27" stop-color="#cdcdd4" stop-opacity="0"/>
+    <stop offset=".46" stop-color="#cdcdd4" stop-opacity=".02"/>
+    <stop offset=".66" stop-color="#cdcdd4" stop-opacity=".08"/>
+    <stop offset=".86" stop-color="#cdcdd4" stop-opacity=".18"/>
+    <stop offset=".9" stop-color="#cdcdd4" stop-opacity=".2"/>
+  </radialGradient>
+  <radialGradient id="b" cx="225.08" cy="70.18" r="58.29" href="#a"/>
+  <linearGradient id="c" gradientUnits="userSpaceOnUse" x1="28.25" x2="93.99" y1="99.19" y2="33.44">
+    <stop offset="0" stop-color="#c689ff"/>
+    <stop offset="1" stop-color="#d74cf0"/>
+  </linearGradient>
+  <linearGradient id="d" gradientUnits="userSpaceOnUse" x1="-5.18" x2="106.41" y1="139.25" y2="27.66">
+    <stop offset=".16" stop-color="#b833e1"/>
+    <stop offset=".96" stop-color="#ff4f5e"/>
+  </linearGradient>
+  <linearGradient id="e" gradientUnits="userSpaceOnUse" x1="96.11" x2="225.52" y1="139" y2="9.59">
+    <stop offset=".28" stop-color="#7542e5"/>
+    <stop offset=".42" stop-color="#824deb"/>
+    <stop offset=".79" stop-color="#a067fa"/>
+    <stop offset="1" stop-color="#ab71ff"/>
+  </linearGradient>
+  <linearGradient id="f" gradientUnits="userSpaceOnUse" x1="221.49" x2="303.29" y1="111.6" y2="29.8">
+    <stop offset=".43" stop-color="#00b3f4"/>
+    <stop offset=".61" stop-color="#00bbf6"/>
+    <stop offset=".89" stop-color="#00d2fc"/>
+    <stop offset="1" stop-color="#0df"/>
+  </linearGradient>
+  <path d="m101.41 128.46a58.3 58.3 0 0 1 -29.09-7.76 3.75 3.75 0 0 1 3.68-6.49 50.75 50.75 0 0 0 25.36 6.79 3.76 3.76 0 0 1 3.77 3.74 3.72 3.72 0 0 1 -3.72 3.72zm14.11-1.85a3.75 3.75 0 0 1 -1-7.36 50.81 50.81 0 0 0 22.75-13.17 3.74 3.74 0 0 1 5.29 5.29 58.22 58.22 0 0 1 -26.1 15.11 3.6 3.6 0 0 1 -.94.13zm-52.67-14.07a3.73 3.73 0 0 1 -2.65-1.09 58.32 58.32 0 0 1 -15.13-26.09 3.74 3.74 0 0 1 7.23-1.94 50.83 50.83 0 0 0 13.19 22.73 3.74 3.74 0 0 1 -2.64 6.39zm85.76-11.36a3.74 3.74 0 0 1 -3.24-5.62 50.78 50.78 0 0 0 6.79-25.38v-.18a3.74 3.74 0 1 1 7.48 0v.14a58.31 58.31 0 0 1 -7.79 29.2 3.73 3.73 0 0 1 -3.24 1.84zm-101.79-27.18a3.7 3.7 0 0 1 -3.75-3.69v-.1a58.33 58.33 0 0 1 7.74-29 3.75 3.75 0 0 1 6.49 3.74 50.77 50.77 0 0 0 -6.74 25.3 3.78 3.78 0 0 1 -3.74 3.75zm107.18-14.39a3.74 3.74 0 0 1 -3.61-2.77 50.73 50.73 0 0 0 -13.24-22.7 3.75 3.75 0 0 1 5.28-5.32 58.23 58.23 0 0 1 15.18 26.06 3.77 3.77 0 0 1 -3.61 4.73zm-91.3-24.16a3.75 3.75 0 0 1 -2.7-6.39 58.26 58.26 0 0 1 26.11-15.15 3.74 3.74 0 1 1 2 7.22 50.92 50.92 0 0 0 -22.76 13.21 3.71 3.71 0 0 1 -2.65 1.11zm65.78-8.86a3.72 3.72 0 0 1 -1.87-.5 50.77 50.77 0 0 0 -25.25-6.71h-.16a3.75 3.75 0 1 1 0-7.49h.08a58.37 58.37 0 0 1 29.06 7.71 3.74 3.74 0 0 1 -1.86 7z" fill="url(#a)"/>
+  <path d="m225.13 128.46a58.24 58.24 0 0 1 -29.13-7.76 3.75 3.75 0 0 1 3.74-6.49 50.71 50.71 0 0 0 25.34 6.79 3.76 3.76 0 0 1 3.77 3.74 3.72 3.72 0 0 1 -3.72 3.72zm14.11-1.85a3.74 3.74 0 0 1 -1-7.36 50.78 50.78 0 0 0 22.76-13.17 3.74 3.74 0 0 1 5.3 5.29 58.33 58.33 0 0 1 -26.1 15.11 3.72 3.72 0 0 1 -.96.13zm-52.67-14.07a3.71 3.71 0 0 1 -2.64-1.09 58.14 58.14 0 0 1 -15.13-26.09 3.74 3.74 0 1 1 7.2-1.94 50.83 50.83 0 0 0 13.19 22.73 3.74 3.74 0 0 1 -2.64 6.39zm85.76-11.36a3.74 3.74 0 0 1 -3.24-5.62 50.78 50.78 0 0 0 6.79-25.38v-.18a3.75 3.75 0 1 1 7.49 0v.14a58.32 58.32 0 0 1 -7.8 29.2 3.73 3.73 0 0 1 -3.24 1.84zm-101.79-27.18a3.69 3.69 0 0 1 -3.74-3.69v-.1a58.32 58.32 0 0 1 7.73-29 3.75 3.75 0 0 1 6.47 3.67 50.77 50.77 0 0 0 -6.74 25.3 3.78 3.78 0 0 1 -3.72 3.82zm107.18-14.39a3.74 3.74 0 0 1 -3.61-2.77 50.81 50.81 0 0 0 -13.23-22.7 3.74 3.74 0 0 1 5.27-5.32 58.34 58.34 0 0 1 15.19 26.06 3.74 3.74 0 0 1 -2.64 4.59 3.63 3.63 0 0 1 -.98.14zm-91.3-24.16a3.74 3.74 0 0 1 -2.65-6.39 58.2 58.2 0 0 1 26.07-15.15 3.74 3.74 0 1 1 1.95 7.22 51 51 0 0 0 -22.72 13.21 3.71 3.71 0 0 1 -2.65 1.11zm65.78-8.86a3.71 3.71 0 0 1 -1.86-.5 50.8 50.8 0 0 0 -25.26-6.71h-.16a3.75 3.75 0 0 1 0-7.49h.08a58.37 58.37 0 0 1 29.07 7.71 3.74 3.74 0 0 1 -1.87 7z" fill="url(#b)"/>
+  <path d="m44.62 94.89h33v9.57h-33z" fill="#ff848b"/>
+  <path d="m21.52 40.17h79.19v52.3h-79.19z" fill="url(#c)"/>
+  <path d="m109.28 97.75h-2.15v-59.43a4.28 4.28 0 0 0 -4.28-4.32h-83.46a4.28 4.28 0 0 0 -4.28 4.28v59.47h-2.11a2.12 2.12 0 0 0 -2.13 2.12v4.31a2.13 2.13 0 0 0 2.13 2.13h96.32a2.13 2.13 0 0 0 2.13-2.13v-4.31a2.12 2.12 0 0 0 -2.17-2.12zm-39.6 4.25h-17.13v-4.25h17.13z" fill="url(#d)"/>
+  <path d="m82 62a.83.83 0 0 0 -.83.83v1a5.77 5.77 0 0 0 -9.76 2.62.83.83 0 0 0 .6 1h.2a.84.84 0 0 0 .81-.63 4.11 4.11 0 0 1 4-3.14 4.06 4.06 0 0 1 3.28 1.62h-1.63a.83.83 0 0 0 -.08 1.7h3.41a.84.84 0 0 0 .83-.83v-3.37a.83.83 0 0 0 -.83-.8zm0 6.17a.83.83 0 0 0 -1 .6 4.11 4.11 0 0 1 -7.3 1.49h1.63a.83.83 0 0 0 0-1.66h-3.33a.83.83 0 0 0 -.83.83v3.32a.83.83 0 1 0 1.66.08v-1a5.75 5.75 0 0 0 9.75-2.62.83.83 0 0 0 -.58-1.07zm-36.25-6.72a6.33 6.33 0 1 0 6.33 6.33 6.33 6.33 0 0 0 -6.33-6.33zm0 11.07a4.75 4.75 0 1 1 4.74-4.74 4.75 4.75 0 0 1 -4.74 4.74zm2.77-4.74h-2.77v-2.78a.4.4 0 0 0 -.75 0v3.17a.4.4 0 0 0 .39.39h3.17a.4.4 0 0 0 0-.79zm9.62 6.1a.85.85 0 0 1 -.85-.85.49.49 0 0 1 0-.12l.47-3.37-2.26-2.42a.85.85 0 0 1 .5-1.42l3.15-.56 1.49-3a.85.85 0 0 1 1.14-.38.87.87 0 0 1 .38.38l1.49 3 3.15.56a.85.85 0 0 1 .69 1 .78.78 0 0 1 -.22.43l-2.27 2.42.48 3.36a.85.85 0 0 1 -.73 1 .83.83 0 0 1 -.51-.09l-2.86-1.52-2.85 1.49a.89.89 0 0 1 -.39.09zm-.64-6.88 1.9 2-.4 2.79 2.37-1.23 2.37 1.23-.38-2.79 1.9-2-2.67-.48-1.21-2.43-1.21 2.43z" fill="#f9f9fa"/>
+  <rect fill="url(#e)" height="69.38" rx="7.65" width="46" x="141.93" y="35.49"/>
+  <path d="m160.58 93.56h8.57v4.28h-8.57z" fill="#ab71ff"/>
+  <path d="m169.91 74a.83.83 0 0 0 -.83.83v1a5.75 5.75 0 0 0 -9.75 2.62.83.83 0 0 0 .6 1 .65.65 0 0 0 .2 0 .83.83 0 0 0 .8-.62 4.11 4.11 0 0 1 7.3-1.48h-1.63a.83.83 0 1 0 -.08 1.66h3.39a.83.83 0 0 0 .83-.83v-3.37a.83.83 0 0 0 -.83-.83zm0 6.17a.84.84 0 0 0 -1 .6 4.13 4.13 0 0 1 -4 3.14 4.06 4.06 0 0 1 -3.28-1.66h1.63a.83.83 0 0 0 0-1.65h-3.26a.83.83 0 0 0 -.83.82v3.31a.83.83 0 1 0 1.66.08v-1a5.76 5.76 0 0 0 9.76-2.62.83.83 0 0 0 -.59-1.04zm-5-36.65a6.33 6.33 0 1 0 6.32 6.32 6.32 6.32 0 0 0 -6.29-6.34zm0 11.07a4.75 4.75 0 1 1 4.74-4.75 4.75 4.75 0 0 1 -4.71 4.73zm2.76-4.75h-2.76v-2.79a.4.4 0 0 0 -.4-.39.39.39 0 0 0 -.39.39v3.17a.38.38 0 0 0 .39.39h3.16a.39.39 0 0 0 .4-.39.4.4 0 0 0 -.37-.4zm-6 21.08a.85.85 0 0 1 -.85-.85s0-.07 0-.11l.47-3.37-2.26-2.43a.85.85 0 0 1 0-1.2 1 1 0 0 1 .44-.22l3.15-.56 1.49-3a.85.85 0 0 1 1.14-.38 1 1 0 0 1 .38.38l1.49 3 3.15.56a.86.86 0 0 1 .69 1 .89.89 0 0 1 -.22.43l-2.26 2.43.47 3.37a.85.85 0 0 1 -.72 1 .88.88 0 0 1 -.51-.09l-2.85-1.49-2.85 1.49a.93.93 0 0 1 -.33.02zm-.61-6.92 1.89 2-.38 2.75 2.37-1.23 2.37 1.24-.39-2.76 1.89-2-2.66-.47-1.21-2.44-1.21 2.44z" fill="#f9f9fa"/>
+  <rect fill="url(#f)" height="65.56" rx="5.76" width="80.89" x="222.47" y="37.4"/>
+  <path d="m292.6 64.85h5.33v10.66h-5.33z" fill="#0df"/>
+  <g fill="#f9f9fa">
+    <path d="m282.65 64.37a.83.83 0 0 0 -.83.83v1a5.75 5.75 0 0 0 -9.75 2.62.83.83 0 0 0 .6 1 .64.64 0 0 0 .2 0 .82.82 0 0 0 .8-.63 4.13 4.13 0 0 1 4-3.14 4.08 4.08 0 0 1 3.33 1.65h-1.63a.82.82 0 0 0 -.87.79.84.84 0 0 0 .79.87h3.39a.83.83 0 0 0 .83-.83v-3.33a.83.83 0 0 0 -.83-.83zm0 6.17a.84.84 0 0 0 -1 .6 4.11 4.11 0 0 1 -7.29 1.49h1.64a.83.83 0 0 0 0-1.63h-3.3a.83.83 0 0 0 -.82.83v3.32a.83.83 0 0 0 1.65.08v-1a5.76 5.76 0 0 0 9.76-2.61.83.83 0 0 0 -.6-1.08z"/>
+    <path d="m246.41 63.85a6.33 6.33 0 1 0 6.33 6.33 6.32 6.32 0 0 0 -6.33-6.33zm0 11.07a4.75 4.75 0 1 1 4.75-4.74 4.74 4.74 0 0 1 -4.75 4.74zm2.77-4.74h-2.77v-2.77a.38.38 0 0 0 -.41-.41.39.39 0 0 0 -.4.39v3.16a.4.4 0 0 0 .4.4h3.16a.4.4 0 1 0 0-.79z"/>
+    <path d="m258.8 76.28a.85.85 0 0 1 -.85-.85s0-.08 0-.12l.47-3.37-2.26-2.43a.85.85 0 0 1 0-1.2.9.9 0 0 1 .44-.21l3.15-.56 1.49-3a.85.85 0 0 1 1.14-.38.87.87 0 0 1 .38.38l1.48 3 3.16.56a.85.85 0 0 1 .69 1 .89.89 0 0 1 -.22.43l-2.26 2.43.47 3.37a.85.85 0 0 1 -.72 1 .88.88 0 0 1 -.51-.09l-2.85-1.48-2.86 1.48a.76.76 0 0 1 -.34.04zm-.63-6.88 1.89 2-.38 2.76 2.37-1.16 2.37 1.24-.42-2.81 1.89-2-2.66-.48-1.21-2.43-1.22 2.43z"/>
+  </g>
+</svg>
diff --git a/browser/themes/shared/fxa/sync-illustration-issue.svg b/browser/themes/shared/fxa/sync-illustration-issue.svg
new file mode 100644
index 0000000000..9fdfb1e65d
--- /dev/null
+++ b/browser/themes/shared/fxa/sync-illustration-issue.svg
@@ -0,0 +1,52 @@
+<!-- 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 height="2in" viewBox="0 0 216 144" width="3in" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient id="a" cx="224" cy="135.18" gradientUnits="userSpaceOnUse" r="102.61">
+    <stop offset=".26" stop-color="#cdcdd4" stop-opacity="0"/>
+    <stop offset=".4" stop-color="#cdcdd4" stop-opacity=".02"/>
+    <stop offset=".55" stop-color="#cdcdd4" stop-opacity=".08"/>
+    <stop offset=".69" stop-color="#cdcdd4" stop-opacity=".18"/>
+    <stop offset=".72" stop-color="#cdcdd4" stop-opacity=".2"/>
+  </radialGradient>
+  <radialGradient id="b" cx="-33.16" cy="130.43" gradientUnits="userSpaceOnUse" r="150.75">
+    <stop offset=".27" stop-color="#cdcdd4" stop-opacity="0"/>
+    <stop offset=".46" stop-color="#cdcdd4" stop-opacity=".02"/>
+    <stop offset=".66" stop-color="#cdcdd4" stop-opacity=".08"/>
+    <stop offset=".86" stop-color="#cdcdd4" stop-opacity=".18"/>
+    <stop offset=".9" stop-color="#cdcdd4" stop-opacity=".2"/>
+  </radialGradient>
+  <radialGradient id="c" cx="129.21" cy="117.26" gradientTransform="matrix(1 0 0 .7 0 35.37)" gradientUnits="userSpaceOnUse" r="112.67">
+    <stop offset=".4" stop-color="#cdcdd4" stop-opacity="0"/>
+    <stop offset=".58" stop-color="#cdcdd4" stop-opacity=".02"/>
+    <stop offset=".77" stop-color="#cdcdd4" stop-opacity=".08"/>
+    <stop offset=".96" stop-color="#cdcdd4" stop-opacity=".18"/>
+    <stop offset="1" stop-color="#cdcdd4" stop-opacity=".2"/>
+  </radialGradient>
+  <linearGradient id="d" gradientUnits="userSpaceOnUse" x1="67.44" x2="126.91" y1="85.38" y2="25.9">
+    <stop offset="0" stop-color="#c689ff"/>
+    <stop offset="1" stop-color="#d74cf0"/>
+  </linearGradient>
+  <linearGradient id="e" gradientUnits="userSpaceOnUse" x1="37.24" x2="138.18" y1="121.61" y2="20.67">
+    <stop offset=".22" stop-color="#b833e1"/>
+    <stop offset=".91" stop-color="#ff4f5e"/>
+  </linearGradient>
+  <linearGradient id="f" gradientUnits="userSpaceOnUse" x1="80.06" x2="199.29" y1="149.59" y2="30.36">
+    <stop offset=".28" stop-color="#7542e5"/>
+    <stop offset=".42" stop-color="#824deb"/>
+    <stop offset=".79" stop-color="#a067fa"/>
+    <stop offset="1" stop-color="#ab71ff"/>
+  </linearGradient>
+    <path d="m209.32 76.55a9.51 9.51 0 0 1 -9.47 9.51h-38.07a7.27 7.27 0 0 1 0-14.54 7.15 7.15 0 0 1 1.74.22 7.89 7.89 0 0 1 -.2-1.69 7.5 7.5 0 0 1 11.74-6.18 12.6 12.6 0 0 1 24.79 3.13 9.51 9.51 0 0 1 9.47 9.55z" fill="url(#a)"/>
+    <path d="m84.66 32.38a10.74 10.74 0 0 0 -2.66.32 11.09 11.09 0 0 0 .29-2.53 11.3 11.3 0 0 0 -17.69-9.31 19 19 0 0 0 -37.37 4.77 14.27 14.27 0 1 0 0 28.54h57.43a10.9 10.9 0 0 0 0-21.79z" fill="url(#b)"/>
+    <path d="m24.87 72.66a22.54 22.54 0 0 1 22.45-22.66l120.77-.48a22.53 22.53 0 1 1 .18 45.06l-120.77.53a22.54 22.54 0 0 1 -22.63-22.45z" fill="url(#c)"/>
+    <path d="m83.89 81.48h29.85v8.65h-29.85z" fill="#ff848b"/>
+    <path d="m61.36 31.98h71.63v47.31h-71.63z" fill="url(#d)"/>
+    <path d="m140.78 84.07h-1.95v-53.76a3.86 3.86 0 0 0 -3.83-3.86h-75.54a3.86 3.86 0 0 0 -3.86 3.87v53.75h-2a1.92 1.92 0 0 0 -1.88 1.93v3.9a1.92 1.92 0 0 0 1.93 1.93h87.13a1.93 1.93 0 0 0 1.93-1.93v-3.9a1.93 1.93 0 0 0 -1.93-1.93zm-35.78 3.87h-15.53v-3.87h15.53z" fill="url(#e)"/>
+    <rect fill="url(#f)" height="62.76" rx="5.4" width="41.61" x="122.66" y="54.8"/>
+    <path d="m139.53 107.32h7.75v3.87h-7.75z" fill="#ab71ff"/>
+    <g fill="#f9f9fa">
+      <path d="m107.19 47.81a6.25 6.25 0 0 0 -8.81 0l-.17.18-1.31 3.2 5.23.32a1 1 0 0 1 .63 1.62l-6.12 6.34a1 1 0 0 1 -.69.29.93.93 0 0 1 -.66-.27 1 1 0 0 1 0-1.36l4.68-4.83-4.52-.3a1 1 0 0 1 -.76-.45 1 1 0 0 1 -.07-.87l1.49-3.68-.24-.23a6.23 6.23 0 0 0 -8.8 0 6.22 6.22 0 0 0 0 8.8l9 9a1.5 1.5 0 0 0 1.07.44 1.54 1.54 0 0 0 1.07-.44l9-9a6.24 6.24 0 0 0 -.02-8.76z"/>
+      <path d="m153.39 74.11a6.24 6.24 0 0 0 -8.81 0l-.18.18-1.3 3.21 5.23.32a1 1 0 0 1 .63 1.62l-6.12 6.33a1 1 0 0 1 -1.35 0 1 1 0 0 1 0-1.35l4.68-4.83-4.49-.28a1 1 0 0 1 -.76-.44 1 1 0 0 1 -.07-.87l1.49-3.67-.24-.24a6.23 6.23 0 0 0 -8.8 8.81l9 9a1.51 1.51 0 0 0 2.15 0l9-9a6.25 6.25 0 0 0 -.06-8.79z"/>
+    </g>
+</svg>
diff --git a/browser/themes/shared/fxa/sync-illustration.svg b/browser/themes/shared/fxa/sync-illustration.svg
new file mode 100644
index 0000000000..155d2a4009
--- /dev/null
+++ b/browser/themes/shared/fxa/sync-illustration.svg
@@ -0,0 +1,50 @@
+<!-- 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 height="2in" viewBox="0 0 216 144" width="3in" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient id="a" cx="85.91" cy="159.8" gradientUnits="userSpaceOnUse" r="102.61">
+    <stop offset=".26" stop-color="#cdcdd4" stop-opacity="0"/>
+    <stop offset=".4" stop-color="#cdcdd4" stop-opacity=".02"/>
+    <stop offset=".55" stop-color="#cdcdd4" stop-opacity=".08"/>
+    <stop offset=".69" stop-color="#cdcdd4" stop-opacity=".18"/>
+    <stop offset=".72" stop-color="#cdcdd4" stop-opacity=".2"/>
+  </radialGradient>
+  <radialGradient id="b" cx="72.32" cy="144.71" gradientUnits="userSpaceOnUse" r="150.75">
+  <stop offset=".27" stop-color="#cdcdd4" stop-opacity="0"/>
+  <stop offset=".46" stop-color="#cdcdd4" stop-opacity=".02"/>
+  <stop offset=".66" stop-color="#cdcdd4" stop-opacity=".08"/>
+  <stop offset=".86" stop-color="#cdcdd4" stop-opacity=".18"/>
+  <stop offset=".9" stop-color="#cdcdd4" stop-opacity=".2"/>
+  </radialGradient>
+  <radialGradient id="c" cx="129.21" cy="117.26" gradientTransform="matrix(1 0 0 .7 0 35.37)" gradientUnits="userSpaceOnUse" r="112.67">
+    <stop offset=".4" stop-color="#cdcdd4" stop-opacity="0"/>
+    <stop offset=".58" stop-color="#cdcdd4" stop-opacity=".02"/>
+    <stop offset=".77" stop-color="#cdcdd4" stop-opacity=".08"/>
+    <stop offset=".96" stop-color="#cdcdd4" stop-opacity=".18"/>
+    <stop offset="1" stop-color="#cdcdd4" stop-opacity=".2"/>
+  </radialGradient>
+  <linearGradient id="d" gradientUnits="userSpaceOnUse" x1="67.44" x2="126.91" y1="85.38" y2="25.9">
+    <stop offset="0" stop-color="#c689ff"/>
+    <stop offset="1" stop-color="#d74cf0"/>
+  </linearGradient>
+  <linearGradient id="e" gradientUnits="userSpaceOnUse" x1="37.24" x2="138.18" y1="121.61" y2="20.67">
+    <stop offset=".22" stop-color="#b833e1"/>
+    <stop offset=".91" stop-color="#ff4f5e"/>
+  </linearGradient>
+  <linearGradient id="f" gradientUnits="userSpaceOnUse" x1="80.06" x2="199.29" y1="149.59" y2="30.36">
+    <stop offset=".28" stop-color="#7542e5"/>
+    <stop offset=".42" stop-color="#824deb"/>
+    <stop offset=".79" stop-color="#a067fa"/>
+    <stop offset="1" stop-color="#ab71ff"/>
+  </linearGradient>
+  <path d="m71.24 101.17a9.5 9.5 0 0 1 -9.47 9.5h-38.08a7.27 7.27 0 0 1 0-14.53 7.17 7.17 0 0 1 1.75.22 7.3 7.3 0 0 1 -.2-1.69 7.49 7.49 0 0 1 7.5-7.49 7.41 7.41 0 0 1 4.26 1.31 12.61 12.61 0 0 1 24.8 3.17 9.5 9.5 0 0 1 9.44 9.51z" fill="url(#a)"/>
+  <path d="m190.14 46.66a10.72 10.72 0 0 0 -2.61.32 11.15 11.15 0 0 0 .29-2.53 11.31 11.31 0 0 0 -17.69-9.32 19 19 0 0 0 -37.37 4.78 14.27 14.27 0 1 0 0 28.53h57.39a10.89 10.89 0 1 0 0-21.78z" fill="url(#b)"/>
+  <path d="m24.87 72.66a22.54 22.54 0 0 1 22.45-22.66l120.77-.48a22.53 22.53 0 1 1 .18 45.06l-120.77.53a22.54 22.54 0 0 1 -22.63-22.45z" fill="url(#c)"/>
+  <path d="m83.89 81.48h29.85v8.65h-29.85z" fill="#ff848b"/>
+  <path d="m61.36 31.98h71.63v47.31h-71.63z" fill="url(#d)"/>
+  <path d="m140.78 84.07h-1.95v-53.76a3.86 3.86 0 0 0 -3.83-3.86h-75.54a3.86 3.86 0 0 0 -3.86 3.87v53.75h-2a1.92 1.92 0 0 0 -1.88 1.93v3.9a1.92 1.92 0 0 0 1.93 1.93h87.13a1.93 1.93 0 0 0 1.93-1.93v-3.9a1.93 1.93 0 0 0 -1.93-1.93zm-35.78 3.87h-15.53v-3.87h15.53z" fill="url(#e)"/>
+  <path d="m107.33 47.59a6.26 6.26 0 0 0 -8.85 0l-1.27 1.26-1.21-1.26a6.26 6.26 0 0 0 -8.85 0 6.26 6.26 0 0 0 0 8.85l9 9a1.49 1.49 0 0 0 1.07.45 1.51 1.51 0 0 0 1.08-.45l9-9a6.26 6.26 0 0 0 .03-8.85z" fill="#f9f9fa"/>
+  <rect fill="url(#f)" height="62.76" rx="5.4" width="41.61" x="122.66" y="54.8"/>
+  <path d="m139.53 107.32h7.75v3.87h-7.75z" fill="#ab71ff"/>
+  <path d="m153.51 73.93a6.26 6.26 0 0 0 -8.85 0l-1.26 1.26-1.26-1.26a6.26 6.26 0 1 0 -8.85 8.85l9 9a1.53 1.53 0 0 0 1.08.45 1.51 1.51 0 0 0 1.08-.45l9-9a6.26 6.26 0 0 0 .06-8.85z" fill="#f9f9fa"/>
+  </svg>
-- 
cgit v1.2.3