From e1f954cba4f408058cf82d94634b67ef20f0e1a5 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 30 Oct 2023 14:30:25 -0400
Subject: [PATCH 01/11] style(manager): add max height+scroll for drop box tree
 container

---
 src/components/manager/ManagerDropBoxContent.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/manager/ManagerDropBoxContent.js b/src/components/manager/ManagerDropBoxContent.js
index 34460c1f6..2809687b6 100644
--- a/src/components/manager/ManagerDropBoxContent.js
+++ b/src/components/manager/ManagerDropBoxContent.js
@@ -50,7 +50,12 @@ import FileDisplay, { VIEWABLE_FILE_EXTENSIONS } from "../display/FileDisplay";
 const DROP_BOX_CONTENT_CONTAINER_STYLE = {display: "flex", flexDirection: "column", gap: "1em"};
 const DROP_BOX_ACTION_CONTAINER_STYLE = {display: "flex", gap: "12px"};
 
-const TREE_CONTAINER_STYLE = {position: "relative", minHeight: 72};
+const TREE_CONTAINER_STYLE = {
+    position: "relative",
+    minHeight: 72,
+    maxHeight: "calc(100% - 223px)",
+    overflowY: "auto",
+};
 
 const TREE_DROP_ZONE_OVERLAY_STYLE = {
     position: "absolute",

From ed3e3a7821f03fb923a84f053c784c566b33d999 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 30 Oct 2023 14:39:39 -0400
Subject: [PATCH 02/11] style(manager): fixed max height + border for drop box
 tree container

---
 src/components/manager/ManagerDropBoxContent.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/manager/ManagerDropBoxContent.js b/src/components/manager/ManagerDropBoxContent.js
index 2809687b6..1d5c44c1e 100644
--- a/src/components/manager/ManagerDropBoxContent.js
+++ b/src/components/manager/ManagerDropBoxContent.js
@@ -53,8 +53,11 @@ const DROP_BOX_ACTION_CONTAINER_STYLE = {display: "flex", gap: "12px"};
 const TREE_CONTAINER_STYLE = {
     position: "relative",
     minHeight: 72,
-    maxHeight: "calc(100% - 223px)",
+    maxHeight: 1000,
     overflowY: "auto",
+    border: "1px solid #d9d9d9",
+    borderRadius: 3,
+    boxShadow: "inset 0 -1px 3px rgba(0, 0, 0, 0.07)",
 };
 
 const TREE_DROP_ZONE_OVERLAY_STYLE = {

From 8a0e4bffef4b5474e75f166b224bd35f0eab4486 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 30 Oct 2023 14:44:56 -0400
Subject: [PATCH 03/11] style(manager): put drop box size + info box on same
 line

---
 .../manager/ManagerDropBoxContent.js          | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/manager/ManagerDropBoxContent.js b/src/components/manager/ManagerDropBoxContent.js
index 1d5c44c1e..9f85cd6ec 100644
--- a/src/components/manager/ManagerDropBoxContent.js
+++ b/src/components/manager/ManagerDropBoxContent.js
@@ -49,6 +49,7 @@ import FileDisplay, { VIEWABLE_FILE_EXTENSIONS } from "../display/FileDisplay";
 
 const DROP_BOX_CONTENT_CONTAINER_STYLE = {display: "flex", flexDirection: "column", gap: "1em"};
 const DROP_BOX_ACTION_CONTAINER_STYLE = {display: "flex", gap: "12px"};
+const DROP_BOX_INFO_CONTAINER_STYLE = {display: "flex", gap: "1em"};
 
 const TREE_CONTAINER_STYLE = {
     position: "relative",
@@ -270,12 +271,12 @@ FileContentsModal.propTypes = {
 };
 
 
-const DropBoxInformation = () => (
+const DropBoxInformation = ({ style }) => (
     <Alert type="info" showIcon={true} message="About the drop box" description={`
         The drop box contains files which are not yet ingested into this Bento instance. They are not
         organized in any particular structure; instead, this serves as a place for incoming data files to be
         deposited and examined.
-    `} />
+    `} style={style} />
 );
 
 const DROP_BOX_ROOT_KEY = "/";
@@ -602,14 +603,15 @@ const ManagerDropBoxContent = () => {
                                description="Encountered an error while trying to access the drop box service" />}
                 </Spin>
 
-                <Statistic
-                    title="Total Space Used"
-                    value={treeLoading
-                        ? "—"
-                        : filesize(Object.values(filesByPath).reduce((acc, f) => acc + f.size, 0))}
-                />
-
-                <DropBoxInformation />
+                <div style={DROP_BOX_INFO_CONTAINER_STYLE}>
+                    <Statistic
+                        title="Total Space Used"
+                        value={treeLoading
+                            ? "—"
+                            : filesize(Object.values(filesByPath).reduce((acc, f) => acc + f.size, 0))}
+                    />
+                    <DropBoxInformation style={{ flex: 1 }} />
+                </div>
             </div>
         </Layout.Content>
     </Layout>;

From f5e632f10e11a49a2bf26a1d9ba07827192c0dc2 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 30 Oct 2023 14:49:10 -0400
Subject: [PATCH 04/11] style(manager): drop box view styling tweaks

---
 src/components/manager/ManagerDropBoxContent.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/manager/ManagerDropBoxContent.js b/src/components/manager/ManagerDropBoxContent.js
index 9f85cd6ec..41434f276 100644
--- a/src/components/manager/ManagerDropBoxContent.js
+++ b/src/components/manager/ManagerDropBoxContent.js
@@ -49,12 +49,12 @@ import FileDisplay, { VIEWABLE_FILE_EXTENSIONS } from "../display/FileDisplay";
 
 const DROP_BOX_CONTENT_CONTAINER_STYLE = {display: "flex", flexDirection: "column", gap: "1em"};
 const DROP_BOX_ACTION_CONTAINER_STYLE = {display: "flex", gap: "12px"};
-const DROP_BOX_INFO_CONTAINER_STYLE = {display: "flex", gap: "1em"};
+const DROP_BOX_INFO_CONTAINER_STYLE = {display: "flex", gap: "2em"};
 
 const TREE_CONTAINER_STYLE = {
     position: "relative",
     minHeight: 72,
-    maxHeight: 1000,
+    maxHeight: "calc(100vh - 64px)",  // calculated: viewport minus enough to show action bar at top
     overflowY: "auto",
     border: "1px solid #d9d9d9",
     borderRadius: 3,

From 944095458b0964c388e3dcf2353dd225674f9a78 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 30 Oct 2023 15:04:55 -0400
Subject: [PATCH 05/11] style(manager): use sticky positioning for drop box
 controls

---
 src/components/manager/ManagerDropBoxContent.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/manager/ManagerDropBoxContent.js b/src/components/manager/ManagerDropBoxContent.js
index 41434f276..d3bde5bf8 100644
--- a/src/components/manager/ManagerDropBoxContent.js
+++ b/src/components/manager/ManagerDropBoxContent.js
@@ -47,9 +47,17 @@ import {deleteDropBox, ingestDropBox} from "../../lib/auth/permissions";
 
 import FileDisplay, { VIEWABLE_FILE_EXTENSIONS } from "../display/FileDisplay";
 
-const DROP_BOX_CONTENT_CONTAINER_STYLE = {display: "flex", flexDirection: "column", gap: "1em"};
-const DROP_BOX_ACTION_CONTAINER_STYLE = {display: "flex", gap: "12px"};
-const DROP_BOX_INFO_CONTAINER_STYLE = {display: "flex", gap: "2em"};
+const DROP_BOX_CONTENT_CONTAINER_STYLE = {display: "flex", flexDirection: "column", gap: 12};
+const DROP_BOX_ACTION_CONTAINER_STYLE = {
+    display: "flex",
+    gap: "12px",
+    position: "sticky",
+    padding: "4px 0",
+    boxShadow: "0 10px 10px white",
+    top: 24,
+    zIndex: 10,
+};
+const DROP_BOX_INFO_CONTAINER_STYLE = {display: "flex", gap: "2em", paddingTop: 4};
 
 const TREE_CONTAINER_STYLE = {
     position: "relative",

From d27c3ab9aa7b3c40ea2be6976c62edf521b53ba5 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 30 Oct 2023 15:06:32 -0400
Subject: [PATCH 06/11] style(manager): rm old drop box styles

---
 src/components/manager/ManagerDropBoxContent.js | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/manager/ManagerDropBoxContent.js b/src/components/manager/ManagerDropBoxContent.js
index d3bde5bf8..f807cf764 100644
--- a/src/components/manager/ManagerDropBoxContent.js
+++ b/src/components/manager/ManagerDropBoxContent.js
@@ -59,15 +59,7 @@ const DROP_BOX_ACTION_CONTAINER_STYLE = {
 };
 const DROP_BOX_INFO_CONTAINER_STYLE = {display: "flex", gap: "2em", paddingTop: 4};
 
-const TREE_CONTAINER_STYLE = {
-    position: "relative",
-    minHeight: 72,
-    maxHeight: "calc(100vh - 64px)",  // calculated: viewport minus enough to show action bar at top
-    overflowY: "auto",
-    border: "1px solid #d9d9d9",
-    borderRadius: 3,
-    boxShadow: "inset 0 -1px 3px rgba(0, 0, 0, 0.07)",
-};
+const TREE_CONTAINER_STYLE = { minHeight: 72, overflowY: "auto" };
 
 const TREE_DROP_ZONE_OVERLAY_STYLE = {
     position: "absolute",

From bd7fb9cd98d61165193139e0aaf034d158cdf86c Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 30 Oct 2023 15:13:47 -0400
Subject: [PATCH 07/11] style(manager): tweak styling for sticky drop box
 control bar

---
 src/components/manager/ManagerDropBoxContent.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/manager/ManagerDropBoxContent.js b/src/components/manager/ManagerDropBoxContent.js
index f807cf764..aaeaf0dd6 100644
--- a/src/components/manager/ManagerDropBoxContent.js
+++ b/src/components/manager/ManagerDropBoxContent.js
@@ -47,17 +47,17 @@ import {deleteDropBox, ingestDropBox} from "../../lib/auth/permissions";
 
 import FileDisplay, { VIEWABLE_FILE_EXTENSIONS } from "../display/FileDisplay";
 
-const DROP_BOX_CONTENT_CONTAINER_STYLE = {display: "flex", flexDirection: "column", gap: 12};
+const DROP_BOX_CONTENT_CONTAINER_STYLE = { display: "flex", flexDirection: "column", gap: 8 };
 const DROP_BOX_ACTION_CONTAINER_STYLE = {
     display: "flex",
     gap: "12px",
     position: "sticky",
-    padding: "4px 0",
-    boxShadow: "0 10px 10px white",
-    top: 24,
+    paddingBottom: 4,
+    boxShadow: "0 12px 12px white, 0 -10px 0 white",
+    top: 8,
     zIndex: 10,
 };
-const DROP_BOX_INFO_CONTAINER_STYLE = {display: "flex", gap: "2em", paddingTop: 4};
+const DROP_BOX_INFO_CONTAINER_STYLE = { display: "flex", gap: "2em", paddingTop: 8 };
 
 const TREE_CONTAINER_STYLE = { minHeight: 72, overflowY: "auto" };
 
@@ -278,6 +278,9 @@ const DropBoxInformation = ({ style }) => (
         deposited and examined.
     `} style={style} />
 );
+DropBoxInformation.propTypes = {
+    style: PropTypes.object,
+};
 
 const DROP_BOX_ROOT_KEY = "/";
 

From b5d59bc8f008b4b2ce9c274f86a80c7d0289a57a Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 30 Oct 2023 15:25:54 -0400
Subject: [PATCH 08/11] feat(manager): show # of selected items in drop box

---
 src/components/manager/ManagerDropBoxContent.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/manager/ManagerDropBoxContent.js b/src/components/manager/ManagerDropBoxContent.js
index aaeaf0dd6..70823ee0f 100644
--- a/src/components/manager/ManagerDropBoxContent.js
+++ b/src/components/manager/ManagerDropBoxContent.js
@@ -21,6 +21,7 @@ import {
     Spin,
     Statistic,
     Tree,
+    Typography,
     Upload,
     message,
 } from "antd";
@@ -576,6 +577,8 @@ const ManagerDropBoxContent = () => {
                             loading={isDeleting}
                             onClick={showFileDeleteModal}>
                         Delete</Button>
+
+                    <Typography.Text type="secondary">{selectedEntries.length} selected items</Typography.Text>
                 </div>
 
                 <Spin spinning={treeLoading}>

From 5ad71e6c1c475543dd183faa8d1298ce564e3e5a Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 30 Oct 2023 15:27:39 -0400
Subject: [PATCH 09/11] style(manager): better wording for drop box selected
 items count

---
 src/components/manager/ManagerDropBoxContent.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/manager/ManagerDropBoxContent.js b/src/components/manager/ManagerDropBoxContent.js
index 70823ee0f..e617c233d 100644
--- a/src/components/manager/ManagerDropBoxContent.js
+++ b/src/components/manager/ManagerDropBoxContent.js
@@ -578,7 +578,9 @@ const ManagerDropBoxContent = () => {
                             onClick={showFileDeleteModal}>
                         Delete</Button>
 
-                    <Typography.Text type="secondary">{selectedEntries.length} selected items</Typography.Text>
+                    <Typography.Text type="secondary">
+                        {selectedEntries.length} item{selectedEntries.length === 1 ? "" : "s"} selected
+                    </Typography.Text>
                 </div>
 
                 <Spin spinning={treeLoading}>

From 461a95fd59655d3b1d031cf7ecb1737a3721debc Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 30 Oct 2023 15:28:20 -0400
Subject: [PATCH 10/11] style(manager): fix missing background colour for drop
 box action bar

---
 src/components/manager/ManagerDropBoxContent.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/manager/ManagerDropBoxContent.js b/src/components/manager/ManagerDropBoxContent.js
index e617c233d..1de01af7a 100644
--- a/src/components/manager/ManagerDropBoxContent.js
+++ b/src/components/manager/ManagerDropBoxContent.js
@@ -54,6 +54,7 @@ const DROP_BOX_ACTION_CONTAINER_STYLE = {
     gap: "12px",
     position: "sticky",
     paddingBottom: 4,
+    backgroundColor: "white",
     boxShadow: "0 12px 12px white, 0 -10px 0 white",
     top: 8,
     zIndex: 10,

From b9f16f45c448ee1ef2687799cd7d14e7f5d65cf7 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 30 Oct 2023 15:29:30 -0400
Subject: [PATCH 11/11] style(manager): align drop box action items to baseline

---
 src/components/manager/ManagerDropBoxContent.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/manager/ManagerDropBoxContent.js b/src/components/manager/ManagerDropBoxContent.js
index 1de01af7a..f8339b12a 100644
--- a/src/components/manager/ManagerDropBoxContent.js
+++ b/src/components/manager/ManagerDropBoxContent.js
@@ -52,6 +52,7 @@ const DROP_BOX_CONTENT_CONTAINER_STYLE = { display: "flex", flexDirection: "colu
 const DROP_BOX_ACTION_CONTAINER_STYLE = {
     display: "flex",
     gap: "12px",
+    alignItems: "baseline",
     position: "sticky",
     paddingBottom: 4,
     backgroundColor: "white",