From 6eed689db2fd581f39ee961dd3756bb36308ca93 Mon Sep 17 00:00:00 2001
From: Fulmine <jake.fulminated@gmail.com>
Date: Sat, 19 Mar 2022 10:18:19 +0100
Subject: [PATCH] add colored background setting

---
 src/pages/Settings.svelte | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/pages/Settings.svelte b/src/pages/Settings.svelte
index 67cb1f0c..ce681a4a 100644
--- a/src/pages/Settings.svelte
+++ b/src/pages/Settings.svelte
@@ -10,7 +10,7 @@
             banner_top: true,
             banner_bottom: true,
             gradient_background: false,
-            no_background: false,
+            color_background: false,
             twemoji: false
         }
     };
@@ -37,17 +37,21 @@
                     <h4>Appearance</h4>
                     <hr/>
                     <Row>
-                        <Col xs={12} lg={4}>
+                        <Col xs={12} lg={4} class="mb-2">
                             <span id="s-bannertop">Show banners in the background?</span> <Toggle hideLabel style="display: inline" label="Remove banner from background" toggled={settings.appearance.banner_top} on:toggle={() => {settings.appearance.banner_top = !settings.appearance.banner_top; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
-                            <Tooltip target="s-bannertop" placement="bottom">Toggles banners from the top of the system, member and group pages.</Tooltip>
+                            <Tooltip target="s-bannertop" placement="bottom">If enabled, shows banners from the top of the system, member and group pages.</Tooltip>
                         </Col>
-                        <Col xs={12} lg={4}>
+                        <Col xs={12} lg={4} class="mb-2">
                             <span id="s-bannerbottom">Show banners at the bottom of cards?</span> <Toggle hideLabel style="display: inline" label="Remove banner from bottom" toggled={settings.appearance.banner_bottom} on:toggle={() => {settings.appearance.banner_bottom = !settings.appearance.banner_bottom; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
-                            <Tooltip target="s-bannerbottom" placement="bottom">Toggles banners at the bottom of the system, member and group cards.</Tooltip>
+                            <Tooltip target="s-bannerbottom" placement="bottom">If enabled, shows banners at the bottom of the system, member and group cards.</Tooltip>
                         </Col>
-                        <Col xs={12} lg={4}>
+                        <Col xs={12} lg={4} class="mb-2">
                             <span id="s-twemoji">Use twemoji?</span> <Toggle hideLabel style="display: inline" label="Convert to twemoji" toggled={settings.appearance.twemoji} on:toggle={() => {settings.appearance.twemoji = !settings.appearance.twemoji; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
-                            <Tooltip target="s-bannerbottom" placement="bottom">Converts all emojis to twemoji.</Tooltip>
+                            <Tooltip target="s-bannerbottom" placement="bottom">If enabled, converts all emojis into twemoji.</Tooltip>
+                        </Col>
+                        <Col xs={12} lg={4} class="mb-2">
+                            <span id="s-colorbackground">Colored background?</span> <Toggle hideLabel style="display: inline" label="Member color as background" toggled={settings.appearance.color_background} on:toggle={() => {settings.appearance.color_background = !settings.appearance.color_background; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
+                                <Tooltip target="s-colorbackground" placement="bottom">If enabled, turns the background on member pages into the member's color.</Tooltip>
                         </Col>
                     </Row>
                 </CardBody>