- 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/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;
 `;