From e0ba99621c5592a14157eca968c9b2f46b506e67 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 31 Jan 2023 15:48:35 +0000
Subject: [PATCH] Update background of split page to use purplish gradient, and
 also fix it to dark theme

---
 .../src/components/SplitPage.svelte           | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/frontend-core/src/components/SplitPage.svelte b/packages/frontend-core/src/components/SplitPage.svelte
index c05da94311..08ec519715 100644
--- a/packages/frontend-core/src/components/SplitPage.svelte
+++ b/packages/frontend-core/src/components/SplitPage.svelte
@@ -1,10 +1,15 @@
+<script>
+  import BG from "../../assets/bg.png"
+</script>
+
 <div class="split-page">
   <div class="left">
     <div class="content">
       <slot />
     </div>
   </div>
-  <div class="right">
+  <div class="right spectrum spectrum--darkest">
+    <img src={BG} alt="background" />
     <slot name="right" />
   </div>
 </div>
@@ -25,11 +30,14 @@
     overflow-y: auto;
   }
   .right {
-    background: linear-gradient(
-      to bottom right,
-      var(--spectrum-global-color-gray-300) 0%,
-      var(--background) 100%
-    );
+    position: relative;
+  }
+  .right img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
   }
   .content {
     width: 100%;