Merge branch 'master' into secondpropertiesmenu-emily

author: eperelm2 <emily_perelman@brown.edu> 2023-07-31 11:24:59 -0400
committer: eperelm2 <emily_perelman@brown.edu> 2023-07-31 11:24:59 -0400
commit: ad9e20dbd54658a891e6f7180d65ebf456665a15 (patch)
tree: 223e74b4da1927b49e8afd9f162a9b4d18e4e873
parent: 9447ee01d501b3db69358b5b1526e640f2c54531 (diff)
parent: a7fc6873a6a9faa7a2080bb0e689c3fa46bd2f7b (diff)
64 files changed, 3816 insertions, 1594 deletions
diff --git a/package-lock.json b/package-lock.json
index 5f71c488a..082531ea0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,121 @@
                 "@jridgewell/trace-mapping": "^0.3.9"
             }
         },
+        "@azure/abort-controller": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-1.1.0.tgz",
+            "integrity": "sha512-TrRLIoSQVzfAJX9H1JeFjzAoDGcoK1IYX1UImfceTZpsyYfWr09Ss1aHW1y5TrrR3iq6RZLBwJ3E24uwPhwahw==",
+            "requires": {
+                "tslib": "^2.2.0"
+            }
+        },
+        "@azure/core-auth": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/@azure/core-auth/-/core-auth-1.4.0.tgz",
+            "integrity": "sha512-HFrcTgmuSuukRf/EdPmqBrc5l6Q5Uu+2TbuhaKbgaCpP2TfAeiNaQPAadxO+CYBRHGUzIDteMAjFspFLDLnKVQ==",
+            "requires": {
+                "@azure/abort-controller": "^1.0.0",
+                "tslib": "^2.2.0"
+            }
+        },
+        "@azure/core-http": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@azure/core-http/-/core-http-3.0.2.tgz",
+            "integrity": "sha512-o1wR9JrmoM0xEAa0Ue7Sp8j+uJvmqYaGoHOCT5qaVYmvgmnZDC0OvQimPA/JR3u77Sz6D1y3Xmk1y69cDU9q9A==",
+            "requires": {
+                "@azure/abort-controller": "^1.0.0",
+                "@azure/core-auth": "^1.3.0",
+                "@azure/core-tracing": "1.0.0-preview.13",
+                "@azure/core-util": "^1.1.1",
+                "@azure/logger": "^1.0.0",
+                "@types/node-fetch": "^2.5.0",
+                "@types/tunnel": "^0.0.3",
+                "form-data": "^4.0.0",
+                "node-fetch": "^2.6.7",
+                "process": "^0.11.10",
+                "tslib": "^2.2.0",
+                "tunnel": "^0.0.6",
+                "uuid": "^8.3.0",
+                "xml2js": "^0.5.0"
+            },
+            "dependencies": {
+                "form-data": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+                    "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+                    "requires": {
+                        "asynckit": "^0.4.0",
+                        "combined-stream": "^1.0.8",
+                        "mime-types": "^2.1.12"
+                    }
+                },
+                "uuid": {
+                    "version": "8.3.2",
+                    "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+                    "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+                }
+            }
+        },
+        "@azure/core-lro": {
+            "version": "2.5.3",
+            "resolved": "https://registry.npmjs.org/@azure/core-lro/-/core-lro-2.5.3.tgz",
+            "integrity": "sha512-ubkOf2YCnVtq7KqEJQqAI8dDD5rH1M6OP5kW0KO/JQyTaxLA0N0pjFWvvaysCj9eHMNBcuuoZXhhl0ypjod2DA==",
+            "requires": {
+                "@azure/abort-controller": "^1.0.0",
+                "@azure/core-util": "^1.2.0",
+                "@azure/logger": "^1.0.0",
+                "tslib": "^2.2.0"
+            }
+        },
+        "@azure/core-paging": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@azure/core-paging/-/core-paging-1.5.0.tgz",
+            "integrity": "sha512-zqWdVIt+2Z+3wqxEOGzR5hXFZ8MGKK52x4vFLw8n58pR6ZfKRx3EXYTxTaYxYHc/PexPUTyimcTWFJbji9Z6Iw==",
+            "requires": {
+                "tslib": "^2.2.0"
+            }
+        },
+        "@azure/core-tracing": {
+            "version": "1.0.0-preview.13",
+            "resolved": "https://registry.npmjs.org/@azure/core-tracing/-/core-tracing-1.0.0-preview.13.tgz",
+            "integrity": "sha512-KxDlhXyMlh2Jhj2ykX6vNEU0Vou4nHr025KoSEiz7cS3BNiHNaZcdECk/DmLkEB0as5T7b/TpRcehJ5yV6NeXQ==",
+            "requires": {
+                "@opentelemetry/api": "^1.0.1",
+                "tslib": "^2.2.0"
+            }
+        },
+        "@azure/core-util": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/@azure/core-util/-/core-util-1.3.2.tgz",
+            "integrity": "sha512-2bECOUh88RvL1pMZTcc6OzfobBeWDBf5oBbhjIhT1MV9otMVWCzpOJkkiKtrnO88y5GGBelgY8At73KGAdbkeQ==",
+            "requires": {
+                "@azure/abort-controller": "^1.0.0",
+                "tslib": "^2.2.0"
+            }
+        },
+        "@azure/logger": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@azure/logger/-/logger-1.0.4.tgz",
+            "integrity": "sha512-ustrPY8MryhloQj7OWGe+HrYx+aoiOxzbXTtgblbV3xwCqpzUK36phH3XNHQKj3EPonyFUuDTfR3qFhTEAuZEg==",
+            "requires": {
+                "tslib": "^2.2.0"
+            }
+        },
+        "@azure/storage-blob": {
+            "version": "12.14.0",
+            "resolved": "https://registry.npmjs.org/@azure/storage-blob/-/storage-blob-12.14.0.tgz",
+            "integrity": "sha512-g8GNUDpMisGXzBeD+sKphhH5yLwesB4JkHr1U6be/X3F+cAMcyGLPD1P89g2M7wbEtUJWoikry1rlr83nNRBzg==",
+            "requires": {
+                "@azure/abort-controller": "^1.0.0",
+                "@azure/core-http": "^3.0.0",
+                "@azure/core-lro": "^2.2.0",
+                "@azure/core-paging": "^1.1.1",
+                "@azure/core-tracing": "1.0.0-preview.13",
+                "@azure/logger": "^1.0.0",
+                "events": "^3.0.0",
+                "tslib": "^2.2.0"
+            }
+        },
         "@babel/code-frame": {
             "version": "7.22.5",
             "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
@@ -3134,6 +3249,11 @@
                 "@octokit/openapi-types": "^16.0.0"
             }
         },
+        "@opentelemetry/api": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.4.1.tgz",
+            "integrity": "sha512-O2yRJce1GOc6PAy3QxFM4NzFiWzvScDC1/5ihYBL6BUEVdq0XMWN01sppE+H6bBXbaFYipjwFLEWLg5PaSOThA=="
+        },
         "@popperjs/core": {
             "version": "2.11.7",
             "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
@@ -3982,8 +4102,28 @@
         "@types/node": {
             "version": "10.17.60",
             "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.60.tgz",
-            "integrity": "sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==",
-            "dev": true
+            "integrity": "sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw=="
+        },
+        "@types/node-fetch": {
+            "version": "2.6.4",
+            "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.4.tgz",
+            "integrity": "sha512-1ZX9fcN4Rvkvgv4E6PAY5WXUFWFcRWxZa3EW83UjycOB9ljJCedb2CupIP4RZMEwF/M3eTcCihbBRgwtGbg5Rg==",
+            "requires": {
+                "@types/node": "*",
+                "form-data": "^3.0.0"
+            },
+            "dependencies": {
+                "form-data": {
+                    "version": "3.0.1",
+                    "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+                    "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+                    "requires": {
+                        "asynckit": "^0.4.0",
+                        "combined-stream": "^1.0.8",
+                        "mime-types": "^2.1.12"
+                    }
+                }
+            }
         },
         "@types/nodemailer": {
             "version": "4.6.8",
@@ -4519,6 +4659,14 @@
             "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.2.tgz",
             "integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw=="
         },
+        "@types/tunnel": {
+            "version": "0.0.3",
+            "resolved": "https://registry.npmjs.org/@types/tunnel/-/tunnel-0.0.3.tgz",
+            "integrity": "sha512-sOUTGn6h1SfQ+gbgqC364jLFBw2lnFqkgF3q0WovEHRLMrVD1sd5aufqi/aJObLekJO+Aq5z646U4Oxy6shXMA==",
+            "requires": {
+                "@types/node": "*"
+            }
+        },
         "@types/typescript": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/@types/typescript/-/typescript-2.0.0.tgz",
@@ -5538,6 +5686,11 @@
             "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
             "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
         },
+        "attr-accept": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+            "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
+        },
         "available-typed-arrays": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -6198,9 +6351,9 @@
             }
         },
         "browndash-components": {
-            "version": "0.0.90",
-            "resolved": "https://registry.npmjs.org/browndash-components/-/browndash-components-0.0.90.tgz",
-            "integrity": "sha512-56dsp2yoP5axTnXSPtSpWsQUkcj3hAekYBHLk7Kw6OV7LHVuu5PZruSmGE9xDrdhAFz2UdUyxKeAGB3PdbQoew==",
+            "version": "0.0.91",
+            "resolved": "https://registry.npmjs.org/browndash-components/-/browndash-components-0.0.91.tgz",
+            "integrity": "sha512-VYW1C1XY6CcQD4OceQHK/2VGhSa0H0iboom7M9zy5F6WHJP03LFHrwKkRtgsqwxQBQLsj69XXlEfygbSkV3FvQ==",
             "requires": {
                 "@emotion/react": "^11.11.1",
                 "@emotion/styled": "^11.11.0",
@@ -9627,9 +9780,9 @@
             "integrity": "sha512-GiZn9D4Z/rSYvTeg1ljAIsEqFm0LaN9gVtwDCrKL80zHtS31p9BAjmTxVqTQDMpwlMolJZOFntUG2uwyj7DAqw=="
         },
         "core-js-compat": {
-            "version": "3.31.1",
-            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.31.1.tgz",
-            "integrity": "sha512-wIDWd2s5/5aJSdpOJHfSibxNODxoGoWOBHt8JSPB41NOE94M7kuTPZCYLOlTtuoXTsBPKobpJ6T+y0SSy5L9SA==",
+            "version": "3.32.0",
+            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.32.0.tgz",
+            "integrity": "sha512-7a9a3D1k4UCVKnLhrgALyFcP7YCsLOQIxPd0dKjf/6GuPcgyiGP70ewWdCGrSK7evyhymi0qO4EqCmSJofDeYw==",
             "requires": {
                 "browserslist": "^4.21.9"
             }
@@ -12755,8 +12908,7 @@
         "events": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-            "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-            "dev": true
+            "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
         },
         "eventsource": {
             "version": "2.0.2",
@@ -13323,6 +13475,14 @@
             "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
             "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
         },
+        "file-selector": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+            "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+            "requires": {
+                "tslib": "^2.4.0"
+            }
+        },
         "file-uri-to-path": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -23799,6 +23959,16 @@
                 "prop-types": "^15.8.1"
             }
         },
+        "react-dropzone": {
+            "version": "14.2.3",
+            "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+            "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+            "requires": {
+                "attr-accept": "^2.2.2",
+                "file-selector": "^0.6.0",
+                "prop-types": "^15.8.1"
+            }
+        },
         "react-event-listener": {
             "version": "0.6.6",
             "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz",
@@ -25008,6 +25178,11 @@
                 }
             }
         },
+        "sax": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+            "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+        },
         "saxes": {
             "version": "3.1.11",
             "resolved": "https://registry.npmjs.org/saxes/-/saxes-3.1.11.tgz",
@@ -27129,6 +27304,11 @@
                 }
             }
         },
+        "tunnel": {
+            "version": "0.0.6",
+            "resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.6.tgz",
+            "integrity": "sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg=="
+        },
         "tunnel-agent": {
             "version": "0.6.0",
             "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -28710,6 +28890,22 @@
             "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
             "dev": true
         },
+        "xml2js": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.5.0.tgz",
+            "integrity": "sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==",
+            "requires": {
+                "sax": ">=0.6.0",
+                "xmlbuilder": "~11.0.0"
+            },
+            "dependencies": {
+                "xmlbuilder": {
+                    "version": "11.0.1",
+                    "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+                    "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
+                }
+            }
+        },
         "xmlbuilder": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-4.0.0.tgz",
diff --git a/package.json b/package.json
index 4b8444ad8..822460a10 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
         "start-release": "cross-env RELEASE=true NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev -- src/server/index.ts",
         "start": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --debug --transpile-only -- src/server/index.ts",
         "oldstart": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --debug -- src/server/index.ts",
-        "debug": "cross-env NODE_OPTIONS=--max_old_space_size=8192 ts-node-dev --transpile-only --inspect -- src/server/index.ts",
+        "debug": "cross-env USE_AZURE=false NODE_OPTIONS=--max_old_space_size=8192 ts-node-dev --transpile-only --inspect -- src/server/index.ts",
         "monitor": "cross-env MONITORED=true NODE_OPTIONS=--max_old_space_size=4096 ts-node src/server/index.ts",
         "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 webpack --env production",
         "test": "mocha -r ts-node/register test/**/*.ts",
@@ -130,6 +130,7 @@
         "webpack-hot-middleware": "^2.25.1"
     },
     "dependencies": {
+        "@azure/storage-blob": "^12.14.0",
         "@emotion/react": "^11.11.0",
         "@emotion/styled": "^11.11.0",
         "@ffmpeg/core": "0.10.0",
@@ -176,7 +177,7 @@
         "body-parser": "^1.19.2",
         "bootstrap": "^4.6.1",
         "brotli": "^1.3.3",
-        "browndash-components": "^0.0.90",
+        "browndash-components": "^0.0.91",
         "browser-assert": "^1.2.1",
         "bson": "^4.6.1",
         "canvas": "^2.9.3",
@@ -288,6 +289,7 @@
         "react-compound-slider": "^2.5.0",
         "react-datepicker": "^3.8.0",
         "react-dom": "^18.2.0",
+        "react-dropzone": "^14.2.3",
         "react-grid-layout": "^1.3.4",
         "react-icons": "^4.3.1",
         "react-jsx-parser": "^1.29.0",
diff --git a/src/Utils.ts b/src/Utils.ts
index 599c6456a..8b9fe2aab 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -80,7 +80,7 @@ export namespace Utils {
         }
     }
 
-    export function GetScreenTransform(ele?: HTMLElement): { scale: number; translateX: number; translateY: number } {
+    export function GetScreenTransform(ele?: HTMLElement | null): { scale: number; translateX: number; translateY: number } {
         if (!ele) {
             return { scale: 1, translateX: 1, translateY: 1 };
         }
diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index ba59a9f50..ad5a73598 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -49,7 +49,8 @@ export namespace DocServer {
         }
         const filtered = Array.from(Object.keys(_cache)).filter(key => {
             const doc = _cache[key] as Doc;
-            if (!(StrCast(doc.author).includes('.edu') || StrCast(doc.author).includes('.com')) || doc.author == Doc.CurrentUserEmail) return true;
+            return true;
+            if (!(StrCast(doc.author).includes('.edu') || StrCast(doc.author).includes('.com')) || doc.author === Doc.CurrentUserEmail) return true;
             return false;
         });
         if (filtered.length === lastCacheUpdate) return;
diff --git a/src/client/Network.ts b/src/client/Network.ts
index d606b9854..39bf69e32 100644
--- a/src/client/Network.ts
+++ b/src/client/Network.ts
@@ -5,7 +5,7 @@ import { Upload } from '../server/SharedMediaTypes';
 /**
  * Networking is repsonsible for connecting the client to the server. Networking
  * mainly provides methods that the client can use to begin the process of
- * interacting with the server, such as fetching or uploading files. 
+ * interacting with the server, such as fetching or uploading files.
  */
 export namespace Networking {
     export async function FetchFromServer(relativeRoute: string) {
@@ -25,9 +25,9 @@ export namespace Networking {
     /**
      * FileGuidPair attaches a guid to a file that is being uploaded,
      * allowing the client to track the upload progress.
-     * 
+     *
      * When files are dragged to the canvas, the overWriteDoc's ID is
-     * used as the guid. Otherwise, a new guid is generated. 
+     * used as the guid. Otherwise, a new guid is generated.
      */
     export interface FileGuidPair {
         file: File;
@@ -38,9 +38,10 @@ export namespace Networking {
      * with the mapping of guid to files as parameters.
      *
      * @param fileguidpairs the files and corresponding guids to be uploaded to the server
+     * @param browndash whether the endpoint should be invoked on the browndash server
      * @returns the response as a json from the server
      */
-    export async function UploadFilesToServer<T extends Upload.FileInformation = Upload.FileInformation>(fileguidpairs: FileGuidPair | FileGuidPair[]): Promise<Upload.FileResponse<T>[]> {
+    export async function UploadFilesToServer<T extends Upload.FileInformation = Upload.FileInformation>(fileguidpairs: FileGuidPair | FileGuidPair[], browndash?: boolean): Promise<Upload.FileResponse<T>[]> {
         const formData = new FormData();
         if (Array.isArray(fileguidpairs)) {
             if (!fileguidpairs.length) {
@@ -57,17 +58,19 @@ export namespace Networking {
                     ])
                 );
             }
-            // If the fileguidpair has a guid to use (From the overwriteDoc) use that guid. Otherwise, generate a new guid. 
+            // If the fileguidpair has a guid to use (From the overwriteDoc) use that guid. Otherwise, generate a new guid.
             fileguidpairs.forEach(fileguidpair => formData.append(fileguidpair.guid ?? Utils.GenerateGuid(), fileguidpair.file));
         } else {
-            // Handle the case where fileguidpairs is a single file. 
+            // Handle the case where fileguidpairs is a single file.
             formData.append(fileguidpairs.guid ?? Utils.GenerateGuid(), fileguidpairs.file);
         }
         const parameters = {
             method: 'POST',
             body: formData,
         };
-        const response = await fetch('/uploadFormData', parameters);
+
+        const endpoint = browndash ? '[insert endpoint allowing local => browndash]' : '/uploadFormData';
+        const response = await fetch(endpoint, parameters);
         return response.json();
     }
 
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 8cb4be72c..5d7ca6f6d 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -359,6 +359,7 @@ export class DocumentOptions {
     onDoubleClick?: ScriptField;
     onChildClick?: ScriptField; // script given to children of a collection to execute when they are clicked
     onChildDoubleClick?: ScriptField; // script given to children of a collection to execute when they are double clicked
+    onClickScriptDisable?: STRt = new StrInfo('"always" disable click script, "never" disable click script, or default');
     defaultDoubleClick?: 'ignore' | 'default'; // ignore double clicks, or deafult (undefined) means open document full screen
     waitForDoubleClickToClick?: 'always' | 'never' | 'default'; // whether a click function wait for double click to expire.  'default' undefined = wait only if there's a click handler, "never" = never wait, "always" = alway wait
     onPointerDown?: ScriptField;
@@ -625,7 +626,7 @@ export namespace Docs {
                 DocumentType.WEBCAM,
                 {
                     layout: { view: RecordingBox, dataField: defaultDataKey },
-                    options: { systemIcon: 'BsFillCameraVideoFill'  },
+                    options: { systemIcon: 'BsFillCameraVideoFill' },
                 },
             ],
             [
@@ -639,7 +640,7 @@ export namespace Docs {
                 DocumentType.CONFIG,
                 {
                     layout: { view: CollectionView, dataField: defaultDataKey },
-                    options: { layout_hideLinkButton: true, pointerEvents: 'none', layout_unrendered: true },
+                    options: { layout_hideLinkButton: true, layout_unrendered: true },
                 },
             ],
             [
@@ -698,7 +699,22 @@ export namespace Docs {
                 {
                     data: '',
                     layout: { view: PhysicsSimulationBox, dataField: defaultDataKey, _width: 1000, _height: 800 },
-                    options: { _height: 100, layout_forceReflow: true, nativeHeightUnfrozen: true, mass1: '', mass2: '', nativeDimModifiable: true, position: '', acceleration: '', pendulum: '', spring: '', wedge: '', simulation: '', review: '', systemIcon: 'BsShareFill' },
+                    options: {
+                        _height: 100,
+                        layout_forceReflow: true,
+                        nativeHeightUnfrozen: true,
+                        mass1: '',
+                        mass2: '',
+                        nativeDimModifiable: true,
+                        position: '',
+                        acceleration: '',
+                        pendulum: '',
+                        spring: '',
+                        wedge: '',
+                        simulation: '',
+                        review: '',
+                        systemIcon: 'BsShareFill',
+                    },
                 },
             ],
         ]);
@@ -842,7 +858,7 @@ export namespace Docs {
             dataProps.author_date = new DateField();
             if (fieldKey) {
                 dataProps[`${fieldKey}_modificationDate`] = new DateField();
-                dataProps[fieldKey] = data;
+                dataProps[fieldKey] = options.data ?? data;
 
                 // so that the list of annotations is already initialised, prevents issues in addonly.
                 // without this, if a doc has no annotations but the user has AddOnly privileges, they won't be able to add an annotation because they would have needed to create the field's list which they don't have permissions to do.
@@ -1736,7 +1752,7 @@ export namespace DocUtils {
             return;
         }
         const full = { ...options, _width: 400, title: name };
-        const pathname = Utils.prepend(result.accessPaths.agnostic.client);
+        const pathname = result.accessPaths.agnostic.client;
         const doc = await DocUtils.DocumentFromType(type, pathname, full, overwriteDoc);
         if (doc) {
             const proto = Doc.GetProto(doc);
diff --git a/src/client/theme.ts b/src/client/theme.ts
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/theme.ts
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 2e4fb0f1c..8e91bf83f 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -344,13 +344,13 @@ export class CurrentUserUtils {
       const getActiveDashTrails = "Doc.ActiveDashboard?.myTrails";
         return [
             { title: "Dashboards",      toolTip: "Dashboards",      target: this.setupDashboards(doc, "myDashboards"),         ignoreClick: true, icon: "desktop",     funcs: {hidden: "IsNoviceMode()"} },
-            { title: "Search",          toolTip: "Search ⌘F",      target: this.setupSearcher(doc, "mySearcher"),             ignoreClick: true, icon: "search",      },
+            { title: "Search",          toolTip: "Search ⌘F",       target: this.setupSearcher(doc, "mySearcher"),             ignoreClick: true, icon: "search",      },
             { title: "Files",           toolTip: "Files",           target: this.setupFilesystem(doc, "myFilesystem"),         ignoreClick: true, icon: "folder-open", },
             { title: "Tools",           toolTip: "Tools",           target: this.setupToolsBtnPanel(doc, "myTools"),           ignoreClick: true, icon: "wrench",      funcs: {hidden: "IsNoviceMode()"} },
-            { title: "Imports",         toolTip: "Imports ⌘I",     target: this.setupImportSidebar(doc, "myImports"),         ignoreClick: true, icon: "upload",      },
+            { title: "Imports",         toolTip: "Imports ⌘I",      target: this.setupImportSidebar(doc, "myImports"),         ignoreClick:false, icon: "upload",      },
             { title: "Closed",          toolTip: "Recently Closed", target: this.setupRecentlyClosed(doc, "myRecentlyClosed"), ignoreClick: true, icon: "archive",     },
             { title: "Shared",          toolTip: "Shared Docs",     target: Doc.MySharedDocs,                                  ignoreClick: true, icon: "users",       funcs: {badgeValue: badgeValue}},
-            { title: "Trails",          toolTip: "Trails ⌘R",      target: Doc.UserDoc(),                                     ignoreClick: true, icon: "pres-trail",  funcs: {target: getActiveDashTrails}},
+            { title: "Trails",          toolTip: "Trails ⌘R",       target: Doc.UserDoc(),                                     ignoreClick: true, icon: "pres-trail",  funcs: {target: getActiveDashTrails}},
             { title: "User Doc",        toolTip: "User Doc",        target: this.setupUserDocView(doc, "myUserDocView"),       ignoreClick: true, icon: "address-card",funcs: {hidden: "IsNoviceMode()"} },
         ].map(tuple => ({...tuple, scripts:{onClick: 'selectMainMenu(self)'}}));
     }
@@ -586,6 +586,11 @@ export class CurrentUserUtils {
         dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
         _lockedPosition: true, isSystem: true, flexDirection: "row"
     })
+    static multiToggleList = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.FontIconDocument({
+        ...opts, data:docs, _gridGap: 0, _xMargin: 5, _yMargin: 5, layout_boxShadow: "0 0", _forceActive: true,
+        dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
+        _lockedPosition: true, isSystem: true, flexDirection: "row"
+    })
 
     static createToolButton = (opts: DocumentOptions) => Docs.Create.FontIconDocument({
         btnType: ButtonType.ToolButton, _forceActive: true, _layout_hideContextMenu: true, 
@@ -640,17 +645,17 @@ export class CurrentUserUtils {
               btnList: new List<string>(["Roboto", "Roboto Mono", "Nunito", "Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]) },
             { title: "Font Size",toolTip: "Font size (%size)",    btnType: ButtonType.NumberDropdownButton,              toolType:"fontSize", ignoreClick: true,   scripts: {script:  '{ return setFontAttr(self.toolType, value, _readOnly_);}'}, numBtnMax: 200, numBtnMin: 6 },
             { title: "Color",    toolTip: "Font color (%color)",  btnType: ButtonType.ColorButton,  icon: "font",        toolType:"fontColor",ignoreClick: true,   scripts: {script:  '{ return setFontAttr(self.toolType, value, _readOnly_);}'}},
-            { title: "Highlight",toolTip:"Font highlight",        btnType: ButtonType.ColorButton,  icon: "highlighter", toolType:"highlight",ignoreClick: true,   scripts: {script:  '{ return setFontAttr(self.toolType, value, _readOnly_);}'},funcs: {hidden: "IsNoviceMode()"} },
+            { title: "Highlight",toolTip: "Font highlight",       btnType: ButtonType.ColorButton,  icon: "highlighter", toolType:"highlight",ignoreClick: true,   scripts: {script:  '{ return setFontAttr(self.toolType, value, _readOnly_);}'},funcs: {hidden: "IsNoviceMode()"} },
             { title: "Bold",     toolTip: "Bold (Ctrl+B)",        btnType: ButtonType.ToggleButton, icon: "bold",        toolType:"bold",     ignoreClick: true,   scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
             { title: "Italic",   toolTip: "Italic (Ctrl+I)",      btnType: ButtonType.ToggleButton, icon: "italic",      toolType:"italics",  ignoreClick: true,   scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
             { title: "Under",    toolTip: "Underline (Ctrl+U)",   btnType: ButtonType.ToggleButton, icon: "underline",   toolType:"underline",ignoreClick: true,   scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
             { title: "Bullets",  toolTip: "Bullet List",          btnType: ButtonType.ToggleButton, icon: "list",        toolType:"bullet",   ignoreClick: true,   scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
             { title: "#",        toolTip: "Number List",          btnType: ButtonType.ToggleButton, icon: "list-ol",     toolType:"decimal",  ignoreClick: true,   scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
-            { title: "Alignment",toolTip: "Alignment",            btnType: ButtonType.MultiToggleButton,                  toolType:"alignment", ignoreClick: true,
+            { title: "Align",    toolTip: "Alignment",            btnType: ButtonType.MultiToggleButton,                 toolType:"alignment", ignoreClick: true,
               subMenu: [
-                { title: "Left",     toolTip: "Left align (Cmd-[)",   btnType: ButtonType.ToggleButton, icon: "align-left",  toolType:"left",  ignoreClick: true,      scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}' }},
-                { title: "Center",   toolTip: "Center align (Cmd-\\)",btnType: ButtonType.ToggleButton, icon: "align-center",toolType:"center",ignoreClick: true,      scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
-                { title: "Right",    toolTip: "Right align (Cmd-])",  btnType: ButtonType.ToggleButton, icon: "align-right", toolType:"right", ignoreClick: true,      scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
+                { title: "Left",     toolTip: "Left align (Cmd-[)",   btnType: ButtonType.ToggleButton, icon: "align-left",  toolType:"left",  ignoreClick: true,  scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}' }},
+                { title: "Center",   toolTip: "Center align (Cmd-\\)",btnType: ButtonType.ToggleButton, icon: "align-center",toolType:"center",ignoreClick: true,  scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
+            { title: "Right",    toolTip: "Right align (Cmd-])",  btnType: ButtonType.ToggleButton, icon: "align-right", toolType:"right", ignoreClick: true,  scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
               ]
             },
             { title: "Dictate",  toolTip: "Dictate",              btnType: ButtonType.ToggleButton, icon: "microphone",  toolType:"dictation", ignoreClick: true,  scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'}},
@@ -730,32 +735,31 @@ export class CurrentUserUtils {
         return DocUtils.AssignScripts(DocUtils.AssignOpts(btnDoc, reqdOpts) ?? Docs.Create.FontIconDocument(reqdOpts), params.scripts, reqdFuncs);
     }
 
+    static setupContextMenuBtn(params:Button, menuDoc:Doc):Doc {
+        const menuBtnDoc = DocListCast(menuDoc?.data).find(doc => doc.title === params.title);
+        if (!params.subMenu) { // button does not have a sub menu
+            return this.setupContextMenuButton(params, menuBtnDoc);
+        }  
+        // linear view
+        const reqdSubMenuOpts = { ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, undoIgnoreFields: new List<string>(['width', "linearView_IsOpen"]),
+            childDontRegisterViews: true, flexGap: 0, _height: 30, ignoreClick: params.scripts?.onClick ? false : true,
+            linearView_SubMenu: true, linearView_Expandable: params.btnType !== ButtonType.MultiToggleButton};
+        
+        const items = !menuBtnDoc ? [] : params.subMenu?.map(sub => this.setupContextMenuBtn(sub, menuBtnDoc) );
+        if (params.btnType === ButtonType.MultiToggleButton) {
+            const list = DocUtils.AssignScripts( DocUtils.AssignDocField(menuDoc, StrCast(params.title), 
+                (opts) => this.multiToggleList(opts, items??[]), reqdSubMenuOpts, items), params.scripts);
+            return list;
+        }
+        return DocUtils.AssignScripts(
+            DocUtils.AssignDocField(menuDoc, StrCast(params.title), (opts) => this.linearButtonList(opts, items??[]), reqdSubMenuOpts, items), params.scripts, params.funcs);
+    }
+
     /// Initializes all the default buttons for the top bar context menu
     static setupContextMenuButtons(doc: Doc, field="myContextMenuBtns") {
         const reqdCtxtOpts:DocumentOptions = { title: "context menu buttons", undoIgnoreFields:new List<string>(['width', "linearView_IsOpen"]), flexGap: 0, childDragAction: 'embed', childDontRegisterViews: true,  linearView_IsOpen: true, ignoreClick: true, linearView_Expandable: false, _height: 35 };
         const ctxtMenuBtnsDoc = DocUtils.AssignDocField(doc, field, (opts, items) => this.linearButtonList(opts, items??[]), reqdCtxtOpts, undefined);
-        const ctxtMenuBtns = CurrentUserUtils.contextMenuTools().map(params => {
-            const menuBtnDoc = DocListCast(ctxtMenuBtnsDoc?.data).find(doc => doc.title === params.title);
-            if (!params.subMenu) { // button does not have a sub menu
-                return this.setupContextMenuButton(params, menuBtnDoc);
-            } else { // linear view
-                let reqdSubMenuOpts;
-                if (params.btnType === ButtonType.MultiToggleButton) {
-                    reqdSubMenuOpts = { ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, undoIgnoreFields: new List<string>(['width', "linearView_IsOpen"]),
-                    childDontRegisterViews: true, flexGap: 0, _height: 30, ignoreClick: params.scripts?.onClick ? false : true,
-                    linearView_SubMenu: true, linearView_Dropdown: true, };
-                } else {
-                    reqdSubMenuOpts = { ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, undoIgnoreFields: new List<string>(['width', "linearView_IsOpen"]),
-                    childDontRegisterViews: true, flexGap: 0, _height: 30, ignoreClick: params.scripts?.onClick ? false : true,
-                    linearView_SubMenu: true, linearView_Expandable: true, };
-                }
-                const items = params.subMenu?.map(sub =>
-                    this.setupContextMenuButton(sub, DocListCast(menuBtnDoc?.data).find(doc => doc.title === sub.title))
-                );
-                return DocUtils.AssignScripts(
-                    DocUtils.AssignDocField(ctxtMenuBtnsDoc, StrCast(params.title), (opts) => this.linearButtonList(opts, items??[]), reqdSubMenuOpts, items), params.scripts, params.funcs);
-            }
-        });
+        const ctxtMenuBtns = CurrentUserUtils.contextMenuTools().map(params => this.setupContextMenuBtn(params, ctxtMenuBtnsDoc) );
         return DocUtils.AssignOpts(ctxtMenuBtnsDoc, reqdCtxtOpts, ctxtMenuBtns);
     }
 
@@ -805,19 +809,17 @@ export class CurrentUserUtils {
         
         DocUtils.AssignDocField(doc, "mySharedDocs", opts => Docs.Create.TreeDocument([], opts, sharingDocumentId + "layout", sharingDocumentId), sharedDocOpts, undefined, sharedScripts);
         if (!Doc.GetProto(DocCast(doc.mySharedDocs)).data_dashboards) Doc.GetProto(DocCast(doc.mySharedDocs)).data_dashboards = new List<Doc>();
-        console.log(doc.mySharedDocs);
     }
 
     /// Import option on the left side button panel 
-    static setupImportSidebar(doc: Doc, field:string) {   
-        // PresElementBox.LayoutString('data')
+    static setupImportSidebar(doc: Doc, field:string) {
         const reqdOpts:DocumentOptions = {
-            title: "My Imports", _forceActive: true, ignoreClick: true, _layout_showTitle: "title", childLayoutString: ImportElementBox.LayoutString('data'),
-            _dragOnlyWithinContainer: true, _layout_hideContextMenu: true, childLimitHeight: 0,
+            title: "My Imports", _forceActive: true, _layout_showTitle: "title", childLayoutString: ImportElementBox.LayoutString('data'),
+            _dragOnlyWithinContainer: true, _layout_hideContextMenu: true, childLimitHeight: 0, onClickScriptDisable:"never",
             childDragAction: "copy", _layout_autoHeight: true, _yMargin: 50, _gridGap: 15, layout_boxShadow: "0 0", _lockedPosition: true, isSystem: true, _chromeHidden: true,
             dontRegisterView: true, layout_explainer: "This is where documents that are Imported into Dash will go."
         };
-        const myImports = DocUtils.AssignDocField(doc, field, (opts) => Docs.Create.StackingDocument([], opts), reqdOpts);
+        const myImports = DocUtils.AssignDocField(doc, field, (opts) => Docs.Create.MasonryDocument([], opts), reqdOpts, undefined, {onClick: "deselectAll()"});
     
         const reqdBtnOpts:DocumentOptions = { _forceActive: true, toolTip: "Import from computer",
             _width: 30, _height: 30, color: Colors.BLACK, _dragOnlyWithinContainer: true, _layout_hideContextMenu: true, title: "Import", btnType: ButtonType.ClickButton, 
diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss
index 253ed5d2a..673af16ee 100644
--- a/src/client/util/GroupManager.scss
+++ b/src/client/util/GroupManager.scss
@@ -7,33 +7,48 @@
         .group-create {
             display: flex;
             flex-direction: column;
-            height: 90%;
+            overflow: visible;
+            height: 100%;
+            width: 98.5%;
+            padding: 5px;
             justify-content: space-between;
             margin-left: 5px;
 
-            input {
-                border-radius: 5px;
-                padding: 8px;
-                min-width: 100%;
-                border: 1px solid hsl(0, 0%, 80%);
-                outline: none;
-                height: 30;
-
-                &:focus {
-                    border: 2.5px solid #2684FF;
-                }
-            }
-
             p {
                 font-size: 20px;
                 text-align: left;
-                color: black;
             }
+        }
 
-            button {
-                align-self: flex-end;
+        .group-input {
+
+            input {
+                padding: 8px;
+                width: 100%;
+                outline: none;
+                border: none;
+                min-width: 100%;
+                border: 2px solid;
+                border-radius: 4px;
+                border-color: inherit;
+                background: white;
+                color: black;
+                height: 30;
             }
         }
+
+        .select-users {
+            margin-right: 3;
+            max-height: 30;
+            width: 100%;
+            display: inline-flex;
+            flex-direction: row;
+            border: 2px solid;
+            border-radius: 4px;
+            border-color: inherit;
+            background: white;
+            color: black;
+        }
     }
 
 
@@ -55,11 +70,14 @@
 .group-interface {
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    padding: 10px;
 
     .overlay {
         transform: translate(-10px, -10px);
         width: 400px;
         height: 320px;
+        overflow: hidden;
     }
 
     .delete-button {
@@ -81,7 +99,6 @@
             font-size: 20px;
             text-align: left;
             margin-right: 15px;
-            color: black;
         }
     }
 
@@ -94,18 +111,24 @@
             margin-left: 5;
             width: 50px;
             cursor: pointer;
+            display: flex;
+            flex-direction: row;
+        }
+
+        .style-divider {
+            width: 100%;
+            height: 1px;
         }
 
         .group-body {
             justify-content: space-between;
-            height: 220;
-            background-color: #e8e8e8;
+            height: 225;
 
             padding-right: 1em;
             justify-content: space-around;
             text-align: left;
 
-            overflow-y: auto;
+            overflow-y: hidden;
             width: 100%;
 
             .group-row {
@@ -117,7 +140,6 @@
                 .group-name {
                     max-width: 65%;
                     margin: 0 10;
-                    color: black;
                 }
 
                 .group-info {
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index da947aba6..e406d89e7 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -15,6 +15,7 @@ import { SharingManager, User } from './SharingManager';
 import { listSpec } from '../../fields/Schema';
 import { DateField } from '../../fields/DateField';
 import { Id } from '../../fields/FieldSymbols';
+import { Button, IconButton, Size, Type } from 'browndash-components';
 
 /**
  * Interface for options for the react-select component
@@ -280,47 +281,59 @@ export class GroupManager extends React.Component<{}> {
      */
     private get groupCreationModal() {
         const contents = (
-            <div className="group-create">
+            <div className="group-create" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
                 <div className="group-heading" style={{ marginBottom: 0 }}>
                     <p>
                         <b>New Group</b>
                     </p>
-                    <div
-                        className={'close-button'}
-                        onClick={action(() => {
-                            this.createGroupModalOpen = false;
-                            TaskCompletionBox.taskCompleted = false;
-                        })}>
-                        <FontAwesomeIcon icon={'times'} color={'black'} size={'lg'} />
+                    <div className="close-button">
+                        <Button
+                            icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
+                            onClick={action(() => {
+                                this.createGroupModalOpen = false;
+                                TaskCompletionBox.taskCompleted = false;
+                            })}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
                     </div>
                 </div>
-                <input className="group-input" ref={this.inputRef} onKeyDown={this.handleKeyDown} autoFocus type="text" placeholder="Group name" onChange={action(() => (this.buttonColour = this.inputRef.current?.value ? 'black' : '#979797'))} />
-                <Select
-                    isMulti
-                    options={this.options}
-                    onChange={this.handleChange}
-                    placeholder={'Select users'}
-                    value={this.selectedUsers}
-                    closeMenuOnSelect={false}
-                    styles={{
-                        dropdownIndicator: (base, state) => ({
-                            ...base,
-                            transition: '0.5s all ease',
-                            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined,
-                        }),
-                        multiValue: base => ({
-                            ...base,
-                            maxWidth: '50%',
-
-                            '&:hover': {
-                                maxWidth: 'unset',
-                            },
-                        }),
-                    }}
-                />
-                <button ref={this.createGroupButtonRef} onClick={this.createGroup} style={{ background: this.buttonColour }} disabled={this.buttonColour === '#979797'}>
-                    Create
-                </button>
+                <div className="group-input" style={{ border: StrCast(Doc.UserDoc().userColor) }}>
+                    <input ref={this.inputRef} onKeyDown={this.handleKeyDown} autoFocus type="text" placeholder="Group name" onChange={action(() => (this.buttonColour = this.inputRef.current?.value ? 'black' : '#979797'))} />
+                </div>
+                <div style={{ border: StrCast(Doc.UserDoc().userColor) }}>
+                    <Select
+                        className="select-users"
+                        isMulti
+                        options={this.options}
+                        onChange={this.handleChange}
+                        placeholder={'Select users'}
+                        value={this.selectedUsers}
+                        closeMenuOnSelect={false}
+                        styles={{
+                            control: () => ({
+                                display: 'inline-flex',
+                                width: '100%',
+                            }),
+                            indicatorSeparator: () => ({
+                                display: 'inline-flex',
+                                visibility: 'hidden',
+                            }),
+                            indicatorsContainer: () => ({
+                                display: 'inline-flex',
+                                textDecorationColor: 'black',
+                            }),
+                            valueContainer: () => ({
+                                display: 'inline-flex',
+                                fontStyle: StrCast(Doc.UserDoc().userColor),
+                                color: StrCast(Doc.UserDoc().userColor),
+                                width: '100%',
+                            }),
+                        }}
+                    />
+                </div>
+                <div className={'create-button'}>
+                    <Button text={'Create'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={this.createGroup} />
+                </div>
             </div>
         );
 
@@ -353,37 +366,30 @@ export class GroupManager extends React.Component<{}> {
         const groups = this.groupSort === 'ascending' ? this.allGroups.sort(sortGroups) : this.groupSort === 'descending' ? this.allGroups.sort(sortGroups).reverse() : this.allGroups;
 
         return (
-            <div className="group-interface">
+            <div className="group-interface" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
                 {this.groupCreationModal}
                 {this.currentGroup ? <GroupMemberView group={this.currentGroup} onCloseButtonClick={action(() => (this.currentGroup = undefined))} /> : null}
                 <div className="group-heading">
                     <p>
                         <b>Manage Groups</b>
                     </p>
-                    <button onClick={action(() => (this.createGroupModalOpen = true))}>
-                        <FontAwesomeIcon icon={'plus'} size={'sm'} /> Create Group
-                    </button>
-                    <div className={'close-button'} onClick={this.close}>
-                        <FontAwesomeIcon icon={'times'} color={'black'} size={'lg'} />
+                    <Button icon={<FontAwesomeIcon icon={'plus'} />} iconPlacement={'left'} text={'Create Group'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (this.createGroupModalOpen = true))} />
+                    <div className={'close-button'}>
+                        <Button icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} onClick={this.close} color={StrCast(Doc.UserDoc().userColor)} />
                     </div>
                 </div>
                 <div className="main-container">
                     <div className="sort-groups" onClick={action(() => (this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending'))}>
-                        Name{' '}
-                        {this.groupSort === 'ascending' ? (
-                            <FontAwesomeIcon icon={'caret-up'} size={'xs'} />
-                        ) : this.groupSort === 'descending' ? (
-                            <FontAwesomeIcon icon={'caret-down'} size={'xs'} />
-                        ) : (
-                            <FontAwesomeIcon icon={'caret-right'} size={'xs'} />
-                        )}
+                        Name
+                        <IconButton icon={<FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
                     </div>
-                    <div className="group-body">
+                    <div className={'style-divider'} style={{ background: StrCast(Doc.UserDoc().userColor) }} />
+                    <div className="group-body" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
                         {groups.map(group => (
                             <div className="group-row" key={StrCast(group.title || group.groupName)}>
                                 <div className="group-name">{StrCast(group.title || group.groupName)}</div>
                                 <div className="group-info" onClick={action(() => (this.currentGroup = group))}>
-                                    <FontAwesomeIcon icon={'info-circle'} color={'#e8e8e8'} size={'sm'} style={{ backgroundColor: '#1e89d7', borderRadius: '100%', border: '1px solid #1e89d7' }} />
+                                    <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (this.currentGroup = group))} />
                                 </div>
                             </div>
                         ))}
diff --git a/src/client/util/GroupMemberView.scss b/src/client/util/GroupMemberView.scss
index 2eb164988..d50569b26 100644
--- a/src/client/util/GroupMemberView.scss
+++ b/src/client/util/GroupMemberView.scss
@@ -1,6 +1,9 @@
 .editing-interface {
     width: 100%;
     height: 100%;
+    padding: 10px;
+    float: right;
+    overflow: visible;
 
     hr {
         margin-top: 20;
@@ -10,7 +13,6 @@
         outline: none;
         border-radius: 5px;
         border: 0px;
-        color: #fcfbf7;
         text-transform: none;
         letter-spacing: 2px;
         font-size: 75%;
@@ -37,8 +39,6 @@
             text-align: center;
             border: none;
             outline: none;
-            color: black;
-            margin-top: -5;
             height: 20;
             text-overflow: ellipsis;
             background: none;
@@ -61,21 +61,36 @@
             margin-bottom: 25;
 
             .add-member-dropdown {
-                width: 65%;
-                margin: 0 5;
+                margin-right: 3;
+                max-height: 30;
+                width: 250px;
+                display: inline-flex;
+                flex-direction: row;
+                border: 2px solid;
+                border-radius: 4px;
+                border-color: inherit;
+                background: white;
+                color: black;
+            }
 
-                input {
-                    height: 30;
-                }
+            .delete-button {
+                align-self: center;
+                background: inherit;
             }
         }
     }
 
+    .style-divider {
+        width: 98%;
+        height: 1px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
     .editing-contents {
         overflow-y: auto;
         height: 62%;
         width: 100%;
-        color: black;
         margin-top: -15px;
 
         .editing-row {
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index b7f89794d..057f94f64 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -1,13 +1,14 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, observable } from "mobx";
-import { observer } from "mobx-react";
-import * as React from "react";
-import Select from "react-select";
-import { Doc } from "../../fields/Doc";
-import { StrCast } from "../../fields/Types";
-import { MainViewModal } from "../views/MainViewModal";
-import { GroupManager, UserOptions } from "./GroupManager";
-import "./GroupMemberView.scss";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import Select from 'react-select';
+import { Doc } from '../../fields/Doc';
+import { StrCast } from '../../fields/Types';
+import { MainViewModal } from '../views/MainViewModal';
+import { GroupManager, UserOptions } from './GroupManager';
+import './GroupMemberView.scss';
+import { Button, IconButton, Size, Type } from 'browndash-components';
 
 interface GroupMemberViewProps {
     group: Doc;
@@ -16,93 +17,87 @@ interface GroupMemberViewProps {
 
 @observer
 export class GroupMemberView extends React.Component<GroupMemberViewProps> {
-
-    @observable private memberSort: "ascending" | "descending" | "none" = "none";
+    @observable private memberSort: 'ascending' | 'descending' | 'none' = 'none';
 
     private get editingInterface() {
         let members: string[] = this.props.group ? JSON.parse(StrCast(this.props.group.members)) : [];
-        members = this.memberSort === "ascending" ? members.sort() : this.memberSort === "descending" ? members.sort().reverse() : members;
+        members = this.memberSort === 'ascending' ? members.sort() : this.memberSort === 'descending' ? members.sort().reverse() : members;
 
         const options: UserOptions[] = this.props.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.props.group.members)) as string[]).includes(option.value)) : [];
 
         const hasEditAccess = GroupManager.Instance.hasEditAccess(this.props.group);
 
-        return (!this.props.group ? null :
-            <div className="editing-interface">
+        return !this.props.group ? null : (
+            <div className="editing-interface" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
                 <div className="editing-header">
                     <input
                         className="group-title"
-                        style={{ marginLeft: !hasEditAccess ? "-14%" : 0 }}
+                        style={{ marginLeft: !hasEditAccess ? '-14%' : 0 }}
                         value={StrCast(this.props.group.title || this.props.group.groupName)}
-                        onChange={e => this.props.group.title = e.currentTarget.value}
-                        disabled={!hasEditAccess}
-                    >
-                    </input>
-                    <div className={"memberView-closeButton"} onClick={action(this.props.onCloseButtonClick)}>
-                        <FontAwesomeIcon icon={"times"} color={"black"} size={"lg"} />
+                        onChange={e => (this.props.group.title = e.currentTarget.value)}
+                        disabled={!hasEditAccess}></input>
+                    <div className={'memberView-closeButton'}>
+                        <Button icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} onClick={action(this.props.onCloseButtonClick)} color={StrCast(Doc.UserDoc().userColor)} />
                     </div>
-                    {GroupManager.Instance.hasEditAccess(this.props.group) ?
+                    {GroupManager.Instance.hasEditAccess(this.props.group) ? (
                         <div className="group-buttons">
-                            <div className="add-member-dropdown">
+                            <div style={{ border: StrCast(Doc.UserDoc().userColor) }}>
                                 <Select
+                                    className="add-member-dropdown"
                                     isSearchable={true}
                                     options={options}
                                     onChange={selectedOption => GroupManager.Instance.addMemberToGroup(this.props.group, (selectedOption as UserOptions).value)}
-                                    placeholder={"Add members"}
+                                    placeholder={'Add members'}
                                     value={null}
                                     styles={{
-                                        dropdownIndicator: (base, state) => ({
-                                            ...base,
-                                            transition: '0.5s all ease',
-                                            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined
-                                        })
+                                        control: () => ({
+                                            display: 'inline-flex',
+                                            width: '100%',
+                                        }),
+                                        indicatorSeparator: () => ({
+                                            display: 'inline-flex',
+                                            visibility: 'hidden',
+                                        }),
+                                        indicatorsContainer: () => ({
+                                            display: 'inline-flex',
+                                            textDecorationColor: 'black',
+                                        }),
+                                        valueContainer: () => ({
+                                            display: 'inline-flex',
+                                            fontStyle: StrCast(Doc.UserDoc().userColor),
+                                            color: StrCast(Doc.UserDoc().userColor),
+                                            width: '100%',
+                                        }),
                                     }}
                                 />
                             </div>
-                            <button onClick={() => GroupManager.Instance.deleteGroup(this.props.group)}>Delete group</button>
-                        </div> :
-                        null}
-                    <div
-                        className="sort-emails"
-                        style={{ paddingTop: hasEditAccess ? 0 : 35 }}
-                        onClick={action(() => this.memberSort = this.memberSort === "ascending" ? "descending" : this.memberSort === "descending" ? "none" : "ascending")}>
-                        Emails {this.memberSort === "ascending" ? "↑" : this.memberSort === "descending" ? "↓" : ""} {/* → */}
+                            <div className={'delete-button'}>
+                                <Button text={'Delete Group'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.props.group)} />
+                            </div>
+                        </div>
+                    ) : null}
+                    <div className="sort-emails" style={{ paddingTop: hasEditAccess ? 0 : 35 }} onClick={action(() => (this.memberSort = this.memberSort === 'ascending' ? 'descending' : this.memberSort === 'descending' ? 'none' : 'ascending'))}>
+                        Emails {this.memberSort === 'ascending' ? '↑' : this.memberSort === 'descending' ? '↓' : ''} {/* → */}
                     </div>
                 </div>
-                <hr />
-                <div className="editing-contents"
-                    style={{ height: hasEditAccess ? "62%" : "85%" }}
-                >
+                <div className={'style-divider'} style={{ background: StrCast(Doc.UserDoc().userColor) }} />
+                <div className="editing-contents" style={{ height: hasEditAccess ? '62%' : '85%' }}>
                     {members.map(member => (
-                        <div
-                            className="editing-row"
-                            key={member}
-                        >
-                            <div className="user-email">
-                                {member}
-                            </div>
-                            {hasEditAccess ?
-                                <div className={"remove-button"} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}>
-                                    <FontAwesomeIcon icon={"trash-alt"} size={"sm"} />
+                        <div className="editing-row" key={member}>
+                            <div className="user-email">{member}</div>
+                            {hasEditAccess ? (
+                                <div className={'remove-button'} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}>
+                                    <IconButton icon={<FontAwesomeIcon icon={'trash-alt'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)} />
                                 </div>
-                                : null}
+                            ) : null}
                         </div>
                     ))}
                 </div>
             </div>
         );
-
     }
 
     render() {
-        return <MainViewModal
-            isDisplayed={true}
-            interactive={true}
-            contents={this.editingInterface}
-            dialogueBoxStyle={{ width: 400, height: 250 }}
-            closeOnExternalClick={this.props.onCloseButtonClick}
-        />;
+        return <MainViewModal isDisplayed={true} interactive={true} contents={this.editingInterface} dialogueBoxStyle={{ width: 400, height: 250 }} closeOnExternalClick={this.props.onCloseButtonClick} />;
     }
-
-
-}
-\ No newline at end of file
+}
diff --git a/src/client/util/LinkFollower.ts b/src/client/util/LinkFollower.ts
index 3e526c4c0..b8fea340f 100644
--- a/src/client/util/LinkFollower.ts
+++ b/src/client/util/LinkFollower.ts
@@ -30,7 +30,7 @@ export class LinkFollower {
     public static FollowLink = (linkDoc: Opt<Doc>, sourceDoc: Doc, altKey: boolean) => {
         const batch = UndoManager.StartBatch('Follow Link');
         runInAction(() => (LinkFollower.IsFollowing = true)); // turn off decoration bounds while following links since animations may occur, and DocDecorations is based on screenToLocal which is not always an observable value
-        LinkFollower.traverseLink(
+        return LinkFollower.traverseLink(
             linkDoc,
             sourceDoc,
             action(() => {
@@ -54,7 +54,10 @@ export class LinkFollower {
         const followLinks = sourceDoc.followLinkToggle || sourceDoc.followAllLinks ? linkDocList : linkDocList.slice(0, 1);
         var count = 0;
         const allFinished = () => ++count === followLinks.length && finished?.();
-        if (!followLinks.length) finished?.();
+        if (!followLinks.length) {
+            finished?.();
+            return false;
+        }
         followLinks.forEach(async linkDoc => {
             const target = (
                 sourceDoc === linkDoc.link_anchor_1
@@ -120,17 +123,18 @@ export class LinkFollower {
                 allFinished();
             }
         });
+        return true;
     }
 }
 
 ScriptingGlobals.add(function followLink(doc: Doc, altKey: boolean) {
     SelectionManager.DeselectAll();
-    LinkFollower.FollowLink(undefined, doc, altKey);
+    return LinkFollower.FollowLink(undefined, doc, altKey) ? undefined : { select: true };
 });
 
 export function FollowLinkScript() {
-    return ScriptField.MakeScript('followLink(this,altKey)', { altKey: 'boolean' });
+    return ScriptField.MakeScript('return followLink(this,altKey)', { altKey: 'boolean' });
 }
 export function IsFollowLinkScript(field: FieldResult<Field>) {
-    return ScriptCast(field)?.script.originalScript.includes('followLink(');
+    return ScriptCast(field)?.script.originalScript.includes('return followLink(');
 }
diff --git a/src/client/util/RTFMarkup.tsx b/src/client/util/RTFMarkup.tsx
index b93d4f293..c2f121e1f 100644
--- a/src/client/util/RTFMarkup.tsx
+++ b/src/client/util/RTFMarkup.tsx
@@ -30,7 +30,7 @@ export class RTFMarkup extends React.Component<{}> {
      */
     @computed get cheatSheet() {
         return (
-            <div style={{ textAlign: 'initial', height: '100%' }}>
+            <div style={{ background: 'white', textAlign: 'initial', height: '100%' }}>
                 <p>
                     <b style={{ fontSize: 'larger' }}>{`wiki:phrase`}</b>
                     {` display wikipedia page for entered text (terminate with carriage return)`}
diff --git a/src/client/util/ReportManager.scss b/src/client/util/ReportManager.scss
deleted file mode 100644
index 5a2f2fcad..000000000
--- a/src/client/util/ReportManager.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-@import '../views/global/globalCssVariables';
-
-.issue-list-wrapper {
-    position: relative;
-    min-width: 250px;
-    background-color: $light-blue;
-    overflow-y: scroll;
-}
-
-.issue-list {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 5px;
-    margin: 5px;
-    border-radius: 5px;
-    border: 1px solid grey;
-    background-color: lightgoldenrodyellow;
-}
-
-// issue should pop up when the user hover over the issue
-.issue-list:hover {
-    box-shadow: 2px;
-    cursor: pointer;
-    border: 3px solid #252b33;
-}
-
-.issue-content {
-    background-color: white;
-    padding: 10px;
-    flex: 1 1 auto;
-    overflow-y: scroll;
-}
-
-.issue-title {
-    font-size: 20px;
-    font-weight: 600;
-    color: black;
-}
-
-.issue-body {
-    padding: 0 10px;
-    width: 100%;
-    text-align: left;
-}
-
-.issue-body > * {
-    margin-top: 5px;
-}
-
-.issue-body img,
-.issue-body video {
-    display: block;
-    max-width: 100%;
-}
-
-.report-issue-fab {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-}
-
-.loading-center {
-    margin: auto 0;
-}
-
-.settings-content label {
-    margin-top: 10px;
-}
-
-.report-disclaimer {
-    font-size: 8px;
-    color: grey;
-    padding-right: 50px;
-    font-style: italic;
-    text-align: left;
-}
-
-.flex-select {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-}
diff --git a/src/client/util/ReportManager.tsx b/src/client/util/ReportManager.tsx
deleted file mode 100644
index 89c17e42f..000000000
--- a/src/client/util/ReportManager.tsx
+++ /dev/null
@@ -1,297 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, runInAction } from 'mobx';
-import { observer } from 'mobx-react';
-import * as React from 'react';
-import { ColorState, SketchPicker } from 'react-color';
-import { Doc } from '../../fields/Doc';
-import { Id } from '../../fields/FieldSymbols';
-import { BoolCast, Cast, StrCast } from '../../fields/Types';
-import { addStyleSheet, addStyleSheetRule, Utils } from '../../Utils';
-import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
-import { DocServer } from '../DocServer';
-import { Networking } from '../Network';
-import { MainViewModal } from '../views/MainViewModal';
-import { FontIconBox } from '../views/nodes/FontIconBox/FontIconBox';
-import { DragManager } from './DragManager';
-import { GroupManager } from './GroupManager';
-import './SettingsManager.scss';
-import './ReportManager.scss';
-import { undoBatch } from './UndoManager';
-import { Octokit } from "@octokit/core";
-import { CheckBox } from '../views/search/CheckBox';
-import ReactLoading from 'react-loading';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-const higflyout = require('@hig/flyout');
-export const { anchorPoints } = higflyout;
-export const Flyout = higflyout.default;
-
-@observer
-export class ReportManager extends React.Component<{}> {
-    public static Instance: ReportManager;
-    @observable private isOpen = false;
-
-    private octokit: Octokit;
-
-    @observable public issues: any[] = [];
-    @action setIssues = action((issues: any[]) => { this.issues = issues; });
-    
-    // undefined is the default - null is if the user is making an issue
-    @observable public selectedIssue: any = undefined;
-    @action setSelectedIssue = action((issue: any) => { this.selectedIssue = issue; });
-
-    // only get the open issues
-    @observable public shownIssues = this.issues.filter(issue => issue.state === 'open');
-    
-    public updateIssueSearch = action((query: string = '') => {
-        if (query === '') {
-            this.shownIssues = this.issues.filter(issue => issue.state === 'open');
-            return;
-        }
-       this.shownIssues = this.issues.filter(issue => issue.title.toLowerCase().includes(query.toLowerCase()));
-    });
-
-    constructor(props: {}) {
-        super(props);
-        ReportManager.Instance = this;
-
-        this.octokit = new Octokit({
-            auth: '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'
-        });
-    }
-
-    public close = action(() => (this.isOpen = false));
-    public open = action(() => {
-        if (this.issues.length === 0) {
-            // load in the issues if not already loaded
-            this.getAllIssues()
-                .then(issues => {
-                    this.setIssues(issues);
-                    this.updateIssueSearch();
-                })
-                .catch(err => console.log(err));
-        }
-        (this.isOpen = true)
-    });
-
-    @observable private bugTitle = '';
-    @action setBugTitle = action((title: string) => { this.bugTitle = title; });
-    @observable private bugDescription = '';
-    @action setBugDescription = action((description: string) => { this.bugDescription = description; });
-    @observable private bugType = '';
-    @action setBugType = action((type: string) => { this.bugType = type; });
-    @observable private bugPriority = '';
-    @action setBugPriority = action((priortiy: string) => { this.bugPriority = priortiy; });
-
-    // private toGithub = false;
-    // will always be set to true - no alterntive option yet
-    private toGithub = true;
-
-    private formatTitle = (title: string, userEmail: string) => `${title} - ${userEmail.replace('@brown.edu', '')}`; 
-
-    public async getAllIssues() : Promise<any[]> {
-        const res = await this.octokit.request('GET /repos/{owner}/{repo}/issues', {
-            owner: 'brown-dash',
-            repo: 'Dash-Web',
-        });
-
-        // 200 status means success
-        if (res.status === 200) {
-            return res.data;
-        } else {
-            throw new Error('Error getting issues');
-        }
-    }
-
-    // turns an upload link into a servable link
-    // ex: 
-    // C: /Users/dash/Documents/GitHub/Dash-Web/src/server/public/files/images/upload_8008dbc4b6424fbff14da7345bb32eb2.png
-    // -> http://localhost:1050/files/images/upload_8008dbc4b6424fbff14da7345bb32eb2_l.png
-    private fileLinktoServerLink = (fileLink: string) => {
-        const serverUrl = 'https://browndash.com/';
-
-        const regex = 'public'
-        const publicIndex = fileLink.indexOf(regex) + regex.length;
-
-        const finalUrl = `${serverUrl}${fileLink.substring(publicIndex + 1).replace('.', '_l.')}`;
-        return finalUrl;
-    }
-
-    public async reportIssue() {
-        if (this.bugTitle === '' || this.bugDescription === ''
-            || this.bugType === '' || this.bugPriority === '') {
-            alert('Please fill out all required fields to report an issue.');
-            return;
-        }
-
-        if (this.toGithub) {
-
-            const formattedLinks = (this.fileLinks ?? []).map(this.fileLinktoServerLink)
-            
-            const req = await this.octokit.request('POST /repos/{owner}/{repo}/issues', {
-                owner: 'brown-dash',
-                repo: 'Dash-Web',
-                title: this.formatTitle(this.bugTitle, Doc.CurrentUserEmail),
-                body: `${this.bugDescription} \n\nfiles:\n${formattedLinks.join('\n')}`,
-                labels: [
-                    'from-dash-app',
-                    this.bugType,
-                    this.bugPriority
-                ]
-            });
-
-            // 201 status means success
-            if (req.status !== 201) {
-                alert('Error creating issue on github.');
-                // on error, don't close the modal
-                return;
-            }
-        }
-        else {
-            // if not going to github issues, not sure what to do yet...
-        }
-
-        // if we're down here, then we're good to go. reset the fields.
-        this.setBugTitle('');
-        this.setBugDescription('');
-        // this.toGithub = false;
-        this.setFileLinks([]);
-        this.setBugType('');
-        this.setBugPriority('');
-        this.close();
-    }
-
-    @observable public fileLinks: any = [];
-    @action setFileLinks = action((links: any) => { this.fileLinks = links; });
-
-    private getServerPath = (link: any) => { return link.result.accessPaths.agnostic.server }
-
-    private uploadFiles = (input: any) => {
-        // keep null while uploading
-        this.setFileLinks(null);
-        // upload the files to the server
-        if (input.files && input.files.length !== 0) {
-            const fileArray: File[] = Array.from(input.files);
-            (Networking.UploadFilesToServer(fileArray.map(file =>({file})))).then(links => {
-                console.log('finshed uploading', links.map(this.getServerPath));
-                this.setFileLinks((links ?? []).map(this.getServerPath));
-            })
-        }
-        
-    }
-
-
-    private renderIssue = (issue: any) => {
-
-        const isReportingIssue = issue === null;
-
-        return isReportingIssue ?
-            // report issue
-            (<div className="settings-content">
-                <h3 style={{ 'textDecoration': 'underline'}}>Report an Issue</h3>
-                <label>Please leave a title for the bug.</label><br />
-                <input type="text" placeholder='title' onChange={(e) => this.setBugTitle(e.target.value)} required/>
-                <br />
-                <label>Please leave a description for the bug and how it can be recreated.</label>
-                <textarea placeholder='description' onChange={(e) => this.setBugDescription(e.target.value)} required/>
-                <br />
-                {/* {<label>Send to github issues? </label>
-                <input type="checkbox" onChange={(e) => this.toGithub = e.target.checked} />
-                <br /> } */}
-
-                <label>Please label the issue</label>
-                <div className='flex-select'>
-                    <select name="bugType" onChange={e => this.bugType = e.target.value}>
-                    <option value="" disabled selected>Type</option>
-                    <option value="bug">Bug</option>
-                    <option value="cosmetic">Poor Design or Cosmetic</option>
-                    <option value="documentation">Poor Documentation</option>
-                    </select>
-
-                    <select name="bigPriority" onChange={e => this.bugPriority = e.target.value}>
-                        <option value="" disabled selected>Priority</option>
-                        <option value="priority-low">Low</option>
-                        <option value="priority-medium">Medium</option>
-                        <option value="priority-high">High</option>
-                    </select>
-                </div>
-
-
-                <div>
-                    <label>Upload media that shows the bug (optional)</label>
-                    <input type="file" name="file" multiple accept='audio/*, video/*, image/*' onChange={e => this.uploadFiles(e.target)}/>
-                </div>
-                <br />
-
-                <button onClick={() => this.reportIssue()} disabled={this.fileLinks === null} style={{ backgroundColor: this.fileLinks === null ? 'grey' : '' }}>{this.fileLinks === null ? 'Uploading...' : 'Submit'}</button>
-            </div>)
-            :
-            // view issue
-            (
-            <div className='issue-container'>
-                <h5 style={{'textAlign': "left"}}><a href={issue.html_url} target="_blank">Issue #{issue.number}</a></h5>
-                <div className='issue-title'>
-                    {issue.title}
-                </div>
-                <ReactMarkdown children={issue.body} className='issue-body' linkTarget={"_blank"} remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} />
-            </div>
-        );
-    }
-
-    private showReportIssueScreen = () => {
-        this.setSelectedIssue(null);
-    }
-
-    private closeReportIssueScreen = () => {
-        this.setSelectedIssue(undefined);
-    }
-
-    private get reportInterface() {
-
-        const isReportingIssue = this.selectedIssue === null;
-
-        return (
-            <div className="settings-interface">
-                <div className='issue-list-wrapper'>
-                    <h3>Current Issues</h3>
-                    <input type="text" placeholder='search issues' onChange={(e => this.updateIssueSearch(e.target.value))}></input><br />
-                    {this.issues.length === 0 ? <ReactLoading className='loading-center'/> : this.shownIssues.map(issue => <div className='issue-list' key={issue.number} onClick={() => this.setSelectedIssue(issue)}>{issue.title}</div>)}
-
-                    {/* <div className="settings-user">
-                        <button onClick={() => this.getAllIssues().then(issues => this.issues = issues)}>Poll Issues</button>
-                    </div> */}
-                </div>
-                    
-                <div className="close-button" onClick={this.close}>
-                    <FontAwesomeIcon icon={'times'} color="black" size={'lg'} />
-                </div>
-
-                <div className="issue-content" style={{'paddingTop' : this.selectedIssue === undefined ? '50px' : 'inherit'}}>
-                    {this.selectedIssue === undefined ? "no issue selected" : this.renderIssue(this.selectedIssue)}
-                </div>
-
-                <div className='report-issue-fab'>
-                    <span className='report-disclaimer' hidden={!isReportingIssue}>Note: issue reporting is not anonymous.</span>
-                    <button
-                        onClick={() => isReportingIssue ? this.closeReportIssueScreen() : this.showReportIssueScreen()}
-                    >{isReportingIssue ? 'Cancel' : 'Report New Issue'}</button>
-                </div>
-
-
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <MainViewModal
-                contents={this.reportInterface}
-                isDisplayed={this.isOpen}
-                interactive={true}
-                closeOnExternalClick={this.close}
-                dialogueBoxStyle={{ width: 'auto', height: '500px', background: Cast(Doc.UserDoc().userColor, 'string', null) }}
-            />
-        );
-    }
-}
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 0125331ec..4be9448b3 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -121,3 +121,6 @@ ScriptingGlobals.add(function SelectionManager_selectedDocType(type: string, exp
     let selected = (sel => (checkContext ? DocCast(sel?.embedContainer) : sel))(SelectionManager.SelectedSchemaDoc() ?? SelectionManager.Docs().lastElement());
     return selected?.type === type || selected?.type_collection === type || !type;
 });
+ScriptingGlobals.add(function deselectAll() {
+    SelectionManager.DeselectAll();
+});
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index b6df5f26a..b8e327968 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -17,8 +17,8 @@ import { GroupManager } from './GroupManager';
 import './SettingsManager.scss';
 import { undoBatch } from './UndoManager';
 import { Button, ColorPicker, Dropdown, DropdownType, EditableText, Group, NumberDropdown, Size, Toggle, ToggleType, Type } from 'browndash-components';
-import { BsGoogle } from 'react-icons/bs'
-import { FaFillDrip, FaPalette } from 'react-icons/fa'
+import { BsGoogle } from 'react-icons/bs';
+import { FaFillDrip, FaPalette } from 'react-icons/fa';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -26,8 +26,10 @@ export const Flyout = higflyout.default;
 export enum ColorScheme {
     Dark = 'Dark',
     Light = 'Light',
+    CoolBlue = 'Cool Blue',
+    Cupcake = 'Cupcake',
     System = 'Match System',
-    Custom = 'Custom'
+    Custom = 'Custom',
 }
 
 export enum freeformScrollMode {
@@ -78,15 +80,15 @@ export class SettingsManager extends React.Component<{}> {
     };
 
     @computed get userColor() {
-        return StrCast(Doc.UserDoc().userColor)
+        return StrCast(Doc.UserDoc().userColor);
     }
 
     @computed get userVariantColor() {
-        return StrCast(Doc.UserDoc().userVariantColor)
+        return StrCast(Doc.UserDoc().userVariantColor);
     }
 
     @computed get userBackgroundColor() {
-        return StrCast(Doc.UserDoc().userBackgroundColor)
+        return StrCast(Doc.UserDoc().userBackgroundColor);
     }
 
     @undoBatch selectUserMode = action((mode: string) => (Doc.noviceMode = mode === 'Novice'));
@@ -117,14 +119,24 @@ export class SettingsManager extends React.Component<{}> {
         Doc.UserDoc().userTheme = scheme;
         switch (scheme) {
             case ColorScheme.Light:
-                this.switchUserColor("#323232")
-                this.switchUserBackgroundColor("#DFDFDF")
-                this.switchUserVariantColor("#BDDDF5")
+                this.switchUserColor('#323232');
+                this.switchUserBackgroundColor('#DFDFDF');
+                this.switchUserVariantColor('#BDDDF5');
                 break;
             case ColorScheme.Dark:
-                this.switchUserColor("#DFDFDF")
-                this.switchUserBackgroundColor("#323232")
-                this.switchUserVariantColor("#4476F7")
+                this.switchUserColor('#DFDFDF');
+                this.switchUserBackgroundColor('#323232');
+                this.switchUserVariantColor('#4476F7');
+                break;
+            case ColorScheme.CoolBlue:
+                this.switchUserColor('#ADEAFF');
+                this.switchUserBackgroundColor('#060A15');
+                this.switchUserVariantColor('#3C51FF');
+                break;
+            case ColorScheme.Cupcake:
+                this.switchUserColor('#3BC7FF');
+                this.switchUserBackgroundColor('#fffdf7');
+                this.switchUserVariantColor('#FFD7F3');
                 break;
             case ColorScheme.Custom:
                 break;
@@ -138,34 +150,32 @@ export class SettingsManager extends React.Component<{}> {
     });
 
     @computed get colorsContent() {
-
-
-        const colorSchemes = [ColorScheme.Light, ColorScheme.Dark, ColorScheme.Custom, ColorScheme.System];
-        const schemeMap = ['Light', 'Dark', 'Custom', 'Match System'];
+        const colorSchemes = [ColorScheme.Light, ColorScheme.Dark, ColorScheme.Cupcake, ColorScheme.CoolBlue, ColorScheme.Custom, ColorScheme.System];
+        const schemeMap = ['Light', 'Dark', 'Cupcake', 'Cool Blue', 'Custom', 'Match System'];
         const userTheme = StrCast(Doc.UserDoc().userTheme);
         return (
-            <div style={{width: '100%'}}>
-                <Dropdown 
-                    formLabel='Theme'
+            <div style={{ width: '100%' }}>
+                <Dropdown
+                    formLabel="Theme"
                     size={Size.SMALL}
                     type={Type.TERT}
                     selectedVal={userTheme}
-                    setSelectedVal={(scheme) => this.changeColorScheme(scheme as string)}
-                    items={colorSchemes.map((scheme, i) => (
-                        {
-                            text: schemeMap[i],
-                            val: scheme
-                        }
-                    ))} 
+                    setSelectedVal={scheme => this.changeColorScheme(scheme as string)}
+                    items={colorSchemes.map((scheme, i) => ({
+                        text: schemeMap[i],
+                        val: scheme,
+                    }))}
                     dropdownType={DropdownType.SELECT}
                     color={this.userColor}
                     fillWidth
                 />
-                {userTheme === ColorScheme.Custom && <Group formLabel='Custom Theme'>
-                    <ColorPicker tooltip={'User Color'} color={this.userColor} type={Type.SEC} icon={<FaFillDrip/>} selectedColor={this.userColor} setSelectedColor={this.switchUserColor}/>
-                    <ColorPicker tooltip={'User Background Color'} color={this.userColor} type={Type.SEC} icon={<FaPalette/>} selectedColor={this.userBackgroundColor} setSelectedColor={this.switchUserBackgroundColor}/>
-                    <ColorPicker tooltip={'User Variant Color'} color={this.userColor} type={Type.SEC} icon={<FaPalette/>} selectedColor={this.userVariantColor} setSelectedColor={this.switchUserVariantColor}/>
-                </Group>}
+                {userTheme === ColorScheme.Custom && (
+                    <Group formLabel="Custom Theme">
+                        <ColorPicker tooltip={'User Color'} color={this.userColor} type={Type.SEC} icon={<FaFillDrip />} selectedColor={this.userColor} setSelectedColor={this.switchUserColor} />
+                        <ColorPicker tooltip={'User Background Color'} color={this.userColor} type={Type.SEC} icon={<FaPalette />} selectedColor={this.userBackgroundColor} setSelectedColor={this.switchUserBackgroundColor} />
+                        <ColorPicker tooltip={'User Variant Color'} color={this.userColor} type={Type.SEC} icon={<FaPalette />} selectedColor={this.userVariantColor} setSelectedColor={this.switchUserVariantColor} />
+                    </Group>
+                )}
             </div>
         );
     }
@@ -173,64 +183,59 @@ export class SettingsManager extends React.Component<{}> {
     @computed get formatsContent() {
         return (
             <div className="prefs-content">
-                <Toggle 
-                    formLabel={'Show document header'} 
-                    formLabelPlacement={'right'} 
-                    toggleType={ToggleType.SWITCH} 
-                    onClick={e => (Doc.UserDoc().layout_showTitle = Doc.UserDoc().layout_showTitle ? undefined : 'author_date')} 
-                    toggleStatus={Doc.UserDoc().layout_showTitle !== undefined} size={Size.XSMALL}
+                <Toggle
+                    formLabel={'Show document header'}
+                    formLabelPlacement={'right'}
+                    toggleType={ToggleType.SWITCH}
+                    onClick={e => (Doc.UserDoc().layout_showTitle = Doc.UserDoc().layout_showTitle ? undefined : 'author_date')}
+                    toggleStatus={Doc.UserDoc().layout_showTitle !== undefined}
+                    size={Size.XSMALL}
                     color={this.userColor}
-
                 />
-                <Toggle 
-                    formLabel={'Show Full Toolbar'} 
-                    formLabelPlacement={'right'} 
-                    toggleType={ToggleType.SWITCH} 
-                    onClick={e => (Doc.UserDoc()['documentLinksButton-fullMenu'] = !Doc.UserDoc()['documentLinksButton-fullMenu'])} 
-                    toggleStatus={BoolCast(Doc.UserDoc()['documentLinksButton-fullMenu'])} 
+                <Toggle
+                    formLabel={'Show Full Toolbar'}
+                    formLabelPlacement={'right'}
+                    toggleType={ToggleType.SWITCH}
+                    onClick={e => (Doc.UserDoc()['documentLinksButton-fullMenu'] = !Doc.UserDoc()['documentLinksButton-fullMenu'])}
+                    toggleStatus={BoolCast(Doc.UserDoc()['documentLinksButton-fullMenu'])}
                     size={Size.XSMALL}
                     color={this.userColor}
-
                 />
-                <Toggle 
-                    formLabel={'Show Button Labels'} 
-                    formLabelPlacement={'right'} 
-                    toggleType={ToggleType.SWITCH} 
-                    onClick={e => FontIconBox.SetShowLabels(!FontIconBox.GetShowLabels())} 
-                    toggleStatus={FontIconBox.GetShowLabels()} 
+                <Toggle
+                    formLabel={'Show Button Labels'}
+                    formLabelPlacement={'right'}
+                    toggleType={ToggleType.SWITCH}
+                    onClick={e => FontIconBox.SetShowLabels(!FontIconBox.GetShowLabels())}
+                    toggleStatus={FontIconBox.GetShowLabels()}
                     size={Size.XSMALL}
                     color={this.userColor}
-
                 />
-                <Toggle 
-                    formLabel={'Recognize Ink Gestures'} 
-                    formLabelPlacement={'right'} 
-                    toggleType={ToggleType.SWITCH} 
-                    onClick={e => FontIconBox.SetRecognizeGestures(!FontIconBox.GetRecognizeGestures())} 
-                    toggleStatus={FontIconBox.GetRecognizeGestures()} 
+                <Toggle
+                    formLabel={'Recognize Ink Gestures'}
+                    formLabelPlacement={'right'}
+                    toggleType={ToggleType.SWITCH}
+                    onClick={e => FontIconBox.SetRecognizeGestures(!FontIconBox.GetRecognizeGestures())}
+                    toggleStatus={FontIconBox.GetRecognizeGestures()}
                     size={Size.XSMALL}
                     color={this.userColor}
-
                 />
-                <Toggle 
-                    formLabel={'Hide Labels In Ink Shapes'} 
-                    formLabelPlacement={'right'} 
-                    toggleType={ToggleType.SWITCH} 
-                    onClick={e => (Doc.UserDoc().activeInkHideTextLabels = !Doc.UserDoc().activeInkHideTextLabels)} 
-                    toggleStatus={BoolCast(Doc.UserDoc().activeInkHideTextLabels)} 
+                <Toggle
+                    formLabel={'Hide Labels In Ink Shapes'}
+                    formLabelPlacement={'right'}
+                    toggleType={ToggleType.SWITCH}
+                    onClick={e => (Doc.UserDoc().activeInkHideTextLabels = !Doc.UserDoc().activeInkHideTextLabels)}
+                    toggleStatus={BoolCast(Doc.UserDoc().activeInkHideTextLabels)}
                     size={Size.XSMALL}
                     color={this.userColor}
-
                 />
-                <Toggle 
-                    formLabel={'Open Ink Docs in Lightbox'} 
-                    formLabelPlacement={'right'} 
-                    toggleType={ToggleType.SWITCH} 
-                    onClick={e => (Doc.UserDoc().openInkInLightbox = !Doc.UserDoc().openInkInLightbox)} 
-                    toggleStatus={BoolCast(Doc.UserDoc().openInkInLightbox)} 
+                <Toggle
+                    formLabel={'Open Ink Docs in Lightbox'}
+                    formLabelPlacement={'right'}
+                    toggleType={ToggleType.SWITCH}
+                    onClick={e => (Doc.UserDoc().openInkInLightbox = !Doc.UserDoc().openInkInLightbox)}
+                    toggleStatus={BoolCast(Doc.UserDoc().openInkInLightbox)}
                     size={Size.XSMALL}
                     color={this.userColor}
-
                 />
             </div>
         );
@@ -262,29 +267,23 @@ export class SettingsManager extends React.Component<{}> {
                     <div className="tab-column-content">
                         {/* <NumberInput/> */}
                         <Group formLabel={'Default Font'}>
-                            <NumberDropdown 
-                                color={this.userColor} 
-                                numberDropdownType={'input'} 
-                                min={0} max={50} step={2}
-                                type={Type.TERT} 
-                                number={0}
-                                unit={"px"}
-                                setNumber={() => {}}
-                            />
-                            <Dropdown 
-                                items={fontFamilies.map((val) => {
+                            <NumberDropdown color={this.userColor} numberDropdownType={'input'} min={0} max={50} step={2} type={Type.TERT} number={0} unit={'px'} setNumber={() => {}} />
+                            <Dropdown
+                                items={fontFamilies.map(val => {
                                     return {
                                         text: val,
                                         val: val,
                                         style: {
-                                            fontFamily: val
-                                        }
-                                    }
-                                })} 
+                                            fontFamily: val,
+                                        },
+                                    };
+                                })}
                                 dropdownType={DropdownType.SELECT}
                                 type={Type.TERT}
                                 selectedVal={StrCast(Doc.UserDoc().fontFamily)}
-                                setSelectedVal={(val) => {this.changeFontFamily(val as string)}}
+                                setSelectedVal={val => {
+                                    this.changeFontFamily(val as string);
+                                }}
                                 color={this.userColor}
                                 fillWidth
                             />
@@ -313,33 +312,12 @@ export class SettingsManager extends React.Component<{}> {
     @computed get passwordContent() {
         return (
             <div className="password-content">
-                <EditableText placeholder="Current password" 
-                    type={Type.SEC} 
-                    color={this.userColor} 
-                    val={""}
-                    setVal={val => this.changeVal(val as string, 'curr')} 
-                    fillWidth
-                    password
-                />
-                <EditableText placeholder="New password" 
-                    type={Type.SEC} 
-                    color={this.userColor} 
-                    val={""}
-                    setVal={val => this.changeVal(val as string, 'new')} 
-                    fillWidth
-                    password
-                />
-                <EditableText placeholder="Confirm new password" 
-                    type={Type.SEC} 
-                    color={this.userColor} 
-                    val={""}
-                    setVal={val => this.changeVal(val as string, 'conf')} 
-                    fillWidth
-                    password
-                />
+                <EditableText placeholder="Current password" type={Type.SEC} color={this.userColor} val={''} setVal={val => this.changeVal(val as string, 'curr')} fillWidth password />
+                <EditableText placeholder="New password" type={Type.SEC} color={this.userColor} val={''} setVal={val => this.changeVal(val as string, 'new')} fillWidth password />
+                <EditableText placeholder="Confirm new password" type={Type.SEC} color={this.userColor} val={''} setVal={val => this.changeVal(val as string, 'conf')} fillWidth password />
                 {!this.passwordResultText ? null : <div className={`${this.passwordResultText.startsWith('Error') ? 'error' : 'success'}-text`}>{this.passwordResultText}</div>}
-                <Button type={Type.SEC} text={'Forgot Password'} color={this.userColor}/>
-                <Button type={Type.TERT} text={'Submit'} onClick={this.changePassword} color={this.userColor}/>
+                <Button type={Type.SEC} text={'Forgot Password'} color={this.userColor} />
+                <Button type={Type.TERT} text={'Submit'} onClick={this.changePassword} color={this.userColor} />
             </div>
         );
     }
@@ -347,7 +325,7 @@ export class SettingsManager extends React.Component<{}> {
     @computed get accountOthersContent() {
         return (
             <div className="account-others-content">
-                <Button type={Type.TERT} text={'Connect to Google'} iconPlacement='left' icon={<BsGoogle/>} onClick={() => this.googleAuthorize()}/>
+                <Button type={Type.TERT} text={'Connect to Google'} iconPlacement="left" icon={<BsGoogle />} onClick={() => this.googleAuthorize()} />
             </div>
         );
     }
@@ -377,59 +355,56 @@ export class SettingsManager extends React.Component<{}> {
                 <div className="tab-column">
                     <div className="tab-column-title">Modes</div>
                     <div className="tab-column-content">
-                        <Dropdown 
-                            formLabel={"Mode"}
+                        <Dropdown
+                            formLabel={'Mode'}
                             items={[
                                 {
                                     text: 'Novice',
                                     description: 'Novice mode is a user-friendly setting designed to cater to those who are new to Dash',
-                                    val: "Novice"
+                                    val: 'Novice',
                                 },
                                 {
                                     text: 'Developer',
-                                    description: 'Developer mode is an advanced setting that grants you greater control and access to the underlying mechanics and tools of a software or system. Developer mode is still under development as there are experimental features.',
-                                    val: "Developer"
+                                    description:
+                                        'Developer mode is an advanced setting that grants you greater control and access to the underlying mechanics and tools of a software or system. Developer mode is still under development as there are experimental features.',
+                                    val: 'Developer',
                                 },
-                            ]} 
+                            ]}
                             selectedVal={Doc.noviceMode ? 'Novice' : 'Developer'}
-                            setSelectedVal={(val) => {this.selectUserMode(val as string)}}
+                            setSelectedVal={val => {
+                                this.selectUserMode(val as string);
+                            }}
                             dropdownType={DropdownType.SELECT}
                             type={Type.TERT}
-                            placement='bottom-start'
+                            placement="bottom-start"
                             color={this.userColor}
                             fillWidth
                         />
-                        <Toggle 
-                            formLabel={'Playground Mode'} 
-                            toggleType={ToggleType.SWITCH} 
-                            toggleStatus={this.playgroundMode} 
-                            onClick={this.playgroundModeToggle}
-                            color={this.userColor}
-                        />
+                        <Toggle formLabel={'Playground Mode'} toggleType={ToggleType.SWITCH} toggleStatus={this.playgroundMode} onClick={this.playgroundModeToggle} color={this.userColor} />
                     </div>
                     <div className="tab-column-title" style={{ marginTop: 20, marginBottom: 10 }}>
                         Freeform Navigation
                     </div>
                     <div className="tab-column-content">
-                        <Dropdown 
-                            formLabel={"Scroll Mode"}
+                        <Dropdown
+                            formLabel={'Scroll Mode'}
                             items={[
                                 {
                                     text: 'Scroll to Pan',
                                     description: 'Scrolling pans canvas, shift + scrolling zooms',
-                                    val: freeformScrollMode.Pan
+                                    val: freeformScrollMode.Pan,
                                 },
                                 {
                                     text: 'Scroll to Zoom',
                                     description: 'Scrolling zooms canvas',
-                                    val: freeformScrollMode.Zoom
+                                    val: freeformScrollMode.Zoom,
                                 },
-                            ]} 
+                            ]}
                             selectedVal={StrCast(Doc.UserDoc().freeformScrollMode)}
-                            setSelectedVal={(val) => this.setFreeformScrollMode(val as string)}
+                            setSelectedVal={val => this.setFreeformScrollMode(val as string)}
                             dropdownType={DropdownType.SELECT}
                             type={Type.TERT}
-                            placement='bottom-start'
+                            placement="bottom-start"
                             color={this.userColor}
                         />
                     </div>
@@ -437,18 +412,8 @@ export class SettingsManager extends React.Component<{}> {
                 <div className="tab-column">
                     <div className="tab-column-title">Permissions</div>
                     <div className="tab-column-content">
-                        <Button
-                            text={"Manage Groups"}
-                            type={Type.TERT}
-                            onClick={() => GroupManager.Instance?.open()}
-                            color={this.userColor}
-                        />
-                        <Toggle 
-                            toggleType={ToggleType.SWITCH} 
-                            formLabel={"Default access private"}
-                            color={this.userColor}
-                            toggleStatus={BoolCast(Doc.defaultAclPrivate)} 
-                            onClick={action(() => (Doc.defaultAclPrivate = !Doc.defaultAclPrivate))}/>
+                        <Button text={'Manage Groups'} type={Type.TERT} onClick={() => GroupManager.Instance?.open()} color={this.userColor} />
+                        <Toggle toggleType={ToggleType.SWITCH} formLabel={'Default access private'} color={this.userColor} toggleStatus={BoolCast(Doc.defaultAclPrivate)} onClick={action(() => (Doc.defaultAclPrivate = !Doc.defaultAclPrivate))} />
                     </div>
                 </div>
             </div>
@@ -470,45 +435,35 @@ export class SettingsManager extends React.Component<{}> {
                 <div className="settings-panel" style={{ background: this.userColor }}>
                     <div className="settings-tabs">
                         {tabs.map(tab => {
-                            const isActive = this.activeTab === tab.title
+                            const isActive = this.activeTab === tab.title;
                             return (
-                                <div key={tab.title}
+                                <div
+                                    key={tab.title}
                                     style={{
                                         background: isActive ? this.userBackgroundColor : this.userColor,
                                         color: isActive ? this.userColor : this.userBackgroundColor,
                                     }}
-                                    className={'tab-control ' + (isActive ? 'active' : 'inactive')} 
-                                    onClick={action(() => (this.activeTab = tab.title))
-                                }>
+                                    className={'tab-control ' + (isActive ? 'active' : 'inactive')}
+                                    onClick={action(() => (this.activeTab = tab.title))}>
                                     {tab.title}
                                 </div>
-                            )
+                            );
                         })}
                     </div>
 
                     <div className="settings-user">
-                        <div className="settings-username"
-                            style={{color: this.userBackgroundColor}}
-                        >{Doc.CurrentUserEmail}</div>
-                        <Button 
-                            text={Doc.GuestDashboard ? 'Exit' : 'Log Out'}
-                            type={Type.TERT}
-                            color={this.userVariantColor}
-                            onClick={() => window.location.assign(Utils.prepend('/logout'))}
-                        />
+                        <div className="settings-username" style={{ color: this.userBackgroundColor }}>
+                            {Doc.CurrentUserEmail}
+                        </div>
+                        <Button text={Doc.GuestDashboard ? 'Exit' : 'Log Out'} type={Type.TERT} color={this.userVariantColor} onClick={() => window.location.assign(Utils.prepend('/logout'))} />
                     </div>
                 </div>
 
-                            
                 <div className="close-button">
-                    <Button
-                        icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
-                        onClick={this.close}
-                        color={this.userColor}
-                    />
+                    <Button icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} onClick={this.close} color={this.userColor} />
                 </div>
 
-                <div className="settings-content" style={{color: this.userColor, background: this.userBackgroundColor}}>
+                <div className="settings-content" style={{ color: this.userColor, background: this.userBackgroundColor }}>
                     {tabs.map(tab => (
                         <div key={tab.title} className={'tab-section ' + (this.activeTab === tab.title ? 'active' : 'inactive')}>
                             {tab.ele}
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index b11e694ff..c9f86f0e1 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -2,10 +2,6 @@
     width: 600px;
     // height: 360px;
 
-    .overlay {
-        transform: translate(-20px, -20px);
-    }
-
     .select {
         text-align: justify;
         text-align-last: end
@@ -33,12 +29,7 @@
         }
 
         .share-copy-link {
-            display: inline;
             border-radius: 4px;
-            border: solid gray 1px;
-            font-size: x-small;
-            background: #E8E8E8;
-            color: black;
             margin-top: -15px;
             margin-bottom: 15px;
             width: fit-content;
@@ -50,13 +41,22 @@
                 display: flex;
                 margin-bottom: 20px;
                 align-items: center;
-                height: 36;
+                max-height: 28;
 
                 .user-search {
+                    max-height: 30;
                     width: 90%;
+                    display: inline-flex;
+                    flex-direction: row;
+                    border: 2px solid;
+                    border-radius: 4px;
+                    border-color: inherit;
+                    background: white;
+                    color: black;
 
                     input {
-                        height: 30;
+                        height: 20px;
+                        width: 100px;
                     }
                 }
 
@@ -68,14 +68,12 @@
                     text-align-last: end;
                     font-size: 13px;
                     min-width: 90px;
-                    height: 36;
+                    height: 28;
                     margin-left: 2px;
                 }
 
                 .share-button {
-                    height: 36;
                     margin-left: 3%;
-                    background-color: black;
                 }
             }
 
@@ -131,6 +129,7 @@
                 display: flex;
                 top:0;
                 flex-direction: column;
+                border-radius: 4px;
 
                 .user-sort {
                     text-align: left;
@@ -147,11 +146,12 @@
                 .groups-list,
                 .users-list {
                     font-style: italic;
-                    background: #e8e8e8;
-                    border: 2px solid gray;
+                    border: 2px solid;
                     padding-left: 10px;
                     padding-right: 10px;
                     width: 97%;
+                    border-bottom-left-radius: 4px;
+                    border-bottom-right-radius: 4px;
                     overflow-y: scroll;
                     overflow-x: hidden;
                     text-align: left;
@@ -160,7 +160,6 @@
                     align-items: center;
                     text-align: center;
                     justify-content: center;
-                    color: black;
                     height: 250px;
                     margin: 0 2;
 
@@ -175,7 +174,6 @@
             outline: none;
             border-radius: 5px;
             border: 0px;
-            color: #fcfbf7;
             text-transform: none;
             letter-spacing: 2px;
             font-size: 75%;
@@ -194,11 +192,10 @@
         font-size: 20px;
         text-align: left;
         margin: 0 0 20px 0;
-        color: black;
     }
 
     .hr-substitute {
-        border: solid black 0.5px;
+        border: solid 0.5px;
         margin-top: 20px;
     }
 
@@ -223,11 +220,12 @@
         height: 25px;
         padding-left: 2;
         width: 97%;
+        border-radius: 4px;
         margin-top: 10px;
         margin-left: -8px;
         font-size: 14;
         margin-bottom: -4;
-        border: 2px solid gray;
+        border: 2px solid;
         border-bottom: none;
         align-items: center;
         display: flex;
@@ -237,11 +235,12 @@
         height: 25px;
         padding-left: 2;
         width: 97%;
+        border-radius: 4px;
         margin-top: 10px;
-        margin-left: -.5px;
+        margin-left: -8px;
         font-size: 14;
         margin-bottom: -4;
-        border: 2px solid gray;
+        border: 2px solid;
         border-bottom: none;
         align-items: center;
         display: flex;
@@ -264,7 +263,7 @@
         font-weight: normal;
 
         padding: 3px;
-        border-bottom: 0.5px solid grey;
+        border-bottom: 0.5px solid;
 
         .group-info {
             cursor: pointer;
@@ -368,35 +367,35 @@
         margin-top: 20px;
     }
 
-    .link-container {
-        display: flex;
-        flex-direction: row;
-        margin-bottom: 10px;
-        margin-left: auto;
-        margin-right: auto;
-
-        .link-box,
-        .copy {
-            padding: 10px;
-            border-radius: 10px;
-            padding: 10px;
-            border: solid black 1px;
-        }
-
-        .link-box {
-            background: white;
-            color: blue;
-            text-decoration: underline;
-        }
-
-        .copy {
-            margin-left: 20px;
-            cursor: alias;
-            border-radius: 50%;
-            width: 42px;
-            height: 42px;
-            transition: 1.5s all ease;
-            padding-top: 12px;
-        }
-    }
+    // .link-container {
+    //     display: flex;
+    //     flex-direction: row;
+    //     margin-bottom: 10px;
+    //     margin-left: auto;
+    //     margin-right: auto;
+
+    //     .link-box,
+    //     .copy {
+    //         padding: 10px;
+    //         border-radius: 10px;
+    //         padding: 10px;
+    //         border: solid black 1px;
+    //     }
+
+    //     .link-box {
+    //         background: white;
+    //         color: blue;
+    //         text-decoration: underline;
+    //     }
+
+    //     .copy {
+    //         margin-left: 20px;
+    //         cursor: alias;
+    //         border-radius: 50%;
+    //         width: 42px;
+    //         height: 42px;
+    //         transition: 1.5s all ease;
+    //         padding-top: 12px;
+    //     }
+    // }
 }
 \ No newline at end of file
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 33c9992d0..cadcb1f8a 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Colors } from 'browndash-components';
+import { Button, IconButton, Size, Type } from 'browndash-components';
 import { concat, intersection } from 'lodash';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -80,7 +80,7 @@ export class SharingManager extends React.Component<{}> {
     @observable private showUserOptions: boolean = false; // whether to show individuals as options when sharing (in the react-select component)
     @observable private showGroupOptions: boolean = false; // // whether to show groups as options when sharing (in the react-select component)
     private populating: boolean = false; // whether the list of users is populating or not
-    @observable private overrideNested: boolean = false; // whether child docs in a collection/dashboard should be changed to be less private - initially selected so default is override
+    @observable private upgradeNested: boolean = false; // whether child docs in a collection/dashboard should be changed to be less private - initially selected so default is upgrade all
     @observable private layoutDocAcls: boolean = false; // whether the layout doc or data doc's acls are to be used
     @observable private myDocAcls: boolean = false; // whether the My Docs checkbox is selected or not
     @observable private _buttonDown = false;
@@ -97,7 +97,7 @@ export class SharingManager extends React.Component<{}> {
             DictationOverlay.Instance.hasActiveModal = true;
             this.isOpen = this.targetDoc !== undefined;
             this.permissions = SharingPermissions.Augment;
-            this.overrideNested = true;
+            this.upgradeNested = true;
         });
     };
 
@@ -162,7 +162,7 @@ export class SharingManager extends React.Component<{}> {
         const acl = `acl-${normalizeEmail(user.email)}`;
         const docs = SelectionManager.Views().length < 2 ? [target] : SelectionManager.Views().map(docView => docView.rootDoc);
         docs.map(doc => (this.layoutDocAcls || doc.dockingConfig ? doc : Doc.GetProto(doc))).forEach(doc => {
-            distributeAcls(acl, permission as SharingPermissions, doc, undefined, this.overrideNested ? true : undefined);
+            distributeAcls(acl, permission as SharingPermissions, doc, undefined, this.upgradeNested ? true : undefined);
             if (permission !== SharingPermissions.None) {
                 Doc.AddDocToList(sharingDoc, doc.dockingConfig ? dashStorage : storage, doc);
             } else GetEffectiveAcl(doc, user.email) === AclPrivate && Doc.RemoveDocFromList(sharingDoc, ((doc.createdFrom as Doc) || doc).dockingConfig ? dashStorage : storage, (doc.createdFrom as Doc) || doc);
@@ -180,7 +180,7 @@ export class SharingManager extends React.Component<{}> {
 
         const docs = SelectionManager.Views().length < 2 ? [target] : SelectionManager.Views().map(docView => docView.rootDoc);
         docs.map(doc => (this.layoutDocAcls || doc.dockingConfig ? doc : Doc.GetProto(doc))).forEach(doc => {
-            distributeAcls(acl, permission as SharingPermissions, doc, undefined, this.overrideNested ? true : undefined);
+            distributeAcls(acl, permission as SharingPermissions, doc, undefined, this.upgradeNested ? true : undefined);
 
             if (group instanceof Doc) {
                 Doc.AddDocToList(group, 'docsShared', doc);
@@ -525,14 +525,10 @@ export class SharingManager extends React.Component<{}> {
             const permissions = uniform ? StrCast(targetDoc?.[groupKey]) : '-multiple-';
 
             return !permissions ? null : (
-                <div key={groupKey} className={'container'}>
+                <div key={groupKey} className={'container'} style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
                     <div className={'padding'}>{StrCast(group.title)}</div>
                     &nbsp;
-                    {group instanceof Doc ? (
-                        <div className="group-info" onClick={action(() => (GroupManager.Instance.currentGroup = group))}>
-                            <FontAwesomeIcon icon={'info-circle'} color={'#e8e8e8'} size={'sm'} style={{ backgroundColor: '#1e89d7', borderRadius: '100%', border: '1px solid #1e89d7' }} />
-                        </div>
-                    ) : null}
+                    {group instanceof Doc ? <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (GroupManager.Instance.currentGroup = group))} /> : null}
                     <div className={'edit-actions'}>
                         {admin || this.myDocAcls ? (
                             <select className={`permissions-dropdown-${permissions}`} value={permissions} onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}>
@@ -551,34 +547,28 @@ export class SharingManager extends React.Component<{}> {
         return (
             <div className="sharing-interface">
                 {GroupManager.Instance?.currentGroup ? <GroupMemberView group={GroupManager.Instance.currentGroup} onCloseButtonClick={action(() => (GroupManager.Instance.currentGroup = undefined))} /> : null}
-                <div className="sharing-contents"
+                <div
+                    className="sharing-contents"
                     style={{
                         background: StrCast(Doc.UserDoc().userBackgroundColor),
-                        color: StrCast(Doc.UserDoc().userColor)
-                    }}
-                >
-                    <p className="share-title">
-                        <div className="share-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/properties/sharing-and-permissions/', '_blank')}>
-                            <FontAwesomeIcon icon={'question-circle'} size={'sm'} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/properties/sharing-and-permissions/', '_blank')} />
+                        color: StrCast(Doc.UserDoc().userColor),
+                    }}>
+                    <p className="share-title" style={{ color: StrCast(Doc.UserDoc().userColor) }}>
+                        <div className="share-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/features/collaboration/', '_blank')}>
+                            <FontAwesomeIcon icon={'question-circle'} size={'sm'} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/features/collaboration/', '_blank')} />
                         </div>
                         <b>Share </b>
                         {this.focusOn(docs.length < 2 ? StrCast(targetDoc?.title, 'this document') : '-multiple-')}
                     </p>
-                    <button
-                        className="share-copy-link"
-                        style={{ background: this._buttonDown ? Colors.LIGHT_BLUE : undefined }}
-                        onPointerDown={action(e => (this._buttonDown = true))}
-                        onPointerUp={action(e => (this._buttonDown = false))}
-                        onClick={this.copyURL}>
-                        <FontAwesomeIcon title="Copy Public URL" icon="copy" size="sm" />
-                        &nbsp; Copy Public URL
-                    </button>
-                    <div className="close-button" onClick={this.close}>
-                        <FontAwesomeIcon icon="times" color="black" size="lg" />
+                    <div className="share-copy-link">
+                        <Button type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} icon={<FontAwesomeIcon icon={'copy'} size="sm" />} iconPlacement={'left'} text={'Copy Guest URL'} onClick={this.copyURL} />
+                    </div>
+                    <div className="close-button">
+                        <Button icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} onClick={this.close} color={StrCast(Doc.UserDoc().userColor)} />
                     </div>
                     {admin ? (
                         <div className="share-container">
-                            <div className="share-setup">
+                            <div className="share-setup" style={{ border: StrCast(Doc.UserDoc().userColor) }}>
                                 <Select
                                     className="user-search"
                                     placeholder="Enter user or group name..."
@@ -590,9 +580,24 @@ export class SharingManager extends React.Component<{}> {
                                     onChange={this.handleUsersChange}
                                     value={this.selectedUsers}
                                     styles={{
+                                        control: () => ({
+                                            display: 'inline-flex',
+                                            width: '100%',
+                                        }),
                                         indicatorSeparator: () => ({
+                                            display: 'inline-flex',
                                             visibility: 'hidden',
                                         }),
+                                        indicatorsContainer: () => ({
+                                            display: 'inline-flex',
+                                            textDecorationColor: 'black',
+                                        }),
+                                        valueContainer: () => ({
+                                            display: 'inline-flex',
+                                            fontStyle: StrCast(Doc.UserDoc().userColor),
+                                            color: StrCast(Doc.UserDoc().userColor),
+                                            width: '100%',
+                                        }),
                                     }}
                                 />
                                 <div className="permissions-select">
@@ -600,9 +605,9 @@ export class SharingManager extends React.Component<{}> {
                                         {this.sharingOptions(true)}
                                     </select>
                                 </div>
-                                <button ref={this.shareDocumentButtonRef} className="share-button" onClick={this.share}>
-                                    Share
-                                </button>
+                                <div className="share-button">
+                                    <Button text={'SHARE'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={this.share} />
+                                </div>
                             </div>
                             <div className="sort-checkboxes">
                                 <input type="checkbox" onChange={action(() => (this.showUserOptions = !this.showUserOptions))} /> <label style={{ marginRight: 10 }}>Individuals</label>
@@ -612,7 +617,7 @@ export class SharingManager extends React.Component<{}> {
                             <div className="acl-container">
                                 {Doc.noviceMode ? null : (
                                     <div className="layoutDoc-acls">
-                                        <input type="checkbox" onChange={action(() => (this.overrideNested = !this.overrideNested))} checked={this.overrideNested} /> <label>Override Nested </label>
+                                        <input type="checkbox" onChange={action(() => (this.upgradeNested = !this.upgradeNested))} checked={this.upgradeNested} /> <label>Upgrade Nested </label>
                                         <input type="checkbox" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} /> <label>Layout</label>
                                     </div>
                                 )}
@@ -627,12 +632,16 @@ export class SharingManager extends React.Component<{}> {
                             </div>
                         </div>
                     )}
-                    <div className="main-container">
+                    <div className="main-container" style={{ color: StrCast(Doc.UserDoc().userColor), border: StrCast(Doc.UserDoc().userColor) }}>
                         <div className={'individual-container'}>
                             <div className="user-sort" onClick={action(() => (this.individualSort = this.individualSort === 'ascending' ? 'descending' : this.individualSort === 'descending' ? 'none' : 'ascending'))}>
                                 <div className="title-individual">
-                                    Individuals &nbsp;
-                                    <FontAwesomeIcon icon={this.individualSort === 'ascending' ? 'caret-up' : this.individualSort === 'descending' ? 'caret-down' : 'caret-right'} size="xs" />
+                                    Individuals
+                                    <IconButton
+                                        icon={<FontAwesomeIcon icon={this.individualSort === 'ascending' ? 'caret-up' : this.individualSort === 'descending' ? 'caret-down' : 'caret-right'} />}
+                                        size={Size.XSMALL}
+                                        color={StrCast(Doc.UserDoc().userColor)}
+                                    />
                                 </div>
                             </div>
                             <div className="users-list">{userListContents}</div>
@@ -640,12 +649,13 @@ export class SharingManager extends React.Component<{}> {
                         <div className={'group-container'}>
                             <div className="user-sort" onClick={action(() => (this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending'))}>
                                 <div className="title-group">
-                                    Groups &nbsp;
-                                    <div className="group-info" onClick={action(() => GroupManager.Instance?.open())}>
-                                        <FontAwesomeIcon icon={'info-circle'} color={'#e8e8e8'} size={'sm'} style={{ backgroundColor: '#1e89d7', borderRadius: '100%', border: '1px solid #1e89d7' }} />
-                                    </div>
-                                    &nbsp;
-                                    <FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'} size="xs" />
+                                    Groups
+                                    <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => GroupManager.Instance.open())} />
+                                    <IconButton
+                                        icon={<FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'} />}
+                                        size={Size.XSMALL}
+                                        color={StrCast(Doc.UserDoc().userColor)}
+                                    />
                                 </div>
                             </div>
                             <div className={'groups-list'}>{groupListContents}</div>
@@ -657,13 +667,6 @@ export class SharingManager extends React.Component<{}> {
     }
 
     render() {
-        return <MainViewModal 
-            contents={this.sharingInterface} 
-            isDisplayed={this.isOpen} 
-            interactive={true} 
-            dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} 
-            overlayDisplayedOpacity={this.overlayOpacity} 
-            closeOnExternalClick={this.close} 
-        />;
+        return <MainViewModal contents={this.sharingInterface} isDisplayed={this.isOpen} interactive={true} dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.close} />;
     }
 }
diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss
new file mode 100644
index 000000000..cd6a1d934
--- /dev/null
+++ b/src/client/util/reportManager/ReportManager.scss
@@ -0,0 +1,364 @@
+@import '../../views/global/globalCssVariables';
+
+// header
+
+.report-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header-btns {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    h2 {
+        margin: 0;
+        padding: 0;
+        font-size: 24px;
+    }
+}
+
+.report-header-vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+
+    h2 {
+        margin: 0;
+        padding: 0;
+        padding-bottom: 8px;
+        font-size: 24px;
+    }
+}
+
+// Report
+
+.report-issue {
+    width: 450px;
+    min-width: 300px;
+    padding: 16px;
+    padding-top: 32px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    // background-color: #ffffff;
+    text-align: left;
+    position: relative;
+
+    .report-label {
+        font-size: 14px;
+        font-weight: 400;
+    }
+
+    .report-section {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .report-textarea {
+        border: none;
+        outline: none;
+        width: 100%;
+        height: 80px;
+        padding: 8px;
+        resize: vertical;
+        background: transparent;
+        transition: border 0.3s ease;
+    }
+
+    .report-selects {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 16px;
+        background-color: transparent;
+
+        .report-select {
+            padding: 8px;
+            background-color: transparent;
+
+            .report-opt {
+                padding: 8px;
+            }
+        }
+    }
+}
+
+.report-input {
+    border: none;
+    outline: none;
+    border-bottom: 1px solid;
+    padding: 8px;
+    padding-left: 0;
+    transition: all 0.2s ease;
+    background: transparent;
+
+    &:hover {
+        // border-bottom-color: $text-gray;
+    }
+    &:focus {
+        // border-bottom-color: #4476f7;
+    }
+}
+
+// View issues
+
+.view-issues {
+    width: 75vw;
+    min-width: 500px;
+    display: flex;
+    gap: 16px;
+    height: 100%;
+    overflow-x: auto;
+
+    video::-webkit-media-controls {
+        display: flex !important;
+    }
+
+    .left {
+        flex: 1;
+        height: 100%;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        text-align: left;
+        position: relative;
+
+        .issues {
+            padding-top: 24px;
+            position: relative;
+            flex-grow: 1;
+            overflow-y: auto;
+            overflow-x: hidden;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+    }
+
+    .right {
+        position: relative;
+        flex: 1;
+        padding: 16px;
+        min-width: 300px;
+        height: 100%;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+// Issue
+
+.issue-card {
+    cursor: pointer;
+    padding: 16px;
+    border: 1px solid;
+    transition: all 0.1s ease;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+
+    .issue-top {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding-bottom: 8px;
+    }
+
+    .issue-label {
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 400;
+        padding: 0;
+        margin: 0;
+    }
+
+    .issue-title {
+        font-size: 16px;
+        font-weight: 500;
+        padding: 0;
+        margin: 0;
+    }
+}
+
+// Dropzone
+
+.dropzone {
+    padding: 2rem;
+    border-radius: 0.5rem;
+    border: 2px dashed;
+
+    .dropzone-instructions {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+
+        p {
+            text-align: center;
+        }
+    }
+}
+
+.file-list {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+    width: 100%;
+    overflow-x: auto;
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    .file-name {
+        padding: 8px 12px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        white-space: nowrap;
+    }
+}
+
+// Detailed issue view
+
+.issue-view {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    text-align: left;
+    position: relative;
+    overflow: auto;
+
+    .issue-label {
+        .issue-link {
+            cursor: pointer;
+            color: #4476f7;
+        }
+    }
+
+    .issue-title {
+        font-size: 24px;
+        margin: 0;
+        padding: 0;
+    }
+
+    .issue-date {
+        font-size: 14px;
+    }
+
+    .issue-content {
+        font-size: 14px;
+    }
+}
+
+// tags flex lists
+
+.issues-filters {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .issues-filter {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        white-space: nowrap;
+        overflow-x: auto;
+    }
+}
+
+.issue-tags {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    white-space: nowrap;
+    overflow-x: auto;
+}
+
+// Media previews
+
+.report-media-wrapper {
+    position: relative;
+    cursor: pointer;
+
+    .close-btn {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        opacity: 0;
+    }
+
+    .report-media-content {
+        position: relative;
+        display: inline block;
+
+        video::-webkit-media-controls {
+            display: flex !important;
+        }
+    }
+
+    .report-media-content::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as desired */
+        opacity: 0;
+        transition: opacity 0.3s ease; /* Transition for smooth effect */
+        pointer-events: none;
+
+        video::-webkit-media-controls {
+            pointer-events: all;
+        }
+    }
+
+    &:hover {
+        .report-media-content::after {
+            opacity: 1;
+        }
+
+        .close-btn {
+            opacity: 1;
+        }
+    }
+}
+
+.report-audio-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+@media (max-width: 1100px) {
+    .report-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 2rem;
+    }
+}
+
+// Tag styling
+
+.report-tag {
+    box-sizing: border-box;
+    padding: 4px 10px;
+    font-size: 10px;
+    border-radius: 32px;
+    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx
new file mode 100644
index 000000000..e684bd637
--- /dev/null
+++ b/src/client/util/reportManager/ReportManager.tsx
@@ -0,0 +1,405 @@
+import * as React from 'react';
+import v4 = require('uuid/v4');
+import '.././SettingsManager.scss';
+import './ReportManager.scss';
+import Dropzone from 'react-dropzone';
+import ReactLoading from 'react-loading';
+import { action, observable } from 'mobx';
+import { BsX, BsArrowsAngleExpand, BsArrowsAngleContract } from 'react-icons/bs';
+import { CgClose } from 'react-icons/cg';
+import { AiOutlineUpload } from 'react-icons/ai';
+import { HiOutlineArrowLeft } from 'react-icons/hi';
+import { Issue } from './reportManagerSchema';
+import { observer } from 'mobx-react';
+import { Doc } from '../../../fields/Doc';
+import { MainViewModal } from '../../views/MainViewModal';
+import { Octokit } from '@octokit/core';
+import { Button, Dropdown, DropdownType, IconButton, Type } from 'browndash-components';
+import { BugType, FileData, Priority, ReportForm, ViewState, bugDropdownItems, darkColors, emptyReportForm, formatTitle, getAllIssues, isDarkMode, lightColors, passesTagFilter, priorityDropdownItems, uploadFilesToServer } from './reportManagerUtils';
+import { Filter, FormInput, FormTextArea, IssueCard, IssueView, Tag } from './ReportManagerComponents';
+import { StrCast } from '../../../fields/Types';
+import { MdRefresh } from 'react-icons/md';
+const higflyout = require('@hig/flyout');
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
+
+/**
+ * Class for reporting and viewing Github issues within the app.
+ */
+@observer
+export class ReportManager extends React.Component<{}> {
+    public static Instance: ReportManager;
+    @observable private isOpen = false;
+
+    @observable private query = '';
+    @action private setQuery = (q: string) => {
+        this.query = q;
+    };
+
+    private octokit: Octokit;
+
+    @observable viewState: ViewState = ViewState.VIEW;
+    @action private setViewState = (state: ViewState) => {
+        this.viewState = state;
+    };
+    @observable submitting: boolean = false;
+    @action private setSubmitting = (submitting: boolean) => {
+        this.submitting = submitting;
+    };
+
+    @observable fetchingIssues: boolean = false;
+    @action private setFetchingIssues = (fetching: boolean) => {
+        this.fetchingIssues = fetching;
+    };
+
+    @observable
+    public shownIssues: Issue[] = [];
+    @action setShownIssues = action((issues: Issue[]) => {
+        this.shownIssues = issues;
+    });
+
+    @observable
+    public priorityFilter: Priority | null = null;
+    @action setPriorityFilter = action((priority: Priority | null) => {
+        this.priorityFilter = priority;
+    });
+
+    @observable
+    public bugFilter: BugType | null = null;
+    @action setBugFilter = action((bug: BugType | null) => {
+        this.bugFilter = bug;
+    });
+
+    @observable selectedIssue: Issue | undefined = undefined;
+    @action setSelectedIssue = action((issue: Issue | undefined) => {
+        this.selectedIssue = issue;
+    });
+
+    @observable rightExpanded: boolean = false;
+    @action setRightExpanded = action((expanded: boolean) => {
+        this.rightExpanded = expanded;
+    });
+
+    // Form state
+    @observable private formData: ReportForm = emptyReportForm;
+    @action setFormData = action((newData: ReportForm) => {
+        this.formData = newData;
+    });
+
+    public close = action(() => (this.isOpen = false));
+    public open = action(async () => {
+        this.isOpen = true;
+        if (this.shownIssues.length === 0) {
+            this.updateIssues();
+        }
+    });
+
+    @action updateIssues = action(async () => {
+        this.setFetchingIssues(true);
+        try {
+            const issues = (await getAllIssues(this.octokit)) as Issue[];
+            this.setShownIssues(issues.filter(issue => issue.state === 'open' && !issue.pull_request));
+        } catch (err) {
+            console.log(err);
+        }
+        this.setFetchingIssues(false);
+    });
+
+    constructor(props: {}) {
+        super(props);
+        ReportManager.Instance = this;
+
+        // initializing Github connection
+        this.octokit = new Octokit({
+            auth: process.env.GITHUB_ACCESS_TOKEN,
+        });
+    }
+
+    /**
+     * Sends a request to Github to report a new issue with the form data.
+     * @returns nothing
+     */
+    public async reportIssue(): Promise<void> {
+        if (this.formData.title === '' || this.formData.description === '') {
+            alert('Please fill out all required fields to report an issue.');
+            return;
+        }
+        this.setSubmitting(true);
+        let formattedLinks: string[] = [];
+        if (this.formData.mediaFiles.length > 0) {
+            const links = await uploadFilesToServer(this.formData.mediaFiles);
+            if (links) {
+                formattedLinks = links;
+            }
+        }
+
+        const req = await this.octokit.request('POST /repos/{owner}/{repo}/issues', {
+            owner: 'brown-dash',
+            repo: 'Dash-Web',
+            title: formatTitle(this.formData.title, Doc.CurrentUserEmail),
+            body: `${this.formData.description} ${formattedLinks.length > 0 ? `\n\nFiles:\n${formattedLinks.join('\n')}` : ''}`,
+            labels: ['from-dash-app', this.formData.type, this.formData.priority],
+        });
+
+        // 201 status means success
+        if (req.status !== 201) {
+            alert('Error creating issue on github.');
+        } else {
+            await this.updateIssues();
+            alert('Successfully submitted issue.');
+        }
+        this.setFormData(emptyReportForm);
+        this.setSubmitting(false);
+    }
+
+    /**
+     * Handles file upload.
+     *
+     * @param files uploaded files
+     */
+    private onDrop = (files: File[]) => {
+        this.setFormData({ ...this.formData, mediaFiles: [...this.formData.mediaFiles, ...files.map(file => ({ _id: v4(), file }))] });
+    };
+
+    /**
+     * Gets a JSX element to render a media preview
+     * @param fileData file data
+     * @returns JSX element of a piece of media (image, video, audio)
+     */
+    private getMediaPreview = (fileData: FileData): JSX.Element => {
+        const file = fileData.file;
+        const mimeType = file.type;
+        const preview = URL.createObjectURL(file);
+
+        if (mimeType.startsWith('image/')) {
+            return (
+                <div key={fileData._id} className="report-media-wrapper">
+                    <div className="report-media-content">
+                        <img height={100} alt={`Preview of ${file.name}`} src={preview} style={{ display: 'block' }} />
+                    </div>
+                    <div className="close-btn">
+                        <IconButton icon={<BsX color="#ffffff" />} onClick={() => this.setFormData({ ...this.formData, mediaFiles: this.formData.mediaFiles.filter(f => f._id !== fileData._id) })} />
+                    </div>
+                </div>
+            );
+        } else if (mimeType.startsWith('video/')) {
+            return (
+                <div key={fileData._id} className="report-media-wrapper">
+                    <div className="report-media-content">
+                        <video className="report-default-video" controls style={{ height: '100px', width: 'auto', display: 'block' }}>
+                            <source src={preview} type="video/mp4" />
+                            Your browser does not support the video tag.
+                        </video>
+                    </div>
+                    <div className="close-btn">
+                        <IconButton icon={<BsX color="#ffffff" />} onClick={() => this.setFormData({ ...this.formData, mediaFiles: this.formData.mediaFiles.filter(f => f._id !== fileData._id) })} />
+                    </div>
+                </div>
+            );
+        } else if (mimeType.startsWith('audio/')) {
+            return (
+                <div key={fileData._id} className="report-audio-wrapper">
+                    <audio src={preview} controls />
+                    <div className="close-btn">
+                        <IconButton icon={<BsX color="#ffffff" />} onClick={() => this.setFormData({ ...this.formData, mediaFiles: this.formData.mediaFiles.filter(f => f._id !== fileData._id) })} />
+                    </div>
+                </div>
+            );
+        }
+        return <></>;
+    };
+
+    /**
+     * @returns the component that dispays all issues
+     */
+    private viewIssuesComponent = () => {
+        const darkMode = isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor));
+        const colors = darkMode ? darkColors : lightColors;
+
+        return (
+            <div className="view-issues" style={{ backgroundColor: StrCast(Doc.UserDoc().userBackgroundColor), color: colors.text }}>
+                <div className="left" style={{ display: this.rightExpanded ? 'none' : 'flex' }}>
+                    <div className="report-header">
+                        <h2 style={{ color: colors.text }}>Open Issues</h2>
+                        <div className="header-btns">
+                            <IconButton color={StrCast(Doc.UserDoc().userColor)} tooltip="refresh" icon={<MdRefresh size="16px" />} onClick={this.updateIssues} />
+                            <Button
+                                type={Type.TERT}
+                                color={StrCast(Doc.UserDoc().userVariantColor)}
+                                text="Report Issue"
+                                onClick={() => {
+                                    this.setViewState(ViewState.CREATE);
+                                }}
+                            />
+                        </div>
+                    </div>
+                    <FormInput value={this.query} placeholder="Filter by query..." onChange={this.setQuery} />
+                    <div className="issues-filters">
+                        <Filter items={Object.values(Priority)} activeValue={this.priorityFilter} setActiveValue={p => this.setPriorityFilter(p)} />
+                        <Filter items={Object.values(BugType)} activeValue={this.bugFilter} setActiveValue={b => this.setBugFilter(b)} />
+                    </div>
+                    <div className="issues">
+                        {this.fetchingIssues ? (
+                            <div style={{ flexGrow: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                                <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userColor)} width={50} height={50} />
+                            </div>
+                        ) : (
+                            this.shownIssues
+                                .filter(issue => issue.title.toLowerCase().includes(this.query))
+                                .filter(issue => passesTagFilter(issue, this.priorityFilter, this.bugFilter))
+                                .map(issue => (
+                                    <IssueCard
+                                        key={issue.number}
+                                        issue={issue}
+                                        onSelect={() => {
+                                            this.setSelectedIssue(issue);
+                                        }}
+                                    />
+                                ))
+                        )}
+                    </div>
+                </div>
+                <div className="right">{this.selectedIssue ? <IssueView key={this.selectedIssue.number} issue={this.selectedIssue} /> : <div>No issue selected</div>} </div>
+                <div style={{ position: 'absolute', top: '8px', right: '8px', display: 'flex', gap: '16px' }}>
+                    <IconButton
+                        color={StrCast(Doc.UserDoc().userColor)}
+                        tooltip={this.rightExpanded ? 'Minimize right side' : 'Expand right side'}
+                        icon={this.rightExpanded ? <BsArrowsAngleContract size="16px" /> : <BsArrowsAngleExpand size="16px" />}
+                        onClick={e => {
+                            e.stopPropagation();
+                            this.setRightExpanded(!this.rightExpanded);
+                        }}
+                    />
+                    <IconButton color={StrCast(Doc.UserDoc().userColor)} tooltip="close" icon={<CgClose size="16px" />} onClick={this.close} />
+                </div>
+            </div>
+        );
+    };
+
+    /**
+     * @returns the form component for submitting issues
+     */
+    private reportIssueComponent = () => {
+        const darkMode = isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor));
+        const colors = darkMode ? darkColors : lightColors;
+
+        return (
+            <div className="report-issue" style={{ color: colors.text }}>
+                <div className="report-header-vertical">
+                    <Button
+                        type={Type.PRIM}
+                        color={StrCast(Doc.UserDoc().userColor)}
+                        text="back to view"
+                        icon={<HiOutlineArrowLeft />}
+                        iconPlacement="left"
+                        onClick={() => {
+                            this.setViewState(ViewState.VIEW);
+                        }}
+                    />
+                    <h2>Report an Issue</h2>
+                </div>
+                <div className="report-section">
+                    <label className="report-label">Please provide a title for the bug</label>
+                    <FormInput value={this.formData.title} placeholder="Title..." onChange={val => this.setFormData({ ...this.formData, title: val })} />
+                </div>
+                <div className="report-section">
+                    <label className="report-label">Please leave a description for the bug and how it can be recreated</label>
+                    <FormTextArea value={this.formData.description} placeholder="Description..." onChange={val => this.setFormData({ ...this.formData, description: val })} />
+                </div>
+                <div className="report-selects">
+                    <Dropdown
+                        color={StrCast(Doc.UserDoc().userColor)}
+                        formLabel={'Type'}
+                        items={bugDropdownItems}
+                        selectedVal={this.formData.type}
+                        setSelectedVal={val => {
+                            if (typeof val === 'string') this.setFormData({ ...this.formData, type: val as BugType });
+                        }}
+                        dropdownType={DropdownType.SELECT}
+                        type={Type.TERT}
+                        fillWidth
+                    />
+                    <Dropdown
+                        color={StrCast(Doc.UserDoc().userColor)}
+                        formLabel={'Priority'}
+                        items={priorityDropdownItems}
+                        selectedVal={this.formData.priority}
+                        setSelectedVal={val => {
+                            if (typeof val === 'string') this.setFormData({ ...this.formData, priority: val as Priority });
+                        }}
+                        dropdownType={DropdownType.SELECT}
+                        type={Type.TERT}
+                        fillWidth
+                    />
+                </div>
+                <Dropzone
+                    onDrop={this.onDrop}
+                    accept={{
+                        'image/*': ['.png', '.jpg', '.jpeg', '.gif'],
+                        'video/*': ['.mp4', '.mpeg', '.webm', '.mov'],
+                        'audio/mpeg': ['.mp3'],
+                        'audio/wav': ['.wav'],
+                        'audio/ogg': ['.ogg'],
+                    }}>
+                    {({ getRootProps, getInputProps }) => (
+                        <div {...getRootProps({ className: 'dropzone' })} style={{ borderColor: isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor)) ? darkColors.border : lightColors.border }}>
+                            <input {...getInputProps()} />
+                            <div className="dropzone-instructions">
+                                <AiOutlineUpload size={25} />
+                                <p>Drop or select media that shows the bug (optional)</p>
+                            </div>
+                        </div>
+                    )}
+                </Dropzone>
+                {this.formData.mediaFiles.length > 0 && <ul className="file-list">{this.formData.mediaFiles.map(file => this.getMediaPreview(file))}</ul>}
+                {this.submitting ? (
+                    <Button
+                        text="Submit"
+                        type={Type.TERT}
+                        color={StrCast(Doc.UserDoc().userVariantColor)}
+                        icon={<ReactLoading type="spin" color={'#ffffff'} width={20} height={20} />}
+                        iconPlacement="right"
+                        onClick={() => {
+                            this.reportIssue();
+                        }}
+                    />
+                ) : (
+                    <Button
+                        text="Submit"
+                        type={Type.TERT}
+                        color={StrCast(Doc.UserDoc().userVariantColor)}
+                        onClick={() => {
+                            this.reportIssue();
+                        }}
+                    />
+                )}
+                <div style={{ position: 'absolute', top: '4px', right: '4px' }}>
+                    <IconButton color={StrCast(Doc.UserDoc().userColor)} tooltip="close" icon={<CgClose size={'16px'} />} onClick={this.close} />
+                </div>
+            </div>
+        );
+    };
+
+    /**
+     * @returns the component rendered to the modal
+     */
+    private reportComponent = () => {
+        if (this.viewState === ViewState.VIEW) {
+            return this.viewIssuesComponent();
+        } else {
+            return this.reportIssueComponent();
+        }
+    };
+
+    render() {
+        return (
+            <MainViewModal
+                contents={this.reportComponent()}
+                isDisplayed={this.isOpen}
+                interactive={true}
+                closeOnExternalClick={this.close}
+                dialogueBoxStyle={{ width: 'auto', minWidth: '300px', height: '85vh', maxHeight: '90vh', background: StrCast(Doc.UserDoc().userBackgroundColor), borderRadius: '8px' }}
+            />
+        );
+    }
+}
diff --git a/src/client/util/reportManager/ReportManagerComponents.tsx b/src/client/util/reportManager/ReportManagerComponents.tsx
new file mode 100644
index 000000000..e870c073d
--- /dev/null
+++ b/src/client/util/reportManager/ReportManagerComponents.tsx
@@ -0,0 +1,381 @@
+import * as React from 'react';
+import { Issue } from './reportManagerSchema';
+import { darkColors, dashBlue, getLabelColors, isDarkMode, lightColors } from './reportManagerUtils';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+import { StrCast } from '../../../fields/Types';
+import { Doc } from '../../../fields/Doc';
+
+/**
+ * Mini helper components for the report component.
+ */
+
+interface FilterProps<T> {
+    items: T[];
+    activeValue: T | null;
+    setActiveValue: (val: T | null) => void;
+}
+
+// filter ui for issues (horizontal list of tags)
+export const Filter = <T extends string>({ items, activeValue, setActiveValue }: FilterProps<T>) => {
+    // establishing theme
+    const darkMode = isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor));
+    const colors = darkMode ? darkColors : lightColors;
+    const isTagDarkMode = isDarkMode(StrCast(Doc.UserDoc().userColor));
+    const activeTagTextColor = isTagDarkMode ? darkColors.text : lightColors.text;
+
+    return (
+        <div className="issues-filter">
+            <Tag
+                text={'All'}
+                onClick={() => {
+                    setActiveValue(null);
+                }}
+                fontSize="12px"
+                backgroundColor={activeValue === null ? StrCast(Doc.UserDoc().userColor) : 'transparent'}
+                color={activeValue === null ? activeTagTextColor : colors.textGrey}
+                borderColor={activeValue === null ? StrCast(Doc.UserDoc().userColor) : colors.border}
+                border
+            />
+            {items.map(item => {
+                return (
+                    <Tag
+                        key={item}
+                        text={item}
+                        onClick={() => {
+                            setActiveValue(item);
+                        }}
+                        fontSize="12px"
+                        backgroundColor={activeValue === item ? StrCast(Doc.UserDoc().userColor) : 'transparent'}
+                        color={activeValue === item ? activeTagTextColor : colors.textGrey}
+                        border
+                        borderColor={activeValue === item ? StrCast(Doc.UserDoc().userColor) : colors.border}
+                    />
+                );
+            })}
+        </div>
+    );
+};
+
+interface IssueCardProps {
+    issue: Issue;
+    onSelect: () => void;
+}
+
+// Component for the issue cards list on the left
+export const IssueCard = ({ issue, onSelect }: IssueCardProps) => {
+    const [textColor, setTextColor] = React.useState('');
+    const [bgColor, setBgColor] = React.useState('transparent');
+    const [borderColor, setBorderColor] = React.useState('transparent');
+
+    const resetColors = () => {
+        const darkMode = isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor));
+        const colors = darkMode ? darkColors : lightColors;
+        setTextColor(colors.text);
+        setBorderColor(colors.border);
+        setBgColor('transparent');
+    };
+
+    const handlePointerOver = () => {
+        const darkMode = isDarkMode(StrCast(Doc.UserDoc().userColor));
+        setTextColor(darkMode ? darkColors.text : lightColors.text);
+        setBorderColor(StrCast(Doc.UserDoc().userColor));
+        setBgColor(StrCast(Doc.UserDoc().userColor));
+    };
+
+    React.useEffect(() => {
+        resetColors();
+    }, []);
+
+    return (
+        <div className="issue-card" onClick={onSelect} style={{ color: textColor, backgroundColor: bgColor, borderColor: borderColor }} onPointerOver={handlePointerOver} onPointerOut={resetColors}>
+            <div className="issue-top">
+                <label className="issue-label">#{issue.number}</label>
+                <div className="issue-tags">
+                    {issue.labels.map(label => {
+                        const labelString = typeof label === 'string' ? label : label.name ?? '';
+                        const colors = getLabelColors(labelString);
+                        return <Tag key={labelString} text={labelString} backgroundColor={colors[0]} color={colors[1]} />;
+                    })}
+                </div>
+            </div>
+            <h3 className="issue-title">{issue.title}</h3>
+        </div>
+    );
+};
+
+interface IssueViewProps {
+    issue: Issue;
+}
+
+// Detailed issue view that displays on the right
+export const IssueView = ({ issue }: IssueViewProps) => {
+    const [issueBody, setIssueBody] = React.useState('');
+
+    // Parses the issue body into a formatted markdown (main functionality is replacing urls with tags)
+    const parseBody = async (body: string) => {
+        const imgTagRegex = /<img\b[^>]*\/?>/;
+        const videoTagRegex = /<video\b[^>]*\/?>/;
+        const audioTagRegex = /<audio\b[^>]*\/?>/;
+
+        const fileRegex = /https:\/\/browndash\.com\/files/;
+        const localRegex = /http:\/\/localhost:1050\/files/;
+        const parts = body.split('\n');
+
+        const modifiedParts = await Promise.all(
+            parts.map(async part => {
+                if (imgTagRegex.test(part) || videoTagRegex.test(part) || audioTagRegex.test(part)) {
+                    return `\n${await parseFileTag(part)}\n`;
+                } else if (fileRegex.test(part)) {
+                    const tag = await parseDashFiles(part);
+                    return tag;
+                } else if (localRegex.test(part)) {
+                    const tag = await parseLocalFiles(part);
+                    return tag;
+                } else {
+                    return part;
+                }
+            })
+        );
+
+        setIssueBody(modifiedParts.join('\n'));
+    };
+
+    // Extracts the src from an image tag and either returns the raw url if not accessible or a new image tag
+    const parseFileTag = async (tag: string): Promise<string> => {
+        const regex = /src="([^"]+)"/;
+        let url = '';
+        const match = tag.match(regex);
+        if (!match) return tag;
+        url = match[1];
+        if (!url) return tag;
+
+        const mimeType = url.split('.').pop();
+        if (!mimeType) return tag;
+
+        switch (mimeType) {
+            // image
+            case '.jpg':
+            case '.png':
+            case '.jpeg':
+            case '.gif':
+                return await getDisplayedFile(url, 'image');
+            // video
+            case '.mp4':
+            case '.mpeg':
+            case '.webm':
+            case '.mov':
+                return await getDisplayedFile(url, 'video');
+            //audio
+            case '.mp3':
+            case '.wav':
+            case '.ogg':
+                return await getDisplayedFile(url, 'audio');
+        }
+        return tag;
+    };
+
+    // Returns the corresponding HTML tag for a src url
+    const parseDashFiles = async (url: string) => {
+        const dashImgRegex = /https:\/\/browndash\.com\/files[/\\]images/;
+        const dashVideoRegex = /https:\/\/browndash\.com\/files[/\\]videos/;
+        const dashAudioRegex = /https:\/\/browndash\.com\/files[/\\]audio/;
+
+        if (dashImgRegex.test(url)) {
+            return await getDisplayedFile(url, 'image');
+        } else if (dashVideoRegex.test(url)) {
+            return await getDisplayedFile(url, 'video');
+        } else if (dashAudioRegex.test(url)) {
+            return await getDisplayedFile(url, 'audio');
+        } else {
+            return url;
+        }
+    };
+
+    // Returns the corresponding HTML tag for a src url
+    const parseLocalFiles = async (url: string) => {
+        const imgRegex = /http:\/\/localhost:1050\/files[/\\]images/;
+        const dashVideoRegex = /http:\/\/localhost:1050\.com\/files[/\\]videos/;
+        const dashAudioRegex = /http:\/\/localhost:1050\.com\/files[/\\]audio/;
+
+        if (imgRegex.test(url)) {
+            return await getDisplayedFile(url, 'image');
+        } else if (dashVideoRegex.test(url)) {
+            return await getDisplayedFile(url, 'video');
+        } else if (dashAudioRegex.test(url)) {
+            return await getDisplayedFile(url, 'audio');
+        } else {
+            return url;
+        }
+    };
+
+    const getDisplayedFile = async (url: string, fileType: 'image' | 'video' | 'audio'): Promise<string> => {
+        switch (fileType) {
+            case 'image':
+                const imgValid = await isImgValid(url);
+                if (!imgValid) return `\n${url} (This image could not be loaded)\n`;
+                return `\n${url}\n<img width="100%" alt="Issue asset" src=${url} />\n`;
+            case 'video':
+                const videoValid = await isVideoValid(url);
+                if (!videoValid) return `\n${url} (This video could not be loaded)\n`;
+                return `\n${url}\n<video class="report-default-video" width="100%" controls alt="Issue asset" src=${url} />\n`;
+            case 'audio':
+                const audioValid = await isAudioValid(url);
+                if (!audioValid) return `\n${url} (This audio could not be loaded)\n`;
+                return `\n${url}\n<audio src=${url} controls />\n`;
+        }
+    };
+
+    // Loads an image and returns a promise that resolves as whether the image is valid or not
+    const isImgValid = (src: string): Promise<boolean> => {
+        const imgElement = document.createElement('img');
+        const validPromise: Promise<boolean> = new Promise(resolve => {
+            imgElement.addEventListener('load', () => resolve(true));
+            imgElement.addEventListener('error', () => resolve(false));
+        });
+        imgElement.src = src;
+        return validPromise;
+    };
+
+    // Loads a video and returns a promise that resolves as whether the video is valid or not
+    const isVideoValid = (src: string): Promise<boolean> => {
+        const videoElement = document.createElement('video');
+        const validPromise: Promise<boolean> = new Promise(resolve => {
+            videoElement.addEventListener('loadeddata', () => resolve(true));
+            videoElement.addEventListener('error', () => resolve(false));
+        });
+        videoElement.src = src;
+        return validPromise;
+    };
+
+    // Loads audio and returns a promise that resolves as whether the audio is valid or not
+    const isAudioValid = (src: string): Promise<boolean> => {
+        const audioElement = document.createElement('audio');
+        const validPromise: Promise<boolean> = new Promise(resolve => {
+            audioElement.addEventListener('loadeddata', () => resolve(true));
+            audioElement.addEventListener('error', () => resolve(false));
+        });
+        audioElement.src = src;
+        return validPromise;
+    };
+
+    // Called on mount to parse the body
+    React.useEffect(() => {
+        setIssueBody('Loading...');
+        parseBody((issue.body as string) ?? '');
+    }, [issue]);
+
+    return (
+        <div className="issue-view">
+            <span className="issue-label">
+                Issue{' '}
+                <a className="issue-link" href={issue.html_url} target="_blank">
+                    #{issue.number}
+                </a>
+            </span>
+            <h2 className="issue-title">{issue.title}</h2>
+            <div className="issue-date">
+                Opened on {new Date(issue.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} {issue.user?.login && `by ${issue.user?.login}`}
+            </div>
+            {issue.labels.length > 0 && (
+                <div>
+                    <div className="issue-tags">
+                        {issue.labels.map(label => {
+                            const labelString = typeof label === 'string' ? label : label.name ?? '';
+                            const colors = getLabelColors(labelString);
+                            return <Tag key={labelString} text={labelString} backgroundColor={colors[0]} color={colors[1]} fontSize="12px" />;
+                        })}
+                    </div>
+                </div>
+            )}
+            <ReactMarkdown children={issueBody} className="issue-content" linkTarget={'_blank'} remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} />
+        </div>
+    );
+};
+
+interface TagProps {
+    text: string;
+    fontSize?: string;
+    color?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    border?: boolean;
+    onClick?: () => void;
+}
+
+// Small tag for labels of the issue
+export const Tag = ({ text, color, backgroundColor, fontSize, border, borderColor, onClick }: TagProps) => {
+    return (
+        <div
+            onClick={onClick ?? (() => {})}
+            className="report-tag"
+            style={{ color: color ?? '#ffffff', backgroundColor: backgroundColor ?? '#347bff', cursor: onClick ? 'pointer' : 'auto', fontSize: fontSize ?? '10px', border: border ? '1px solid' : 'none', borderColor: borderColor ?? '#94a3b8' }}>
+            {text}
+        </div>
+    );
+};
+
+interface FormInputProps {
+    value: string;
+    placeholder: string;
+    onChange: (val: string) => void;
+}
+export const FormInput = ({ value, placeholder, onChange }: FormInputProps) => {
+    const [inputBorderColor, setInputBorderColor] = React.useState('');
+
+    return (
+        <input
+            className="report-input"
+            style={{ borderBottom: `1px solid ${inputBorderColor}` }}
+            value={value}
+            type="text"
+            placeholder={placeholder}
+            onChange={e => onChange(e.target.value)}
+            required
+            onPointerOver={() => {
+                if (inputBorderColor === dashBlue) return;
+                setInputBorderColor(isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor)) ? darkColors.textGrey : lightColors.textGrey);
+            }}
+            onPointerOut={() => {
+                if (inputBorderColor === dashBlue) return;
+                setInputBorderColor(isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor)) ? darkColors.border : lightColors.border);
+            }}
+            onFocus={() => {
+                setInputBorderColor(dashBlue);
+            }}
+            onBlur={() => {
+                setInputBorderColor(isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor)) ? darkColors.border : lightColors.border);
+            }}
+        />
+    );
+};
+
+export const FormTextArea = ({ value, placeholder, onChange }: FormInputProps) => {
+    const [textAreaBorderColor, setTextAreaBorderColor] = React.useState('');
+
+    return (
+        <textarea
+            className="report-textarea"
+            value={value}
+            placeholder={placeholder}
+            onChange={e => onChange(e.target.value)}
+            required
+            style={{ border: `1px solid ${textAreaBorderColor}` }}
+            onPointerOver={() => {
+                if (textAreaBorderColor === dashBlue) return;
+                setTextAreaBorderColor(isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor)) ? darkColors.textGrey : lightColors.textGrey);
+            }}
+            onPointerOut={() => {
+                if (textAreaBorderColor === dashBlue) return;
+                setTextAreaBorderColor(isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor)) ? darkColors.border : lightColors.border);
+            }}
+            onFocus={() => {
+                setTextAreaBorderColor(dashBlue);
+            }}
+            onBlur={() => {
+                setTextAreaBorderColor(isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor)) ? darkColors.border : lightColors.border);
+            }}
+        />
+    );
+};
diff --git a/src/client/util/reportManager/reportManagerSchema.ts b/src/client/util/reportManager/reportManagerSchema.ts
new file mode 100644
index 000000000..9a1c7c3e9
--- /dev/null
+++ b/src/client/util/reportManager/reportManagerSchema.ts
@@ -0,0 +1,877 @@
+/**
+ * Issue interface schema from Github.
+ */
+export interface Issue {
+    active_lock_reason?: null | string;
+    assignee: null | PurpleSimpleUser;
+    assignees?: AssigneeElement[] | null;
+    /**
+     * How the author is associated with the repository.
+     */
+    author_association: AuthorAssociation;
+    /**
+     * Contents of the issue
+     */
+    body?: null | string;
+    body_html?: string;
+    body_text?: string;
+    closed_at: Date | null;
+    closed_by?: null | FluffySimpleUser;
+    comments: number;
+    comments_url: string;
+    created_at: Date;
+    draft?: boolean;
+    events_url: string;
+    html_url: string;
+    id: number;
+    /**
+     * Labels to associate with this issue; pass one or more label names to replace the set of
+     * labels on this issue; send an empty array to clear all labels from the issue; note that
+     * the labels are silently dropped for users without push access to the repository
+     */
+    labels: Array<LabelObject | string>;
+    labels_url: string;
+    locked: boolean;
+    milestone: null | Milestone;
+    node_id: string;
+    /**
+     * Number uniquely identifying the issue within its repository
+     */
+    number: number;
+    performed_via_github_app?: null | GitHubApp;
+    pull_request?: PullRequest;
+    reactions?: ReactionRollup;
+    /**
+     * A repository on GitHub.
+     */
+    repository?: Repository;
+    repository_url: string;
+    /**
+     * State of the issue; either 'open' or 'closed'
+     */
+    state: string;
+    /**
+     * The reason for the current state
+     */
+    state_reason?: StateReason | null;
+    timeline_url?: string;
+    /**
+     * Title of the issue
+     */
+    title: string;
+    updated_at: Date;
+    /**
+     * URL for the issue
+     */
+    url: string;
+    user: null | TentacledSimpleUser;
+    [property: string]: any;
+}
+
+/**
+ * A GitHub user.
+ */
+export interface PurpleSimpleUser {
+    avatar_url: string;
+    email?: null | string;
+    events_url: string;
+    followers_url: string;
+    following_url: string;
+    gists_url: string;
+    gravatar_id: null | string;
+    html_url: string;
+    id: number;
+    login: string;
+    name?: null | string;
+    node_id: string;
+    organizations_url: string;
+    received_events_url: string;
+    repos_url: string;
+    site_admin: boolean;
+    starred_at?: string;
+    starred_url: string;
+    subscriptions_url: string;
+    type: string;
+    url: string;
+    [property: string]: any;
+}
+
+/**
+ * A GitHub user.
+ */
+export interface AssigneeElement {
+    avatar_url: string;
+    email?: null | string;
+    events_url: string;
+    followers_url: string;
+    following_url: string;
+    gists_url: string;
+    gravatar_id: null | string;
+    html_url: string;
+    id: number;
+    login: string;
+    name?: null | string;
+    node_id: string;
+    organizations_url: string;
+    received_events_url: string;
+    repos_url: string;
+    site_admin: boolean;
+    starred_at?: string;
+    starred_url: string;
+    subscriptions_url: string;
+    type: string;
+    url: string;
+    [property: string]: any;
+}
+
+/**
+ * How the author is associated with the repository.
+ */
+export enum AuthorAssociation {
+    Collaborator = 'COLLABORATOR',
+    Contributor = 'CONTRIBUTOR',
+    FirstTimeContributor = 'FIRST_TIME_CONTRIBUTOR',
+    FirstTimer = 'FIRST_TIMER',
+    Mannequin = 'MANNEQUIN',
+    Member = 'MEMBER',
+    None = 'NONE',
+    Owner = 'OWNER',
+}
+
+/**
+ * A GitHub user.
+ */
+export interface FluffySimpleUser {
+    avatar_url: string;
+    email?: null | string;
+    events_url: string;
+    followers_url: string;
+    following_url: string;
+    gists_url: string;
+    gravatar_id: null | string;
+    html_url: string;
+    id: number;
+    login: string;
+    name?: null | string;
+    node_id: string;
+    organizations_url: string;
+    received_events_url: string;
+    repos_url: string;
+    site_admin: boolean;
+    starred_at?: string;
+    starred_url: string;
+    subscriptions_url: string;
+    type: string;
+    url: string;
+    [property: string]: any;
+}
+
+export interface LabelObject {
+    color?: null | string;
+    default?: boolean;
+    description?: null | string;
+    id?: number;
+    name?: string;
+    node_id?: string;
+    url?: string;
+    [property: string]: any;
+}
+
+/**
+ * A collection of related issues and pull requests.
+ */
+export interface Milestone {
+    closed_at: Date | null;
+    closed_issues: number;
+    created_at: Date;
+    creator: null | MilestoneSimpleUser;
+    description: null | string;
+    due_on: Date | null;
+    html_url: string;
+    id: number;
+    labels_url: string;
+    node_id: string;
+    /**
+     * The number of the milestone.
+     */
+    number: number;
+    open_issues: number;
+    /**
+     * The state of the milestone.
+     */
+    state: State;
+    /**
+     * The title of the milestone.
+     */
+    title: string;
+    updated_at: Date;
+    url: string;
+    [property: string]: any;
+}
+
+/**
+ * A GitHub user.
+ */
+export interface MilestoneSimpleUser {
+    avatar_url: string;
+    email?: null | string;
+    events_url: string;
+    followers_url: string;
+    following_url: string;
+    gists_url: string;
+    gravatar_id: null | string;
+    html_url: string;
+    id: number;
+    login: string;
+    name?: null | string;
+    node_id: string;
+    organizations_url: string;
+    received_events_url: string;
+    repos_url: string;
+    site_admin: boolean;
+    starred_at?: string;
+    starred_url: string;
+    subscriptions_url: string;
+    type: string;
+    url: string;
+    [property: string]: any;
+}
+
+/**
+ * The state of the milestone.
+ */
+export enum State {
+    Closed = 'closed',
+    Open = 'open',
+}
+
+/**
+ * GitHub apps are a new way to extend GitHub. They can be installed directly on
+ * organizations and user accounts and granted access to specific repositories. They come
+ * with granular permissions and built-in webhooks. GitHub apps are first class actors
+ * within GitHub.
+ */
+export interface GitHubApp {
+    client_id?: string;
+    client_secret?: string;
+    created_at: Date;
+    description: null | string;
+    /**
+     * The list of events for the GitHub app
+     */
+    events: string[];
+    external_url: string;
+    html_url: string;
+    /**
+     * Unique identifier of the GitHub app
+     */
+    id: number;
+    /**
+     * The number of installations associated with the GitHub app
+     */
+    installations_count?: number;
+    /**
+     * The name of the GitHub app
+     */
+    name: string;
+    node_id: string;
+    owner: null | GitHubAppSimpleUser;
+    pem?: string;
+    /**
+     * The set of permissions for the GitHub app
+     */
+    permissions: GitHubAppPermissions;
+    /**
+     * The slug name of the GitHub app
+     */
+    slug?: string;
+    updated_at: Date;
+    webhook_secret?: null | string;
+    [property: string]: any;
+}
+
+/**
+ * A GitHub user.
+ */
+export interface GitHubAppSimpleUser {
+    avatar_url: string;
+    email?: null | string;
+    events_url: string;
+    followers_url: string;
+    following_url: string;
+    gists_url: string;
+    gravatar_id: null | string;
+    html_url: string;
+    id: number;
+    login: string;
+    name?: null | string;
+    node_id: string;
+    organizations_url: string;
+    received_events_url: string;
+    repos_url: string;
+    site_admin: boolean;
+    starred_at?: string;
+    starred_url: string;
+    subscriptions_url: string;
+    type: string;
+    url: string;
+    [property: string]: any;
+}
+
+/**
+ * The set of permissions for the GitHub app
+ */
+export interface GitHubAppPermissions {
+    checks?: string;
+    contents?: string;
+    deployments?: string;
+    issues?: string;
+    metadata?: string;
+}
+
+export interface PullRequest {
+    diff_url: null | string;
+    html_url: null | string;
+    merged_at?: Date | null;
+    patch_url: null | string;
+    url: null | string;
+    [property: string]: any;
+}
+
+export interface ReactionRollup {
+    '+1': number;
+    '-1': number;
+    confused: number;
+    eyes: number;
+    heart: number;
+    hooray: number;
+    laugh: number;
+    rocket: number;
+    total_count: number;
+    url: string;
+    [property: string]: any;
+}
+
+/**
+ * A repository on GitHub.
+ */
+export interface Repository {
+    /**
+     * Whether to allow Auto-merge to be used on pull requests.
+     */
+    allow_auto_merge?: boolean;
+    /**
+     * Whether to allow forking this repo
+     */
+    allow_forking?: boolean;
+    /**
+     * Whether to allow merge commits for pull requests.
+     */
+    allow_merge_commit?: boolean;
+    /**
+     * Whether to allow rebase merges for pull requests.
+     */
+    allow_rebase_merge?: boolean;
+    /**
+     * Whether to allow squash merges for pull requests.
+     */
+    allow_squash_merge?: boolean;
+    /**
+     * Whether or not a pull request head branch that is behind its base branch can always be
+     * updated even if it is not required to be up to date before merging.
+     */
+    allow_update_branch?: boolean;
+    /**
+     * Whether anonymous git access is enabled for this repository
+     */
+    anonymous_access_enabled?: boolean;
+    archive_url: string;
+    /**
+     * Whether the repository is archived.
+     */
+    archived: boolean;
+    assignees_url: string;
+    blobs_url: string;
+    branches_url: string;
+    clone_url: string;
+    collaborators_url: string;
+    comments_url: string;
+    commits_url: string;
+    compare_url: string;
+    contents_url: string;
+    contributors_url: string;
+    created_at: Date | null;
+    /**
+     * The default branch of the repository.
+     */
+    default_branch: string;
+    /**
+     * Whether to delete head branches when pull requests are merged
+     */
+    delete_branch_on_merge?: boolean;
+    deployments_url: string;
+    description: null | string;
+    /**
+     * Returns whether or not this repository disabled.
+     */
+    disabled: boolean;
+    downloads_url: string;
+    events_url: string;
+    fork: boolean;
+    forks: number;
+    forks_count: number;
+    forks_url: string;
+    full_name: string;
+    git_commits_url: string;
+    git_refs_url: string;
+    git_tags_url: string;
+    git_url: string;
+    /**
+     * Whether discussions are enabled.
+     */
+    has_discussions?: boolean;
+    /**
+     * Whether downloads are enabled.
+     */
+    has_downloads: boolean;
+    /**
+     * Whether issues are enabled.
+     */
+    has_issues: boolean;
+    has_pages: boolean;
+    /**
+     * Whether projects are enabled.
+     */
+    has_projects: boolean;
+    /**
+     * Whether the wiki is enabled.
+     */
+    has_wiki: boolean;
+    homepage: null | string;
+    hooks_url: string;
+    html_url: string;
+    /**
+     * Unique identifier of the repository
+     */
+    id: number;
+    /**
+     * Whether this repository acts as a template that can be used to generate new repositories.
+     */
+    is_template?: boolean;
+    issue_comment_url: string;
+    issue_events_url: string;
+    issues_url: string;
+    keys_url: string;
+    labels_url: string;
+    language: null | string;
+    languages_url: string;
+    license: null | LicenseSimple;
+    master_branch?: string;
+    /**
+     * The default value for a merge commit message.
+     *
+     * - `PR_TITLE` - default to the pull request's title.
+     * - `PR_BODY` - default to the pull request's body.
+     * - `BLANK` - default to a blank commit message.
+     */
+    merge_commit_message?: MergeCommitMessage;
+    /**
+     * The default value for a merge commit title.
+     *
+     * - `PR_TITLE` - default to the pull request's title.
+     * - `MERGE_MESSAGE` - default to the classic title for a merge message (e.g., Merge pull
+     * request #123 from branch-name).
+     */
+    merge_commit_title?: MergeCommitTitle;
+    merges_url: string;
+    milestones_url: string;
+    mirror_url: null | string;
+    /**
+     * The name of the repository.
+     */
+    name: string;
+    network_count?: number;
+    node_id: string;
+    notifications_url: string;
+    open_issues: number;
+    open_issues_count: number;
+    organization?: null | RepositorySimpleUser;
+    /**
+     * A GitHub user.
+     */
+    owner: OwnerObject;
+    permissions?: RepositoryPermissions;
+    /**
+     * Whether the repository is private or public.
+     */
+    private: boolean;
+    pulls_url: string;
+    pushed_at: Date | null;
+    releases_url: string;
+    /**
+     * The size of the repository. Size is calculated hourly. When a repository is initially
+     * created, the size is 0.
+     */
+    size: number;
+    /**
+     * The default value for a squash merge commit message:
+     *
+     * - `PR_BODY` - default to the pull request's body.
+     * - `COMMIT_MESSAGES` - default to the branch's commit messages.
+     * - `BLANK` - default to a blank commit message.
+     */
+    squash_merge_commit_message?: SquashMergeCommitMessage;
+    /**
+     * The default value for a squash merge commit title:
+     *
+     * - `PR_TITLE` - default to the pull request's title.
+     * - `COMMIT_OR_PR_TITLE` - default to the commit's title (if only one commit) or the pull
+     * request's title (when more than one commit).
+     */
+    squash_merge_commit_title?: SquashMergeCommitTitle;
+    ssh_url: string;
+    stargazers_count: number;
+    stargazers_url: string;
+    starred_at?: string;
+    statuses_url: string;
+    subscribers_count?: number;
+    subscribers_url: string;
+    subscription_url: string;
+    svn_url: string;
+    tags_url: string;
+    teams_url: string;
+    temp_clone_token?: string;
+    template_repository?: null | TemplateRepository;
+    topics?: string[];
+    trees_url: string;
+    updated_at: Date | null;
+    url: string;
+    /**
+     * Whether a squash merge commit can use the pull request title as default. **This property
+     * has been deprecated. Please use `squash_merge_commit_title` instead.
+     */
+    use_squash_pr_title_as_default?: boolean;
+    /**
+     * The repository visibility: public, private, or internal.
+     */
+    visibility?: string;
+    watchers: number;
+    watchers_count: number;
+    /**
+     * Whether to require contributors to sign off on web-based commits
+     */
+    web_commit_signoff_required?: boolean;
+    [property: string]: any;
+}
+
+/**
+ * License Simple
+ */
+export interface LicenseSimple {
+    html_url?: string;
+    key: string;
+    name: string;
+    node_id: string;
+    spdx_id: null | string;
+    url: null | string;
+    [property: string]: any;
+}
+
+/**
+ * The default value for a merge commit message.
+ *
+ * - `PR_TITLE` - default to the pull request's title.
+ * - `PR_BODY` - default to the pull request's body.
+ * - `BLANK` - default to a blank commit message.
+ */
+export enum MergeCommitMessage {
+    Blank = 'BLANK',
+    PRBody = 'PR_BODY',
+    PRTitle = 'PR_TITLE',
+}
+
+/**
+ * The default value for a merge commit title.
+ *
+ * - `PR_TITLE` - default to the pull request's title.
+ * - `MERGE_MESSAGE` - default to the classic title for a merge message (e.g., Merge pull
+ * request #123 from branch-name).
+ */
+export enum MergeCommitTitle {
+    MergeMessage = 'MERGE_MESSAGE',
+    PRTitle = 'PR_TITLE',
+}
+
+/**
+ * A GitHub user.
+ */
+export interface RepositorySimpleUser {
+    avatar_url: string;
+    email?: null | string;
+    events_url: string;
+    followers_url: string;
+    following_url: string;
+    gists_url: string;
+    gravatar_id: null | string;
+    html_url: string;
+    id: number;
+    login: string;
+    name?: null | string;
+    node_id: string;
+    organizations_url: string;
+    received_events_url: string;
+    repos_url: string;
+    site_admin: boolean;
+    starred_at?: string;
+    starred_url: string;
+    subscriptions_url: string;
+    type: string;
+    url: string;
+    [property: string]: any;
+}
+
+/**
+ * A GitHub user.
+ */
+export interface OwnerObject {
+    avatar_url: string;
+    email?: null | string;
+    events_url: string;
+    followers_url: string;
+    following_url: string;
+    gists_url: string;
+    gravatar_id: null | string;
+    html_url: string;
+    id: number;
+    login: string;
+    name?: null | string;
+    node_id: string;
+    organizations_url: string;
+    received_events_url: string;
+    repos_url: string;
+    site_admin: boolean;
+    starred_at?: string;
+    starred_url: string;
+    subscriptions_url: string;
+    type: string;
+    url: string;
+    [property: string]: any;
+}
+
+export interface RepositoryPermissions {
+    admin: boolean;
+    maintain?: boolean;
+    pull: boolean;
+    push: boolean;
+    triage?: boolean;
+    [property: string]: any;
+}
+
+/**
+ * The default value for a squash merge commit message:
+ *
+ * - `PR_BODY` - default to the pull request's body.
+ * - `COMMIT_MESSAGES` - default to the branch's commit messages.
+ * - `BLANK` - default to a blank commit message.
+ */
+export enum SquashMergeCommitMessage {
+    Blank = 'BLANK',
+    CommitMessages = 'COMMIT_MESSAGES',
+    PRBody = 'PR_BODY',
+}
+
+/**
+ * The default value for a squash merge commit title:
+ *
+ * - `PR_TITLE` - default to the pull request's title.
+ * - `COMMIT_OR_PR_TITLE` - default to the commit's title (if only one commit) or the pull
+ * request's title (when more than one commit).
+ */
+export enum SquashMergeCommitTitle {
+    CommitOrPRTitle = 'COMMIT_OR_PR_TITLE',
+    PRTitle = 'PR_TITLE',
+}
+
+export interface TemplateRepository {
+    allow_auto_merge?: boolean;
+    allow_merge_commit?: boolean;
+    allow_rebase_merge?: boolean;
+    allow_squash_merge?: boolean;
+    allow_update_branch?: boolean;
+    archive_url?: string;
+    archived?: boolean;
+    assignees_url?: string;
+    blobs_url?: string;
+    branches_url?: string;
+    clone_url?: string;
+    collaborators_url?: string;
+    comments_url?: string;
+    commits_url?: string;
+    compare_url?: string;
+    contents_url?: string;
+    contributors_url?: string;
+    created_at?: string;
+    default_branch?: string;
+    delete_branch_on_merge?: boolean;
+    deployments_url?: string;
+    description?: string;
+    disabled?: boolean;
+    downloads_url?: string;
+    events_url?: string;
+    fork?: boolean;
+    forks_count?: number;
+    forks_url?: string;
+    full_name?: string;
+    git_commits_url?: string;
+    git_refs_url?: string;
+    git_tags_url?: string;
+    git_url?: string;
+    has_downloads?: boolean;
+    has_issues?: boolean;
+    has_pages?: boolean;
+    has_projects?: boolean;
+    has_wiki?: boolean;
+    homepage?: string;
+    hooks_url?: string;
+    html_url?: string;
+    id?: number;
+    is_template?: boolean;
+    issue_comment_url?: string;
+    issue_events_url?: string;
+    issues_url?: string;
+    keys_url?: string;
+    labels_url?: string;
+    language?: string;
+    languages_url?: string;
+    /**
+     * The default value for a merge commit message.
+     *
+     * - `PR_TITLE` - default to the pull request's title.
+     * - `PR_BODY` - default to the pull request's body.
+     * - `BLANK` - default to a blank commit message.
+     */
+    merge_commit_message?: MergeCommitMessage;
+    /**
+     * The default value for a merge commit title.
+     *
+     * - `PR_TITLE` - default to the pull request's title.
+     * - `MERGE_MESSAGE` - default to the classic title for a merge message (e.g., Merge pull
+     * request #123 from branch-name).
+     */
+    merge_commit_title?: MergeCommitTitle;
+    merges_url?: string;
+    milestones_url?: string;
+    mirror_url?: string;
+    name?: string;
+    network_count?: number;
+    node_id?: string;
+    notifications_url?: string;
+    open_issues_count?: number;
+    owner?: Owner;
+    permissions?: TemplateRepositoryPermissions;
+    private?: boolean;
+    pulls_url?: string;
+    pushed_at?: string;
+    releases_url?: string;
+    size?: number;
+    /**
+     * The default value for a squash merge commit message:
+     *
+     * - `PR_BODY` - default to the pull request's body.
+     * - `COMMIT_MESSAGES` - default to the branch's commit messages.
+     * - `BLANK` - default to a blank commit message.
+     */
+    squash_merge_commit_message?: SquashMergeCommitMessage;
+    /**
+     * The default value for a squash merge commit title:
+     *
+     * - `PR_TITLE` - default to the pull request's title.
+     * - `COMMIT_OR_PR_TITLE` - default to the commit's title (if only one commit) or the pull
+     * request's title (when more than one commit).
+     */
+    squash_merge_commit_title?: SquashMergeCommitTitle;
+    ssh_url?: string;
+    stargazers_count?: number;
+    stargazers_url?: string;
+    statuses_url?: string;
+    subscribers_count?: number;
+    subscribers_url?: string;
+    subscription_url?: string;
+    svn_url?: string;
+    tags_url?: string;
+    teams_url?: string;
+    temp_clone_token?: string;
+    topics?: string[];
+    trees_url?: string;
+    updated_at?: string;
+    url?: string;
+    use_squash_pr_title_as_default?: boolean;
+    visibility?: string;
+    watchers_count?: number;
+    [property: string]: any;
+}
+
+export interface Owner {
+    avatar_url?: string;
+    events_url?: string;
+    followers_url?: string;
+    following_url?: string;
+    gists_url?: string;
+    gravatar_id?: string;
+    html_url?: string;
+    id?: number;
+    login?: string;
+    node_id?: string;
+    organizations_url?: string;
+    received_events_url?: string;
+    repos_url?: string;
+    site_admin?: boolean;
+    starred_url?: string;
+    subscriptions_url?: string;
+    type?: string;
+    url?: string;
+    [property: string]: any;
+}
+
+export interface TemplateRepositoryPermissions {
+    admin?: boolean;
+    maintain?: boolean;
+    pull?: boolean;
+    push?: boolean;
+    triage?: boolean;
+    [property: string]: any;
+}
+
+export enum StateReason {
+    Completed = 'completed',
+    NotPlanned = 'not_planned',
+    Reopened = 'reopened',
+}
+
+/**
+ * A GitHub user.
+ */
+export interface TentacledSimpleUser {
+    avatar_url: string;
+    email?: null | string;
+    events_url: string;
+    followers_url: string;
+    following_url: string;
+    gists_url: string;
+    gravatar_id: null | string;
+    html_url: string;
+    id: number;
+    login: string;
+    name?: null | string;
+    node_id: string;
+    organizations_url: string;
+    received_events_url: string;
+    repos_url: string;
+    site_admin: boolean;
+    starred_at?: string;
+    starred_url: string;
+    subscriptions_url: string;
+    type: string;
+    url: string;
+    [property: string]: any;
+}
diff --git a/src/client/util/reportManager/reportManagerUtils.ts b/src/client/util/reportManager/reportManagerUtils.ts
new file mode 100644
index 000000000..b95417aa1
--- /dev/null
+++ b/src/client/util/reportManager/reportManagerUtils.ts
@@ -0,0 +1,254 @@
+// Final file url reference: "https://browndash.com/files/images/upload_cb31bc0fda59c96ca14193ec494f80cf_o.jpg" />
+
+import { Octokit } from '@octokit/core';
+import { Networking } from '../../Network';
+import { Issue } from './reportManagerSchema';
+
+// enums and interfaces
+
+export enum ViewState {
+    VIEW,
+    CREATE,
+}
+
+export enum Priority {
+    HIGH = 'priority-high',
+    MEDIUM = 'priority-medium',
+    LOW = 'priority-low',
+}
+
+export enum BugType {
+    BUG = 'bug',
+    COSMETIC = 'cosmetic',
+    DOCUMENTATION = 'documentation',
+    ENHANCEMENT = 'enhancement',
+}
+
+export interface FileData {
+    _id: string;
+    file: File;
+}
+
+export interface ReportForm {
+    title: string;
+    description: string;
+    type: BugType;
+    priority: Priority;
+    mediaFiles: FileData[];
+}
+
+export type ReportFormKey = keyof ReportForm;
+
+export const emptyReportForm = {
+    title: '',
+    description: '',
+    type: BugType.BUG,
+    priority: Priority.MEDIUM,
+    mediaFiles: [],
+};
+
+// interfacing with Github
+
+/**
+ * Fetches issues from Github.
+ * @returns array of all issues
+ */
+export const getAllIssues = async (octokit: Octokit): Promise<any[]> => {
+    const res = await octokit.request('GET /repos/{owner}/{repo}/issues', {
+        owner: 'brown-dash',
+        repo: 'Dash-Web',
+        per_page: 80,
+    });
+
+    // 200 status means success
+    if (res.status === 200) {
+        return res.data;
+    } else {
+        throw new Error('Error getting issues');
+    }
+};
+
+/**
+ * Formats issue title.
+ *
+ * @param title title of issue
+ * @param userEmail email of issue submitter
+ * @returns formatted title
+ */
+export const formatTitle = (title: string, userEmail: string): string => `${title} - ${userEmail.replace('@brown.edu', '')}`;
+
+// uploading
+
+// turns an upload link -> server link
+// ex:
+// C: /Users/dash/Documents/GitHub/Dash-Web/src/server/public/files/images/upload_8008dbc4b6424fbff14da7345bb32eb2.png
+// -> https://browndash.com/files/images/upload_8008dbc4b6424fbff14da7345bb32eb2_l.png
+export const fileLinktoServerLink = (fileLink: string): string => {
+    const serverUrl = window.location.href.includes('browndash') ? 'https://browndash.com/' : 'http://localhost:1050/';
+
+    const regex = 'public';
+    const publicIndex = fileLink.indexOf(regex) + regex.length;
+
+    const finalUrl = `${serverUrl}${fileLink.substring(publicIndex + 1).replace('.', '_l.')}`;
+    return finalUrl;
+};
+
+/**
+ * Gets the server file path.
+ *
+ * @param link response from file upload
+ * @returns server file path
+ */
+export const getServerPath = (link: any): string => {
+    return link.result.accessPaths.agnostic.server as string;
+};
+
+/**
+ * Uploads media files to the server.
+ * @returns the server paths or undefined on error
+ */
+export const uploadFilesToServer = async (mediaFiles: FileData[]): Promise<string[] | undefined> => {
+    try {
+        // need to always upload to browndash
+        const links = await Networking.UploadFilesToServer(mediaFiles.map(file => ({ file: file.file })));
+        return (links ?? []).map(getServerPath).map(fileLinktoServerLink);
+    } catch (err) {
+        if (err instanceof Error) {
+            alert(err.message);
+        } else {
+            alert(err);
+        }
+    }
+};
+
+// helper functions
+
+/**
+ * Returns when the issue passes the current filters.
+ *
+ * @param issue issue to check
+ * @returns boolean indicating whether the issue passes the current filters
+ */
+export const passesTagFilter = (issue: Issue, priorityFilter: string | null, bugFilter: string | null) => {
+    let passesPriority = true;
+    let passesBug = true;
+    if (priorityFilter) {
+        passesPriority = issue.labels.some(label => {
+            if (typeof label === 'string') {
+                return label === priorityFilter;
+            } else {
+                return label.name === priorityFilter;
+            }
+        });
+    }
+    if (bugFilter) {
+        passesBug = issue.labels.some(label => {
+            if (typeof label === 'string') {
+                return label === bugFilter;
+            } else {
+                return label.name === bugFilter;
+            }
+        });
+    }
+    return passesPriority && passesBug;
+};
+
+// sets and lists
+
+export const prioritySet = new Set(Object.values(Priority));
+export const bugSet = new Set(Object.values(BugType));
+
+export const priorityDropdownItems = [
+    {
+        text: 'Low',
+        val: Priority.LOW,
+    },
+    {
+        text: 'Medium',
+        val: Priority.MEDIUM,
+    },
+    {
+        text: 'High',
+        val: Priority.HIGH,
+    },
+];
+
+export const bugDropdownItems = [
+    {
+        text: 'Bug',
+        val: BugType.BUG,
+    },
+    {
+        text: 'Poor Design or Cosmetic',
+        val: BugType.COSMETIC,
+    },
+    {
+        text: 'Documentation',
+        val: BugType.DOCUMENTATION,
+    },
+    {
+        text: 'New feature or request',
+        val: BugType.ENHANCEMENT,
+    },
+];
+
+// colors
+
+// [bgColor, color]
+export const priorityColors: { [key: string]: string[] } = {
+    'priority-low': ['#d4e0ff', '#000000'],
+    'priority-medium': ['#6a91f6', '#ffffff'],
+    'priority-high': ['#003cd5', '#ffffff'],
+};
+
+// [bgColor, color]
+export const bugColors: { [key: string]: string[] } = {
+    bug: ['#fe6d6d', '#ffffff'],
+    cosmetic: ['#c650f4', '#ffffff'],
+    documentation: ['#36acf0', '#ffffff'],
+    enhancement: ['#36d4f0', '#ffffff'],
+};
+
+export const getLabelColors = (label: string): string[] => {
+    if (prioritySet.has(label as Priority)) {
+        return priorityColors[label];
+    } else if (bugSet.has(label as BugType)) {
+        return bugColors[label];
+    }
+    return ['#0f73f6', '#ffffff'];
+};
+
+const hexToRgb = (hex: string) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+              r: parseInt(result[1], 16),
+              g: parseInt(result[2], 16),
+              b: parseInt(result[3], 16),
+          }
+        : {
+              r: 0,
+              g: 0,
+              b: 0,
+          };
+};
+
+// function that returns whether text should be light on the given bg color
+export const isDarkMode = (bgHex: string): boolean => {
+    const { r, g, b } = hexToRgb(bgHex);
+    return r * 0.299 + g * 0.587 + b * 0.114 <= 186;
+};
+
+export const lightColors = {
+    text: '#000000',
+    textGrey: '#5c5c5c',
+    border: '#b8b8b8',
+};
+
+export const darkColors = {
+    text: '#ffffff',
+    textGrey: '#d6d6d6',
+    border: '#717171',
+};
+
+export const dashBlue = '#4476f7';
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index 1a5781df0..ae55c8ebf 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -199,7 +199,7 @@ export class DashboardView extends React.Component {
                                 <div 
                                     className="dashboard-container" 
                                     key={dashboard[Id]} 
-                                    style={{ background: this.isUnviewedSharedDashboard(dashboard) && this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? 'green' : shared ? 'blue' : '' }}
+                                    style={{ background: this.isUnviewedSharedDashboard(dashboard) && this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? '#6CB982' : shared ? variant : '' }}
                                     onContextMenu={e => this.onContextMenu(dashboard, e)} 
                                     onClick={e => this.clickDashboard(e, dashboard)}>
                                     <img
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index a41fc8ded..8fe5c2e01 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -145,7 +145,7 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps>()
             const toRemove = value.filter(v => docs.includes(v));
 
             if (toRemove.length !== 0) {
-                const recent = Doc.MyRecentlyClosed;
+                const recent = this.rootDoc !== Doc.MyRecentlyClosed ? Doc.MyRecentlyClosed : undefined;
                 toRemove.forEach(doc => {
                     leavePushpin && DocUtils.LeavePushpin(doc, annotationKey ?? this.annotationKey);
                     Doc.RemoveDocFromList(targetDataDoc, annotationKey ?? this.annotationKey, doc);
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 16f5ad168..6f5e9f5c0 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -589,7 +589,6 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                     <div style={{ position: 'absolute', zIndex: 1000 }}>
                         <LinkPopup
                             key="popup"
-                            showPopup={this._showLinkPopup}
                             linkCreated={link => (link.link_displayLine = !IsFollowLinkScript(this.props.views().lastElement()?.rootDoc.onClick))}
                             linkCreateAnchor={() => this.props.views().lastElement()?.ComponentView?.getAnchor?.(true)}
                             linkFrom={() => this.props.views().lastElement()?.rootDoc}
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 3522830e5..956dac555 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -831,7 +831,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                     &nbsp;
                     {shareSymbolIcon + ' ' + shareMode}
                     &nbsp;
-                    {!Doc.noviceMode ? (
+                    {/* {!Doc.noviceMode ? (
                         <div className="checkbox">
                             <div className="checkbox-box">
                                 <input type="checkbox" checked={this.showLayoutAcl} onChange={action(() => (this.showLayoutAcl = !this.showLayoutAcl))} />
@@ -839,7 +839,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                             <div className="checkbox-text"> Layout </div>
                         </div>
                     ) : null}
-                    &nbsp;
+                    &nbsp; */}
                 </div>
             </div>
         ) : (
@@ -911,7 +911,13 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                                 width: bounds.r - bounds.x + this._resizeBorderWidth + 'px',
                                 height: bounds.b - bounds.y + this._resizeBorderWidth + this._titleHeight + 'px',
                             }}>
-                            <div className="documentDecorations-topbar" style={{ display: hideDeleteButton && hideTitle && hideOpenButton ? 'none' : undefined }} onPointerDown={this.onContainerDown}>
+                            <div
+                                className="documentDecorations-topbar"
+                                style={{
+                                    color: 'black',
+                                    display: hideDeleteButton && hideTitle && hideOpenButton ? 'none' : undefined,
+                                }}
+                                onPointerDown={this.onContainerDown}>
                                 {hideDeleteButton ? null : topBtn('close', 'times', undefined, e => this.onCloseClick(true), 'Close')}
                                 {hideResizers || hideDeleteButton ? null : topBtn('minimize', 'window-maximize', undefined, e => this.onCloseClick(undefined), 'Minimize')}
                                 {titleArea}
diff --git a/src/client/views/InkTranscription.tsx b/src/client/views/InkTranscription.tsx
index c39fa79da..6c213f40f 100644
--- a/src/client/views/InkTranscription.tsx
+++ b/src/client/views/InkTranscription.tsx
@@ -105,7 +105,7 @@ export class InkTranscription extends React.Component {
                 : null;
         }
 
-        r.addEventListener('exported', (e: any) => this.exportInk(e, this._textRef));
+        r?.addEventListener('exported', (e: any) => this.exportInk(e, this._textRef));
 
         return (this._textRef = r);
     };
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 86e8bab13..cbaa763f5 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -21,7 +21,7 @@ import { DocumentManager } from '../util/DocumentManager';
 import { GroupManager } from '../util/GroupManager';
 import { HistoryUtil } from '../util/History';
 import { Hypothesis } from '../util/HypothesisUtils';
-import { ReportManager } from '../util/ReportManager';
+import { ReportManager } from '../util/reportManager/ReportManager';
 import { RTFMarkup } from '../util/RTFMarkup';
 import { ScriptingGlobals } from '../util/ScriptingGlobals';
 import { SelectionManager } from '../util/SelectionManager';
@@ -49,7 +49,6 @@ import { InkTranscription } from './InkTranscription';
 import { LightboxView } from './LightboxView';
 import { LinkMenu } from './linking/LinkMenu';
 import './MainView.scss';
-import { NewLightboxView } from './newlightbox/NewLightboxView';
 import { AudioBox } from './nodes/AudioBox';
 import { DocumentLinksButton } from './nodes/DocumentLinksButton';
 import { DocumentView, DocumentViewInternal, OpenWhere, OpenWhereMod } from './nodes/DocumentView';
@@ -215,7 +214,7 @@ export class MainView extends React.Component {
         window.removeEventListener('keydown', KeyManager.Instance.handle);
         window.removeEventListener('pointerdown', this.globalPointerDown, true);
         window.removeEventListener('pointermove', this.globalPointerMove, true);
-        window.removeEventListener('mouseclick', this.globalPointerClick, true);
+        window.removeEventListener('pointerup', this.globalPointerClick, true);
         window.removeEventListener('paste', KeyManager.Instance.paste as any);
         document.removeEventListener('linkAnnotationToDash', Hypothesis.linkListener);
     }
@@ -534,7 +533,7 @@ export class MainView extends React.Component {
         // document.addEventListener("pointermove", action(e => SearchBox.Instance._undoBackground = UndoManager.batchCounter ? "#000000a8" : undefined));
         document.addEventListener('pointerdown', this.globalPointerDown, true);
         document.addEventListener('pointermove', this.globalPointerMove, true);
-        document.addEventListener('mouseclick', this.globalPointerClick, true);
+        document.addEventListener('pointerup', this.globalPointerClick, true);
         document.addEventListener(
             'click',
             (e: MouseEvent) => {
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 2e3668268..b74eabcc3 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -244,10 +244,10 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @computed get layout_autoHeightButton() {
         // store previous dimensions to store old values
         return this.propertyToggleBtn(
-            on => 'Auto\xA0Size',
+            on => (on ? 'AUTO\xA0SIZE' : 'FIXED SIZE'),
             '_layout_autoHeight',
             on => `Automatical vertical sizing to show all content`,
-            on => 'arrows-alt-v'
+            on => <FontAwesomeIcon icon="arrows-alt-v" size="lg" />
         );
     }
 
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 23bf31b95..f7dc1dc68 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -53,16 +53,6 @@
                     padding: 0;
                     margin-top: -5;
                 }
-
-                .propertiesView-acls-checkbox {
-                    margin-top: -15px;
-                    margin-bottom: -10px;
-
-                    .propertiesView-acls-checkbox-text {
-                        display: inline;
-                        font-size: 9px;
-                    }
-                }
             }
 
             .change-buttons {
@@ -79,14 +69,19 @@
             }
     }
 
+    .propertiesView-acls-checkbox {
+        float: right;
+        margin-left: 50px;
+    }
+
     .propertiesView-shareDropDown{
         margin-right: 10px;
         min-width: 65px;
         
         & .propertiesView-shareDropDownNone{
-            height: 16px;
             padding: 0px;
             padding-left: 3px;
+            padding-right: 3px;
             background: grey;
             color: rgb(71, 71, 71);
             border-radius: 6px;
@@ -94,18 +89,18 @@
         }
         & .propertiesView-shareDropDownEdit,
         .propertiesView-shareDropDownAdmin{
-            height: 16px;
             padding: 0px;
             padding-left: 3px;
+            padding-right: 3px;
             background: rgb(254, 254, 199);
             color: rgb(75, 75, 5);
             border-radius: 6px;
             border: 1px solid rgb(75, 75, 5);
         }
         & .propertiesView-shareDropDownAugment{
-            height: 16px;
             padding: 0px;
             padding-left: 3px;
+            padding-right: 3px;
             background: rgb(208, 255, 208);
             color:rgb(19, 80, 19);
             border-radius: 6px;
@@ -113,18 +108,18 @@
 
         }
         & .propertiesView-shareDropDownView{
-            height: 16px;
             padding: 0px;
             padding-left: 3px;
+            padding-right: 3px;
             background: rgb(213, 213, 255);
             color: rgb(25, 25, 101);
             border-radius: 6px;
             border: 1px solid rgb(25, 25, 101);
         }
         & .propertiesView-shareDropDownNot-Shared{
-            height: 16px;
             padding: 0px;
             padding-left: 3px;
+            padding-right: 3px;
             background: rgb(255, 207, 207);
             color: rgb(138, 47, 47);
             border-radius: 6px;
@@ -188,19 +183,7 @@
     }
 
     .expansion-button {
-        margin-left: -15px;
-        margin-right: 20px;
-
-        .expansion-button-icon {
-            width: 11px;
-            height: 11px;
-            color: black;
-
-            &:hover {
-                color: rgb(131, 131, 131);
-                cursor: pointer;
-            }
-        }
+        margin-right: 10px;
     }
 
     .propertiesView-sharingTable {
@@ -249,6 +232,11 @@
         }
     }
 
+    .propertiesView-permissions-select {
+        background: inherit;
+        border: none;
+    }
+
     .propertiesView-field {
         display: flex;
         font-size: 7px;
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 3ad60865d..35ca5dea4 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -3,7 +3,7 @@ import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Checkbox, Tooltip } from '@material-ui/core';
-import { Button, Colors, EditableText, NumberInput, Size, Slider, Type } from 'browndash-components';
+import { Button, Colors, EditableText, IconButton, NumberInput, Size, Slider, Type } from 'browndash-components';
 import { concat } from 'lodash';
 import { Lambda, action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -367,17 +367,18 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
      */
     @computed get expansionIcon() {
         return (
-            <Tooltip title={<div className="dash-tooltip">Show more permissions</div>}>
-                <div
-                    className="expansion-button"
-                    onPointerDown={() => {
+            <div className="expansion-button" >
+                <IconButton 
+                    icon={<FontAwesomeIcon icon={'ellipsis-h'} />} 
+                    size={Size.XSMALL} 
+                    color={StrCast(Doc.UserDoc().userColor)} 
+                    onClick={action(() => {
                         if (this.selectedDocumentView || this.selectedDoc) {
                             SharingManager.Instance.open(this.selectedDocumentView?.props.Document === this.selectedDoc ? this.selectedDocumentView : undefined, this.selectedDoc);
                         }
-                    }}>
-                    <FontAwesomeIcon className="expansion-button-icon" icon="ellipsis-h" color="black" size="sm" />
-                </div>
-            </Tooltip>
+                    })} 
+                />
+            </div>
         );
     }
 
@@ -417,7 +418,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             <div>
                 <div className={'propertiesView-shareDropDown'}>
                     <div className={`propertiesView-shareDropDown${permission}`}>
-                        <div className="propertiesView-shareDropDown">{admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission, showGuestOptions) : concat(shareImage, ' ', permission)}</div>
+                        <div >{admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission, showGuestOptions) : concat(shareImage, ' ', permission)}</div>
                     </div>
                 </div>
             </div>
@@ -449,6 +450,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         const target = docs[0];
 
         const showAdmin = GetEffectiveAcl(target) == AclAdmin;
+        console.log(GetEffectiveAcl(target), Doc.GetProto(target)[`acl-${normalizeEmail(Doc.CurrentUserEmail)}`])
         const individualTableEntries = [];
         const usersAdded: string[] = []; // all shared users being added - organized by denormalized email
 
@@ -512,28 +514,29 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             }
         });
 
-        // public permission
-        const publicPermission = StrCast((this.layoutDocAcls ? target : Doc.GetProto(target))['acl-Guest']);
+        // guest permission
+        const guestPermission = StrCast((this.layoutDocAcls ? target : Doc.GetProto(target))['acl-Guest']);
 
         return (
             <div>
-                <br />
-                <div className="propertiesView-sharingTable">{<div> {individualTableEntries}</div>}</div>
+                <div>
+                    <br></br> Individuals with Access to this Document
+                </div>
+                <div className="propertiesView-sharingTable" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+                    {<div> {individualTableEntries}</div>}
+                </div>
                 {groupTableEntries.length > 0 ? (
                     <div>
                         <div>
-                            {' '}
-                            <br></br> Groups with Access to this Document{' '}
+                            <br></br> Groups with Access to this Document
+                        </div>
+                        <div className="propertiesView-sharingTable" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+                            {<div> {groupTableEntries}</div>}
                         </div>
-                        <div className="propertiesView-sharingTable">{<div> {groupTableEntries}</div>}</div>
                     </div>
                 ) : null}
-                Guest
-                <div>{this.colorACLDropDown('Guest', true, publicPermission!, true)}</div>
-                <div>
-                    {' '}
-                    <br></br> Individual Users with Access to this Document{' '}
-                </div>
+                <br></br> Guest
+                <div>{this.colorACLDropDown('Guest', showAdmin, guestPermission!, true)}</div>
             </div>
         );
     }
@@ -1146,26 +1149,17 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return <PropertiesSection
             title="Sharing & Permissions"
             content={<>
-            <div className="propertiesView-buttonContainer">
-                {!Doc.noviceMode ? (
-                        <div className="propertiesView-buttonContainer">
-                        <div className="propertiesView-acls-checkbox">
-                            <div className="propertiesView-acls-checkbox-text"> Show / Contol Layout Permissions </div>
-                            <Checkbox color="primary" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} />
-                        </div>
-                        {/* <Tooltip title={<><div className="dash-tooltip">{"Re-distribute sharing settings"}</div></>}>
-                                    <button onPointerDown={() => SharingManager.Instance.distributeOverCollection(this.selectedDoc!)}>
-                                        <FontAwesomeIcon icon="redo-alt" color="white" size="1x" />
-                                    </button>
-                                </Tooltip> */}
-                        </div>
-                    ) : null}
+            {/* <div className="propertiesView-buttonContainer"> */}
+                    <div className="propertiesView-acls-checkbox">
+                        Layout Permissions
+                        <Checkbox color="primary" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} />
+                    </div>
                     {/* <Tooltip title={<><div className="dash-tooltip">{"Re-distribute sharing settings"}</div></>}>
                         <button onPointerDown={() => SharingManager.Instance.distributeOverCollection(this.selectedDoc!)}>
                             <FontAwesomeIcon icon="redo-alt"  size="1x" />
                         </button>
                     </Tooltip> */}
-                </div>
+                {/* </div> */}
                 {this.sharingTable}
             </>}
             isOpen={this.openSharing}
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index a4c5229aa..d93015506 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -176,6 +176,7 @@
         display: flex;
         align-content: center;
         justify-content: center;
+        background: $dark-gray;
     }
 
     .lm_controls > li {
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 6f88f6727..22beb19de 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -8,7 +8,7 @@ import { Id } from '../../../fields/FieldSymbols';
 import { PastelSchemaPalette, SchemaHeaderField } from '../../../fields/SchemaHeaderField';
 import { ScriptField } from '../../../fields/ScriptField';
 import { NumCast, StrCast } from '../../../fields/Types';
-import { emptyFunction, numberRange, returnEmptyString, setupMoveUpEvents } from '../../../Utils';
+import { emptyFunction, numberRange, returnEmptyString, returnFalse, setupMoveUpEvents } from '../../../Utils';
 import { Docs } from '../../documents/Documents';
 import { DragManager } from '../../util/DragManager';
 import { CompileScript } from '../../util/Scripting';
@@ -252,10 +252,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         return (
             <div className="collectionStackingView-optionPicker">
                 <div className="optionOptions">
-                    <div className={'optionPicker' + (selected === true ? ' active' : '')} onClick={this.toggleEmbedding}>
-                        Create Embedding
-                    </div>
-                    <div className={'optionPicker' + (selected === true ? ' active' : '')} onClick={this.deleteRow}>
+                    <div className={'optionPicker' + (selected === true ? ' active' : '')} onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, this.deleteRow)}>
                         Delete
                     </div>
                 </div>
@@ -273,13 +270,16 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         const stackPad = showChrome ? `0px ${this.props.parent.xMargin}px` : `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px 0px ${this.props.parent.xMargin}px `;
         return this.collapsed ? null : (
             <div style={{ position: 'relative' }}>
+                {this.props.showHandle && this.props.parent.props.isContentActive() ? this.props.parent.columnDragger : null}
                 {showChrome ? (
                     <div
                         className="collectionStackingView-addDocumentButton"
-                        style={{
-                            //width: style.columnWidth / style.numGroupColumns,
-                            padding: `${NumCast(this.props.parent.layoutDoc._yPadding, this.props.parent.yMargin)}px 0px 0px 0px`,
-                        }}>
+                        style={
+                            {
+                                //width: style.columnWidth / style.numGroupColumns,
+                                //padding: `${NumCast(this.props.parent.layoutDoc._yPadding, this.props.parent.yMargin)}px 0px 0px 0px`,
+                            }
+                        }>
                         <EditableView GetValue={returnEmptyString} SetValue={this.addDocument} textCallback={this.textCallback} contents={'+ NEW'} />
                     </div>
                 ) : null}
@@ -288,12 +288,12 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                     ref={this._contRef}
                     style={{
                         padding: stackPad,
+                        minHeight: this.props.showHandle && this.props.parent.props.isContentActive() ? '10px' : undefined,
                         width: this.props.parent.NodeWidth,
                         gridGap: this.props.parent.gridGap,
                         gridTemplateColumns: numberRange(rows).reduce((list: string, i: any) => list + ` ${this.props.parent.columnWidth}px`, ''),
                     }}>
                     {this.props.parent.children(this.props.docList)}
-                    {this.props.showHandle && this.props.parent.props.isContentActive() ? this.props.parent.columnDragger : null}
                 </div>
             </div>
         );
@@ -313,23 +313,33 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                     onPointerDown={this.headerDown}
                     title={evContents === `NO ${key.toUpperCase()} VALUE` ? `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ''}
                     style={{ background: evContents !== `NO ${key.toUpperCase()} VALUE` ? this.color : 'lightgrey' }}>
-                    {noChrome ? evContents : editableHeaderView}
+                    {noChrome ? evContents : <div>{editableHeaderView}</div>}
                     {noChrome || evContents === `NO ${key.toUpperCase()} VALUE` ? null : (
                         <div className="collectionStackingView-sectionColor">
-                            <button className="collectionStackingView-sectionColorButton" onClick={action(e => (this._paletteOn = !this._paletteOn))}>
+                            <button
+                                className="collectionStackingView-sectionColorButton"
+                                onPointerDown={e =>
+                                    setupMoveUpEvents(
+                                        this,
+                                        e,
+                                        returnFalse,
+                                        emptyFunction,
+                                        action(e => (this._paletteOn = !this._paletteOn))
+                                    )
+                                }>
                                 <FontAwesomeIcon icon="palette" size="lg" />
                             </button>
                             {this._paletteOn ? this.renderColorPicker() : null}
                         </div>
                     )}
                     {noChrome ? null : (
-                        <button className="collectionStackingView-sectionDelete" onClick={noChrome ? undefined : this.collapseSection}>
+                        <button className="collectionStackingView-sectionDelete" onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, noChrome ? emptyFunction : this.collapseSection)}>
                             <FontAwesomeIcon icon={this.collapsed ? 'chevron-down' : 'chevron-up'} size="lg" />
                         </button>
                     )}
                     {noChrome || evContents === `NO  ${key.toUpperCase()} VALUE` ? null : (
-                        <div className="collectionStackingView-sectionOptions">
-                            <Flyout anchorPoint={anchorPoints.TOP_CENTER} content={this.renderMenu()}>
+                        <div className="collectionStackingView-sectionOptions" onPointerDown={e => e.stopPropagation()}>
+                            <Flyout anchorPoint={anchorPoints.RIGHT_TOP} content={this.renderMenu()}>
                                 <button className="collectionStackingView-sectionOptionButton">
                                     <FontAwesomeIcon icon="ellipsis-v" size="lg" />
                                 </button>
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 9eb716763..5135cfb57 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -33,7 +33,7 @@ import { LightboxView } from '../LightboxView';
 import { MainView } from '../MainView';
 import { DefaultStyleProvider } from '../StyleProvider';
 import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView';
-import { DocumentView, OpenWhereMod } from '../nodes/DocumentView';
+import { DocumentView, DocumentViewInternal, OpenWhereMod } from '../nodes/DocumentView';
 import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
 import { CollectionDockingView } from './CollectionDockingView';
 import './CollectionMenu.scss';
@@ -129,7 +129,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
                     docViewPath={returnEmptyDoclist}
                     moveDocument={returnFalse}
                     addDocument={returnFalse}
-                    addDocTab={returnFalse}
+                    addDocTab={DocumentViewInternal.addDocTabFunc}
                     pinToPres={emptyFunction}
                     removeDocument={returnFalse}
                     ScreenToLocalTransform={this.buttonBarXf}
@@ -154,21 +154,21 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
 
         const hardCodedButtons = (
             <div className={`hardCodedButtons`}>
-                <Toggle 
-                    toggleType={ToggleType.BUTTON} 
-                    type={Type.PRIM} 
-                    color={StrCast(Doc.UserDoc().userColor)} 
-                    onClick={this.toggleTopBar} 
-                    toggleStatus={SettingsManager.headerBarHeight > 0} 
+                <Toggle
+                    toggleType={ToggleType.BUTTON}
+                    type={Type.PRIM}
+                    color={StrCast(Doc.UserDoc().userColor)}
+                    onClick={this.toggleTopBar}
+                    toggleStatus={SettingsManager.headerBarHeight > 0}
                     icon={<FontAwesomeIcon icon={headerIcon} size="lg" />}
                     tooltip={headerTitle}
                 />
-                <Toggle 
-                    toggleType={ToggleType.BUTTON} 
+                <Toggle
+                    toggleType={ToggleType.BUTTON}
                     type={Type.PRIM}
-                    color={StrCast(Doc.UserDoc().userColor)} 
-                    onClick={this.toggleProperties} 
-                    toggleStatus={SettingsManager.propertiesWidth > 0} 
+                    color={StrCast(Doc.UserDoc().userColor)}
+                    onClick={this.toggleProperties}
+                    toggleStatus={SettingsManager.propertiesWidth > 0}
                     icon={<FontAwesomeIcon icon={propIcon} size="lg" />}
                     tooltip={propTitle}
                 />
@@ -178,11 +178,12 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
         // NEW BUTTONS
         //dash col linear view buttons
         const contMenuButtons = (
-            <div className="collectionMenu-container" 
-            style={{
-                background: StrCast(Doc.UserDoc().userBackgroundColor),
-                // borderColor: StrCast(Doc.UserDoc().userColor)
-            }} >
+            <div
+                className="collectionMenu-container"
+                style={{
+                    background: StrCast(Doc.UserDoc().userBackgroundColor),
+                    // borderColor: StrCast(Doc.UserDoc().userColor)
+                }}>
                 {this.contMenuButtons}
                 {hardCodedButtons}
             </div>
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 99a68e94b..255bc3889 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -128,6 +128,7 @@
         height: 15;
         position: absolute;
         margin-left: -5;
+        z-index: 10;
     }
 
     // Documents in stacking view
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 805002452..a5c276125 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -1,7 +1,7 @@
 import React = require('react');
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { CursorProperty } from 'csstype';
-import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
+import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, Opt } from '../../../fields/Doc';
 import { DocData, Height, Width } from '../../../fields/DocSymbols';
@@ -11,7 +11,7 @@ import { listSpec } from '../../../fields/Schema';
 import { SchemaHeaderField } from '../../../fields/SchemaHeaderField';
 import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
-import { emptyFunction, returnEmptyDoclist, returnFalse, returnNone, returnZero, setupMoveUpEvents, smoothScroll, Utils } from '../../../Utils';
+import { emptyFunction, lightOrDark, returnEmptyDoclist, returnFalse, returnNone, returnZero, setupMoveUpEvents, smoothScroll, Utils } from '../../../Utils';
 import { Docs, DocUtils } from '../../documents/Documents';
 import { CollectionViewType } from '../../documents/DocumentTypes';
 import { DragManager, dropActionType } from '../../util/DragManager';
@@ -31,7 +31,6 @@ import { CollectionMasonryViewFieldRow } from './CollectionMasonryViewFieldRow';
 import './CollectionStackingView.scss';
 import { CollectionStackingViewFieldColumn } from './CollectionStackingViewFieldColumn';
 import { CollectionSubView } from './CollectionSubView';
-import { Colors } from '../global/globalEnums';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 export type collectionStackingViewProps = {
@@ -59,7 +58,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     // map of node headers to their heights. Used in Masonry
     @observable _heightMap = new Map<string, number>();
     // Assuming that this is the current css cursor style
-    @observable _cursor: CursorProperty = 'grab';
+    @observable _cursor: CursorProperty = 'ew-resize';
     // gets reset whenever we scroll. Not sure what it is
     @observable _scroll = 0; // used to force the document decoration to update when scrolling
     // does this mean whether the browser is hidden? Or is chrome something else entirely?
@@ -308,19 +307,18 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
             ? false
             : undefined;
     isChildButtonContentActive = () => (this.props.childDocumentsActive?.() === false || this.rootDoc.childDocumentsActive === false ? false : undefined);
+    @observable docRefs = new ObservableMap<Doc, DocumentView>();
     // this is what renders the document that you see on the screen
     // called in Children: this actually adds a document to our children list
     getDisplayDoc(doc: Doc, width: () => number, count: number) {
         const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField ? undefined : this.props.DataDoc;
         const height = () => this.getDocHeight(doc);
 
-        let dref: Opt<DocumentView>;
-        const stackedDocTransform = () => this.getDocTransform(doc, dref);
+        const stackedDocTransform = () => this.getDocTransform(doc);
         this._docXfs.push({ stackedDocTransform, width, height });
-        //DocumentView is how the node will be rendered
         return count > this._renderCount ? null : (
             <DocumentView
-                ref={r => (dref = r || undefined)}
+                ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(doc, r))}
                 Document={doc}
                 DataDoc={dataDoc ?? (!Doc.AreProtosEqual(doc[DocData], doc) ? doc[DocData] : undefined)}
                 renderDepth={this.props.renderDepth + 1}
@@ -368,9 +366,10 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         );
     }
 
-    getDocTransform(doc: Doc, dref?: DocumentView) {
-        const y = this._scroll; // required for document decorations to update when the text box container is scrolled
-        const { scale, translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv || undefined);
+    getDocTransform(doc: Doc) {
+        const dref = this.docRefs.get(doc);
+        this._scroll; // must be referenced for document decorations to update when the text box container is scrolled
+        const { translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv);
         // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off
         return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this.props.ScreenToLocalTransform().Scale);
     }
@@ -409,7 +408,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
             e,
             this.onDividerMove,
             action(() => {
-                this._cursor = 'grab';
+                this._cursor = 'ew-resize';
                 batch.end();
             }),
             emptyFunction
@@ -423,7 +422,11 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
 
     @computed get columnDragger() {
         return (
-            <div className="collectionStackingView-columnDragger" onPointerDown={this.columnDividerDown} ref={this._draggerRef} style={{ cursor: this._cursor, left: `${this.columnWidth + this.xMargin}px`, top: `${Math.max(0, this.yMargin - 9)}px` }}>
+            <div
+                className="collectionStackingView-columnDragger"
+                onPointerDown={this.columnDividerDown}
+                ref={this._draggerRef}
+                style={{ cursor: this._cursor, color: StrCast(Doc.UserDoc().userColor), left: `${this.columnWidth + this.xMargin}px`, top: `${Math.max(0, this.yMargin - 9)}px` }}>
                 <FontAwesomeIcon icon={'arrows-alt-h'} />
             </div>
         );
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index d904749b1..fb23fc7f1 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -11,7 +11,7 @@ import { listSpec } from '../../../fields/Schema';
 import { ComputedField, ScriptField } from '../../../fields/ScriptField';
 import { BoolCast, Cast, DocCast, FieldValue, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
-import { emptyFunction, return18, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, returnZero, simulateMouseClick, Utils } from '../../../Utils';
+import { emptyFunction, lightOrDark, return18, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, returnZero, simulateMouseClick, Utils } from '../../../Utils';
 import { Docs, DocUtils } from '../../documents/Documents';
 import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
 import { DocumentManager } from '../../util/DocumentManager';
@@ -222,10 +222,8 @@ export class TreeView extends React.Component<TreeViewProps> {
             this.treeViewOpen = !this.treeViewOpen;
         } else {
             // choose an appropriate embedding or make one. --- choose the first embedding that (1) user owns,  (2) has no context field ... otherwise make a new embedding
-            const bestEmbedding =  docView.rootDoc.author === Doc.CurrentUserEmail && !Doc.IsDataProto(docView.props.Document)
-                    ? docView.rootDoc
-                    : Doc.BestEmbedding(docView.rootDoc);
-              this.props.addDocTab(bestEmbedding, OpenWhere.lightbox);
+            const bestEmbedding = docView.rootDoc.author === Doc.CurrentUserEmail && !Doc.IsDataProto(docView.props.Document) ? docView.rootDoc : Doc.BestEmbedding(docView.rootDoc);
+            this.props.addDocTab(bestEmbedding, OpenWhere.lightbox);
         }
     };
 
@@ -344,7 +342,6 @@ export class TreeView extends React.Component<TreeViewProps> {
         TreeView._editTitleOnLoad = { id: folder[Id], parent: this.props.parentTreeView };
         return this.props.addDocument(folder);
     };
-    deleteItem = () => this.props.removeDoc?.(this.doc);
 
     preTreeDrop = (e: Event, de: DragManager.DropEvent) => {
         const dragData = de.complete.docDragData;
@@ -540,8 +537,6 @@ export class TreeView extends React.Component<TreeViewProps> {
         TraceMobx();
         const expandKey = this.treeViewExpandedView;
         const sortings = (this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewSortings) as { [key: string]: { color: string; icon: JSX.Element | string } }) ?? {};
-        const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color)
-        console.log("tree view", color, this.doc.title, Doc.IsSystem(this.doc))
         if (['links', 'annotations', 'embeddings', this.fieldKey].includes(expandKey)) {
             const sorting = StrCast(this.doc.treeViewSortCriterion, TreeSort.None);
             const sortKeys = Object.keys(sortings);
@@ -581,9 +576,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                 );
             }
             return (
-                <div style={{ 
-                    color: color
-                 }}>
+                <div>
                     {!docs?.length || this.props.AddToMap /* hack to identify pres box trees */ ? null : (
                         <div className={'treeView-sorting'}>
                             <IconButton
@@ -662,14 +655,14 @@ export class TreeView extends React.Component<TreeViewProps> {
             );
         } else if (this.treeViewExpandedView === 'fields') {
             return (
-                <ul key={this.doc[Id] + this.doc.title} style={{ cursor: 'inherit', color: color }}>
+                <ul key={this.doc[Id] + this.doc.title} style={{ cursor: 'inherit' }}>
                     <div>{this.expandedField}</div>
                 </ul>
             );
         }
         return (
             <ul
-                style={{ color: color }}
+                style={{}}
                 onPointerDown={e => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -725,26 +718,19 @@ export class TreeView extends React.Component<TreeViewProps> {
                 }>
                 {this.props.treeView.outlineMode ? (
                     !(this.doc.text as RichTextField)?.Text ? null : (
-                        <IconButton
-                            color={color} 
-                            icon={<FontAwesomeIcon 
-                            icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />}
-                            size={Size.XSMALL}
-                        />
+                        <IconButton color={color} icon={<FontAwesomeIcon icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />} size={Size.XSMALL} />
                     )
                 ) : (
                     <div className="treeView-bulletIcons" style={{ color: Doc.IsSystem(DocCast(this.doc.proto)) ? 'red' : undefined }}>
-                        {this.onCheckedClick ? <IconButton
-                            color={color} 
-                            icon={<FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />}
-                            size={Size.XSMALL}
-                        /> : 
+                        {this.onCheckedClick ? (
                             <IconButton
-                                color={color} 
-                                icon={<FontAwesomeIcon icon={iconType as IconProp} />}
+                                color={color}
+                                icon={<FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />}
                                 size={Size.XSMALL}
                             />
-                        }
+                        ) : (
+                            <IconButton color={color} icon={<FontAwesomeIcon icon={iconType as IconProp} />} size={Size.XSMALL} />
+                        )}
                     </div>
                 )}
             </div>
@@ -776,17 +762,15 @@ export class TreeView extends React.Component<TreeViewProps> {
         return this.props.treeViewHideHeaderFields() || this.doc.treeViewHideHeaderFields ? null : (
             <>
                 {customHeaderButtons} {/* e.g.,. hide button is set by dashboardStyleProvider */}
-                {this.doc._layout_hideContextMenu ? null : (
-                    <IconButton
-                        color={color} 
-                        icon={<FontAwesomeIcon icon="bars" />}
-                        size={Size.XSMALL}
-                        onClick={e => {
-                            this.showContextMenu(e);
-                            e.stopPropagation();
-                        }}
-                    />
-                )}
+                <IconButton
+                    color={color}
+                    icon={<FontAwesomeIcon icon="bars" />}
+                    size={Size.XSMALL}
+                    onClick={e => {
+                        this.showContextMenu(e);
+                        e.stopPropagation();
+                    }}
+                />
                 {Doc.noviceMode ? null : this.doc.treeViewExpandedViewLock || Doc.IsSystem(this.doc) ? null : (
                     <span className="collectionTreeView-keyHeader" title="type of expanded data" key={this.treeViewExpandedView} onPointerDown={this.expandNextviewType}>
                         {this.treeViewExpandedView}
@@ -803,10 +787,10 @@ export class TreeView extends React.Component<TreeViewProps> {
     };
     contextMenuItems = () => {
         const makeFolder = { script: ScriptField.MakeFunction(`scriptContext.makeFolder()`, { scriptContext: 'any' })!, icon: 'folder-plus', label: 'New Folder' };
-        const deleteItem = { script: ScriptField.MakeFunction(`scriptContext.deleteItem()`, { scriptContext: 'any' })!, icon: 'folder-plus', label: 'Delete' };
         const folderOp = this.childDocs?.length ? [makeFolder] : [];
         const openEmbedding = { script: ScriptField.MakeFunction(`openDoc(getEmbedding(self), "${OpenWhere.addRight}")`)!, icon: 'copy', label: 'Open New Embedding' };
         const focusDoc = { script: ScriptField.MakeFunction(`DocFocusOrOpen(self)`)!, icon: 'eye', label: 'Focus or Open' };
+        const reopenDoc = { script: ScriptField.MakeFunction(`DocFocusOrOpen(self)`)!, icon: 'eye', label: 'Reopen' };
         return [
             ...(this.props.contextMenuItems ?? []).filter(mi => (!mi.filter ? true : mi.filter.script.run({ doc: this.doc })?.result)),
             ...(this.doc.isFolder
@@ -817,7 +801,9 @@ export class TreeView extends React.Component<TreeViewProps> {
                 ? [openEmbedding, makeFolder]
                 : this.doc._type_collection === CollectionViewType.Docking
                 ? []
-                : [deleteItem, openEmbedding, focusDoc]),
+                : this.props.treeView.rootDoc === Doc.MyRecentlyClosed
+                ? [reopenDoc]
+                : [openEmbedding, focusDoc]),
         ];
     };
     childContextMenuItems = () => {
@@ -989,6 +975,8 @@ export class TreeView extends React.Component<TreeViewProps> {
                     ref={this._tref}
                     title="click to edit title. Double Click or Drag to Open"
                     style={{
+                        backgroundColor: Doc.IsSystem(this.props.document) || this.props.document.isFolder ? StrCast(Doc.UserDoc().userVariantColor) : undefined,
+                        color: Doc.IsSystem(this.props.document) || this.props.document.isFolder ? lightOrDark(StrCast(Doc.UserDoc().userVariantColor)) : undefined,
                         fontWeight: Doc.IsSearchMatch(this.doc) !== undefined ? 'bold' : undefined,
                         textDecoration: Doc.GetT(this.doc, 'title', 'string', true) ? 'underline' : undefined,
                         outline: this.doc === Doc.ActiveDashboard ? 'dashed 1px #06123232' : undefined,
@@ -1014,12 +1002,13 @@ export class TreeView extends React.Component<TreeViewProps> {
                     onPointerDown={this.ignoreEvent}
                     onPointerEnter={this.onPointerEnter}
                     onPointerLeave={this.onPointerLeave}>
-                    {contents}
-                    <div className={`treeView-background`}
+                    <div
+                        className="treeView-background"
                         style={{
-                            background: StrCast(Doc.UserDoc().userColor)
+                            background: StrCast(Doc.UserDoc().userColor),
                         }}
                     />
+                    {contents}
                 </div>
                 {this.renderBorder}
             </>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index f1d98d22a..fb8ec93b2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -235,6 +235,9 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
             bActive,
             textX,
             textY,
+            // pt1,
+            // pt2,
+            // this code adds space between links
             pt1: [pt1[0] + pt1normalized[0] * 13, pt1[1] + pt1normalized[1] * 13],
             pt2: [pt2[0] + pt2normalized[0] * 13, pt2[1] + pt2normalized[1] * 13],
         };
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
index cb5cef29c..4ada1731f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
@@ -1,11 +1,13 @@
-.collectionfreeformlinksview-svgCanvas{
+// TODO: change z-index to -1 when a modal is active?
+
+.collectionfreeformlinksview-svgCanvas {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%; 
+    width: 100%;
     height: 100%;
     pointer-events: none;
-  }
-  .collectionfreeformlinksview-container {
+}
+.collectionfreeformlinksview-container {
     pointer-events: none;
-  }
-\ No newline at end of file
+}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index ba31916a7..b5e9994dd 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1264,13 +1264,15 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             return this.addDocument?.(newDoc);
         }
     };
-    pointerEvents = () => {
+    @computed get _pointerEvents() {
         const engine = this.props.layoutEngine?.() || StrCast(this.props.Document._layoutEngine);
         const pointerEvents = DocumentDecorations.Instance.Interacting
             ? 'none'
             : this.props.childPointerEvents ?? (this.props.viewDefDivClick || (engine === computePassLayout.name && !this.props.isSelected(true)) || this.isContentActive() === false ? 'none' : this.props.pointerEvents?.());
         return pointerEvents;
-    };
+    }
+    pointerEvents = () => this._pointerEvents;
+    childContentsActive = () => (this.props.childContentsActive ?? this.isContentActive() === false ? returnFalse : emptyFunction)();
     getChildDocView(entry: PoolData) {
         const childLayout = entry.pair.layout;
         const childData = entry.pair.data;
@@ -1299,7 +1301,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 childFiltersByRanges={this.childDocRangeFilters}
                 searchFilterDocs={this.searchFilterDocs}
                 isDocumentActive={this.props.childDocumentsActive?.() || this.rootDoc._isGroup ? this.props.isDocumentActive : this.isContentActive}
-                isContentActive={this.props.childContentsActive ?? this.isContentActive() === false ? returnFalse : emptyFunction}
+                isContentActive={this.childContentsActive}
                 focus={this.Document._isGroup ? this.groupFocus : this.isAnnotationOverlay ? this.props.focus : this.focus}
                 addDocTab={this.addDocTab}
                 addDocument={this.props.addDocument}
@@ -1435,21 +1437,17 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         }.bind(this)
     );
 
-    childPositionProviderUnmemoized = (doc: Doc, replica: string) => {
-        return this._layoutPoolData.get(doc[Id] + (replica || ''));
-    };
+    childPositionProviderUnmemoized = (doc: Doc, replica: string) => this._layoutPoolData.get(doc[Id] + (replica || ''));
     childDataProvider = computedFn(
         function childDataProvider(this: any, doc: Doc, replica: string) {
-            return this._layoutPoolData.get(doc[Id] + (replica || ''));
+            return this.childPositionProviderUnmemoized(doc, replica);
         }.bind(this)
     );
 
-    childSizeProviderUnmemoized = (doc: Doc, replica: string) => {
-        return this._layoutSizeData.get(doc[Id] + (replica || ''));
-    };
+    childSizeProviderUnmemoized = (doc: Doc, replica: string) => this._layoutSizeData.get(doc[Id] + (replica || ''));
     childSizeProvider = computedFn(
         function childSizeProvider(this: any, doc: Doc, replica: string) {
-            return this._layoutSizeData.get(doc[Id] + (replica || ''));
+            return this.childSizeProviderUnmemoized(doc, replica);
         }.bind(this)
     );
 
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index 56b8366d0..2254b2e5f 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -204,7 +204,7 @@ export class CollectionLinearView extends CollectionSubView() {
 
         const menuOpener = (
             <Toggle
-                text={Cast(this.props.Document.icon, 'string', null)} 
+                text={Cast(this.props.Document.icon, 'string', null)}
                 icon={Cast(this.props.Document.icon, 'string', null) ? undefined : <FontAwesomeIcon icon={isExpanded ? 'minus' : 'plus'} />}
                 type={Type.TERT}
                 color={StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE)}
@@ -212,7 +212,7 @@ export class CollectionLinearView extends CollectionSubView() {
                 toggleType={ToggleType.BUTTON}
                 toggleStatus={BoolCast(this.layoutDoc.linearView_IsOpen)}
                 onClick={() => {
-                        this.layoutDoc.linearView_IsOpen = !isExpanded;
+                    this.layoutDoc.linearView_IsOpen = !isExpanded;
                 }}
                 tooltip={isExpanded ? 'Close' : 'Open'}
                 fillWidth={true}
@@ -223,25 +223,22 @@ export class CollectionLinearView extends CollectionSubView() {
         return (
             <div className={`collectionLinearView-outer ${this.layoutDoc.linearView_SubMenu}`} style={{ backgroundColor: this.layoutDoc.linearView_IsOpen ? undefined : 'transparent' }}>
                 <div className="collectionLinearView" ref={this.createDashEventsTarget} onContextMenu={this.myContextMenu} style={{ minHeight: this.dimension(), pointerEvents: 'all' }}>
-                    {this.props.Document.linearView_Dropdown ? 
-                        <div>Hello World!</div>
-                        : 
+                    {
                         <>
-                        {!this.props.Document.linearView_Expandable ? null : menuOpener}
-                        {!this.layoutDoc.linearView_IsOpen ? null : (
-                            <div
-                                className="collectionLinearView-content"
-                                style={{
-                                    height: this.dimension(),
-                                    flexDirection: flexDir as any,
-                                    gap: flexGap,
-                                }}>
-                                {this.childLayoutPairs.map(pair => this.getDisplayDoc(pair.layout))}
-                            </div>
-                        )}
+                            {menuOpener}
+                            {!this.layoutDoc.linearView_IsOpen ? null : (
+                                <div
+                                    className="collectionLinearView-content"
+                                    style={{
+                                        height: this.dimension(),
+                                        flexDirection: flexDir as any,
+                                        gap: flexGap,
+                                    }}>
+                                    {this.childLayoutPairs.map(pair => this.getDisplayDoc(pair.layout))}
+                                </div>
+                            )}
                         </>
                     }
-                    
                 </div>
             </div>
         );
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index ee5bf82ed..babe5c810 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -810,7 +810,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     @computed get sortedDocs() {
-        trace();
         const field = StrCast(this.layoutDoc.sortField);
         const desc = BoolCast(this.layoutDoc.sortDesc);
         const docs = !field
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index b906065a0..61920cdef 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -1,26 +1,28 @@
-import { Colors } from "browndash-components";
-import { runInAction, action } from "mobx";
-import { aggregateBounds } from "../../../Utils";
-import { Doc } from "../../../fields/Doc";
-import { Width, Height } from "../../../fields/DocSymbols";
-import { InkTool } from "../../../fields/InkField";
-import { Cast, StrCast, NumCast, BoolCast } from "../../../fields/Types";
-import { WebField } from "../../../fields/URLField";
-import { GestureUtils } from "../../../pen-gestures/GestureUtils";
-import { LinkManager } from "../../util/LinkManager";
-import { ScriptingGlobals } from "../../util/ScriptingGlobals";
-import { SelectionManager } from "../../util/SelectionManager";
-import { UndoManager } from "../../util/UndoManager";
-import { GestureOverlay } from "../GestureOverlay";
-import { InkTranscription } from "../InkTranscription";
-import { ActiveFillColor, SetActiveFillColor, ActiveIsInkMask, SetActiveIsInkMask, ActiveInkWidth, SetActiveInkWidth, ActiveInkColor, SetActiveInkColor } from "../InkingStroke";
-import { CollectionFreeFormView } from "../collections/collectionFreeForm";
-import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
-import { WebBox } from "../nodes/WebBox";
-import { RichTextMenu } from "../nodes/formattedText/RichTextMenu";
-import { DocumentType } from "../../documents/DocumentTypes";
+import { Colors } from 'browndash-components';
+import { runInAction, action } from 'mobx';
+import { aggregateBounds } from '../../../Utils';
+import { Doc } from '../../../fields/Doc';
+import { Width, Height } from '../../../fields/DocSymbols';
+import { InkTool } from '../../../fields/InkField';
+import { Cast, StrCast, NumCast, BoolCast } from '../../../fields/Types';
+import { WebField } from '../../../fields/URLField';
+import { GestureUtils } from '../../../pen-gestures/GestureUtils';
+import { LinkManager } from '../../util/LinkManager';
+import { ScriptingGlobals } from '../../util/ScriptingGlobals';
+import { SelectionManager } from '../../util/SelectionManager';
+import { undoable, UndoManager } from '../../util/UndoManager';
+import { GestureOverlay } from '../GestureOverlay';
+import { InkTranscription } from '../InkTranscription';
+import { ActiveFillColor, SetActiveFillColor, ActiveIsInkMask, SetActiveIsInkMask, ActiveInkWidth, SetActiveInkWidth, ActiveInkColor, SetActiveInkColor } from '../InkingStroke';
+import { CollectionFreeFormView } from '../collections/collectionFreeForm';
+import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView';
+import { WebBox } from '../nodes/WebBox';
+import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
+import { DocumentType } from '../../documents/DocumentTypes';
 
-ScriptingGlobals.add(function IsNoneSelected() { return SelectionManager.Views().length <= 0; }, "are no document selected");
+ScriptingGlobals.add(function IsNoneSelected() {
+    return SelectionManager.Views().length <= 0;
+}, 'are no document selected');
 
 // toggle: Set overlay status of selected document
 ScriptingGlobals.add(function setView(view: string) {
@@ -52,7 +54,7 @@ ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: b
             if (contentFrameNumber !== undefined) {
                 CollectionFreeFormDocumentView.setStringValues(contentFrameNumber, dv.rootDoc, { fieldKey: color });
             } else {
-                console.log('setting color to: ', color)
+                console.log('setting color to: ', color);
                 dv.rootDoc['_' + fieldKey] = color;
             }
         });
@@ -119,7 +121,6 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'grid' | 'snapli
    ]);
 
     if (checkResult) {
-        console.log(attr, map.get(attr)?.checkResult(selected))
         return map.get(attr)?.checkResult(selected);
     }
     const batch = map.get(attr)?.waitForRender ? UndoManager.StartBatch('set freeform attribute') : { end: () => {} };
@@ -193,10 +194,9 @@ ScriptingGlobals.add(function toggleCharStyle(charStyle: attrname, checkResult?:
 
     const map = new Map(attrs.concat(alignments).concat(listings));
     if (checkResult) {
-        console.log(charStyle, checkResult, map.get(charStyle)?.checkResult());
         return map.get(charStyle)?.checkResult();
     }
-    map.get(charStyle)?.toggle();
+    undoable(() => map.get(charStyle)?.toggle(), 'toggle ' + charStyle)();
 });
 
 export function checkInksToGroup() {
diff --git a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx
index 0ede75407..ff17e5c12 100644
--- a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx
+++ b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx
@@ -1,6 +1,6 @@
 import './ButtonMenu.scss';
 import * as React from 'react';
-import { IButtonMenu } from "./utils";
+import { IButtonMenu } from './utils';
 import { NewLightboxView } from '../NewLightboxView';
 import { SelectionManager } from '../../../util/SelectionManager';
 import { CollectionDockingView } from '../../collections/CollectionDockingView';
@@ -11,43 +11,40 @@ import { MainView } from '../../MainView';
 import { action } from 'mobx';
 
 export const ButtonMenu = (props: IButtonMenu) => {
-    
-    return <div className={`newLightboxButtonMenu-container`}>
-        <div
-                    className="newLightboxView-navBtn"
-                    title="toggle fit width"
-                    onClick={e => {
-                        e.stopPropagation();
-                        NewLightboxView.NewLightboxDoc!._fitWidth = !NewLightboxView.NewLightboxDoc!._fitWidth;
-                    }}>
-                </div>
-                <div
-                    className="newLightboxView-tabBtn"
-                    title="open in tab"
-                    onClick={e => {
-                        e.stopPropagation();
-                        CollectionDockingView.AddSplit(NewLightboxView.NewLightboxDoc || NewLightboxView.NewLightboxDoc!, OpenWhereMod.none);
-                        SelectionManager.DeselectAll();
-                        NewLightboxView.SetNewLightboxDoc(undefined);
-                    }}>
-                </div>
-                <div
-                    className="newLightboxView-penBtn"
-                    title="toggle pen annotation"
-                    style={{ background: Doc.ActiveTool === InkTool.Pen ? 'white' : undefined }}
-                    onClick={e => {
-                        e.stopPropagation();
-                        Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
-                    }}>
-                </div>
-                <div
-                    className="newLightboxView-exploreBtn"
-                    title="toggle explore mode to navigate among documents only"
-                    style={{ background: MainView.Instance._exploreMode ? 'white' : undefined }}
-                    onClick={action(e => {
-                        e.stopPropagation();
-                        MainView.Instance._exploreMode = !MainView.Instance._exploreMode;
-                    })}>
-                </div>
-    </div>
-}
-\ No newline at end of file
+    return (
+        <div className={`newLightboxButtonMenu-container`}>
+            <div
+                className="newLightboxView-navBtn"
+                title="toggle fit width"
+                onClick={e => {
+                    e.stopPropagation();
+                    NewLightboxView.LightboxDoc!._fitWidth = !NewLightboxView.LightboxDoc!._fitWidth;
+                }}></div>
+            <div
+                className="newLightboxView-tabBtn"
+                title="open in tab"
+                onClick={e => {
+                    e.stopPropagation();
+                    CollectionDockingView.AddSplit(NewLightboxView.LightboxDoc || NewLightboxView.LightboxDoc!, OpenWhereMod.none);
+                    SelectionManager.DeselectAll();
+                    NewLightboxView.SetNewLightboxDoc(undefined);
+                }}></div>
+            <div
+                className="newLightboxView-penBtn"
+                title="toggle pen annotation"
+                style={{ background: Doc.ActiveTool === InkTool.Pen ? 'white' : undefined }}
+                onClick={e => {
+                    e.stopPropagation();
+                    Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
+                }}></div>
+            <div
+                className="newLightboxView-exploreBtn"
+                title="toggle explore mode to navigate among documents only"
+                style={{ background: MainView.Instance._exploreMode ? 'white' : undefined }}
+                onClick={action(e => {
+                    e.stopPropagation();
+                    MainView.Instance._exploreMode = !MainView.Instance._exploreMode;
+                })}></div>
+        </div>
+    );
+};
diff --git a/src/client/views/newlightbox/ExploreView/ExploreView.tsx b/src/client/views/newlightbox/ExploreView/ExploreView.tsx
index 855bfd9e2..44a0bcd5f 100644
--- a/src/client/views/newlightbox/ExploreView/ExploreView.tsx
+++ b/src/client/views/newlightbox/ExploreView/ExploreView.tsx
@@ -1,30 +1,35 @@
 import './ExploreView.scss';
-import { IBounds, IExploreView, emptyBounds } from "./utils";
-import { IRecommendation } from "../components";
+import { IBounds, IExploreView, emptyBounds } from './utils';
+import { IRecommendation } from '../components';
 import * as React from 'react';
 import { NewLightboxView } from '../NewLightboxView';
 import { StrCast } from '../../../../fields/Types';
 
-
-
 export const ExploreView = (props: IExploreView) => {
-    const { recs, bounds=emptyBounds } = props
-    
-    return <div className={`exploreView-container`}>
-        {recs && recs.map((rec) => {
-            console.log(rec.embedding, bounds)
-            const x_bound: number = Math.max(Math.abs(bounds.max_x), Math.abs(bounds.min_x))
-            const y_bound: number = Math.max(Math.abs(bounds.max_y), Math.abs(bounds.min_y))
-            console.log(x_bound, y_bound)
-            if (rec.embedding) {
-                const x = (rec.embedding.x / x_bound) * 50;
-                const y = (rec.embedding.y / y_bound) * 50;
-                console.log(x, y)
-                return <div className={`exploreView-doc`} onClick={() => {}} style={{top: `calc(50% + ${y}%)`, left: `calc(50% + ${x}%)`}}>
-                    {rec.title}
-                </div>
-            } else return (null)
-        })}
-        <div className={`exploreView-doc`} style={{top: `calc(50% + ${0}%)`, left: `calc(50% + ${0}%)`, background: '#073763', color: 'white'}}>{StrCast(NewLightboxView.NewLightboxDoc?.title)}</div>
-    </div>
-}
-\ No newline at end of file
+    const { recs, bounds = emptyBounds } = props;
+
+    return (
+        <div className={`exploreView-container`}>
+            {recs &&
+                recs.map(rec => {
+                    console.log(rec.embedding, bounds);
+                    const x_bound: number = Math.max(Math.abs(bounds.max_x), Math.abs(bounds.min_x));
+                    const y_bound: number = Math.max(Math.abs(bounds.max_y), Math.abs(bounds.min_y));
+                    console.log(x_bound, y_bound);
+                    if (rec.embedding) {
+                        const x = (rec.embedding.x / x_bound) * 50;
+                        const y = (rec.embedding.y / y_bound) * 50;
+                        console.log(x, y);
+                        return (
+                            <div className={`exploreView-doc`} onClick={() => {}} style={{ top: `calc(50% + ${y}%)`, left: `calc(50% + ${x}%)` }}>
+                                {rec.title}
+                            </div>
+                        );
+                    } else return null;
+                })}
+            <div className={`exploreView-doc`} style={{ top: `calc(50% + ${0}%)`, left: `calc(50% + ${0}%)`, background: '#073763', color: 'white' }}>
+                {StrCast(NewLightboxView.LightboxDoc?.title)}
+            </div>
+        </div>
+    );
+};
diff --git a/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx
index c0d357ad5..b9d05c531 100644
--- a/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx
+++ b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IRecommendation } from "./utils";
+import { IRecommendation } from './utils';
 import './Recommendation.scss';
 import { getType } from '../../utils';
 import { FaEyeSlash } from 'react-icons/fa';
@@ -9,82 +9,95 @@ import { Doc } from '../../../../../fields/Doc';
 import { Docs } from '../../../../documents/Documents';
 
 export const Recommendation = (props: IRecommendation) => {
-    const {title, data, type, text, transcript, loading, source, previewUrl, related_concepts, distance, docId} = props
-    
-    return <div className={`recommendation-container ${loading && 'loading'} ${previewUrl && 'previewUrl'}`} onClick={() => {
-        let doc: Doc | null = null;
-        if (source == "Dash" && docId) {
-            const docView = DocumentManager.Instance.getDocumentViewById(docId)
-            if (docView) {
-                doc = docView.rootDoc;
-            }
-        } else if (data) {
-            console.log(data, type)
-            switch(type) {
-                case "YouTube":
-                    console.log('create ', type, 'document')
-                    doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript: transcript })
-                    break;
-                case "Video":
-                    console.log('create ', type, 'document')
-                    doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript: transcript })
-                    break;
-                case "Webpage":
-                    console.log('create ', type, 'document')
-                    doc = Docs.Create.WebDocument(data, { title: title, text: text })
-                    break;
-                case "HTML":
-                    console.log('create ', type, 'document')
-                    doc = Docs.Create.WebDocument(data, { title: title, text: text })
-                    break;
-                case "Text":
-                    console.log('create ', type, 'document')
-                    doc = Docs.Create.TextDocument(data, { title: title, text: text })
-                    break;
-                case "PDF":
-                    console.log('create ', type, 'document')
-                    doc = Docs.Create.PdfDocument(data, { title: title, text: text })
-                    break;
-            }
-        }
-        if (doc !== null) NewLightboxView.SetNewLightboxDoc(doc)
-    }}>
-        {loading ? 
-        <div className={`image-container`}>
-        </div>
-        :
-        previewUrl ? <div className={`image-container`}>
-            {<img className={`image`} src={previewUrl}></img>}
-        </div>
-        : null
-        }
-        <div className={`title`}>{title}</div>
-        <div className={`info`}>
-            {!loading && <div className={`type-container`}>
-                <div className={`lb-label`}>Type</div><div className={`lb-type`}>{getType(type!)}</div>
-            </div>}
-            {!loading && <div className={`distance-container`}>
-                <div className={`lb-label`}>Distance</div><div className={`lb-distance`}>{distance}</div>
-            </div>}
-        </div>
-        <div className={`source`}>
-            {!loading && <div className={`source-container`}>
-                <div className={`lb-label`}>Source</div><div className={`lb-source`}>{source}</div>
-            </div>}
-        </div>
-        <div className={`explainer`}>
-            {!loading && 
-            <div>
-                You are seeing this recommendation because this document also explores
-                <div className={`concepts-container`}>
-                    {related_concepts?.map((val) => {
-                        return <div className={'concept'}>{val}</div>
-                    })}
-                </div>
-            </div>}
-        </div>
-        <div className={`hide-rec`}>
-            {!loading && <><div>Hide Recommendation</div><div style={{fontSize: 15, paddingRight: 5}}><FaEyeSlash/></div></>}
+    const { title, data, type, text, transcript, loading, source, previewUrl, related_concepts, distance, docId } = props;
+
+    return (
+        <div
+            className={`recommendation-container ${loading && 'loading'} ${previewUrl && 'previewUrl'}`}
+            onClick={() => {
+                let doc: Doc | null = null;
+                if (source == 'Dash' && docId) {
+                    const docView = DocumentManager.Instance.getDocumentViewsById(docId).lastElement();
+                    if (docView) {
+                        doc = docView.rootDoc;
+                    }
+                } else if (data) {
+                    console.log(data, type);
+                    switch (type) {
+                        case 'YouTube':
+                            console.log('create ', type, 'document');
+                            doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript: transcript });
+                            break;
+                        case 'Video':
+                            console.log('create ', type, 'document');
+                            doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript: transcript });
+                            break;
+                        case 'Webpage':
+                            console.log('create ', type, 'document');
+                            doc = Docs.Create.WebDocument(data, { title: title, text: text });
+                            break;
+                        case 'HTML':
+                            console.log('create ', type, 'document');
+                            doc = Docs.Create.WebDocument(data, { title: title, text: text });
+                            break;
+                        case 'Text':
+                            console.log('create ', type, 'document');
+                            doc = Docs.Create.TextDocument(data, { title: title, text: text });
+                            break;
+                        case 'PDF':
+                            console.log('create ', type, 'document');
+                            doc = Docs.Create.PdfDocument(data, { title: title, text: text });
+                            break;
+                    }
+                }
+                if (doc !== null) NewLightboxView.SetNewLightboxDoc(doc);
+            }}>
+            {loading ? <div className={`image-container`}></div> : previewUrl ? <div className={`image-container`}>{<img className={`image`} src={previewUrl}></img>}</div> : null}
+            <div className={`title`}>{title}</div>
+            <div className={`info`}>
+                {!loading && (
+                    <div className={`type-container`}>
+                        <div className={`lb-label`}>Type</div>
+                        <div className={`lb-type`}>{getType(type!)}</div>
+                    </div>
+                )}
+                {!loading && (
+                    <div className={`distance-container`}>
+                        <div className={`lb-label`}>Distance</div>
+                        <div className={`lb-distance`}>{distance}</div>
+                    </div>
+                )}
+            </div>
+            <div className={`source`}>
+                {!loading && (
+                    <div className={`source-container`}>
+                        <div className={`lb-label`}>Source</div>
+                        <div className={`lb-source`}>{source}</div>
+                    </div>
+                )}
+            </div>
+            <div className={`explainer`}>
+                {!loading && (
+                    <div>
+                        You are seeing this recommendation because this document also explores
+                        <div className={`concepts-container`}>
+                            {related_concepts?.map(val => {
+                                return <div className={'concept'}>{val}</div>;
+                            })}
+                        </div>
+                    </div>
+                )}
+            </div>
+            <div className={`hide-rec`}>
+                {!loading && (
+                    <>
+                        <div>Hide Recommendation</div>
+                        <div style={{ fontSize: 15, paddingRight: 5 }}>
+                            <FaEyeSlash />
+                        </div>
+                    </>
+                )}
+            </div>
         </div>
-    </div>
-}
-\ No newline at end of file
+    );
+};
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 7e8eef0a5..2d8663c9c 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -18,7 +18,6 @@ import { SearchBox } from '../search/SearchBox';
 import { DashWebRTCVideo } from '../webcam/DashWebRTCVideo';
 import { YoutubeBox } from './../../apis/youtube/YoutubeBox';
 import { AudioBox } from './AudioBox';
-import { FontIconBox } from './FontIconBox/FontIconBox';
 import { ColorBox } from './ColorBox';
 import { ComparisonBox } from './ComparisonBox';
 import { DataVizBox } from './DataVizBox/DataVizBox';
@@ -26,9 +25,11 @@ import { DocumentViewProps } from './DocumentView';
 import './DocumentView.scss';
 import { EquationBox } from './EquationBox';
 import { FieldView, FieldViewProps } from './FieldView';
+import { FontIconBox } from './FontIconBox/FontIconBox';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
 import { FunctionPlotBox } from './FunctionPlotBox';
 import { ImageBox } from './ImageBox';
+import { ImportElementBox } from './importBox/ImportElementBox';
 import { KeyValueBox } from './KeyValueBox';
 import { LabelBox } from './LabelBox';
 import { LinkAnchorBox } from './LinkAnchorBox';
@@ -269,6 +270,7 @@ export class DocumentContentsView extends React.Component<
                     LoadingBox,
                     PhysicsSimulationBox,
                     SchemaRowBox,
+                    ImportElementBox,
                 }}
                 bindings={bindings}
                 jsx={layoutFrame}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 66352678c..70d2f95ea 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,5 +1,5 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
+import { action, computed, IReactionDisposer, observable, reaction, runInAction, trace } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
 import { Bounce, Fade, Flip, LightSpeed, Roll, Rotate, Zoom } from 'react-reveal';
@@ -314,7 +314,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     @computed get titleHeight() {
         return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.TitleHeight) || 0;
     }
-    get pointerEvents(): 'none' | 'all' | 'visiblePainted' | undefined {
+    @computed get pointerEvents(): 'none' | 'all' | 'visiblePainted' | undefined {
         return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (this.props.isSelected() ? ':selected' : ''));
     }
     @computed get finalLayoutKey() {
@@ -332,8 +332,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         return (
             DocumentView.LongPress ||
             onScriptDisable === 'always' ||
-            (onScriptDisable !== 'never' && (this.rootSelected() || this.props.isSelected())) ||
-            this._componentView?.isAnyChildContentActive?.()
+            (onScriptDisable !== 'never' && (this.rootSelected() || this._componentView?.isAnyChildContentActive?.()))
         );
     }
     @computed get onClickHandler() {
@@ -800,7 +799,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         }
         const constantItems: ContextMenuProps[] = [];
         if (!Doc.IsSystem(this.rootDoc)) {
-            constantItems.push({ description: 'Export as Zip file', icon: 'download', event: async () => Doc.Zip(this.props.Document) });
+            constantItems.push({ description: 'Zip Export', icon: 'download', event: async () => Doc.Zip(this.props.Document) });
             (this.rootDoc._type_collection !== CollectionViewType.Docking || !Doc.noviceMode) && constantItems.push({ description: 'Share', event: () => SharingManager.Instance.open(this.props.DocumentView()), icon: 'users' });
             if (this.props.removeDocument && Doc.ActiveDashboard !== this.props.Document) {
                 // need option to gray out menu items ... preferably with a '?' that explains why they're grayed out (eg., no permissions)
@@ -863,34 +862,32 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15);
     };
 
-    rootSelected = (outsideReaction?: boolean) => this.props.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false;
+    @computed get _rootSelected() {
+        return this.props.isSelected(false) || (this.props.Document.rootDocument && this.props.rootSelected?.(false)) || false;
+    }
+    rootSelected = (outsideReaction?: boolean) => this._rootSelected;
     panelHeight = () => this.props.PanelHeight() - this.headerMargin;
     screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin);
     onClickFunc: any = () => (this.disableClickScriptFunc ? undefined : this.onClickHandler);
     setHeight = (height: number) => (this.layoutDoc._height = height);
     setContentView = action((view: { getAnchor?: (addAsAnnotation: boolean) => Doc; forward?: () => boolean; back?: () => boolean }) => (this._componentView = view));
-    isContentActive = (outsideReaction?: boolean): boolean | undefined => {
+    @computed get _isContentActive() {
         //  true  - if the document has been activated directly or indirectly (by having its children selected)
         //  false - if its pointer events are explicitly turned off or if it's container tells it that it's inactive
         // undefined - it is not active, but it should be responsive to actions that might active it or its contents (eg clicking)
-        return this.props.isContentActive() === false || this.props.pointerEvents?.() === 'none' || (this.rootDoc.pointerEvents === 'none' && !StrCast(this.props.LayoutTemplateString).includes(KeyValueBox.name))
+        return this.props.isContentActive() === false || this.props.pointerEvents?.() === 'none'
             ? false
-            : Doc.ActiveTool !== InkTool.None ||
-              SnappingManager.GetIsDragging() ||
-              this.rootSelected() ||
-              this.rootDoc.forceActive ||
-              this.props.isSelected(outsideReaction) ||
-              this._componentView?.isAnyChildContentActive?.() ||
-              this.props.isContentActive()
+            : Doc.ActiveTool !== InkTool.None || SnappingManager.GetIsDragging() || this.rootSelected() || this.rootDoc.forceActive || this._componentView?.isAnyChildContentActive?.() || this.props.isContentActive()
             ? true
             : undefined;
-    };
+    }
+    isContentActive = (): boolean | undefined => this._isContentActive;
     @observable _retryThumb = 1;
-    thumbShown = () => {
-        const childHighlighted = () =>
-            Array.from(Doc.highlightedDocs.keys())
-                .concat(Array.from(Doc.brushManager.BrushedDoc.keys()))
-                .some(doc => Doc.AreProtosEqual(DocCast(doc.annotationOn), this.rootDoc));
+    @computed get _thumbShown() {
+        const childHighlighted = () => false;
+        // Array.from(Doc.highlightedDocs.keys())
+        //     .concat(Array.from(Doc.brushManager.BrushedDoc.keys()))
+        //     .some(doc => Doc.AreProtosEqual(DocCast(doc.annotationOn), this.rootDoc));
         const childOverlayed = () => Array.from(DocumentManager._overlayViews).some(view => Doc.AreProtosEqual(view.rootDoc, this.rootDoc));
         return !this.props.LayoutTemplateString &&
             !this.isContentActive() &&
@@ -900,12 +897,15 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             ((!childHighlighted() && !childOverlayed() && !Doc.isBrushedHighlightedDegree(this.rootDoc)) || this.rootDoc._type_collection === CollectionViewType.Docking)
             ? true
             : false;
-    };
+    }
+    thumbShown = () => this._thumbShown;
     childFilters = () => [...this.props.childFilters(), ...StrListCast(this.layoutDoc.childFilters)];
 
-    /// disable pointer events on content when there's an enabled onClick script (but not the browse script), or if contents are marked inactive
-    contentPointerEvents = () => ((!this.disableClickScriptFunc && this.onClickHandler && !this.props.onBrowseClick?.()) || this.isContentActive() === false ? 'none' : this.pointerEvents);
-
+    /// disable pointer events on content when there's an enabled onClick script (but not the browse script) and the contents aren't forced active, or if contents are marked inactive
+    @computed get _contentPointerEvents() {
+        return (!this.disableClickScriptFunc && this.onClickHandler && !this.props.onBrowseClick?.() && this.isContentActive() !== true) || this.isContentActive() === false ? 'none' : this.pointerEvents;
+    }
+    contentPointerEvents = () => this._contentPointerEvents;
     @computed get contents() {
         TraceMobx();
         const isInk = StrCast(this.layoutDoc.layout).includes(InkingStroke.name) && !this.props.LayoutTemplateString;
@@ -1088,7 +1088,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             <div
                 className="documentView-captionWrapper"
                 style={{
-                    pointerEvents: this.Document.ignoreClick ? 'none' : this.isContentActive() || this.props.isDocumentActive?.() ? 'all' : undefined,
+                    pointerEvents: this.rootDoc.ignoreClick ? 'none' : this.isContentActive() || this.props.isDocumentActive?.() ? 'all' : undefined,
                     minWidth: 50 * ffscale(),
                     maxHeight: `max(100%, ${20 * ffscale()}px)`,
                 }}>
@@ -1223,16 +1223,22 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             case PresEffect.Lightspeed: return <LightSpeed {...effectProps}>{renderDoc}</LightSpeed>;
         }
     }
+    @computed get highlighting() {
+        return this.props.styleProvider?.(this.props.Document, this.props, StyleProp.Highlighting);
+    }
+    @computed get borderPath() {
+        return this.props.styleProvider?.(this.props.Document, this.props, StyleProp.BorderPath);
+    }
     render() {
         TraceMobx();
-        const highlighting = this.props.styleProvider?.(this.props.Document, this.props, StyleProp.Highlighting);
-        const borderPath = this.props.styleProvider?.(this.props.Document, this.props, StyleProp.BorderPath);
+        const highlighting = this.highlighting;
+        const borderPath = this.borderPath;
         const boxShadow =
             this.props.treeViewDoc || !highlighting
                 ? this.boxShadow
                 : highlighting && this.borderRounding && highlighting.highlightStyle !== 'dashed'
                 ? `0 0 0 ${highlighting.highlightIndex}px ${highlighting.highlightColor}`
-                : this.boxShadow || (this.props.Document.isTemplateForField ? 'black 0.2vw 0.2vw 0.8vw' : undefined);
+                : this.boxShadow || (this.rootDoc.isTemplateForField ? 'black 0.2vw 0.2vw 0.8vw' : undefined);
         const renderDoc = this.renderDoc({
             borderRadius: this.borderRounding,
             outline: highlighting && !this.borderRounding && !highlighting.highlightStroke ? `${highlighting.highlightColor} ${highlighting.highlightStyle} ${highlighting.highlightIndex}px` : 'solid 0px',
@@ -1248,9 +1254,9 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}
                 onClick={this.onClick}
-                onPointerEnter={e => (!SnappingManager.GetIsDragging() || DragManager.CanEmbed) && Doc.BrushDoc(this.props.Document)}
-                onPointerOver={e => (!SnappingManager.GetIsDragging() || DragManager.CanEmbed) && Doc.BrushDoc(this.props.Document)}
-                onPointerLeave={e => !isParentOf(this.ContentDiv, document.elementFromPoint(e.nativeEvent.x, e.nativeEvent.y)) && Doc.UnBrushDoc(this.props.Document)}
+                onPointerEnter={e => (!SnappingManager.GetIsDragging() || DragManager.CanEmbed) && Doc.BrushDoc(this.rootDoc)}
+                onPointerOver={e => (!SnappingManager.GetIsDragging() || DragManager.CanEmbed) && Doc.BrushDoc(this.rootDoc)}
+                onPointerLeave={e => !isParentOf(this.ContentDiv, document.elementFromPoint(e.nativeEvent.x, e.nativeEvent.y)) && Doc.UnBrushDoc(this.rootDoc)}
                 style={{
                     borderRadius: this.borderRounding,
                     pointerEvents: this.pointerEvents === 'visiblePainted' ? 'none' : this.pointerEvents,
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index 3ec53beac..ad3532502 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -1,6 +1,6 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, ColorPicker, Dropdown, DropdownType, EditableText, IconButton, IListItemProps, NumberDropdown, NumberDropdownType, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
+import { Button, MultiToggle, ColorPicker, Dropdown, DropdownType, EditableText, IconButton, IListItemProps, NumberDropdown, NumberDropdownType, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -21,6 +21,7 @@ import { RichTextMenu } from '../formattedText/RichTextMenu';
 import './FontIconBox.scss';
 import { SelectedDocView } from '../../selectedDoc';
 import { Utils } from '../../../../Utils';
+import { FaAlignCenter, FaAlignJustify, FaAlignLeft, FaAlignRight } from 'react-icons/fa';
 
 export enum ButtonType {
     TextButton = 'textBtn',
@@ -86,10 +87,10 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     }
     Icon = (color: string, iconFalse?: boolean) => {
         let icon;
-        if (iconFalse ) {
+        if (iconFalse) {
             icon = StrCast(this.dataDoc[this.fieldKey ?? 'iconFalse'] ?? this.dataDoc.icon, 'user') as any;
-            if (icon) return <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />
-            else return null
+            if (icon) return <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />;
+            else return null;
         }
         icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as any;
         const trailsIcon = () => <img src={`/assets/${'presTrails.png'}`} style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? '0%' : '100%'})` }} />;
@@ -124,36 +125,38 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
      */
     @computed get numberDropdown() {
         let type: NumberDropdownType;
-        switch(this.type) {
-            case ButtonType.NumberDropdownButton: 
-                type = 'dropdown'
+        switch (this.type) {
+            case ButtonType.NumberDropdownButton:
+                type = 'dropdown';
                 break;
             case ButtonType.NumberInlineButton:
-                type = 'input'
+                type = 'input';
                 break;
             case ButtonType.NumberSliderButton:
             default:
-                type = 'slider'
+                type = 'slider';
                 break;
         }
-        const numScript = (value?: number) => ScriptCast(this.rootDoc.script).script.run({ self: this.rootDoc, value, _readOnly_: value === undefined });
+        const numScript = (value?: number) => ScriptCast(this.rootDoc.script).script.run({ this: this.layoutDoc, self: this.rootDoc, value, _readOnly_: value === undefined });
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         // Script for checking the outcome of the toggle
         const checkResult = Number(Number(numScript().result ?? 0).toPrecision(NumCast(this.dataDoc.numPrecision, 3)));
         const label = !FontIconBox.GetShowLabels() ? null : <div className="fontIconBox-label">{this.label}</div>;
 
-        return <NumberDropdown 
-            color={color} 
-            numberDropdownType={type} 
-            showPlusMinus={false} 
-            tooltip={this.label}
-            type={Type.PRIM}
-            min={NumCast(this.rootDoc.numBtnMin, 0)}
-            max={NumCast(this.rootDoc.numBtnMax, 100)}
-            number={checkResult} 
-            setNumber={undoable(value => numScript(value), `${this.rootDoc.title} button set from list`)}
-            fillWidth
-        />
+        return (
+            <NumberDropdown
+                color={color}
+                numberDropdownType={type}
+                showPlusMinus={false}
+                tooltip={this.label}
+                type={Type.PRIM}
+                min={NumCast(this.rootDoc.numBtnMin, 0)}
+                max={NumCast(this.rootDoc.numBtnMax, 100)}
+                number={checkResult}
+                setNumber={undoable(value => numScript(value), `${this.rootDoc.title} button set from list`)}
+                fillWidth
+            />
+        );
     }
 
     /**
@@ -202,84 +205,64 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         let dropdown = true;
         let getStyle: (val: string) => any = () => {};
         let icon: IconProp = 'caret-down';
-        let isViewDropdown: boolean = script?.script.originalScript.startsWith('setView')
+        let isViewDropdown: boolean = script?.script.originalScript.startsWith('setView');
         try {
             if (isViewDropdown) {
                 const selectedDocs: Doc[] = SelectionManager.Docs();
                 const selected = SelectionManager.Docs().lastElement();
-                console.log('selected')
                 if (selected) {
                     if (StrCast(selected.type) === DocumentType.COL) {
                         text = StrCast(selected._type_collection);
-                        console.log("collection selected", text)
                     } else {
-                        console.log("doc selected", selected.title);
                         dropdown = false;
                         if (selectedDocs.length > 1) {
-                            text = selectedDocs.length + " selected"
+                            text = selectedDocs.length + ' selected';
                         } else {
                             text = Utils.cleanDocumentType(StrCast(selected.type) as DocumentType);
                             icon = Doc.toIcon(selected);
                         }
-                        return <Popup
-                            icon={<FontAwesomeIcon size={'1x'} icon={icon} />}
-                            text={text}
-                            type={Type.TERT}
-                            color={color}
-                            popup={<SelectedDocView selectedDocs={selectedDocs}/>}
-                            fillWidth
-                        />
+                        return <Popup icon={<FontAwesomeIcon size={'1x'} icon={icon} />} text={text} type={Type.TERT} color={color} popup={<SelectedDocView selectedDocs={selectedDocs} />} fillWidth />;
                     }
                 } else {
                     dropdown = false;
-                    return <Button 
-                        text={`None Selected`} 
-                        type={Type.TERT}
-                        color={color}
-                        fillWidth
-                        inactive
-                    />
+                    return <Button text={`None Selected`} type={Type.TERT} color={color} fillWidth inactive />;
                 }
                 noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
-            } else { 
+            } else {
                 text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
-                getStyle = (val: string) => { return { fontFamily: val } }
+                getStyle = (val: string) => {
+                    return { fontFamily: val };
+                };
             }
         } catch (e) {
             console.log(e);
         }
 
-        console.log("current item: ", text);
-
         // Get items to place into the list
         const list: IListItemProps[] = this.buttonList
             .filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value))
-            .map(value => (
-                {
-                    text: value.charAt(0).toUpperCase() + value.slice(1),
-                    val: value,
-                    style: getStyle(value),
-                    onClick: undoable(() => script.script.run({ self: this.rootDoc, value }), value)
-                    // shortcut: '#',
-                }
-            ));
-
+            .map(value => ({
+                text: value.charAt(0).toUpperCase() + value.slice(1),
+                val: value,
+                style: getStyle(value),
+                onClick: undoable(() => script.script.run({ this: this.layoutDoc, self: this.rootDoc, value }), value),
+                // shortcut: '#',
+            }));
 
         return (
-            <Dropdown 
+            <Dropdown
                 selectedVal={text}
-                setSelectedVal={undoable((val) => script.script.run({ self: this.rootDoc, val }), `dropdown select ${this.label}`)}
-                color={color} 
-                type={isViewDropdown ? Type.TERT : Type.PRIM} 
-                dropdownType={DropdownType.SELECT} 
+                setSelectedVal={undoable(val => script.script.run({ this: this.layoutDoc, self: this.rootDoc, val }), `dropdown select ${this.label}`)}
+                color={color}
+                type={isViewDropdown ? Type.TERT : Type.PRIM}
+                dropdownType={DropdownType.SELECT}
                 items={list}
                 tooltip={this.label}
                 fillWidth
             />
-        )
+        );
     }
 
-
     @computed get colorScript() {
         return ScriptCast(this.rootDoc.script);
     }
@@ -290,14 +273,14 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     @computed get colorButton() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-        const curColor = this.colorScript?.script.run({ self: this.rootDoc, value: undefined, _readOnly_: true }).result ?? 'transparent';
+        const curColor = this.colorScript?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: undefined, _readOnly_: true }).result ?? 'transparent';
         const tooltip: string = StrCast(this.rootDoc.toolTip);
 
         return (
-            <ColorPicker 
-                setSelectedColor={(value) => {
+            <ColorPicker
+                setSelectedColor={value => {
                     const s = this.colorScript;
-                    s && undoable(() => s.script.run({ self: this.rootDoc, value: value, _readOnly_: false }).result, `Set ${tooltip} to ${value}`)();
+                    s && undoable(() => s.script.run({ this: this.layoutDoc, self: this.rootDoc, value: value, _readOnly_: false }).result, `Set ${tooltip} to ${value}`)();
                 }}
                 selectedColor={curColor}
                 type={Type.PRIM}
@@ -306,7 +289,35 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 tooltip={tooltip}
                 label={this.label}
             />
-        )
+        );
+    }
+    @computed get multiToggleButton() {
+        // Determine the type of toggle button
+        const tooltip: string = StrCast(this.rootDoc.toolTip);
+
+        const script = ScriptCast(this.rootDoc.onClick);
+        const toggleStatus = script ? script.script.run({ this: this.layoutDoc, self: this.rootDoc, value: undefined, _readOnly_: true }).result : false;
+        // Colors
+        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
+        const items = DocListCast(this.rootDoc.data);
+        return (
+            <MultiToggle
+                tooltip={`Toggle ${tooltip}`}
+                type={Type.PRIM}
+                color={color}
+                label={this.label}
+                items={DocListCast(this.rootDoc.data).map(item => ({
+                    icon: <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={StrCast(item.icon) as any} color={color} />,
+                    tooltip: StrCast(item.toolTip),
+                    val: StrCast(item.toolType),
+                }))}
+                selectedVal={StrCast(items.find(itemDoc => ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, self: itemDoc, value: undefined, _readOnly_: true }).result)?.toolType)}
+                setSelectedVal={(val: string | number) => {
+                    const itemDoc = items.find(item => item.toolType === val);
+                    itemDoc && ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, self: itemDoc, value: val, _readOnly_: false });
+                }}
+            />
+        );
     }
 
     @computed get toggleButton() {
@@ -315,25 +326,24 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const tooltip: string = StrCast(this.rootDoc.toolTip);
 
         const script = ScriptCast(this.rootDoc.onClick);
-        const toggleStatus = script ? script.script.run({ self: this.rootDoc, value: undefined, _readOnly_: true }).result : false;
+        const toggleStatus = script ? script.script.run({ this: this.layoutDoc, self: this.rootDoc, value: undefined, _readOnly_: true }).result : false;
         // Colors
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
 
-        console.log(tooltip, toggleStatus);
         return (
-            <Toggle 
-                tooltip={`Toggle ${tooltip}`} 
-                toggleType={ToggleType.BUTTON} 
-                type={Type.PRIM} 
-                toggleStatus={toggleStatus} 
-                text={buttonText} 
-                color={color} 
-                icon={this.Icon(color)!} 
+            <Toggle
+                tooltip={`Toggle ${tooltip}`}
+                toggleType={ToggleType.BUTTON}
+                type={Type.PRIM}
+                toggleStatus={toggleStatus}
+                text={buttonText}
+                color={color}
+                icon={this.Icon(color)!}
                 label={this.label}
-                onPointerDown={() => script.script.run({ self: this.rootDoc, value: !toggleStatus, _readOnly_: false })}
+                onPointerDown={() => script.script.run({ this: this.layoutDoc, self: this.rootDoc, value: !toggleStatus, _readOnly_: false })}
             />
-        )
+        );
     }
 
     /**
@@ -344,28 +354,24 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         const tooltip: string = StrCast(this.rootDoc.toolTip);
 
-        return (
-            <IconButton tooltip={tooltip} icon={this.Icon(color)!} label={this.label}/>
-        )
+        return <IconButton tooltip={tooltip} icon={this.Icon(color)!} label={this.label} />;
     }
 
     @computed get editableText() {
         // Script for running the toggle
         const script = ScriptCast(this.rootDoc.script);
         // Function to run the script
-        const checkResult = script?.script.run({ value: '', _readOnly_: true }).result;
+        const checkResult = script?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: '', _readOnly_: true }).result;
+
+        const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ this: this.layoutDoc, self: this.rootDoc, value, _readOnly_: false }).result;
+
+        return <EditableText editing={false} setEditing={(editing: boolean) => {}} />;
 
-        const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ value, _readOnly_: false }).result;
-        
-        return <EditableText 
-            editing={false} setEditing={(editing: boolean) => {}}            
-        />
-        
         return (
             <div className="menuButton editableText">
                 <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'lock'} />
                 <div style={{ width: 'calc(100% - .875em)', paddingLeft: '4px' }}>
-                    <EditableView GetValue={() => script?.script.run({ value: '', _readOnly_: true }).result} SetValue={setValue} oneLine={true} contents={checkResult} />
+                    <EditableView GetValue={() => script?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: '', _readOnly_: true }).result} SetValue={setValue} oneLine={true} contents={checkResult} />
                 </div>
             </div>
         );
@@ -374,47 +380,34 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     render() {
         // determine dash button metadata
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         const tooltip: string = StrCast(this.rootDoc.toolTip);
         const onClickScript = ScriptCast(this.rootDoc.onClick);
-        const script = ScriptCast(this.rootDoc.script);
         // TODO:glr Add label of button type
         let button: JSX.Element = this.defaultButton;
         // prettier-ignore
         switch (this.type) {
             case ButtonType.EditableText: 
-                button = this.editableText;
-                break;
+                button = this.editableText; break;
             case ButtonType.DropdownList:
-                button = this.dropdownListButton;
-                break;
+                button = this.dropdownListButton; break;
             case ButtonType.ColorButton: 
-                button = this.colorButton; 
-                break;
+                button = this.colorButton;  break;
             case ButtonType.NumberDropdownButton: 
             case ButtonType.NumberInlineButton:
             case ButtonType.NumberSliderButton: 
-                button = this.numberDropdown; 
-                break;
+                button = this.numberDropdown;  break;
             case ButtonType.DropdownButton: 
-                button = this.dropdownButton; 
-                break;
+                button = this.dropdownButton;  break;
+            case ButtonType.MultiToggleButton: 
+                button = this.multiToggleButton; break; 
             case ButtonType.ToggleButton: button = this.toggleButton; break;
             case ButtonType.ClickButton:
             case ButtonType.ToolButton: 
-                button = (
-                    <IconButton tooltip={tooltip} onPointerDown={() => onClickScript?.script.run({ _readOnly_: false })} color={color} icon={this.Icon(color)!} label={this.label}/>
-                );
-                break;
+                button = <IconButton tooltip={tooltip} color={color} icon={this.Icon(color)!} label={this.label}/>; break;
             case ButtonType.TextButton: 
-                button = (
-                    <Button tooltip={tooltip} icon={this.Icon(color)!} text={StrCast(this.rootDoc.buttonText)} label={this.label}/>
-                );
-                break;
-            case ButtonType.MenuButton: button = (
-                    <IconButton tooltip={tooltip} onPointerDown={() => onClickScript?.script.run({ self: this.rootDoc, _readOnly_: false })} tooltipPlacement='right' size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>
-                );
-                break;
+                button = <Button tooltip={tooltip} icon={this.Icon(color)!} text={StrCast(this.rootDoc.buttonText)} label={this.label}/>; break;
+            case ButtonType.MenuButton: 
+                button = <IconButton tooltip={tooltip} onPointerDown={() => onClickScript?.script.run({ this: this.layoutDoc, self: this.rootDoc, _readOnly_: false })} tooltipPlacement='right' size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>; break;
         }
 
         return button;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 909a420fe..d763753a5 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -295,7 +295,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     choosePath(url: URL) {
         const lower = url.href.toLowerCase();
         if (url.protocol === 'data') return url.href;
-        if (url.href.indexOf(window.location.origin) === -1) return Utils.CorsProxy(url.href);
+        if (url.href.indexOf(window.location.origin) === -1 && url.href.indexOf("dashblobstore") === -1) return Utils.CorsProxy(url.href);
         if (!/\.(png|jpg|jpeg|gif|webp)$/.test(lower)) return `/assets/unknown-file-icon-hi.png`;
 
         const ext = extname(url.href);
diff --git a/src/client/views/nodes/LoadingBox.scss b/src/client/views/nodes/LoadingBox.scss
index 4c3b8dabe..d4a7e18f2 100644
--- a/src/client/views/nodes/LoadingBox.scss
+++ b/src/client/views/nodes/LoadingBox.scss
@@ -12,6 +12,10 @@
         text-overflow: ellipsis;
         max-width: 80%;
         text-align: center;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        align-items: center;
     }
 }
 
diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index b4fb7a44e..d5ad128fe 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.tsx
+++ b/src/client/views/nodes/formattedText/DashFieldView.tsx
@@ -17,6 +17,7 @@ import { OpenWhere } from '../DocumentView';
 import './DashFieldView.scss';
 import { FormattedTextBox } from './FormattedTextBox';
 import React = require('react');
+import { Transform } from '../../../util/Transform';
 
 export class DashFieldView {
     dom: HTMLDivElement; // container for label and value
@@ -113,6 +114,7 @@ export class DashFieldViewInternal extends React.Component<IDashFieldViewInterna
     componentWillUnmount() {
         this._reactionDisposer?.();
     }
+    return100 = () => 100;
 
     // set the display of the field's value (checkbox for booleans, span of text for strings)
     @computed get fieldValueContent() {
@@ -123,7 +125,7 @@ export class DashFieldViewInternal extends React.Component<IDashFieldViewInterna
                     col={0}
                     deselectCell={emptyFunction}
                     selectCell={emptyFunction}
-                    maxWidth={this.props.hideKey ? undefined : () => 100}
+                    maxWidth={this.props.hideKey ? undefined : this.return100}
                     columnWidth={this.props.hideKey ? () => this.props.tbox.props.PanelWidth() - 20 : returnZero}
                     selectedCell={() => [this._dashDoc!, 0]}
                     fieldKey={this._fieldKey}
@@ -135,6 +137,8 @@ export class DashFieldViewInternal extends React.Component<IDashFieldViewInterna
                     allowCRs={true}
                     oneLine={!this._expanded}
                     finishEdit={action(() => (this._expanded = false))}
+                    transform={Transform.Identity}
+                    menuTarget={null}
                 />
             </div>
         );
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 109b62e6f..348bdd79e 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -84,7 +84,6 @@ audiotag:hover {
     height: 11;
 }
 
-.formattedTextBox-outer-selected,
 .formattedTextBox-outer {
     position: relative;
     overflow: auto;
@@ -92,9 +91,6 @@ audiotag:hover {
     width: 100%;
     height: unset;
 }
-.formattedTextBox-outer-selected {
-    cursor: text;
-}
 
 .formattedTextBox-sidebar-handle {
     position: absolute;
@@ -148,10 +144,8 @@ audiotag:hover {
 }
 
 .formattedTextBox-inner-rounded,
-.formattedTextBox-inner-rounded-selected,
 .formattedTextBox-inner,
-.formattedTextBox-inner-minimal,
-.formattedTextBox-inner-selected {
+.formattedTextBox-inner-minimal {
     height: 100%;
     white-space: pre-wrap;
     .ProseMirror:hover {
@@ -169,17 +163,6 @@ audiotag:hover {
         border-width: 1px;
     }
 }
-.formattedTextBox-inner-rounded-selected,
-.formattedTextBox-inner-selected {
-    > .ProseMirror {
-        padding: 10px;
-    }
-}
-.formattedTextBox-outer-selected {
-    > .ProseMirror:hover {
-        background: unset;
-    }
-}
 
 .gpt-typing-wrapper {
     padding: 10px;
@@ -640,7 +623,6 @@ footnote::before {
         }
     }
 
-    .formattedTextBox-outer-selected,
     .formattedTextBox-outer {
         position: relative;
         overflow: auto;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index a0eb328a1..24d2f0e13 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1557,7 +1557,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         );
     };
 
+    @action
     componentWillUnmount() {
+        if (this._recording) {
+            this._recording = !this._recording;
+        }
         Object.values(this._disposers).forEach(disposer => disposer?.());
         this.endUndoTypingBatch();
         FormattedTextBox.LiveTextUndo?.end();
@@ -1596,8 +1600,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         }
         if (this._recording && !e.ctrlKey && e.button === 0) {
             this.breakupDictation();
-            e.preventDefault();
-            e.stopPropagation();
         }
         this._downX = e.clientX;
         this._downY = e.clientY;
@@ -2043,17 +2045,25 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         }
     };
     _oldWheel: any;
+    @computed get fontColor() {
+        return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color);
+    }
+    @computed get fontSize() {
+        return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.FontSize);
+    }
+    @computed get fontFamily() {
+        return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.FontFamily);
+    }
+    @computed get fontWeight() {
+        return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.FontWeight);
+    }
     render() {
         TraceMobx();
-        const active = this.props.isContentActive();
         const scale = (this.props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1);
         const rounded = StrCast(this.layoutDoc.layout_borderRounding) === '100%' ? '-rounded' : '';
-        if (!active && FormattedTextBoxComment.textBox === this) setTimeout(FormattedTextBoxComment.Hide);
-        const minimal = this.props.ignoreAutoHeight;
+        setTimeout(() => !this.props.isContentActive() && FormattedTextBoxComment.textBox === this && FormattedTextBoxComment.Hide);
         const paddingX = NumCast(this.layoutDoc._xMargin, this.props.xPadding || 0);
         const paddingY = NumCast(this.layoutDoc._yMargin, this.props.yPadding || 0);
-        const selPad = (active && !this.layoutDoc._createDocOnCR) || minimal ? Math.min(paddingY, Math.min(paddingX, 10)) : 0;
-        const selPaddingClass = active && !this.layoutDoc._createDocOnCR && paddingY >= 10 ? '-selected' : '';
         const styleFromLayoutString = Doc.styleFromLayoutString(this.rootDoc, this.layoutDoc, this.props, scale); // this converts any expressions in the format string to style props.  e.g., <FormattedTextBox height='{this._headerHeight}px' >
         return styleFromLayoutString?.height === '0px' ? null : (
             <div
@@ -2074,19 +2084,20 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                               width: `${100 / scale}%`,
                               height: `${100 / scale}%`,
                           }),
-                    display: !this.props.isContentActive() && this.props.thumbShown?.() ? 'none' : undefined,
+                    // display: !this.props.isContentActive() && this.props.thumbShown?.() ? 'none' : undefined,
                     transition: 'inherit',
                     // overflowY: this.layoutDoc._layout_autoHeight ? "hidden" : undefined,
-                    color: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color),
-                    fontSize: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.FontSize),
-                    fontFamily: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.FontFamily),
-                    fontWeight: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.FontWeight),
+                    color: this.fontColor,
+                    fontSize: this.fontSize,
+                    fontFamily: this.fontFamily,
+                    fontWeight: this.fontWeight,
                     ...styleFromLayoutString,
                 }}>
                 <div
                     className="formattedTextBox-cont"
                     ref={this._ref}
                     style={{
+                        cursor: this.props.isContentActive() ? 'text' : undefined,
                         overflow: this.layout_autoHeight && this.props.CollectionFreeFormDocumentView?.() ? 'hidden' : undefined, //x this breaks viewing an layout_autoHeight doc in its own tab, or in the lightbox
                         height: this.props.height || (this.layout_autoHeight && this.props.renderDepth && !this.props.suppressSetHeight ? 'max-content' : undefined),
                         pointerEvents: Doc.ActiveTool === InkTool.None && !this.props.onBrowseClick?.() ? undefined : 'none',
@@ -2101,7 +2112,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                     onPointerDown={this.onPointerDown}
                     onDoubleClick={this.onDoubleClick}>
                     <div
-                        className={`formattedTextBox-outer${active ? '-selected' : ''}`}
+                        className={`formattedTextBox-outer`}
                         ref={this._scrollRef}
                         style={{
                             width: this.props.dontSelectOnLoad ? '100%' : `calc(100% - ${this.layout_sidebarWidthPercent})`,
@@ -2110,15 +2121,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                         onScroll={this.onScroll}
                         onDrop={this.ondrop}>
                         <div
-                            className={minimal ? 'formattedTextBox-minimal' : `formattedTextBox-inner${rounded}${selPaddingClass}`}
+                            className={`formattedTextBox-inner${rounded}`}
                             ref={this.createDropTarget}
                             style={{
                                 padding: StrCast(this.layoutDoc._textBoxPadding),
-                                paddingLeft: StrCast(this.layoutDoc._textBoxPaddingX, `${paddingX - selPad}px`),
-                                paddingRight: StrCast(this.layoutDoc._textBoxPaddingX, `${paddingX - selPad}px`),
-                                paddingTop: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY - selPad}px`),
-                                paddingBottom: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY - selPad}px`),
-                                // pointerEvents: !active && IsFollowLinkScript(this.layoutDoc.onClick) ? 'none' : undefined,
+                                paddingLeft: StrCast(this.layoutDoc._textBoxPaddingX, `${paddingX}px`),
+                                paddingRight: StrCast(this.layoutDoc._textBoxPaddingX, `${paddingX}px`),
+                                paddingTop: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY}px`),
+                                paddingBottom: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY}px`),
                             }}
                         />
                     </div>
diff --git a/src/client/views/nodes/importBox/ImportElementBox.tsx b/src/client/views/nodes/importBox/ImportElementBox.tsx
index a5d21cc8e..58f0b29e4 100644
--- a/src/client/views/nodes/importBox/ImportElementBox.tsx
+++ b/src/client/views/nodes/importBox/ImportElementBox.tsx
@@ -1,13 +1,13 @@
-import { observer } from "mobx-react";
-import { ViewBoxBaseComponent } from "../../DocComponent";
-import { FieldView, FieldViewProps } from "../FieldView";
-import { computed } from "mobx";
-import { Id } from "../../../../fields/FieldSymbols";
-import React from "react";
-import { EditableView } from "../../EditableView";
-import { DocListCast } from "../../../../fields/Doc";
-import { StrCast } from "../../../../fields/Types";
-
+import { computed } from 'mobx';
+import { observer } from 'mobx-react';
+import { Doc } from '../../../../fields/Doc';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue } from '../../../../Utils';
+import { Transform } from '../../../util/Transform';
+import { ViewBoxBaseComponent } from '../../DocComponent';
+import { DefaultStyleProvider } from '../../StyleProvider';
+import { DocumentView, DocumentViewInternal } from '../DocumentView';
+import { FieldView, FieldViewProps } from '../FieldView';
+import React = require('react');
 
 @observer
 export class ImportElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
@@ -15,56 +15,24 @@ export class ImportElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return FieldView.LayoutString(ImportElementBox, fieldKey);
     }
 
-    private _itemRef: React.RefObject<HTMLDivElement> = React.createRef();
-    private _dragRef: React.RefObject<HTMLDivElement> = React.createRef();
-    private _titleRef: React.RefObject<EditableView> = React.createRef();
-
-    @computed importBoxVoew() {
-        return this.props.DocumentView?.()?.props.docViewPath().lastElement()?.ComponentView as PresBox;
-    }
-    
-    @computed get indexInPres() {
-        return DocListCast(this.presBox?.[StrCast(this.presBox.presFieldKey, 'data')]).indexOf(this.rootDoc);
+    screenToLocalXf = () => this.props.ScreenToLocalTransform().scale(1 * (this.props.NativeDimScaling?.() || 1));
+    @computed get mainItem() {
+        return (
+            <div style={{ backgroundColor: 'pink' }}>
+                <DocumentView
+                    {...this.props} //
+                    LayoutTemplateString={undefined}
+                    Document={this.rootDoc}
+                    isContentActive={returnFalse}
+                    DataDoc={undefined}
+                    addDocument={returnFalse}
+                    ScreenToLocalTransform={this.screenToLocalXf}
+                    hideResizeHandles={true}
+                />
+            </div>
+        );
     }
-    
-    @computed get presBox() {
-        return this.props.DocumentView?.().props.docViewPath().lastElement()?.rootDoc;
+    render() {
+        return !(this.rootDoc instanceof Doc) ? null : this.mainItem;
     }
-
-    // @computed get selectedArray() {
-    //     return this.presBoxView?.selectedArray;
-    // }
-
-@computed get mainItem() {
-    const isCurrent: boolean = this.presBox?._itemIndex === this.indexInPres;
-    //const isSelected: boolean = this.selectedArray?.has(this.rootDoc) ? true : false;
-  //  const activeItem: Doc = this.rootDoc;
-
-    return(
-        <div
-            className = {`presItem-container`}
-            // key={this.props.Document[Id] + this.indexInPres}
-            style = {{backgroundColor: 'pink'}}
-            
-        >
-            <div
-                ref = {this._dragRef}
-                className = {`presItem-slide ${isCurrent ? 'active' : ''}`}
-                style = {{
-                    backgroundColor: 'green'
-                }}>
-                    <div
-                        className="presItem-number"
-                        title = "select without navigation"
-                    
-                    >
-                         {/* <EditableView ref={this._titleRef} oneLine={true} editing={!isSelected ? false : undefined} contents={activeItem.title} overflow={'ellipsis'} GetValue={() => StrCast(activeItem.title)} SetValue={this.onSetValue} /> */}
-
-                    </div>
-            </div>
-
-        </div>
-    )
 }
-
-}
-\ No newline at end of file
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 07b2afd91..b877cc36a 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -253,21 +253,18 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     };
 
     @computed get highlighter() {
-        return <Group>
-            <IconButton 
-                icon={<FontAwesomeIcon icon="highlighter" style={{ transition: 'transform 0.1s', transform: 'rotate(-45deg)' }} />}
-                tooltip={'Click to Highlight'}
-                onClick={this.highlightClicked}
-                colorPicker={this.highlightColor}
-                color={StrCast(Doc.UserDoc().userColor)}
-            />
-            <ColorPicker
-                colorPickerType={'github'}
-                selectedColor={this.highlightColor}
-                setSelectedColor={color => this.changeHighlightColor(color)}
-                size={Size.XSMALL}
-            />
-        </Group>
+        return (
+            <Group>
+                <IconButton
+                    icon={<FontAwesomeIcon icon="highlighter" style={{ transition: 'transform 0.1s', transform: 'rotate(-45deg)' }} />}
+                    tooltip={'Click to Highlight'}
+                    onClick={this.highlightClicked}
+                    colorPicker={this.highlightColor}
+                    color={StrCast(Doc.UserDoc().userColor)}
+                />
+                <ColorPicker colorPickerType={'github'} selectedColor={this.highlightColor} setSelectedColor={color => this.changeHighlightColor(color)} size={Size.XSMALL} />
+            </Group>
+        );
     }
 
     @action changeHighlightColor = (color: string) => {
@@ -312,19 +309,20 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
             this.Status === 'marquee' ? (
                 <>
                     {this.highlighter}
-                    <IconButton 
-                        tooltip={'Drag to Place Annotation'} 
-                        onPointerDown={this.pointerDown} 
-                        icon={<FontAwesomeIcon icon="comment-alt"/>}
+                    <IconButton
+                        tooltip="Drag to Place Annotation" //
+                        onPointerDown={this.pointerDown}
+                        icon={<FontAwesomeIcon icon="comment-alt" />}
                         color={StrCast(Doc.UserDoc().userColor)}
                     />
                     {/* GPT Summarize icon only shows up when text is highlighted, not on marquee selection*/}
                     {AnchorMenu.Instance.StartCropDrag === unimplementedFunction && this.canSummarize() && (
-                        <Tooltip key="gpt" title={<div className="dash-tooltip">Summarize with AI</div>}>
-                            <button className="antimodeMenu-button annotate" onPointerDown={this.gptSummarize} style={{ cursor: 'grab' }}>
-                                <FontAwesomeIcon icon="comment-dots" size="lg" />
-                            </button>
-                        </Tooltip>
+                        <IconButton
+                            tooltip="Summarize with AI" //
+                            onPointerDown={this.gptSummarize}
+                            icon={<FontAwesomeIcon icon="comment-dots" size="lg" />}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
                     )}
                     <GPTPopup
                         key="gptpopup"
@@ -338,66 +336,74 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                         mode={this.GPTMode}
                     />
                     {AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : (
-                        <IconButton 
-                            tooltip={'Click to Record Annotation'}
+                        <IconButton
+                            tooltip="Click to Record Annotation" //
                             onPointerDown={this.audioDown}
                             icon={<FontAwesomeIcon icon="microphone" />}
                             color={StrCast(Doc.UserDoc().userColor)}
                         />
                     )}
                     {this.canEdit() && (
-                        <IconButton 
-                            tooltip={'AI edit suggestions'}
+                        <IconButton
+                            tooltip="AI edit suggestions" //
                             onPointerDown={this.gptEdit}
                             icon={<FontAwesomeIcon icon="pencil-alt" />}
                             color={StrCast(Doc.UserDoc().userColor)}
                         />
                     )}
-                    <Popup 
-                        tooltip='Find document to link to selected text'
+                    <Popup
+                        tooltip="Find document to link to selected text" //
                         type={Type.PRIM}
                         icon={<FontAwesomeIcon icon={'search'} />}
                         popup={<LinkPopup key="popup" linkCreateAnchor={this.onMakeAnchor} />}
                         color={StrCast(Doc.UserDoc().userColor)}
                     />
                     {AnchorMenu.Instance.StartCropDrag === unimplementedFunction ? null : (
-                        <IconButton 
-                            tooltip={'Click/Drag to create cropped image'}
+                        <IconButton
+                            tooltip="Click/Drag to create cropped image" //
                             onPointerDown={this.cropDown}
-                            icon={<FontAwesomeIcon icon="image"/>}
+                            icon={<FontAwesomeIcon icon="image" />}
                             color={StrCast(Doc.UserDoc().userColor)}
                         />
                     )}
                 </>
             ) : (
                 <>
-                    {this.Delete !== returnFalse && <IconButton 
-                        tooltip={'Remove Link Anchor'}
-                        onPointerDown={this.Delete}
-                        icon={<FontAwesomeIcon icon="trash-alt" />}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />}
-                    {this.PinToPres !== returnFalse && <IconButton 
-                        tooltip={'Pin to Presentation'}
-                        onPointerDown={this.PinToPres}
-                        icon={<FontAwesomeIcon icon="map-pin" />}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />}
-                    {this.ShowTargetTrail !== returnFalse && <IconButton 
-                        tooltip={'Show Linked Trail'}
-                        onPointerDown={this.ShowTargetTrail}
-                        icon={<FontAwesomeIcon icon="taxi" />}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />}
-                    {this.IsTargetToggler !== returnFalse && <Toggle
-                        tooltip={'Make target visibility toggle on click'}
-                        type={Type.PRIM}
-                        toggleType={ToggleType.BUTTON}
-                        toggleStatus={this.IsTargetToggler()}
-                        onClick={this.MakeTargetToggle}
-                        icon={<FontAwesomeIcon icon="thumbtack" />}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />}
+                    {this.Delete !== returnFalse && (
+                        <IconButton
+                            tooltip="Remove Link Anchor" //
+                            onPointerDown={this.Delete}
+                            icon={<FontAwesomeIcon icon="trash-alt" />}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
+                    )}
+                    {this.PinToPres !== returnFalse && (
+                        <IconButton
+                            tooltip="Pin to Presentation" //
+                            onPointerDown={this.PinToPres}
+                            icon={<FontAwesomeIcon icon="map-pin" />}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
+                    )}
+                    {this.ShowTargetTrail !== returnFalse && (
+                        <IconButton
+                            tooltip="Show Linked Trail" //
+                            onPointerDown={this.ShowTargetTrail}
+                            icon={<FontAwesomeIcon icon="taxi" />}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
+                    )}
+                    {this.IsTargetToggler !== returnFalse && (
+                        <Toggle
+                            tooltip={'Make target visibility toggle on click'}
+                            type={Type.PRIM}
+                            toggleType={ToggleType.BUTTON}
+                            toggleStatus={this.IsTargetToggler()}
+                            onClick={this.MakeTargetToggle}
+                            icon={<FontAwesomeIcon icon="thumbtack" />}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
+                    )}
                 </>
             );
 
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 79f41fe9d..cb8eda9de 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -10,7 +10,7 @@ import { StrCast } from '../../../fields/Types';
 import { GetEffectiveAcl } from '../../../fields/util';
 import { DocumentManager } from '../../util/DocumentManager';
 import { PingManager } from '../../util/PingManager';
-import { ReportManager } from '../../util/ReportManager';
+import { ReportManager } from '../../util/reportManager/ReportManager';
 import { ServerStats } from '../../util/ServerStats';
 import { SettingsManager } from '../../util/SettingsManager';
 import { SharingManager } from '../../util/SharingManager';
@@ -134,14 +134,16 @@ export class TopBar extends React.Component {
     @computed get topbarRight() {
         return (
             <div className="topbar-right">
-                <Button
-                    text={GetEffectiveAcl(Doc.ActiveDashboard) === AclAdmin ? 'Share' : 'View Original'}
-                    type={Type.TERT}
-                    color={this.variantColor}
-                    onClick={() => {
-                        SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
-                    }}
-                />
+                {Doc.ActiveDashboard ? 
+                    <Button
+                        text={GetEffectiveAcl(Doc.ActiveDashboard) === AclAdmin ? 'Share' : 'View Original'}
+                        type={Type.TERT}
+                        color={this.variantColor}
+                        onClick={() => {
+                            SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
+                        }}
+                    />
+                : null }
                 <IconButton tooltip={"Issue Reporter ⌘I"} size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} />
                 <IconButton tooltip={"Documentation ⌘D"} size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
                 <IconButton tooltip={"Settings ⌘⇧S"} size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} />
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 770a72855..203f455db 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -573,7 +573,7 @@ export namespace Doc {
 
     // compare whether documents or their protos match
     export function AreProtosEqual(doc?: Doc, other?: Doc) {
-        return doc && other && Doc.GetProto(doc) === Doc.GetProto(other);
+        return doc && other && (doc === other || Doc.GetProto(doc) === Doc.GetProto(other));
     }
 
     // Gets the data document for the document.  Note: this is mis-named -- it does not specifically
diff --git a/src/fields/List.ts b/src/fields/List.ts
index 183d644d3..f3fcc87f7 100644
--- a/src/fields/List.ts
+++ b/src/fields/List.ts
@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { alias, list, serializable } from 'serializr';
 import { DocServer } from '../client/DocServer';
 import { ScriptingGlobals } from '../client/util/ScriptingGlobals';
@@ -72,13 +72,13 @@ class ListImpl<T extends Field> extends ObjectField {
             return res;
         },
         sort(cmpFunc: any) {
-            this[Self].__realFields(); // coerce retrieving entire array
+            this[Self].__realFields; // coerce retrieving entire array
             const res = this[Self].__fieldTuples.sort(cmpFunc ? (first: any, second: any) => cmpFunc(toRealField(first), toRealField(second)) : undefined);
             this[SelfProxy][FieldChanged]?.();
             return res;
         },
         splice: action(function (this: any, start: number, deleteCount: number, ...items: any[]) {
-            this[Self].__realFields(); // coerce retrieving entire array
+            this[Self].__realFields; // coerce retrieving entire array
             items = items.map(toObjectField);
             const list = this[Self];
             const removed = list.__fieldTuples.filter((item: any, i: number) => i >= start && i < start + deleteCount);
@@ -125,104 +125,104 @@ class ListImpl<T extends Field> extends ObjectField {
         },
         /// Accessor methods
         concat: action(function (this: any, ...items: any[]) {
-            this[Self].__realFields();
+            this[Self].__realFields;
             return this[Self].__fieldTuples.map(toRealField).concat(...items);
         }),
         includes(valueToFind: any, fromIndex: number) {
             if (valueToFind instanceof RefField) {
-                return this[Self].__realFields().includes(valueToFind, fromIndex);
+                return this[Self].__realFields.includes(valueToFind, fromIndex);
             } else {
                 return this[Self].__fieldTuples.includes(valueToFind, fromIndex);
             }
         },
         indexOf(valueToFind: any, fromIndex: number) {
             if (valueToFind instanceof RefField) {
-                return this[Self].__realFields().indexOf(valueToFind, fromIndex);
+                return this[Self].__realFields.indexOf(valueToFind, fromIndex);
             }
             return this[Self].__fieldTuples.indexOf(valueToFind, fromIndex);
         },
         join(separator: any) {
-            this[Self].__realFields();
+            this[Self].__realFields;
             return this[Self].__fieldTuples.map(toRealField).join(separator);
         },
         lastElement() {
-            return this[Self].__realFields().lastElement();
+            return this[Self].__realFields.lastElement();
         },
         lastIndexOf(valueToFind: any, fromIndex: number) {
             if (valueToFind instanceof RefField) {
-                return this[Self].__realFields().lastIndexOf(valueToFind, fromIndex);
+                return this[Self].__realFields.lastIndexOf(valueToFind, fromIndex);
             } else {
                 return this[Self].__fieldTuples.lastIndexOf(valueToFind, fromIndex);
             }
         },
         slice(begin: number, end: number) {
-            this[Self].__realFields();
+            this[Self].__realFields;
             return this[Self].__fieldTuples.slice(begin, end).map(toRealField);
         },
 
         /// Iteration methods
         entries() {
-            return this[Self].__realFields().entries();
+            return this[Self].__realFields.entries();
         },
         every(callback: any, thisArg: any) {
-            return this[Self].__realFields().every(callback, thisArg);
+            return this[Self].__realFields.every(callback, thisArg);
             // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
             // If we don't want to support the array parameter, we should use this version instead
             // return this[Self].__fieldTuples.every((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
         },
         filter(callback: any, thisArg: any) {
-            return this[Self].__realFields().filter(callback, thisArg);
+            return this[Self].__realFields.filter(callback, thisArg);
             // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
             // If we don't want to support the array parameter, we should use this version instead
             // return this[Self].__fieldTuples.filter((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
         },
         find(callback: any, thisArg: any) {
-            return this[Self].__realFields().find(callback, thisArg);
+            return this[Self].__realFields.find(callback, thisArg);
             // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
             // If we don't want to support the array parameter, we should use this version instead
             // return this[Self].__fieldTuples.find((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
         },
         findIndex(callback: any, thisArg: any) {
-            return this[Self].__realFields().findIndex(callback, thisArg);
+            return this[Self].__realFields.findIndex(callback, thisArg);
             // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
             // If we don't want to support the array parameter, we should use this version instead
             // return this[Self].__fieldTuples.findIndex((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
         },
         forEach(callback: any, thisArg: any) {
-            return this[Self].__realFields().forEach(callback, thisArg);
+            return this[Self].__realFields.forEach(callback, thisArg);
             // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
             // If we don't want to support the array parameter, we should use this version instead
             // return this[Self].__fieldTuples.forEach((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
         },
         map(callback: any, thisArg: any) {
-            return this[Self].__realFields().map(callback, thisArg);
+            return this[Self].__realFields.map(callback, thisArg);
             // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
             // If we don't want to support the array parameter, we should use this version instead
             // return this[Self].__fieldTuples.map((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
         },
         reduce(callback: any, initialValue: any) {
-            return this[Self].__realFields().reduce(callback, initialValue);
+            return this[Self].__realFields.reduce(callback, initialValue);
             // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
             // If we don't want to support the array parameter, we should use this version instead
             // return this[Self].__fieldTuples.reduce((acc:any, element:any, index:number, array:any) => callback(acc, toRealField(element), index, array), initialValue);
         },
         reduceRight(callback: any, initialValue: any) {
-            return this[Self].__realFields().reduceRight(callback, initialValue);
+            return this[Self].__realFields.reduceRight(callback, initialValue);
             // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
             // If we don't want to support the array parameter, we should use this version instead
             // return this[Self].__fieldTuples.reduceRight((acc:any, element:any, index:number, array:any) => callback(acc, toRealField(element), index, array), initialValue);
         },
         some(callback: any, thisArg: any) {
-            return this[Self].__realFields().some(callback, thisArg);
+            return this[Self].__realFields.some(callback, thisArg);
             // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
             // If we don't want to support the array parameter, we should use this version instead
             // return this[Self].__fieldTuples.some((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
         },
         values() {
-            return this[Self].__realFields().values();
+            return this[Self].__realFields.values();
         },
         [Symbol.iterator]() {
-            return this[Self].__realFields().values();
+            return this[Self].__realFields.values();
         },
     };
     static listGetter(target: any, prop: string | symbol, receiver: any): any {
@@ -262,7 +262,7 @@ class ListImpl<T extends Field> extends ObjectField {
 
     // this requests all ProxyFields at the same time to avoid the overhead
     // of separate network requests and separate updates to the React dom.
-    private __realFields() {
+    @computed private get __realFields() {
         const unrequested = this[FieldTuples].filter(f => f instanceof ProxyField && f.needsRequesting).map(f => f as ProxyField<RefField>);
         // if we find any ProxyFields that don't have a current value, then
         // start the server request for all of them
diff --git a/src/server/ApiManagers/AzureManager.ts b/src/server/ApiManagers/AzureManager.ts
new file mode 100644
index 000000000..12bb98ad0
--- /dev/null
+++ b/src/server/ApiManagers/AzureManager.ts
@@ -0,0 +1,67 @@
+import { ContainerClient, BlobServiceClient } from "@azure/storage-blob";
+import * as fs from "fs";
+import { Readable, Stream } from "stream";
+const AZURE_STORAGE_CONNECTION_STRING = process.env.AZURE_STORAGE_CONNECTION_STRING;
+
+export class AzureManager {
+    private _containerClient: ContainerClient;
+    private _blobServiceClient: BlobServiceClient;
+    private static _instance: AzureManager | undefined;
+
+    public static CONTAINER_NAME = "dashmedia";
+    public static STORAGE_ACCOUNT_NAME = "dashblobstore";
+
+    constructor() {
+        if (!AZURE_STORAGE_CONNECTION_STRING) {
+            throw new Error("Azure Storage Connection String Not Found");
+        }
+        this._blobServiceClient = BlobServiceClient.fromConnectionString(AZURE_STORAGE_CONNECTION_STRING);
+        this._containerClient = this.BlobServiceClient.getContainerClient(AzureManager.CONTAINER_NAME);
+    }
+
+    public static get Instance() {
+        return this._instance = this._instance ?? new AzureManager();
+    }
+
+    public get BlobServiceClient() {
+        return this._blobServiceClient;
+    }
+
+    public get ContainerClient() {
+        return this._containerClient;
+    }
+
+    public static UploadBlob(filename: string, filepath: string, filetype: string) {
+        const blockBlobClient = this.Instance.ContainerClient.getBlockBlobClient(filename);
+        const blobOptions = { blobHTTPHeaders: { blobContentType: filetype }};
+        const stream = fs.createReadStream(filepath);
+        return blockBlobClient.uploadStream(stream, undefined, undefined, blobOptions);
+    }
+
+    public static UploadBlobStream(stream: Readable, filename: string, filetype: string) {
+        const blockBlobClient = this.Instance.ContainerClient.getBlockBlobClient(filename);
+        const blobOptions = { blobHTTPHeaders: { blobContentType: filetype }};
+        return blockBlobClient.uploadStream(stream, undefined, undefined, blobOptions);
+    }
+
+    public static DeleteBlob(filename: string) {
+        const blockBlobClient = this.Instance.ContainerClient.getBlockBlobClient(filename);
+        return blockBlobClient.deleteIfExists();
+    }
+
+    public static async GetBlobs() {
+        const foundBlobs = [];
+        for await (const blob of this.Instance.ContainerClient.listBlobsFlat()) {
+            console.log(`${blob.name}`);
+
+            const blobItem = {
+                url : `https://${AzureManager.STORAGE_ACCOUNT_NAME}.blob.core.windows.net/${AzureManager.CONTAINER_NAME}/${blob.name}`,
+                name : blob.name
+            }
+
+            foundBlobs.push(blobItem);
+        }
+
+        return foundBlobs;
+    }
+}
diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts
index eaaac4e6d..bff60568b 100644
--- a/src/server/DashUploadUtils.ts
+++ b/src/server/DashUploadUtils.ts
@@ -6,7 +6,7 @@ import { createReadStream, createWriteStream, existsSync, readFileSync, rename,
 import * as path from 'path';
 import { basename } from 'path';
 import * as sharp from 'sharp';
-import { Stream } from 'stream';
+import { Readable, Stream } from 'stream';
 import { filesDirectory, publicDirectory } from '.';
 import { Opt } from '../fields/Doc';
 import { ParsedPDF } from '../server/PdfTypes';
@@ -17,6 +17,8 @@ import { resolvedServerUrl } from './server_Initialization';
 import { AcceptableMedia, Upload } from './SharedMediaTypes';
 import request = require('request-promise');
 import formidable = require('formidable');
+import { AzureManager } from './ApiManagers/AzureManager';
+import axios from 'axios';
 const spawn = require('child_process').spawn;
 const { exec } = require('child_process');
 const parse = require('pdf-parse');
@@ -42,6 +44,10 @@ function isLocal() {
     return /Dash-Web[0-9]*[\\\/]src[\\\/]server[\\\/]public[\\\/](.*)/;
 }
 
+function usingAzure(){
+    return process.env.USE_AZURE === 'true';
+}
+
 export namespace DashUploadUtils {
     export interface Size {
         width: number;
@@ -61,6 +67,9 @@ export namespace DashUploadUtils {
     const size = 'content-length';
     const type = 'content-type';
 
+    const BLOBSTORE_URL = process.env.BLOBSTORE_URL;
+    const RESIZE_FUNCTION_URL = process.env.RESIZE_FUNCTION_URL;
+
     const { imageFormats, videoFormats, applicationFormats, audioFormats } = AcceptableMedia; //TODO:glr
 
     export async function concatVideos(filePaths: string[]): Promise<Upload.AccessPathInfo> {
@@ -182,6 +191,7 @@ export namespace DashUploadUtils {
     }
 
     export async function upload(file: File, overwriteGuid?: string): Promise<Upload.FileResponse> {
+        const isAzureOn = usingAzure();
         const { type, path, name } = file;
         const types = type?.split('/') ?? [];
         uploadProgress.set(overwriteGuid ?? name, 'uploading'); // If the client sent a guid it uses to track upload progress, use that guid. Otherwise, use the file's name. 
@@ -478,17 +488,48 @@ export namespace DashUploadUtils {
         };
     }
 
+    /**
+     * UploadInspectedImage() takes an image with its metadata. If Azure is being used, this method will call the Azure function
+     * to execute the resizing. If Azure is not used, the function will begin to resize the image. 
+     * 
+     * @param metadata metadata object from InspectImage()
+     * @param filename the name of the file
+     * @param prefix the prefix to use, which will be set to '' if none is provided.
+     * @param cleanUp a boolean indicating if the files should be deleted after upload. True by default.
+     * @returns the accessPaths for the resized files. 
+     */
     export const UploadInspectedImage = async (metadata: Upload.InspectionResults, filename?: string, prefix = '', cleanUp = true): Promise<Upload.ImageInformation> => {
         const { requestable, source, ...remaining } = metadata;
         const resolved = filename || `${prefix}upload_${Utils.GenerateGuid()}.${remaining.contentType.split('/')[1].toLowerCase()}`;
         const { images } = Directory;
         const information: Upload.ImageInformation = {
             accessPaths: {
-                agnostic: getAccessPaths(images, resolved),
+                agnostic: usingAzure() ? {
+                    client: BLOBSTORE_URL + `/${filename}`,
+                    server: BLOBSTORE_URL + `/${filename}`
+                } : getAccessPaths(images, resolved)
             },
             ...metadata,
         };
-        const writtenFiles = await outputResizedImages(() => request(requestable), resolved, pathToDirectory(Directory.images));
+        let writtenFiles: { [suffix: string] : string};
+
+        if (usingAzure()) {
+            if (!RESIZE_FUNCTION_URL) {
+                throw new Error("Resize function URL not provided.");
+            }
+
+            try {
+                const response = await axios.post(RESIZE_FUNCTION_URL, {
+                    url: requestable
+                });
+                writtenFiles = response.data.writtenFiles;
+            } catch (err) {
+                console.error(err);
+                writtenFiles = {};
+            }
+        } else {
+            writtenFiles = await outputResizedImages(() => request(requestable), resolved, pathToDirectory(Directory.images));
+        }
         for (const suffix of Object.keys(writtenFiles)) {
             information.accessPaths[suffix] = getAccessPaths(images, writtenFiles[suffix]);
         }
@@ -533,6 +574,15 @@ export namespace DashUploadUtils {
         force: true,
     };
 
+    /**
+     * outputResizedImages takes in a readable stream and resizes the images according to the sizes defined at the top of this file.
+     * 
+     * The new images will be saved to the server with the corresponding prefixes. 
+     * @param streamProvider a Stream of the image to process, taken from the /parsed_files location
+     * @param outputFileName the basename (No suffix) of the outputted file.
+     * @param outputDirectory the directory to output to, usually Directory.Images
+     * @returns a map with suffixes as keys and resized filenames as values.
+     */
     export async function outputResizedImages(streamProvider: () => Stream | Promise<Stream>, outputFileName: string, outputDirectory: string) {
         const writtenFiles: { [suffix: string]: string } = {};
         for (const { resizer, suffix } of resizers(path.extname(outputFileName))) {
@@ -549,6 +599,11 @@ export namespace DashUploadUtils {
         return writtenFiles;
     }
 
+    /**
+     * define the resizers to use
+     * @param ext the extension
+     * @returns an array of resizer functions from sharp
+     */
     function resizers(ext: string): DashUploadUtils.ImageResizer[] {
         return [
             { suffix: SizeSuffix.Original },
author	eperelm2 <emily_perelman@brown.edu>	2023-07-31 11:24:59 -0400
committer	eperelm2 <emily_perelman@brown.edu>	2023-07-31 11:24:59 -0400
commit	ad9e20dbd54658a891e6f7180d65ebf456665a15 (patch)
tree	223e74b4da1927b49e8afd9f162a9b4d18e4e873
parent	9447ee01d501b3db69358b5b1526e640f2c54531 (diff)
parent	a7fc6873a6a9faa7a2080bb0e689c3fa46bd2f7b (diff)