From 8d9455eaa94db4a57a936378eb80376486a04836 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sun, 2 Aug 2026 12:50:29 +0100
Subject: [PATCH] Refine macOS vibrancy styles and enhance layout structure

- Updated CSS for macOS vibrancy, improving background opacity for light and dark modes in main content and sidebar.
- Added styles for selected menu items in light mode to enhance UI consistency.
- Modified DashboardLayout to include a specific class for the main content layout, ensuring better styling application.
---
 assets/stylesheets/App.css          | 32 +++++++++++++++++++++++++++--
 src/components/Dashboard/Layout.jsx |  2 +-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index 55d1a2e..fbda198 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -124,12 +124,20 @@ html.macos-vibrancy .main-layout {
   background: transparent !important;
 }
 
+html.macos-vibrancy .light-mode .ant-layout.main-content-layout {
+  background: rgba(255, 255, 255, 0.88) !important;
+}
+
+html.macos-vibrancy .dark-mode .ant-layout.main-content-layout {
+  background: rgba(0, 0, 0, 0.88) !important;
+}
+
 html.macos-vibrancy .light-mode .ant-layout-sider {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(244, 244, 244, 0.8) !important;
 }
 
 html.macos-vibrancy .dark-mode .ant-layout-sider {
-  background: rgba(5, 5, 5, 0.7) !important;
+  background: rgba(10, 10, 10, 0.8) !important;
 }
 
 html.macos-vibrancy .light-mode .ant-layout-content {
@@ -154,10 +162,30 @@ html.macos-vibrancy
   color: color-mix(in srgb, var(--color-primary) 75%, #ffffff);
 }
 
+html.macos-vibrancy
+  .light-mode
+  .electron-sider
+  .ant-menu-light
+  .ant-menu-item-selected {
+  background-color: color-mix(in srgb, var(--color-primary) 80%, #ffffff3d);
+  color: #ffffff;
+}
+
+html.macos-vibrancy .light-mode .ant-layout.main-content-layout .ant-card {
+  background: rgba(255, 255, 255, 0.5) !important;
+}
+html.macos-vibrancy .dark-mode .ant-layout.main-content-layout .ant-card {
+  background: rgba(31, 31, 31, 0.5) !important;
+}
+
 .electron-navigation {
   line-height: 40px;
 }
 
+.electron-sidebar.ant-menu-inline .ant-menu-item {
+  padding-left: 20px !important;
+}
+
 .electron-navigation .ant-menu-overflow-item-rest {
   padding-inline: 10px;
 }
diff --git a/src/components/Dashboard/Layout.jsx b/src/components/Dashboard/Layout.jsx
index 9c20998..596a564 100644
--- a/src/components/Dashboard/Layout.jsx
+++ b/src/components/Dashboard/Layout.jsx
@@ -49,7 +49,7 @@ const DashboardLayout = ({ children }) => {
           ) : (
             <ProductionSidebar /> // Default to production sidebar
           )}
-          <Layout style={{ padding: '24px' }}>
+          <Layout style={{ padding: '24px' }} className='main-content-layout'>
             <Content>
               <Flex vertical style={{ height: '100%' }} gap='20px'>
                 <Flex justify='space-between'>