Make columns itself scrollable, fix action creation when moving card, little refactoring

client/src/components/Boards/Boards.jsx

@@ -2,16 +2,13 @@ import pick from 'lodash/pick';
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { useTranslation, Trans } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { Button, Icon } from 'semantic-ui-react';
 import { closePopup } from '../../lib/popup';
-import { DragScroller } from '../../lib/custom-ui';
 
 import Paths from '../../constants/Paths';
 import DroppableTypes from '../../constants/DroppableTypes';
-import BoardWrapperContainer from '../../containers/BoardWrapperContainer';
 import AddPopup from './AddPopup';
 import EditPopup from './EditPopup';
 
@@ -19,8 +16,6 @@ import styles from './Boards.module.css';
 
 const Boards = React.memo(
   ({ items, currentId, isEditable, onCreate, onUpdate, onMove, onDelete }) => {
-    const [t] = useTranslation();
-
     const handleDragStart = useCallback(() => {
       closePopup();
     }, []);
@@ -139,28 +134,6 @@ const Boards = React.memo(
         ) : (
           <div className={styles.tabs}>{renderItems(items)}</div>
         )}
-        <DragScroller className={styles.board}>
-          {currentId ? (
-            <BoardWrapperContainer />
-          ) : (
-            <div className={styles.message}>
-              <Icon
-                inverted
-                name="hand point up outline"
-                size="huge"
-                className={styles.messageIcon}
-              />
-              <h1 className={styles.messageTitle}>
-                {t('common.openBoard', {
-                  context: 'title',
-                })}
-              </h1>
-              <div className={styles.messageContent}>
-                <Trans i18nKey="common.createNewOneOrSelectExistingOne" />
-              </div>
-            </div>
-          )}
-        </DragScroller>
       </div>
     );
   },

client/src/components/Boards/Boards.module.css

@@ -9,15 +9,6 @@
   background: rgba(34, 36, 38, 0.3) !important;
 }
 
-.board {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  margin: 0 -20px 8px;
-  overflow: auto;
-  padding: 0 20px;
-}
-
 .editButton {
   background: transparent !important;
   color: #fff !important;
@@ -45,32 +36,6 @@
   overflow: hidden;
 }
 
-.message {
-  align-content: space-between;
-  align-items: center;
-  color: #fff;
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.messageIcon {
-  margin-top: -84px;
-}
-
-.messageTitle {
-  font-size: 32px;
-  margin: 24px 0 8px;
-}
-
-.messageContent {
-  font-size: 18px;
-  line-height: 1.4;
-  margin: 4px 0 0;
-  text-align: center;
-}
-
 .tab {
   border-radius: 3px 3px 0 0;
   min-width: 100px;
@@ -104,7 +69,6 @@
   display: flex;
   height: 38px;
   flex: 0 0 auto;
-  margin-bottom: 16px;
   white-space: nowrap;
 }