Update styles

package-lock.json

@@ -1488,7 +1488,8 @@
     "@types/dateformat": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/dateformat/-/dateformat-3.0.1.tgz",
-      "integrity": "sha512-KlPPdikagvL6ELjWsljbyDIPzNCeliYkqRpI+zea99vBBbCIA5JNshZAwQKTON139c87y9qvTFVgkFd14rtS4g=="
+      "integrity": "sha512-KlPPdikagvL6ELjWsljbyDIPzNCeliYkqRpI+zea99vBBbCIA5JNshZAwQKTON139c87y9qvTFVgkFd14rtS4g==",
+      "dev": true
     },
     "@types/git-user-name": {
       "version": "2.0.0",
@@ -1559,26 +1560,6 @@
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
       "dev": true
     },
-    "@types/react": {
-      "version": "16.14.5",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
-      "integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
-      "dev": true,
-      "requires": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "@types/react-dom": {
-      "version": "16.9.12",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.12.tgz",
-      "integrity": "sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA==",
-      "dev": true,
-      "requires": {
-        "@types/react": "^16"
-      }
-    },
     "@types/react-redux": {
       "version": "7.1.16",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.16.tgz",

package.json

@@ -30,7 +30,6 @@
   },
   "dependencies": {
     "@basementuniverse/kanbn": "^0.2.4",
-    "@types/dateformat": "^3.0.1",
     "dateformat": "^4.5.1",
     "formik": "^2.2.6",
     "git-user-name": "^2.0.0",
@@ -52,12 +51,11 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
+    "@types/dateformat": "^3.0.1",
     "@types/git-user-name": "^2.0.0",
     "@types/jest": "^23.3.14",
     "@types/lodash": "^4.14.168",
     "@types/node": "^10.17.56",
-    "@types/react": "^16.14.5",
-    "@types/react-dom": "^16.9.12",
     "@types/uuid": "^8.3.0",
     "react-scripts": "^2.1.8",
     "rewire": "^4.0.1",

src/Board.tsx

@@ -213,7 +213,7 @@ const Board = ({ name, description, columns, hiddenColumns, startedColumns, comp
                     <i className="codicon codicon-add"></i>
                   </button>
                 </h2>
-                <div>
+                <div className="kanbn-column-task-list-container">
                   <Droppable droppableId={columnName} key={columnName}>
                     {(provided, snapshot) => {
                       return (

src/index.css

@@ -61,6 +61,7 @@ body {
 
 .kanbn-board {
     display: flex;
+    align-items: stretch;
 }
 
 .kanbn-column {
@@ -117,63 +118,52 @@ body {
     margin-left: 8px;
 }
 
+.kanbn-column-task-list-container {
+    height: calc(100% - 44px);
+}
+
 .kanbn-column-task-list {
     margin: 0 8px;
     border-left: 4px var(--vscode-activityBar-inactiveForeground) solid;
     min-height: 46px;
+    height: 100%;
+    transition: border-color .5s ease-in-out;
 }
 
 .kanbn-column-task-list.drag-over {
-    border-color: var(--vscode-activityBar-foreground);
+    border-color: var(--vscode-activityBar-foreground) !important;
 }
 
 .kanbn-column-backlog .kanbn-column-task-list {
     border-color: #36d;
 }
 
-.kanbn-column-backlog .kanbn-column-task-list.drag-over {
-    border-color: #69f;
-}
-
 .kanbn-column-in-progress .kanbn-column-task-list {
     border-color: #194;
 }
 
-.kanbn-column-in-progress .kanbn-column-task-list.drag-over {
-    border-color: #3c7;
-}
-
 .kanbn-column-todo .kanbn-column-task-list {
     border-color: #eb1;
 }
 
-.kanbn-column-todo .kanbn-column-task-list.drag-over {
-    border-color: #fe5;
-}
-
 .kanbn-column-done .kanbn-column-task-list {
     border-color: #e83;
 }
 
-.kanbn-column-done .kanbn-column-task-list.drag-over {
-    border-color: #fa4;
-}
-
 .kanbn-task {
     position: relative;
     overflow: hidden;
-    padding: 4px;
+    padding: 4px 4px 8px 4px;
     margin: 8px;
     min-height: 30px;
-    border: 1px var(--vscode-activityBar-inactiveForeground) solid;
+    border-left: 4px var(--vscode-activityBar-inactiveForeground) solid;
-    border-radius: 2px;
+    background-color: var(--vscode-input-background);
     color: var(--vscode-editor-foreground);
     transition: background-color .5s ease-in-out;
 }
 
 .kanbn-task.drag {
-    background-color: var(--vscode-activityBar-inactiveForeground);
+    background-color: var(--vscode-button-hoverBackground);
-    border-color: var(--vscode-activityBar-activeBackground);
 }
 
 .kanbn-task-name {
@@ -213,6 +203,7 @@ body {
 .kanbn-task-tag {
     display: inline-block;
     background-color: var(--vscode-activityBar-inactiveForeground);
+    color: #333;
     color: var(--vscode-editor-background);
     font-size: 0.8em;
     font-weight: bold;
@@ -223,32 +214,26 @@ body {
 
 .kanbn-task-tag-nothing {
     background-color: #6bf;
-    color: #333;
 }
 
 .kanbn-task-tag-tiny {
     background-color: #36d;
-    color: #333;
 }
 
 .kanbn-task-tag-small {
     background-color: #194;
-    color: #333;
 }
 
 .kanbn-task-tag-medium {
     background-color: #eb1;
-    color: #333;
 }
 
 .kanbn-task-tag-large {
     background-color: #e83;
-    color: #333;
 }
 
 .kanbn-task-tag-huge {
     background-color: #f42;
-    color: #333;
 }
 
 .kanbn-task-overdue {
@@ -262,6 +247,7 @@ body {
     height: 6px;
     background-color: #3c7;
     opacity: 0.7;
+    transition: width .5s ease-in-out;
 }
 
 .kanbn-task-editor-title {