From 206abc8c68cb4d47dcb19da03b81c530cff6d56f Mon Sep 17 00:00:00 2001
From: walster001 <walster001@gmail.com>
Date: Thu, 8 Aug 2024 23:34:09 +0930
Subject: [PATCH] Fix board backgrounds not showing correctly.

Fixed board backgrounds not showing correctly on the following themes. Various code modified as different themes have used different code to implement the background.

Have tried to stick with board-wrapper as a standard to apply the background colour to.
Board background image will override board-wrapper colour every time.

Dark
Relax
Natural
Modern
ModernDark
Exodark
CleanDark
CleanLight

- Updated pull due to original file I had stored on my pc 139 commits behind! So synced that and then redid code changes to bring it all up to date.
---
 client/components/boards/boardColors.css | 32 +++++++++++-------------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/client/components/boards/boardColors.css b/client/components/boards/boardColors.css
index 29aebd06b..6c5e8aa85 100644
--- a/client/components/boards/boardColors.css
+++ b/client/components/boards/boardColors.css
@@ -718,7 +718,12 @@
 .board-color-dark#header-quick-access ul li.current {
   border-bottom: 4px solid #476483;
 }
-.board-color-dark .ui-sortable,
+
+/* Board Wrapper background fix for dark theme */
+.board-color-dark.board-wrapper {
+    background-color: #2c3e50;
+}
+
 .board-color-dark .swimlane,
 .board-color-dark .swimlane >.swimlane-header-wrap,
 .board-color-dark .swimlane >.list.js-list,
@@ -887,7 +892,7 @@
 .board-color-relax#header-quick-access ul li.current {
   border-bottom: 4px solid #3dd37e;
 }
-.board-color-relax .ui-sortable {
+.board-color-relax ..board-wrapper {
   background-color: #a7e366;
 }
 .board-color-relax .list-header {
@@ -1054,7 +1059,7 @@
 .board-color-clearblue .toggle-switch:checked ~ .toggle-label:after {
   background-color: #197ddc;
 }
-.board-color-clearblue .board-canvas {
+.board-color-clearblue.board-wrapper {
   background: linear-gradient(135deg, #499bea 0%, #00aecc 100%);
 }
 .board-color-clearblue .swimlane {
@@ -1302,7 +1307,7 @@
 .board-color-natural#header-quick-access {
   background-color: #2d392b;
 }
-.board-color-natural .ui-sortable {
+.board-color-natural.board-wrapper {
   background-color: #dedede;
 }
 .board-color-natural .swimlane .swimlane-header-wrap {
@@ -1433,7 +1438,7 @@
   height: 21px;
   background: #f7f7f7;
 }
-.board-color-modern .board-canvas {
+.board-color-modern.board-wrapper {
   background: #f5f5f5;
 }
 .board-color-modern .swimlane {
@@ -1731,7 +1736,7 @@
   line-height: 0.8em;
   padding-top: 10px;
 }
-.board-color-moderndark .board-canvas {
+.board-color-moderndark.board-wrapper {
   background: #2a2a2a;
 }
 .board-color-moderndark .swimlane .swimlane-header-wrap {
@@ -2110,7 +2115,7 @@
   color: #fff !important;
 }
 */
-.board-color-exodark .board-canvas {
+.board-color-exodark.board-wrapper {
   background: #222;
   /* font-family: Poppins; */
 }
@@ -2252,10 +2257,6 @@
   color: #fff;
 }
 
-.board-color-cleandark {
-  background: #0A0A14
-}
-
 .board-color-cleandark#header ul li,
 .board-color-cleandark#header-quick-access ul li {
   color: rgba(255, 255, 255, 50%);
@@ -2286,7 +2287,7 @@
   color: rgba(255, 255, 255, 1);
 }
 
-.board-color-cleandark .board-canvas {
+.board-color-cleandark.board-wrapper {
   background: #0A0A14;
 }
 
@@ -2721,11 +2722,6 @@
   color: rgba(10, 10, 20, 1) !important;
 }
 
-.board-color-cleanlight {
-  background: #FFFFFF !important;
-  color: #000000;
-}
-
 .board-color-cleanlight#header ul li.current,
 .board-color-cleanlight#header-quick-access ul li.current {
   color: rgba(10, 10, 20, 0.85) !important;
@@ -2739,7 +2735,7 @@
   color: rgba(10, 10, 20, 1);
 }
 
-.board-color-cleanlight .board-canvas {
+.board-color-cleanlight.board-wrapper {
   background: #FFFFFF;
 }