From 22a45971807665d44711de024bda116a028a61ca Mon Sep 17 00:00:00 2001
From: Drikus Roor <drikusroor@gmail.com>
Date: Fri, 16 Feb 2024 13:43:30 +0100
Subject: [PATCH] feat: Add custom background in frontend

---
 backend/theme/views.py               | 18 ++++++++++++++++++
 frontend/src/components/Page/Page.js |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/backend/theme/views.py b/backend/theme/views.py
index 850225c4d..0e8487cbe 100644
--- a/backend/theme/views.py
+++ b/backend/theme/views.py
@@ -27,6 +27,24 @@ def theme_css(request):
                 css_content += "\n\n/* Custom Logo */"
                 css_content += f"\n\n.logo.logo--custom {{ background-image: url({custom_logo_url}); }}"
 
+            # Custom Background
+            custom_background_url = config.background if config.background else ""
+            if custom_background_url:
+                css_content += "\n\n/* Custom Background */"
+                css_content += f"\n\n.aha__page.aha__page--custom {{ background-image: url({custom_background_url}); position: relative; }}"
+                # ::before should show a black to transparent gradient
+                css_content += f"""
+                \n.aha__page.aha__page--custom::before {{
+                  content: "";
+                  position: absolute;
+                  top: 0;
+                  right: 0;
+                  bottom: 0;
+                  left: 0;
+                  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
+                }}
+                """
+
         except json.JSONDecodeError:
             # Handle the case where JSON is not well-formatted
             css_content = "/* Error in CSS variables JSON format */"
diff --git a/frontend/src/components/Page/Page.js b/frontend/src/components/Page/Page.js
index 70c3e0b94..0ff8e87b7 100644
--- a/frontend/src/components/Page/Page.js
+++ b/frontend/src/components/Page/Page.js
@@ -3,7 +3,7 @@ import React from "react";
 // Page is a single page in the application
 const Page = ({ className, children }) => {
     return (
-        <div className={"aha__page " + (className ? className : "")}>
+        <div className={"aha__page aha__page--custom" + (className ? className : "")}>
             {children}
         </div>
     );