From 2bcc0beec7e3b93284ea9a77c04c9288b3600635 Mon Sep 17 00:00:00 2001
From: MrOnosa <supersnapple@gmail.com>
Date: Mon, 5 Oct 2020 21:20:48 -0500
Subject: [PATCH] Allowing gradients as a background setting. I have it
 functional, now I just need to add it to the settings.

For testing, set your customBackgroundColour to
{"angle": "185",
"gradient": [
{"colour": "#020024", "stop": 0},
{"colour": "#090979", "stop": 35},
{"colour": "#090979", "stop": 100}],
"type": "linear"}
---
 src/components/widgets/Background.jsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx
index 786ba226..bb048b9c 100644
--- a/src/components/widgets/Background.jsx
+++ b/src/components/widgets/Background.jsx
@@ -2,8 +2,21 @@ import React from 'react';
 import * as Constants from '../../modules/constants';
 
 export default class Background extends React.PureComponent {
+  gradientStyleBuilder(gradientSettings) {
+    const {type, angle, gradient } = gradientSettings;
+    const stepStyles = gradient.map(g => ` ${g.colour} ${g.stop}%`).join();
+    return `background: ${gradient[0].colour}; background: ${type}-gradient(${angle}deg,${stepStyles})`;
+  }
+
   setBackground(url, colour, credit) { // Sets the attributes of the background image
-    const background = colour ? `background-color: ${colour};` : `background-image: url(${url});`;
+    let gradientSettings;
+    try {
+      gradientSettings = JSON.parse(colour);
+    } catch (e) {
+      //colour use to be simply a hex colour or a NULL value before it was a JSON object. This automatically upgrades the hex colour value to the new standard. (NULL would not trigger an exception)
+      gradientSettings = {"type": "linear", "angle": "0", "gradient": [{"colour": colour, "stop": 0}, {"colour": colour, "stop": 100}]};
+    }
+    const background = colour ? this.gradientStyleBuilder(gradientSettings) : `background-image: url(${url});`;
 
     document.querySelector('#backgroundImage').setAttribute(
       'style',