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

@@ -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;
 }