From d792c62c92bca75ffdbb30ca96e19d1ee279b4a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Thu, 20 Oct 2022 10:47:18 +0200
Subject: [PATCH] Inline global gradient
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We only use it in one place anyway. And components should be
self-contained, so they're easier to reason about.

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>
---
 src/App.svelte            |  3 ---
 src/Diagram.svelte        |  9 +++++++++
 src/LinearGradient.svelte | 14 --------------
 3 files changed, 9 insertions(+), 17 deletions(-)
 delete mode 100644 src/LinearGradient.svelte

diff --git a/src/App.svelte b/src/App.svelte
index 61b5b4255..ac5107881 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -13,7 +13,6 @@
   import Header from "@app/Header.svelte";
   import Loading from "@app/Loading.svelte";
   import Modal from "@app/Modal.svelte";
-  import LinearGradient from "@app/LinearGradient.svelte";
   import ColorPalette from "./ColorPalette.svelte";
 
   const loadConfig = getConfig().then(async cfg => {
@@ -113,6 +112,4 @@
       </Modal>
     </div>
   {/await}
-  <!-- Adds a svg linear gradient that can be used by any other svg under the id #gradient -->
-  <LinearGradient id="gradient" />
 </div>
diff --git a/src/Diagram.svelte b/src/Diagram.svelte
index c333e9a6c..9b045e11c 100644
--- a/src/Diagram.svelte
+++ b/src/Diagram.svelte
@@ -100,6 +100,15 @@
       </linearGradient>
     </defs>
   </svg>
+  <svg style="height: 0; width: 0;" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient id="gradient" x1="0" y1="1" x2="0" y2="0">
+        <stop offset="0%" stop-color="#ff55ff" stop-opacity="0.2" />
+        <stop offset="50%" stop-color="#ff55ff" stop-opacity="0.8" />
+        <stop offset="100%" stop-color="#ff55ff" stop-opacity="1" />
+      </linearGradient>
+    </defs>
+  </svg>
   {#if points.length > 0}
     <g>
       <path
diff --git a/src/LinearGradient.svelte b/src/LinearGradient.svelte
deleted file mode 100644
index fd52c50db..000000000
--- a/src/LinearGradient.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-  export let id: string;
-  export let fillColor = "#ff55ff";
-</script>
-
-<svg style="height: 0; width: 0;" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient {id} x1="0" y1="1" x2="0" y2="0">
-      <stop offset="0%" stop-color={fillColor} stop-opacity="0.2" />
-      <stop offset="50%" stop-color={fillColor} stop-opacity="0.8" />
-      <stop offset="100%" stop-color={fillColor} stop-opacity="1" />
-    </linearGradient>
-  </defs>
-</svg>