From 37e44106ecd94961839edc26eb6a0ece624ae682 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Tue, 29 Jan 2019 12:43:53 -0600
Subject: [PATCH] adds dark mode images

---
 .../assets/images/bg_bottom_branded.svg       |  4 +--
 .../assets/images/bg_bottom_branded_dark.svg  | 29 +++++++++++++++++++
 .../public/assets/images/bg_top_branded.svg   | 10 +++----
 .../assets/images/bg_top_branded_dark.svg     |  6 ++++
 src/ui/public/styles/_mixins.scss             | 10 +++++--
 5 files changed, 49 insertions(+), 10 deletions(-)
 create mode 100644 src/ui/public/assets/images/bg_bottom_branded_dark.svg
 create mode 100644 src/ui/public/assets/images/bg_top_branded_dark.svg

diff --git a/src/ui/public/assets/images/bg_bottom_branded.svg b/src/ui/public/assets/images/bg_bottom_branded.svg
index 170a1d9edca6d..8e5091f7b4cdc 100644
--- a/src/ui/public/assets/images/bg_bottom_branded.svg
+++ b/src/ui/public/assets/images/bg_bottom_branded.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1169" height="880" viewBox="0 0 1169 880">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1170" height="880" viewBox="0 0 1170 880">
   <defs>
     <radialGradient id="bg_bottom_branded-b" cx="44.645%" cy="43.259%" r="93.821%" fx="44.645%" fy="43.259%" gradientTransform="matrix(.54075 .76504 -.6424 .64398 .483 -.188)">
       <stop offset="0%" stop-color="#D9D9D9"/>
@@ -13,7 +13,7 @@
       <stop offset="0%" stop-color="#FFF" stop-opacity=".6"/>
       <stop offset="100%" stop-opacity=".25"/>
     </linearGradient>
-    <polygon id="bg_bottom_branded-d" points="560 364 1169 880 560 880"/>
+    <polygon id="bg_bottom_branded-d" points="561 364 1170 880 561 880"/>
     <linearGradient id="bg_bottom_branded-g" x1="0%" y1="0%" y2="100%">
       <stop offset="0%" stop-color="#FFF" stop-opacity=".2"/>
       <stop offset="100%" stop-opacity="0"/>
diff --git a/src/ui/public/assets/images/bg_bottom_branded_dark.svg b/src/ui/public/assets/images/bg_bottom_branded_dark.svg
new file mode 100644
index 0000000000000..24060ee5d24f6
--- /dev/null
+++ b/src/ui/public/assets/images/bg_bottom_branded_dark.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1170" height="880" viewBox="0 0 1170 880">
+  <defs>
+    <linearGradient id="bg_bottom_branded_dark-a" x1="77.613%" x2="2.264%" y1="48.924%" y2="48.924%">
+      <stop offset="0%" stop-color="#FFF" stop-opacity=".4"/>
+      <stop offset="100%" stop-color="#FFF" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="bg_bottom_branded_dark-c" x1="0%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#FFF" stop-opacity=".4"/>
+      <stop offset="100%" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="bg_bottom_branded_dark-d" x1="50%" x2="50%" y1=".727%" y2="53.618%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="100%" stop-color="#D9D9D9" stop-opacity=".3"/>
+    </linearGradient>
+    <path id="bg_bottom_branded_dark-b" d="M197,880 L374,880 C365.385564,795.927984 296.005151,723.868711 197,686 L197,880 Z"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <polygon fill="url(#bg_bottom_branded_dark-a)" points="561 364 1170 880 561 880" opacity=".02"/>
+    <polygon fill="#F5F5F5" fill-opacity=".7" points="0 0 1048 880 0 880" opacity=".01"/>
+    <polygon fill="#FFF" points="-12 538 342 868 -12 868" opacity=".01" transform="matrix(0 -1 -1 0 868 868)"/>
+    <path fill="#000" d="M197,737.327273 L197,880 L165,880 L165,703 L197,737.327273 Z" opacity=".02"/>
+    <g opacity=".01">
+      <use fill="#F5F5F5" xlink:href="#bg_bottom_branded_dark-b"/>
+      <use fill="url(#bg_bottom_branded_dark-c)" xlink:href="#bg_bottom_branded_dark-b" style="mix-blend-mode:overlay"/>
+      <use fill="url(#bg_bottom_branded_dark-d)" xlink:href="#bg_bottom_branded_dark-b" style="mix-blend-mode:overlay"/>
+    </g>
+    <path fill="#FFF" fill-opacity=".5" d="M330,880 L197,880 L197,737.327273 L330,880 Z" opacity=".01"/>
+  </g>
+</svg>
diff --git a/src/ui/public/assets/images/bg_top_branded.svg b/src/ui/public/assets/images/bg_top_branded.svg
index 1f5baac44f4ac..85e0a25d8071a 100644
--- a/src/ui/public/assets/images/bg_top_branded.svg
+++ b/src/ui/public/assets/images/bg_top_branded.svg
@@ -1,14 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="373" viewBox="0 0 400 373">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="370" viewBox="0 0 400 370">
   <defs>
     <linearGradient id="bg_top_branded-a" x1="10.793%" y1="50%" y2="50%">
       <stop offset="0%" stop-color="#FFF" stop-opacity=".5"/>
-      <stop offset="100%" stop-color="#E6EBF2" stop-opacity="0"/>
+      <stop offset="100%" stop-color="#E2E2E2" stop-opacity="0"/>
     </linearGradient>
-    <radialGradient id="bg_top_branded-c" cx="0%" cy="0%" r="146.629%" fx="0%" fy="0%" gradientTransform="matrix(.68199 .682 -.63596 .73135 0 0)">
+    <radialGradient id="bg_top_branded-c" cx="0%" cy="0%" r="147.266%" fx="0%" fy="0%" gradientTransform="matrix(.67904 .67904 -.62811 .7341 0 0)">
       <stop offset="0%" stop-color="#FFF" stop-opacity=".5"/>
       <stop offset="100%" stop-opacity=".2"/>
     </radialGradient>
-    <polygon id="bg_top_branded-b" points="400 373 0 0 400 0"/>
+    <polygon id="bg_top_branded-b" points="400 370 0 0 400 0"/>
     <linearGradient id="bg_top_branded-e" x1="0%" y1="35.11%" y2="0%">
       <stop offset="0%" stop-color="#FFF" stop-opacity=".6"/>
       <stop offset="100%" stop-opacity="0"/>
@@ -25,7 +25,7 @@
       <use fill="url(#bg_top_branded-c)" xlink:href="#bg_top_branded-b" style="mix-blend-mode:overlay"/>
     </g>
     <g opacity=".05">
-      <use fill="#F5F7FA" xlink:href="#bg_top_branded-d"/>
+      <use fill="#F5F5F5" xlink:href="#bg_top_branded-d"/>
       <use fill="url(#bg_top_branded-e)" xlink:href="#bg_top_branded-d" style="mix-blend-mode:overlay"/>
       <use fill="url(#bg_top_branded-f)" xlink:href="#bg_top_branded-d" style="mix-blend-mode:darken"/>
     </g>
diff --git a/src/ui/public/assets/images/bg_top_branded_dark.svg b/src/ui/public/assets/images/bg_top_branded_dark.svg
new file mode 100644
index 0000000000000..07965f6e2e3e0
--- /dev/null
+++ b/src/ui/public/assets/images/bg_top_branded_dark.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="370" viewBox="0 0 400 370">
+  <g fill="none" fill-rule="evenodd" opacity=".2">
+    <polygon fill="#D8D8D8" fill-opacity=".6" points="400 370 0 0 400 0" opacity=".08" style="mix-blend-mode:overlay"/>
+    <polygon fill="#F5F5F5" points="400 169 220 0 400 0" opacity=".06"/>
+  </g>
+</svg>
diff --git a/src/ui/public/styles/_mixins.scss b/src/ui/public/styles/_mixins.scss
index 1f6e52c74322e..8bdd67dc8bb86 100644
--- a/src/ui/public/styles/_mixins.scss
+++ b/src/ui/public/styles/_mixins.scss
@@ -72,14 +72,18 @@
     top: 0;
     right: 0;
     z-index: 1;
-    content: url('ui/assets/images/bg_top_branded.svg');
+    width: 400px;
+    height: 370px;
+    content: url(lightOrDarkTheme('ui/assets/images/bg_top_branded.svg', 'ui/assets/images/bg_top_branded_dark.svg'));
   }
 
   &::after {
     position: fixed;
-    bottom: -2px; // Hides an odd space at the bottom of the svg
+    bottom: 0;
     left: 0;
     z-index: 1;
-    content: url('ui/assets/images/bg_bottom_branded.svg');
+    width: 1170px;
+    height: 880px;
+    content: url(lightOrDarkTheme('ui/assets/images/bg_bottom_branded.svg', 'ui/assets/images/bg_bottom_branded_dark.svg'));
   }
 }