Toggle Orientation now works dynamically (for real this time :( )

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/trello-board/controllers/Board.jsx

@@ -1,4 +1,4 @@
-import { BoardContainer } from "../index.jsx";
+import { BoardContainer } from "../index";
 import classNames from "classnames";
 import { useState } from "react";
 import { v1 } from "uuid";
@@ -8,10 +8,10 @@ const Board = ({ id, className, components, orientation, ...additionalProps }) =
 
   const allClassNames = classNames("react-trello-board", className || "");
 
+  const GlobalStyle = orientation === "horizontal" ? components.GlobalStyleHorizontal : components.GlobalStyleVertical;
+
   return (
-    <>
+    <GlobalStyle>
-      {orientation === "horizontal" && <components.GlobalStyleHorizontal />}
-      {orientation === "vertical" && <components.GlobalStyleVertical />}
       <BoardContainer
         components={components}
         orientation={orientation}
@@ -19,7 +19,7 @@ const Board = ({ id, className, components, orientation, ...additionalProps }) =
         id={storeId}
         className={allClassNames}
       />
-    </>
+    </GlobalStyle>
   );
 };
 

client/src/components/trello-board/styles/Base.js

@@ -24,7 +24,7 @@ const getSectionStyles = (props) => {
   return "";
 };
 
-export const GlobalStyleHorizontal = createGlobalStyle`
+export const GlobalStyleHorizontal = styled.div`
   .comPlainTextContentEditable {
     -webkit-user-modify: read-write-plaintext-only;
     cursor: text;
@@ -49,7 +49,8 @@ export const GlobalStyleHorizontal = createGlobalStyle`
     content: "\\E91F";
   }
 
-  .icon-lg, .icon-sm {
+  .icon-lg,
+  .icon-sm {
     color: #798d99;
   }
 
@@ -60,15 +61,14 @@ export const GlobalStyleHorizontal = createGlobalStyle`
     width: 32px;
   }
 `;
-export const GlobalStyleVertical = createGlobalStyle`
+export const GlobalStyleVertical = styled.div`
   .comPlainTextContentEditable {
     -webkit-user-modify: read-write-plaintext-only;
     cursor: text;
   }
   .smooth-dnd-container.horizontal {
-
   }
-  
+
   .comPlainTextContentEditable--has-placeholder::before {
     content: attr(placeholder);
     opacity: 0.5;
@@ -88,7 +88,8 @@ export const GlobalStyleVertical = createGlobalStyle`
     content: "\\E91F";
   }
 
-  .icon-lg, .icon-sm {
+  .icon-lg,
+  .icon-sm {
     color: #798d99;
   }
 
@@ -100,10 +101,10 @@ export const GlobalStyleVertical = createGlobalStyle`
   }
 
   .smooth-dnd-container {
-   // TODO ? This is the question. We need the same drag-zone we get in horizontal mode
+    // TODO ? This is the question. We need the same drag-zone we get in horizontal mode
     min-height: 50px; // Not needed, just for extra landing space
   }
-  
+
   .react-trello-lane {
     border: 1px solid #ccc;
     border-radius: 5px;