- Optimize Production Board Card Component,

- Fix issue with production note
- Refactor shared Global styles into their own global style.

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

client/src/components/trello-board/components/index.js

@@ -6,11 +6,12 @@ import NewLaneForm from "./NewLaneForm.jsx";
 import NewCardForm from "./NewCardForm.jsx";
 import AddCardLink from "./AddCardLink";
 import NewLaneSection from "./NewLaneSection.jsx";
-import { BoardWrapper, GlobalStyleHorizontal, GlobalStyleVertical, ScrollableLane, Section } from "../styles/Base";
+import { BoardWrapper, StyleHorizontal, GlobalStyle, StyleVertical, ScrollableLane, Section } from "../styles/Base";
 
 const exports = {
-  GlobalStyleHorizontal,
-  GlobalStyleVertical,
+  StyleHorizontal,
+  StyleVertical,
+  GlobalStyle,
   BoardWrapper,
   Loader,
   ScrollableLane,

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

@@ -7,19 +7,21 @@ const Board = ({ id, className, components, orientation, ...additionalProps }) =
   const [storeId] = useState(id || v1());
 
   const allClassNames = classNames("react-trello-board", className || "");
-
-  const GlobalStyle = orientation === "horizontal" ? components.GlobalStyleHorizontal : components.GlobalStyleVertical;
+  const OrientationStyle = orientation === "horizontal" ? components.StyleHorizontal : components.StyleVertical;
 
   return (
-    <GlobalStyle>
-      <BoardContainer
-        components={components}
-        orientation={orientation}
-        {...additionalProps}
-        id={storeId}
-        className={allClassNames}
-      />
-    </GlobalStyle>
+    <>
+      <components.GlobalStyle />
+      <OrientationStyle>
+        <BoardContainer
+          components={components}
+          orientation={orientation}
+          {...additionalProps}
+          id={storeId}
+          className={allClassNames}
+        />
+      </OrientationStyle>
+    </>
   );
 };
 

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

@@ -24,48 +24,12 @@ const getSectionStyles = (props) => {
   return "";
 };
 
-export const GlobalStyleHorizontal = styled.div`
+export const GlobalStyle = createGlobalStyle`
   .comPlainTextContentEditable {
     -webkit-user-modify: read-write-plaintext-only;
     cursor: text;
   }
 
-  .comPlainTextContentEditable--has-placeholder::before {
-    content: attr(placeholder);
-    opacity: 0.5;
-    color: inherit;
-    cursor: text;
-  }
-
-  .react_trello_dragClass {
-    transform: rotate(3deg);
-  }
-
-  .react_trello_dragLaneClass {
-    transform: rotate(3deg);
-  }
-
-  .icon-overflow-menu-horizontal:before {
-    content: "\\E91F";
-  }
-
-  .icon-lg,
-  .icon-sm {
-    color: #798d99;
-  }
-
-  .icon-lg {
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-    width: 32px;
-  }
-`;
-export const GlobalStyleVertical = styled.div`
-  .comPlainTextContentEditable {
-    -webkit-user-modify: read-write-plaintext-only;
-    cursor: text;
-  }
   .smooth-dnd-container.horizontal {
   }
 
@@ -100,23 +64,21 @@ export const GlobalStyleVertical = styled.div`
     width: 32px;
   }
 
+  .react-trello-column-header {
+    border-radius: 5px;
+  }
+`;
+
+export const StyleHorizontal = styled.div``;
+
+export const StyleVertical = styled.div`
+  .react-trello-column-header {
+    text-align: left;
+  }
   .smooth-dnd-container {
     // 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;
-  }
-
-  .react-trello-column-header {
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 5px;
-    text-align: left;
-  }
-
   .react-trello-board {
     overflow-y: hidden !important;
   }
@@ -225,7 +187,7 @@ export const ScrollableLane = styled.div`
   align-self: center;
   // TODO: This was commented out to match existing board style
   //max-height: 90vh;
-  margin-top: 10px;
+  //margin-top: 10px;
   flex-direction: column;
   justify-content: space-between;
 `;