From 7617fc3de01ed9e97b89baefd4085bf6869e0056 Mon Sep 17 00:00:00 2001
From: Zuri Klaschka <pklaschka@users.noreply.github.com>
Date: Sat, 7 Dec 2024 20:44:03 +0100
Subject: [PATCH] feat(frontend-react): Improve UI design of page wrapper

Make the background color in dark mode a less absolute black, and
add a bit of margin between the dashboard dropdown and the buttons.
---
 .../routes/page-wrapper/page-wrapper.module.css          | 2 +-
 .../lib/application/routes/page-wrapper/page-wrapper.tsx | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend-react/src/lib/application/routes/page-wrapper/page-wrapper.module.css b/frontend-react/src/lib/application/routes/page-wrapper/page-wrapper.module.css
index 9696383..5a340a5 100644
--- a/frontend-react/src/lib/application/routes/page-wrapper/page-wrapper.module.css
+++ b/frontend-react/src/lib/application/routes/page-wrapper/page-wrapper.module.css
@@ -9,7 +9,7 @@ if it got applied immediately on the body while being in a visible wrapper / wid
 }
 
 [data-bs-theme='dark'] .pageBackground {
-	background-color: black;
+	background-color: #111;
 }
 
 /*Layout, etc.*/
diff --git a/frontend-react/src/lib/application/routes/page-wrapper/page-wrapper.tsx b/frontend-react/src/lib/application/routes/page-wrapper/page-wrapper.tsx
index f40e571..72c3819 100644
--- a/frontend-react/src/lib/application/routes/page-wrapper/page-wrapper.tsx
+++ b/frontend-react/src/lib/application/routes/page-wrapper/page-wrapper.tsx
@@ -65,12 +65,17 @@ export function PageWrapper({ showSelector }: PageWrapperProps) {
 							<DashboardDropdown dashboards={dashboards} />
 							{dashboardId &&
 								(match ? (
-									<Button size="sm" form="dashboard-editor" type="submit">
+									<Button
+										size="sm"
+										form="dashboard-editor"
+										type="submit"
+										className="ms-2"
+									>
 										Save
 									</Button>
 								) : (
 									<Link
-										className="btn btn-sm btn-secondary"
+										className="btn btn-sm btn-secondary ms-2"
 										to={generatePath('/dashboards/:dashboardId/edit', {
 											dashboardId
 										})}