From 5f44a6cf1f16023a4c39872f2ccfc129c65ea812 Mon Sep 17 00:00:00 2001
From: James Hu <51237606+jameshu111@users.noreply.github.com>
Date: Mon, 26 Jun 2023 10:37:11 -0400
Subject: temp working version

---
 src/client/documents/Documents.ts      |  3 +-
 src/client/views/nodes/ImageBox.tsx    |  2 +-
 src/fields/URLField.ts                 |  2 +-
 src/server/ApiManagers/AzureManager.ts | 74 ++++++++++++++++++++++++++++++++++
 src/server/DashUploadUtils.ts          | 25 ++++++++----
 5 files changed, 96 insertions(+), 10 deletions(-)
 create mode 100644 src/server/ApiManagers/AzureManager.ts

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index ffde9fe1b..ac6c48619 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1739,7 +1739,8 @@ export namespace DocUtils {
             return;
         }
         const full = { ...options, _width: 400, title: name };
-        const pathname = Utils.prepend(result.accessPaths.agnostic.client);
+        // const pathname = Utils.prepend(result.accessPaths.agnostic.client);
+        const pathname = result.accessPaths.azure.client;
         const doc = await DocUtils.DocumentFromType(type, pathname, full, overwriteDoc);
         if (doc) {
             const proto = Doc.GetProto(doc);
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 9acbee1e7..de1365adc 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/fields/URLField.ts b/src/fields/URLField.ts
index 8ac20b1e5..8db4d6003 100644
--- a/src/fields/URLField.ts
+++ b/src/fields/URLField.ts
@@ -25,7 +25,7 @@ export abstract class URLField extends ObjectField {
     constructor(url: URL | string) {
         super();
         if (typeof url === 'string') {
-            url = url.startsWith('http') ? new URL(url) : new URL(url, window.location.origin);
+            url = (url.startsWith('http') || url.startsWith('https')) ? new URL(url) : new URL(url, window.location.origin);
         }
         this.url = url;
     }
diff --git a/src/server/ApiManagers/AzureManager.ts b/src/server/ApiManagers/AzureManager.ts
new file mode 100644
index 000000000..e105f5d80
--- /dev/null
+++ b/src/server/ApiManagers/AzureManager.ts
@@ -0,0 +1,74 @@
+import { ContainerClient, BlobServiceClient } from "@azure/storage-blob";
+// import * as dotenv from 'dotenv';
+import * as fs from "fs";
+import { Readable, Stream } from "stream";
+// dotenv.config();
+const AZURE_STORAGE_CONNECTION_STRING = "DefaultEndpointsProtocol=https;AccountName=dashblobstore;AccountKey=3i+E5XkCz3TJ0m5QOatiEnbRACz9V1qCW72L6ldiYGH1tLdfJWa2eQoRfYmPA68lx1a6YAcfYJfWHadIxQvhGQ==;EndpointSuffix=core.windows.net";
+
+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 Error("Azure Storage Connection String Not Found");
+        }
+        // this._blobServiceClient = BlobServiceClient.fromConnectionString(process.env.AZURE_STORAGE_CONNECTION_STRING);
+        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) {
+        console.log("Upload Blob File");
+        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) {
+        console.log("Upload Blob Stream: %s, %s", filename, filetype);
+        const blockBlobClient = this.Instance.ContainerClient.getBlockBlobClient(filename);
+        const blobOptions = { blobHTTPHeaders: { blobContentType: filetype }};
+        return blockBlobClient.uploadStream(stream, undefined, undefined, blobOptions);
+    }
+
+    public static DeleteBlob(filename: string) {
+        console.log("Delete Blob from filename");
+        const blockBlobClient = this.Instance.ContainerClient.getBlockBlobClient(filename);
+        return blockBlobClient.deleteIfExists();
+    }
+
+    public static async GetBlobs() {
+        console.log("Get Blobs");
+        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;
+    }
+}
\ No newline at end of file
diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts
index eaaac4e6d..53f2d6501 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,7 @@ import { resolvedServerUrl } from './server_Initialization';
 import { AcceptableMedia, Upload } from './SharedMediaTypes';
 import request = require('request-promise');
 import formidable = require('formidable');
+import { AzureManager } from './ApiManagers/AzureManager';
 const spawn = require('child_process').spawn;
 const { exec } = require('child_process');
 const parse = require('pdf-parse');
@@ -193,7 +194,7 @@ export namespace DashUploadUtils {
         switch (category) {
             case 'image':
                 if (imageFormats.includes(format)) {
-                    const result = await UploadImage(path, basename(path));
+                    const result = await UploadImage(path, basename(path), name);
                     return { source: file, result };
                 }
                 fs.unlink(path, () => {});
@@ -323,12 +324,13 @@ export namespace DashUploadUtils {
      * 3) the size of the image, in bytes (4432130)
      * 4) the content type of the image, i.e. image/(jpeg | png | ...)
      */
-    export const UploadImage = async (source: string, filename?: string, prefix: string = ''): Promise<Upload.ImageInformation | Error> => {
+    export const UploadImage = async (source: string, filename?: string, originalFilename?: string, prefix: string = ''): Promise<Upload.ImageInformation | Error> => {
         const metadata = await InspectImage(source);
         if (metadata instanceof Error) {
             return { name: metadata.name, message: metadata.message };
         }
-        return UploadInspectedImage(metadata, filename || metadata.filename, prefix);
+        console.log(originalFilename);
+        return UploadInspectedImage(metadata, filename || metadata.filename, originalFilename, prefix);
     };
 
     export async function buildFileDirectories() {
@@ -478,17 +480,21 @@ export namespace DashUploadUtils {
         };
     }
 
-    export const UploadInspectedImage = async (metadata: Upload.InspectionResults, filename?: string, prefix = '', cleanUp = true): Promise<Upload.ImageInformation> => {
+    export const UploadInspectedImage = async (metadata: Upload.InspectionResults, filename?: string, originalFilename?: 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),
+                azure: {
+                    client: `https://dashblobstore.blob.core.windows.net/dashmedia/${originalFilename}`,
+                    server: `https://dashblobstore.blob.core.windows.net/dashmedia/${originalFilename}`
+                }
             },
             ...metadata,
         };
-        const writtenFiles = await outputResizedImages(() => request(requestable), resolved, pathToDirectory(Directory.images));
+        const writtenFiles = await outputResizedImages(() => request(requestable), resolved, pathToDirectory(Directory.images), originalFilename, metadata.contentType);
         for (const suffix of Object.keys(writtenFiles)) {
             information.accessPaths[suffix] = getAccessPaths(images, writtenFiles[suffix]);
         }
@@ -533,16 +539,21 @@ export namespace DashUploadUtils {
         force: true,
     };
 
-    export async function outputResizedImages(streamProvider: () => Stream | Promise<Stream>, outputFileName: string, outputDirectory: string) {
+    export async function outputResizedImages(streamProvider: () => Stream | Promise<Stream>, outputFileName: string, outputDirectory: string, originalFilename?: string, contentType?: string) {
+        console.log("resized original filename: ", originalFilename);
         const writtenFiles: { [suffix: string]: string } = {};
         for (const { resizer, suffix } of resizers(path.extname(outputFileName))) {
             const outputPath = path.resolve(outputDirectory, (writtenFiles[suffix] = InjectSize(outputFileName, suffix)));
+            console.log(`https://dashblobstore.blob.core.windows.net/dashmedia/${InjectSize(originalFilename!, suffix)}`);
             await new Promise<void>(async (resolve, reject) => {
                 const source = streamProvider();
                 let readStream: Stream = source instanceof Promise ? await source : source;
                 if (resizer) {
                     readStream = readStream.pipe(resizer.withMetadata());
                 }
+                if(originalFilename && contentType) {
+                    AzureManager.UploadBlobStream(readStream as Readable, InjectSize(originalFilename, suffix), contentType);
+                }
                 readStream.pipe(createWriteStream(outputPath)).on('close', resolve).on('error', reject);
             });
         }
-- 
cgit v1.2.3-70-g09d2


From abeda176df59157f3194dd86966725f6193997c6 Mon Sep 17 00:00:00 2001
From: James Hu <51237606+jameshu111@users.noreply.github.com>
Date: Wed, 28 Jun 2023 10:29:12 -0400
Subject: back to using original filename

---
 src/server/DashUploadUtils.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts
index 53f2d6501..7abefed8a 100644
--- a/src/server/DashUploadUtils.ts
+++ b/src/server/DashUploadUtils.ts
@@ -488,8 +488,8 @@ export namespace DashUploadUtils {
             accessPaths: {
                 agnostic: getAccessPaths(images, resolved),
                 azure: {
-                    client: `https://dashblobstore.blob.core.windows.net/dashmedia/${originalFilename}`,
-                    server: `https://dashblobstore.blob.core.windows.net/dashmedia/${originalFilename}`
+                    client: `https://dashblobstore.blob.core.windows.net/dashmedia/${filename}`,
+                    server: `https://dashblobstore.blob.core.windows.net/dashmedia/${filename}`
                 }
             },
             ...metadata,
@@ -545,6 +545,7 @@ export namespace DashUploadUtils {
         for (const { resizer, suffix } of resizers(path.extname(outputFileName))) {
             const outputPath = path.resolve(outputDirectory, (writtenFiles[suffix] = InjectSize(outputFileName, suffix)));
             console.log(`https://dashblobstore.blob.core.windows.net/dashmedia/${InjectSize(originalFilename!, suffix)}`);
+            console.log(`https://dashblobstore.blob.core.windows.net/dashmedia/${InjectSize(outputFileName, suffix)}`);
             await new Promise<void>(async (resolve, reject) => {
                 const source = streamProvider();
                 let readStream: Stream = source instanceof Promise ? await source : source;
@@ -553,6 +554,7 @@ export namespace DashUploadUtils {
                 }
                 if(originalFilename && contentType) {
                     AzureManager.UploadBlobStream(readStream as Readable, InjectSize(originalFilename, suffix), contentType);
+                    AzureManager.UploadBlobStream(readStream as Readable, InjectSize(outputFileName, suffix), contentType);
                 }
                 readStream.pipe(createWriteStream(outputPath)).on('close', resolve).on('error', reject);
             });
-- 
cgit v1.2.3-70-g09d2


From 5a1c452941032c8a5c468e54674450f452d8bda9 Mon Sep 17 00:00:00 2001
From: James Hu <51237606+jameshu111@users.noreply.github.com>
Date: Thu, 6 Jul 2023 11:22:44 -0400
Subject: flag with comments

---
 package.json                      |  2 +-
 src/client/documents/Documents.ts |  3 ++-
 src/server/DashUploadUtils.ts     | 24 ++++++++++++++++++------
 3 files changed, 21 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/package.json b/package.json
index 3a3d17517..2b37d5171 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=true 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",
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 93043e517..43c9d2e7a 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1737,7 +1737,8 @@ export namespace DocUtils {
         }
         const full = { ...options, _width: 400, title: name };
         // const pathname = Utils.prepend(result.accessPaths.agnostic.client);
-        const pathname = result.accessPaths.azure.client;
+        const pathname = result.accessPaths.agnostic.client;
+        // const pathname = result.accessPaths.azure.client;
         const doc = await DocUtils.DocumentFromType(type, pathname, full, overwriteDoc);
         if (doc) {
             const proto = Doc.GetProto(doc);
diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts
index 7abefed8a..74c4786b6 100644
--- a/src/server/DashUploadUtils.ts
+++ b/src/server/DashUploadUtils.ts
@@ -43,6 +43,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;
@@ -183,6 +187,8 @@ export namespace DashUploadUtils {
     }
 
     export async function upload(file: File, overwriteGuid?: string): Promise<Upload.FileResponse> {
+        const isAzureOn = usingAzure();
+        console.log("Azure usage: ", isAzureOn);
         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. 
@@ -486,11 +492,15 @@ export namespace DashUploadUtils {
         const { images } = Directory;
         const information: Upload.ImageInformation = {
             accessPaths: {
-                agnostic: getAccessPaths(images, resolved),
-                azure: {
+                // agnostic: getAccessPaths(images, resolved),
+                // azure: {
+                //     client: `https://dashblobstore.blob.core.windows.net/dashmedia/${filename}`,
+                //     server: `https://dashblobstore.blob.core.windows.net/dashmedia/${filename}`
+                // }
+                agnostic: usingAzure() ? {
                     client: `https://dashblobstore.blob.core.windows.net/dashmedia/${filename}`,
                     server: `https://dashblobstore.blob.core.windows.net/dashmedia/${filename}`
-                }
+                } : getAccessPaths(images, resolved)
             },
             ...metadata,
         };
@@ -540,7 +550,7 @@ export namespace DashUploadUtils {
     };
 
     export async function outputResizedImages(streamProvider: () => Stream | Promise<Stream>, outputFileName: string, outputDirectory: string, originalFilename?: string, contentType?: string) {
-        console.log("resized original filename: ", originalFilename);
+        const start = Date.now();
         const writtenFiles: { [suffix: string]: string } = {};
         for (const { resizer, suffix } of resizers(path.extname(outputFileName))) {
             const outputPath = path.resolve(outputDirectory, (writtenFiles[suffix] = InjectSize(outputFileName, suffix)));
@@ -552,13 +562,15 @@ export namespace DashUploadUtils {
                 if (resizer) {
                     readStream = readStream.pipe(resizer.withMetadata());
                 }
-                if(originalFilename && contentType) {
-                    AzureManager.UploadBlobStream(readStream as Readable, InjectSize(originalFilename, suffix), contentType);
+                if(contentType && usingAzure()) {
+                    // AzureManager.UploadBlobStream(readStream as Readable, InjectSize(originalFilename, suffix), contentType);
                     AzureManager.UploadBlobStream(readStream as Readable, InjectSize(outputFileName, suffix), contentType);
                 }
                 readStream.pipe(createWriteStream(outputPath)).on('close', resolve).on('error', reject);
             });
         }
+        const end = Date.now();
+        console.log(`Time taken: ${end - start}ms`);
         return writtenFiles;
     }
 
-- 
cgit v1.2.3-70-g09d2


From 8e205268443f178a79526cf936fabf787691ec5d Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Fri, 7 Jul 2023 21:39:38 -0400
Subject: api key, with mui

---
 package-lock.json                                  | 202 +++++++++---------
 src/client/theme.ts                                |  42 ++++
 src/client/util/ReportManager.scss                 |  14 ++
 src/client/util/ReportManager.tsx                  | 235 ++++++++++++++-------
 src/client/views/MainView.tsx                      |  96 +++++----
 .../CollectionFreeFormLinksView.scss               |  12 +-
 6 files changed, 370 insertions(+), 231 deletions(-)
 create mode 100644 src/client/theme.ts

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index 4da0600b0..895dec389 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2819,7 +2819,7 @@
         "@types/strip-bom": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/@types/strip-bom/-/strip-bom-3.0.0.tgz",
-            "integrity": "sha512-xevGOReSYGM7g/kUBZzPqCrR/KYAo+F0yiPc85WFTJa0MSLtyFTVTU6cJu/aV4mid7IffDIWqo69THF2o4JiEQ==",
+            "integrity": "sha1-FKjsOVbC6B7bdSB5CuzyHCkK69I=",
             "dev": true
         },
         "@types/strip-json-comments": {
@@ -3170,7 +3170,7 @@
                 "textarea-caret": {
                     "version": "3.0.2",
                     "resolved": "https://registry.npmjs.org/textarea-caret/-/textarea-caret-3.0.2.tgz",
-                    "integrity": "sha1-82DEhpmqGr9xhoCkOjGoUGZcLK8="
+                    "integrity": "sha512-gRzeti2YS4did7UJnPQ47wrjD+vp+CJIe9zbsu0bJ987d8QVLvLNG9757rqiQTIy4hGIeFauTTJt5Xkn51UkXg=="
                 }
             }
         },
@@ -3269,7 +3269,7 @@
         "after": {
             "version": "0.8.2",
             "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
-            "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8="
+            "integrity": "sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA=="
         },
         "agent-base": {
             "version": "6.0.2",
@@ -4166,7 +4166,7 @@
         "backo2": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
-            "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+            "integrity": "sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA=="
         },
         "bail": {
             "version": "2.0.2",
@@ -4236,7 +4236,7 @@
         "base64-arraybuffer": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz",
-            "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI="
+            "integrity": "sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg=="
         },
         "base64-js": {
             "version": "1.5.1",
@@ -5217,7 +5217,7 @@
         "component-bind": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz",
-            "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E="
+            "integrity": "sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw=="
         },
         "component-emitter": {
             "version": "1.3.0",
@@ -5227,7 +5227,7 @@
         "component-inherit": {
             "version": "0.0.3",
             "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz",
-            "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM="
+            "integrity": "sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA=="
         },
         "compress-commons": {
             "version": "2.1.1",
@@ -5947,7 +5947,7 @@
         "custom-event": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
-            "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU="
+            "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg=="
         },
         "cyclist": {
             "version": "1.0.1",
@@ -7031,7 +7031,7 @@
         "dynamic-dedupe": {
             "version": "0.3.0",
             "resolved": "https://registry.npmjs.org/dynamic-dedupe/-/dynamic-dedupe-0.3.0.tgz",
-            "integrity": "sha512-ssuANeD+z97meYOqd50e04Ze5qp4bPqo8cCkI4TRjZkzAUgIDTrXV1R8QCdINpiI+hw14+rYazvTRdQrz0/rFQ==",
+            "integrity": "sha1-BuRMIj9eTpTXjvnbI6ZRXOL5YqE=",
             "dev": true,
             "requires": {
                 "xtend": "^4.0.0"
@@ -7161,7 +7161,7 @@
                 "ms": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+                    "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
                 },
                 "ws": {
                     "version": "7.4.6",
@@ -9691,7 +9691,7 @@
         "fs-extra": {
             "version": "0.26.7",
             "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.7.tgz",
-            "integrity": "sha512-waKu+1KumRhYv8D8gMRCKJGAMI9pRnPuEb1mvgYD0f7wBscg+h6bW4FDTmEZhB9VKxvoTtxW+Y7bnIlB7zja6Q==",
+            "integrity": "sha1-muH92UiXeY7at20JGM9C0MMYT6k=",
             "requires": {
                 "graceful-fs": "^4.1.2",
                 "jsonfile": "^2.1.0",
@@ -10351,14 +10351,14 @@
                 "isarray": {
                     "version": "2.0.1",
                     "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
-                    "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4="
+                    "integrity": "sha512-c2cu3UxbI+b6kR3fy0nRnAhodsvR9dx7U5+znCOzdj6IfP3upFURTr0Xl5BlQZNKZjEtxrmVyfSdeE3O57smoQ=="
                 }
             }
         },
         "has-cors": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
-            "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+            "integrity": "sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA=="
         },
         "has-flag": {
             "version": "3.0.0",
@@ -10934,7 +10934,7 @@
         "indexof": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
-            "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
+            "integrity": "sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg=="
         },
         "inflight": {
             "version": "1.0.6",
@@ -12045,7 +12045,7 @@
         "jsonfile": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
-            "integrity": "sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==",
+            "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
             "requires": {
                 "graceful-fs": "^4.1.6"
             }
@@ -12468,7 +12468,7 @@
         "lodash.isequal": {
             "version": "4.5.0",
             "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-            "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+            "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
         },
         "lodash.isplainobject": {
             "version": "4.0.6",
@@ -12729,7 +12729,7 @@
         "mathquill": {
             "version": "0.10.1-a",
             "resolved": "https://registry.npmjs.org/mathquill/-/mathquill-0.10.1-a.tgz",
-            "integrity": "sha1-vyylaQEAY6w0vNXVKa3Ag3zVPD8=",
+            "integrity": "sha512-snSAEwAtwdwBFSor+nVBnWWQtTw67kgAgKMyAIxuz4ZPboy0qkWZmd7BL3lfOXp/INihhRlU1PcfaAtDaRhmzA==",
             "requires": {
                 "jquery": "^1.12.3"
             },
@@ -12737,7 +12737,7 @@
                 "jquery": {
                     "version": "1.12.4",
                     "resolved": "https://registry.npmjs.org/jquery/-/jquery-1.12.4.tgz",
-                    "integrity": "sha1-AeHfuikP5z3rp3zurLD5ui/sngw="
+                    "integrity": "sha512-UEVp7PPK9xXYSk8xqXCJrkXnKZtlgWkd2GsAQbMRFK6S/ePU2JN5G2Zum8hIVjzR3CpdfSqdqAzId/xd4TJHeg=="
                 }
             }
         },
@@ -14423,7 +14423,7 @@
             "dependencies": {
                 "@iarna/cli": {
                     "version": "2.1.0",
-                    "resolved": "https://registry.npmjs.org/@iarna/cli/-/cli-2.1.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-rvVVqDa2g860niRbqs3D5RhL4la3dc1vwk+NlpKPZxKaMSHtE2se6C2x8NeveN+rcjp3/686X+u+09CZ+7lmAQ==",
                     "requires": {
                         "glob": "^7.1.2",
@@ -14526,7 +14526,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -14541,7 +14541,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -14550,12 +14550,12 @@
                 },
                 "asap": {
                     "version": "2.0.6",
-                    "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+                    "resolved": false,
                     "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
                 },
                 "asn1": {
                     "version": "0.2.6",
-                    "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
+                    "resolved": false,
                     "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
                     "requires": {
                         "safer-buffer": "~2.1.0"
@@ -14563,7 +14563,7 @@
                 },
                 "assert-plus": {
                     "version": "1.0.0",
-                    "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw=="
                 },
                 "asynckit": {
@@ -14573,22 +14573,22 @@
                 },
                 "aws-sign2": {
                     "version": "0.7.0",
-                    "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA=="
                 },
                 "aws4": {
                     "version": "1.11.0",
-                    "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
                 },
                 "balanced-match": {
                     "version": "1.0.2",
-                    "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+                    "resolved": false,
                     "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
                 },
                 "bcrypt-pbkdf": {
                     "version": "1.0.2",
-                    "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+                    "resolved": false,
                     "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
                     "requires": {
                         "tweetnacl": "^0.14.3"
@@ -14609,7 +14609,7 @@
                 },
                 "bluebird": {
                     "version": "3.7.2",
-                    "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+                    "resolved": false,
                     "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
                 },
                 "boxen": {
@@ -14657,7 +14657,7 @@
                 },
                 "cacache": {
                     "version": "12.0.4",
-                    "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
+                    "resolved": false,
                     "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
                     "requires": {
                         "bluebird": "^3.5.5",
@@ -14694,7 +14694,7 @@
                 },
                 "caseless": {
                     "version": "0.12.0",
-                    "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
                 },
                 "chalk": {
@@ -14838,7 +14838,7 @@
                 },
                 "combined-stream": {
                     "version": "1.0.8",
-                    "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+                    "resolved": false,
                     "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
                     "requires": {
                         "delayed-stream": "~1.0.0"
@@ -14846,7 +14846,7 @@
                 },
                 "concat-map": {
                     "version": "0.0.1",
-                    "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
                 },
                 "concat-stream": {
@@ -14876,7 +14876,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -14891,7 +14891,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -14900,7 +14900,7 @@
                 },
                 "config-chain": {
                     "version": "1.1.13",
-                    "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+                    "resolved": false,
                     "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
                     "requires": {
                         "ini": "^1.3.4",
@@ -15001,7 +15001,7 @@
                 },
                 "dashdash": {
                     "version": "1.14.1",
-                    "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
                     "requires": {
                         "assert-plus": "^1.0.0"
@@ -15034,7 +15034,7 @@
                 },
                 "decode-uri-component": {
                     "version": "0.2.2",
-                    "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+                    "resolved": false,
                     "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="
                 },
                 "deep-extend": {
@@ -15080,7 +15080,7 @@
                 },
                 "dezalgo": {
                     "version": "1.0.4",
-                    "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz",
+                    "resolved": false,
                     "integrity": "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==",
                     "requires": {
                         "asap": "^2.0.0",
@@ -15132,7 +15132,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -15147,7 +15147,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -15156,7 +15156,7 @@
                 },
                 "ecc-jsbn": {
                     "version": "0.1.2",
-                    "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+                    "resolved": false,
                     "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
                     "requires": {
                         "jsbn": "~0.1.0",
@@ -15191,7 +15191,7 @@
                 },
                 "env-paths": {
                     "version": "2.2.1",
-                    "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A=="
                 },
                 "err-code": {
@@ -15275,7 +15275,7 @@
                 },
                 "extsprintf": {
                     "version": "1.3.0",
-                    "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g=="
                 },
                 "fast-json-stable-stringify": {
@@ -15285,12 +15285,12 @@
                 },
                 "figgy-pudding": {
                     "version": "3.5.2",
-                    "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
+                    "resolved": false,
                     "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw=="
                 },
                 "filter-obj": {
                     "version": "1.1.0",
-                    "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="
                 },
                 "find-npm-prefix": {
@@ -15323,7 +15323,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -15338,7 +15338,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -15347,12 +15347,12 @@
                 },
                 "forever-agent": {
                     "version": "0.6.1",
-                    "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw=="
                 },
                 "form-data": {
                     "version": "2.3.3",
-                    "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+                    "resolved": false,
                     "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
                     "requires": {
                         "asynckit": "^0.4.0",
@@ -15385,7 +15385,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -15400,7 +15400,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -15468,7 +15468,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -15483,7 +15483,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -15492,7 +15492,7 @@
                 },
                 "fs.realpath": {
                     "version": "1.0.0",
-                    "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
                 },
                 "function-bind": {
@@ -15582,7 +15582,7 @@
                 },
                 "getpass": {
                     "version": "0.1.7",
-                    "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+                    "resolved": false,
                     "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
                     "requires": {
                         "assert-plus": "^1.0.0"
@@ -15590,7 +15590,7 @@
                 },
                 "glob": {
                     "version": "7.2.3",
-                    "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+                    "resolved": false,
                     "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
                     "requires": {
                         "fs.realpath": "^1.0.0",
@@ -15603,7 +15603,7 @@
                     "dependencies": {
                         "minimatch": {
                             "version": "3.1.2",
-                            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+                            "resolved": false,
                             "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
                             "requires": {
                                 "brace-expansion": "^1.1.7"
@@ -15646,12 +15646,12 @@
                 },
                 "graceful-fs": {
                     "version": "4.2.10",
-                    "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+                    "resolved": false,
                     "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
                 },
                 "har-schema": {
                     "version": "2.0.0",
-                    "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q=="
                 },
                 "har-validator": {
@@ -15730,7 +15730,7 @@
                 },
                 "http-signature": {
                     "version": "1.2.0",
-                    "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
                     "requires": {
                         "assert-plus": "^1.0.0",
@@ -15857,7 +15857,7 @@
                 },
                 "is-cidr": {
                     "version": "3.1.1",
-                    "resolved": "https://registry.npmjs.org/is-cidr/-/is-cidr-3.1.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-Gx+oErgq1j2jAKCR2Kbq0b3wbH0vQKqZ0wOlHxm0o56nq51Cs/DZA8oz9dMDhbHyHEGgJ86eTeVudtgMMOx3Mw==",
                     "requires": {
                         "cidr-regex": "^2.0.10"
@@ -15936,7 +15936,7 @@
                 },
                 "is-typedarray": {
                     "version": "1.0.0",
-                    "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
                 },
                 "isarray": {
@@ -15951,12 +15951,12 @@
                 },
                 "isstream": {
                     "version": "0.1.2",
-                    "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+                    "resolved": false,
                     "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
                 },
                 "jsbn": {
                     "version": "0.1.1",
-                    "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg=="
                 },
                 "json-parse-better-errors": {
@@ -15966,7 +15966,7 @@
                 },
                 "json-parse-even-better-errors": {
                     "version": "2.3.1",
-                    "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
                 },
                 "json-schema": {
@@ -15976,7 +15976,7 @@
                 },
                 "json-stringify-safe": {
                     "version": "5.0.1",
-                    "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
                 },
                 "jsonparse": {
@@ -16194,7 +16194,7 @@
                 },
                 "lock-verify": {
                     "version": "2.2.2",
-                    "resolved": "https://registry.npmjs.org/lock-verify/-/lock-verify-2.2.2.tgz",
+                    "resolved": false,
                     "integrity": "sha512-2CUNtr1ZSVKJHcYP8uEzafmmuyauCB5zZimj8TvQd/Lflt9kXVZs+8S+EbAzZLaVUDn8CYGmeC3DFGdYfnCzeQ==",
                     "requires": {
                         "@iarna/cli": "^2.1.0",
@@ -16323,7 +16323,7 @@
                 },
                 "meant": {
                     "version": "1.0.3",
-                    "resolved": "https://registry.npmjs.org/meant/-/meant-1.0.3.tgz",
+                    "resolved": false,
                     "integrity": "sha512-88ZRGcNxAq4EH38cQ4D85PM57pikCwS8Z99EWHODxN7KBY+UuPiqzRTtZzS8KTXO/ywSWbdjjJST2Hly/EQxLw=="
                 },
                 "mime-db": {
@@ -16341,7 +16341,7 @@
                 },
                 "minimatch": {
                     "version": "3.1.2",
-                    "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+                    "resolved": false,
                     "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
                     "requires": {
                         "brace-expansion": "^1.1.7"
@@ -16390,7 +16390,7 @@
                 },
                 "mkdirp": {
                     "version": "0.5.6",
-                    "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+                    "resolved": false,
                     "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
                     "requires": {
                         "minimist": "^1.2.6"
@@ -16438,7 +16438,7 @@
                 },
                 "node-gyp": {
                     "version": "5.1.1",
-                    "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-WH0WKGi+a4i4DUt2mHnvocex/xPLp9pYt5R6M2JdFB7pJ7Z34hveZ4nDTGTiLXCkitA9T8HFZjhinBCiVHYcWw==",
                     "requires": {
                         "env-paths": "^2.2.0",
@@ -16776,7 +16776,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -16791,7 +16791,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -16805,7 +16805,7 @@
                 },
                 "path-is-absolute": {
                     "version": "1.0.1",
-                    "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
                 },
                 "path-is-inside": {
@@ -16825,7 +16825,7 @@
                 },
                 "performance-now": {
                     "version": "2.1.0",
-                    "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
                 },
                 "pify": {
@@ -16874,7 +16874,7 @@
                 },
                 "proto-list": {
                     "version": "1.2.4",
-                    "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+                    "resolved": false,
                     "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA=="
                 },
                 "protoduck": {
@@ -16897,7 +16897,7 @@
                 },
                 "psl": {
                     "version": "1.9.0",
-                    "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
                 },
                 "pump": {
@@ -16937,12 +16937,12 @@
                 },
                 "qs": {
                     "version": "6.5.3",
-                    "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
+                    "resolved": false,
                     "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA=="
                 },
                 "query-string": {
                     "version": "6.14.1",
-                    "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.14.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==",
                     "requires": {
                         "decode-uri-component": "^0.2.0",
@@ -16953,7 +16953,7 @@
                 },
                 "qw": {
                     "version": "1.0.2",
-                    "resolved": "https://registry.npmjs.org/qw/-/qw-1.0.2.tgz",
+                    "resolved": false,
                     "integrity": "sha512-1PhZ/iLKwlVNq45dnerTMKFjMof49uqli7/0QsvPNbX5OJ3IZ8msa9lUpvPheVdP+IYYPrf6cOaVil7S35joVA=="
                 },
                 "rc": {
@@ -16999,7 +16999,7 @@
                 },
                 "read-package-json": {
                     "version": "2.1.2",
-                    "resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-2.1.2.tgz",
+                    "resolved": false,
                     "integrity": "sha512-D1KmuLQr6ZSJS0tW8hf3WGpRlwszJOXZ3E8Yd/DNRaM5d+1wVRZdHlpGBLAuovjr28LbWvjpWkBHMxpRGGjzNA==",
                     "requires": {
                         "glob": "^7.1.1",
@@ -17058,7 +17058,7 @@
                 },
                 "request": {
                     "version": "2.88.2",
-                    "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+                    "resolved": false,
                     "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
                     "requires": {
                         "aws-sign2": "~0.7.0",
@@ -17128,7 +17128,7 @@
                 },
                 "safe-buffer": {
                     "version": "5.2.1",
-                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
                 },
                 "safer-buffer": {
@@ -17299,7 +17299,7 @@
                 },
                 "sshpk": {
                     "version": "1.17.0",
-                    "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==",
                     "requires": {
                         "asn1": "~0.2.3",
@@ -17355,7 +17355,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -17370,7 +17370,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -17384,7 +17384,7 @@
                 },
                 "strict-uri-encode": {
                     "version": "2.0.0",
-                    "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="
                 },
                 "string-width": {
@@ -17540,7 +17540,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -17555,7 +17555,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                                    "resolved": false,
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -17574,7 +17574,7 @@
                 },
                 "tough-cookie": {
                     "version": "2.5.0",
-                    "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
                     "requires": {
                         "psl": "^1.1.28",
@@ -17583,7 +17583,7 @@
                     "dependencies": {
                         "punycode": {
                             "version": "2.1.1",
-                            "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+                            "resolved": false,
                             "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
                         }
                     }
@@ -17598,7 +17598,7 @@
                 },
                 "tweetnacl": {
                     "version": "0.14.5",
-                    "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+                    "resolved": false,
                     "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="
                 },
                 "typedarray": {
@@ -17669,7 +17669,7 @@
                 },
                 "uri-js": {
                     "version": "4.4.1",
-                    "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
                     "requires": {
                         "punycode": "^2.1.0"
@@ -17710,7 +17710,7 @@
                 },
                 "uuid": {
                     "version": "3.4.0",
-                    "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
                 },
                 "validate-npm-package-license": {
@@ -17732,7 +17732,7 @@
                 },
                 "verror": {
                     "version": "1.10.0",
-                    "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
                     "requires": {
                         "assert-plus": "^1.0.0",
@@ -22543,7 +22543,7 @@
         "to-array": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",
-            "integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA="
+            "integrity": "sha512-LhVdShQD/4Mk4zXNroIQZJC+Ap3zgLcDuwEdcmLv9CCO73NWockQDwyUnW/m8VX/EElfL6FcYx7EeutN4HJA6A=="
         },
         "to-fast-properties": {
             "version": "2.0.0",
@@ -22915,7 +22915,7 @@
                 "strip-bom": {
                     "version": "3.0.0",
                     "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-                    "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+                    "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
                     "dev": true
                 }
             }
@@ -24172,7 +24172,7 @@
                 "resolve-cwd": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
-                    "integrity": "sha512-ccu8zQTrzVr954472aUVPLEcB3YpKSYR3cg/3lo1okzobPBM+1INXBbBZlDbnI/hbEocnf8j0QVo43hQKrbchg==",
+                    "integrity": "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=",
                     "dev": true,
                     "requires": {
                         "resolve-from": "^3.0.0"
@@ -24181,7 +24181,7 @@
                 "resolve-from": {
                     "version": "3.0.0",
                     "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-                    "integrity": "sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw==",
+                    "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
                     "dev": true
                 },
                 "semver": {
@@ -24733,7 +24733,7 @@
         "yeast": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
-            "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+            "integrity": "sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg=="
         },
         "yn": {
             "version": "3.1.1",
diff --git a/src/client/theme.ts b/src/client/theme.ts
new file mode 100644
index 000000000..57be370cc
--- /dev/null
+++ b/src/client/theme.ts
@@ -0,0 +1,42 @@
+import '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
+
+export const theme = createTheme({
+    palette: {
+        primary: {
+            main: 'rgb(0, 149, 246)',
+        },
+    },
+    // components: {
+    //     MuiButton: {
+    //         styleOverrides: {
+    //             root: {
+    //                 fontSize: '14px',
+    //                 boxShadow: 'none',
+    //                 '&:hover': {
+    //                     boxShadow: 'none',
+    //                     scale: 1,
+    //                 },
+    //             },
+    //         },
+    //     },
+    //     MuiTextField: {
+    //         styleOverrides: {
+    //             root: {
+    //                 '& .MuiInputBase-input': {
+    //                     fontSize: '16px',
+    //                 },
+    //                 '& .MuiInputLabel-root': {
+    //                     fontSize: '16px',
+    //                 },
+    //                 '& .MuiInputLabel-shrink': {
+    //                     fontSize: '16px',
+    //                 },
+    //                 '& .MuiFormHelperText-root': {
+    //                     fontSize: '16px',
+    //                 },
+    //             },
+    //         },
+    //     },
+    // },
+});
diff --git a/src/client/util/ReportManager.scss b/src/client/util/ReportManager.scss
index 5a2f2fcad..969e0de74 100644
--- a/src/client/util/ReportManager.scss
+++ b/src/client/util/ReportManager.scss
@@ -1,5 +1,19 @@
 @import '../views/global/globalCssVariables';
 
+.report-issue {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    background-color: #ffffff;
+    text-align: left;
+
+    h2 {
+        font-size: 24px;
+    }
+}
+
+// ---------------------------------------
 .issue-list-wrapper {
     position: relative;
     min-width: 250px;
diff --git a/src/client/util/ReportManager.tsx b/src/client/util/ReportManager.tsx
index 4c1020455..a08ef9979 100644
--- a/src/client/util/ReportManager.tsx
+++ b/src/client/util/ReportManager.tsx
@@ -17,12 +17,14 @@ import { GroupManager } from './GroupManager';
 import './SettingsManager.scss';
 import './ReportManager.scss';
 import { undoBatch } from './UndoManager';
-import { Octokit } from "@octokit/core";
+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';
+import { Button, MenuItem, Select, SelectChangeEvent, TextField } from '@mui/material';
+import { FormControl, InputLabel } from '@material-ui/core';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -35,21 +37,25 @@ export class ReportManager extends React.Component<{}> {
     private octokit: Octokit;
 
     @observable public issues: any[] = [];
-    @action setIssues = action((issues: any[]) => { this.issues = issues; });
-    
+    @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; });
+    @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()));
+        this.shownIssues = this.issues.filter(issue => issue.title.toLowerCase().includes(query.toLowerCase()));
     });
 
     constructor(props: {}) {
@@ -57,7 +63,7 @@ export class ReportManager extends React.Component<{}> {
         ReportManager.Instance = this;
 
         this.octokit = new Octokit({
-            auth: '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'
+            auth: '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',
         });
     }
 
@@ -72,25 +78,33 @@ export class ReportManager extends React.Component<{}> {
                 })
                 .catch(err => console.log(err));
         }
-        (this.isOpen = true)
+        this.isOpen = true;
     });
 
     @observable private bugTitle = '';
-    @action setBugTitle = action((title: string) => { this.bugTitle = title; });
+    @action setBugTitle = action((title: string) => {
+        this.bugTitle = title;
+    });
     @observable private bugDescription = '';
-    @action setBugDescription = action((description: string) => { this.bugDescription = description; });
+    @action setBugDescription = action((description: string) => {
+        this.bugDescription = description;
+    });
     @observable private bugType = '';
-    @action setBugType = action((type: string) => { this.bugType = type; });
+    @action setBugType = action((type: string) => {
+        this.bugType = type;
+    });
     @observable private bugPriority = '';
-    @action setBugPriority = action((priortiy: string) => { this.bugPriority = priortiy; });
+    @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', '')}`; 
+    private formatTitle = (title: string, userEmail: string) => `${title} - ${userEmail.replace('@brown.edu', '')}`;
 
-    public async getAllIssues() : Promise<any[]> {
+    public async getAllIssues(): Promise<any[]> {
         const res = await this.octokit.request('GET /repos/{owner}/{repo}/issues', {
             owner: 'brown-dash',
             repo: 'Dash-Web',
@@ -105,40 +119,34 @@ export class ReportManager extends React.Component<{}> {
     }
 
     // turns an upload link into a servable link
-    // ex: 
+    // 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 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 === '') {
+        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 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
-                ]
+                labels: ['from-dash-app', this.bugType, this.bugPriority],
             });
 
             // 201 status means success
@@ -147,8 +155,7 @@ export class ReportManager extends React.Component<{}> {
                 // on error, don't close the modal
                 return;
             }
-        }
-        else {
+        } else {
             // if not going to github issues, not sure what to do yet...
         }
 
@@ -163,9 +170,13 @@ export class ReportManager extends React.Component<{}> {
     }
 
     @observable public fileLinks: any = [];
-    @action setFileLinks = action((links: any) => { this.fileLinks = links; });
+    @action setFileLinks = action((links: any) => {
+        this.fileLinks = links;
+    });
 
-    private getServerPath = (link: any) => { return link.result.accessPaths.agnostic.server }
+    private getServerPath = (link: any) => {
+        return link.result.accessPaths.agnostic.server;
+    };
 
     private uploadFiles = (input: any) => {
         // keep null while uploading
@@ -173,112 +184,177 @@ export class ReportManager extends React.Component<{}> {
         // 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 => {
+            Networking.UploadFilesToServer(fileArray.map(file => ({ file }))).then(links => {
                 console.log('finshed uploading', links.map(this.getServerPath));
                 this.setFileLinks((links ?? []).map(this.getServerPath));
-            })
+            });
         }
-        
-    }
+    };
 
+    @observable private age = '';
 
-    private renderIssue = (issue: any) => {
+    @action private setAge = (e: SelectChangeEvent) => {
+        this.age = e.target.value as string;
+    };
+
+    private reportIssueComponent = () => {
+        return (
+            <div className="report-issue">
+                <h2>Report an issue</h2>
+                <TextField
+                    fullWidth
+                    type="text"
+                    label="Please leave a title for the bug"
+                    placeholder="Title..."
+                    required
+                    sx={{
+                        '& .MuiInputBase-input': {
+                            fontSize: 'inherit',
+                        },
+                    }}
+                    onChange={e => this.setBugTitle(e.target.value)}
+                />
+                <label>Please leave a description for the bug and how it can be recreated.</label>
+                <textarea value={this.bugDescription} placeholder="description" onChange={e => this.setBugDescription(e.target.value as string)} required />
+                <FormControl fullWidth>
+                    <InputLabel id="demo-simple-select-label">Age</InputLabel>
+                    <Select labelId="demo-simple-select-label" id="demo-simple-select" value={this.age} label="Age" onChange={this.setAge}>
+                        <MenuItem value={10}>Ten</MenuItem>
+                        <MenuItem value={20}>Twenty</MenuItem>
+                        <MenuItem value={30}>Thirty</MenuItem>
+                    </Select>
+                </FormControl>
+                <FormControl fullWidth>
+                    <InputLabel>Bug Type</InputLabel>
+                    <Select value={this.bugType} label="Bug Type" onChange={e => this.setBugType(e.target.value)}>
+                        <MenuItem value="bug">Bug</MenuItem>
+                        <MenuItem value="Poor design or cosmetic">Poor design or cosmetic</MenuItem>
+                        <MenuItem value="Poor documentation">Poor documentation</MenuItem>
+                    </Select>
+                </FormControl>
+                <FormControl>
+                    <InputLabel>Bug Priority</InputLabel>
+                    <Select fullWidth value={this.bugPriority} label="Bug Priority" onChange={e => this.setBugPriority(e.target.value as string)}>
+                        <MenuItem value="bug">Bug</MenuItem>
+                        <MenuItem value="Poor design or cosmetic">Poor design or cosmetic</MenuItem>
+                        <MenuItem value="Poor documentation">Poor documentation</MenuItem>
+                    </Select>
+                </FormControl>
+                <Button variant="contained">Submit</Button>
+            </div>
+        );
+    };
 
+    private renderIssue = (issue: any) => {
         const isReportingIssue = issue === null;
 
-        return isReportingIssue ?
+        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/>
+            <div className="settings-content">
+                <h3 style={{ textDecoration: 'underline' }}>Report an Issue</h3>
+                <label>Please leave a title for the bug.</label>
+                <br />
+                <input value={this.bugTitle} type="text" placeholder="title" onChange={e => this.setBugTitle(e.target.value)} required />
+                {/* <TextField fullWidth type="text" placeholder="Title..." required onChange={e => this.setBugTitle(e.target.value)} /> */}
                 <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/>
+                <textarea value={this.bugDescription} 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>
+                <div className="flex-select">
+                    <select name="bugType" onChange={e => (this.bugType = e.target.value)}>
+                        <option value="" disabled selected>
+                            Type
+                        </option>
+                        <option value="priority-low">Bug</option>
+                        <option value="priority-medium">Poor Design or Cosmetic</option>
+                        <option value="priority-high">Poor Documentation</option>
                     </select>
 
-                    <select name="bigPriority" onChange={e => this.bugPriority = e.target.value}>
-                        <option value="" disabled selected>Priority</option>
+                    <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)}/>
+                    <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>)
-            :
+                <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 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'>
+                <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>)}
+                    <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 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 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>
         );
     }
@@ -286,7 +362,8 @@ export class ReportManager extends React.Component<{}> {
     render() {
         return (
             <MainViewModal
-                contents={this.reportInterface}
+                // contents={this.reportInterface}
+                contents={this.reportIssueComponent()}
                 isDisplayed={this.isOpen}
                 interactive={true}
                 closeOnExternalClick={this.close}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ab2e0f7c5..4557e5866 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -65,6 +65,8 @@ import { PreviewCursor } from './PreviewCursor';
 import { PropertiesView } from './PropertiesView';
 import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider';
 import { TopBar } from './topbar/TopBar';
+import { ThemeProvider } from '@mui/material';
+import { theme } from '../theme';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 @observer
@@ -962,38 +964,39 @@ export class MainView extends React.Component {
 
     render() {
         return (
-            <div
-                className={`mainView-container${this.colorScheme}`}
-                onScroll={() => (ele => (ele.scrollTop = ele.scrollLeft = 0))(document.getElementById('root')!)}
-                ref={r => {
-                    r &&
-                        new _global.ResizeObserver(
-                            action(() => {
-                                this._windowWidth = r.getBoundingClientRect().width;
-                                this._windowHeight = r.getBoundingClientRect().height;
-                            })
-                        ).observe(r);
-                }}>
-                {this.inkResources}
-                <DictationOverlay />
-                <SharingManager />
-                <ServerStats />
-                <RTFMarkup />
-                <SettingsManager />
-                <ReportManager />
-                <CaptureManager />
-                <GroupManager />
-                <GoogleAuthenticationManager />
-                <DocumentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfSidebarDoc} PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} />
-                <ComponentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfMainDocContent} />
-                {this._hideUI ? null : <TopBar />}
-                {LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
-                {DocumentLinksButton.LinkEditorDocView ? <LinkMenu clearLinkEditor={action(() => (DocumentLinksButton.LinkEditorDocView = undefined))} docView={DocumentLinksButton.LinkEditorDocView} /> : null}
-                {this.linkDocPreview}
+            <ThemeProvider theme={theme}>
+                <div
+                    className={`mainView-container${this.colorScheme}`}
+                    onScroll={() => (ele => (ele.scrollTop = ele.scrollLeft = 0))(document.getElementById('root')!)}
+                    ref={r => {
+                        r &&
+                            new _global.ResizeObserver(
+                                action(() => {
+                                    this._windowWidth = r.getBoundingClientRect().width;
+                                    this._windowHeight = r.getBoundingClientRect().height;
+                                })
+                            ).observe(r);
+                    }}>
+                    {this.inkResources}
+                    <DictationOverlay />
+                    <SharingManager />
+                    <ServerStats />
+                    <RTFMarkup />
+                    <SettingsManager />
+                    <ReportManager />
+                    <CaptureManager />
+                    <GroupManager />
+                    <GoogleAuthenticationManager />
+                    <DocumentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfSidebarDoc} PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} />
+                    <ComponentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfMainDocContent} />
+                    {this._hideUI ? null : <TopBar />}
+                    {LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
+                    {DocumentLinksButton.LinkEditorDocView ? <LinkMenu clearLinkEditor={action(() => (DocumentLinksButton.LinkEditorDocView = undefined))} docView={DocumentLinksButton.LinkEditorDocView} /> : null}
+                    {this.linkDocPreview}
 
-                {((page: string) => {
-                    // prettier-ignore
-                    switch (page) {
+                    {((page: string) => {
+                        // prettier-ignore
+                        switch (page) {
                         default:
                         case 'dashboard': return (<>
                                         <div key="dashdiv" style={{ position: 'relative', display: this._hideUI || LightboxView.LightboxDoc ? 'none' : undefined, zIndex: 2001 }}>
@@ -1003,22 +1006,23 @@ export class MainView extends React.Component {
                                     </> );
                         case 'home': return <DashboardView />;
                     }
-                })(Doc.ActivePage)}
+                    })(Doc.ActivePage)}
 
-                <PreviewCursor />
-                <TaskCompletionBox />
-                <ContextMenu />
-                <RadialMenu />
-                <AnchorMenu />
-                <DashFieldViewMenu />
-                <MarqueeOptionsMenu />
-                <OverlayView />
-                <TimelineMenu />
-                <RichTextMenu />
-                <InkTranscription />
-                {this.snapLines}
-                <LightboxView key="lightbox" PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} />
-            </div>
+                    <PreviewCursor />
+                    <TaskCompletionBox />
+                    <ContextMenu />
+                    <RadialMenu />
+                    <AnchorMenu />
+                    <DashFieldViewMenu />
+                    <MarqueeOptionsMenu />
+                    <OverlayView />
+                    <TimelineMenu />
+                    <RichTextMenu />
+                    <InkTranscription />
+                    {this.snapLines}
+                    <LightboxView key="lightbox" PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} />
+                </div>
+            </ThemeProvider>
         );
     }
 }
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
+}
-- 
cgit v1.2.3-70-g09d2


From c8eb4ac0242181744d3268b1052582b61dbaf477 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Sat, 8 Jul 2023 02:58:04 -0400
Subject: feat: updated github key and ui

---
 package-lock.json                      |  82 +++
 package.json                           |   2 +
 src/client/theme.ts                    |  47 +-
 src/client/util/ReportManager.scss     | 383 +++++++++++---
 src/client/util/ReportManager.tsx      | 478 ++++++++++++------
 src/client/util/reportManagerSchema.ts | 877 +++++++++++++++++++++++++++++++++
 6 files changed, 1614 insertions(+), 255 deletions(-)
 create mode 100644 src/client/util/reportManagerSchema.ts

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index 895dec389..5b0c4e2f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3871,6 +3871,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",
@@ -9291,6 +9296,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",
@@ -19757,6 +19770,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",
@@ -19880,6 +19903,55 @@
             "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
             "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
         },
+        "react-loader-spinner": {
+            "version": "5.3.4",
+            "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-5.3.4.tgz",
+            "integrity": "sha512-G2vw4ssX+RDZ/vfaeva06yfNqyFViv/u+tVZ3kFLy5TKNlNx2DbuwreBSpRtPespQA+VxinxUJsigwLwG9erOg==",
+            "requires": {
+                "react-is": "^18.2.0",
+                "styled-components": "^5.3.5",
+                "styled-tools": "^1.7.2"
+            },
+            "dependencies": {
+                "css-to-react-native": {
+                    "version": "3.2.0",
+                    "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+                    "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+                    "requires": {
+                        "camelize": "^1.0.0",
+                        "css-color-keywords": "^1.0.0",
+                        "postcss-value-parser": "^4.0.2"
+                    }
+                },
+                "postcss-value-parser": {
+                    "version": "4.2.0",
+                    "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+                    "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+                },
+                "react-is": {
+                    "version": "18.2.0",
+                    "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+                    "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+                },
+                "styled-components": {
+                    "version": "5.3.11",
+                    "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
+                    "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
+                    "requires": {
+                        "@babel/helper-module-imports": "^7.0.0",
+                        "@babel/traverse": "^7.4.5",
+                        "@emotion/is-prop-valid": "^1.1.0",
+                        "@emotion/stylis": "^0.8.4",
+                        "@emotion/unitless": "^0.7.4",
+                        "babel-plugin-styled-components": ">= 1.12.0",
+                        "css-to-react-native": "^3.0.0",
+                        "hoist-non-react-statics": "^3.0.0",
+                        "shallowequal": "^1.1.0",
+                        "supports-color": "^5.5.0"
+                    }
+                }
+            }
+        },
         "react-loading": {
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/react-loading/-/react-loading-2.0.3.tgz",
@@ -21215,6 +21287,11 @@
             "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
             "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
         },
+        "shallowequal": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+            "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+        },
         "sharp": {
             "version": "0.23.4",
             "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.23.4.tgz",
@@ -22232,6 +22309,11 @@
                 }
             }
         },
+        "styled-tools": {
+            "version": "1.7.2",
+            "resolved": "https://registry.npmjs.org/styled-tools/-/styled-tools-1.7.2.tgz",
+            "integrity": "sha512-IjLxzM20RMwAsx8M1QoRlCG/Kmq8lKzCGyospjtSXt/BTIIcvgTonaxQAsKnBrsZNwhpHzO9ADx5te0h76ILVg=="
+        },
         "stylis": {
             "version": "4.1.3",
             "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
diff --git a/package.json b/package.json
index 6cd271c96..39f70ab66 100644
--- a/package.json
+++ b/package.json
@@ -288,9 +288,11 @@
         "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",
+        "react-loader-spinner": "^5.3.4",
         "react-loading": "^2.0.3",
         "react-markdown": "^8.0.3",
         "react-measure": "^2.5.2",
diff --git a/src/client/theme.ts b/src/client/theme.ts
index 57be370cc..f0a11fe6e 100644
--- a/src/client/theme.ts
+++ b/src/client/theme.ts
@@ -4,39 +4,20 @@ import { createTheme } from '@mui/material/styles';
 export const theme = createTheme({
     palette: {
         primary: {
-            main: 'rgb(0, 149, 246)',
+            main: '#4476f7',
+        },
+    },
+    components: {
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    fontSize: '14px',
+                    boxShadow: 'none',
+                    '&:hover': {
+                        boxShadow: 'none',
+                    },
+                },
+            },
         },
     },
-    // components: {
-    //     MuiButton: {
-    //         styleOverrides: {
-    //             root: {
-    //                 fontSize: '14px',
-    //                 boxShadow: 'none',
-    //                 '&:hover': {
-    //                     boxShadow: 'none',
-    //                     scale: 1,
-    //                 },
-    //             },
-    //         },
-    //     },
-    //     MuiTextField: {
-    //         styleOverrides: {
-    //             root: {
-    //                 '& .MuiInputBase-input': {
-    //                     fontSize: '16px',
-    //                 },
-    //                 '& .MuiInputLabel-root': {
-    //                     fontSize: '16px',
-    //                 },
-    //                 '& .MuiInputLabel-shrink': {
-    //                     fontSize: '16px',
-    //                 },
-    //                 '& .MuiFormHelperText-root': {
-    //                     fontSize: '16px',
-    //                 },
-    //             },
-    //         },
-    //     },
-    // },
 });
diff --git a/src/client/util/ReportManager.scss b/src/client/util/ReportManager.scss
index 969e0de74..4ff86fd9c 100644
--- a/src/client/util/ReportManager.scss
+++ b/src/client/util/ReportManager.scss
@@ -1,102 +1,349 @@
 @import '../views/global/globalCssVariables';
 
+// header
+
+.report-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    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: 45vw;
     padding: 16px;
+    padding-top: 32px;
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 16px;
     background-color: #ffffff;
     text-align: left;
+    position: relative;
 
-    h2 {
-        font-size: 24px;
+    .report-label {
+        font-size: 14px;
+        font-weight: 400;
+        color: #747474;
+    }
+
+    .report-section {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .report-textarea {
+        width: 100%;
+        height: 80px;
+        padding: 8px;
+        resize: none;
+    }
+
+    .report-selects {
+        display: flex;
+        gap: 16px;
+
+        .report-select {
+            flex: 1;
+            padding: 8px;
+            border-color: #c6c6c6;
+
+            .report-opt {
+                padding: 8px;
+            }
+        }
     }
 }
 
-// ---------------------------------------
-.issue-list-wrapper {
-    position: relative;
-    min-width: 250px;
-    background-color: $light-blue;
-    overflow-y: scroll;
+.report-input {
+    border: none;
+    outline: none;
+    border-bottom: 1px solid #c6c6c6;
+    padding: 8px;
+    padding-left: 0;
+    transition: all 0.2s ease;
+
+    &:hover {
+        border-bottom-color: #7f7f7f;
+    }
+    &:focus {
+        border-bottom-color: #4476f7;
+    }
 }
 
-.issue-list {
+// View issues
+
+.view-issues {
+    width: 65vw;
+    min-width: 600px;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 5px;
-    margin: 5px;
-    border-radius: 5px;
-    border: 1px solid grey;
-    background-color: lightgoldenrodyellow;
+    gap: 16px;
+    height: 100%;
+
+    .left {
+        height: 100%;
+        flex: 1;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        background-color: #ffffff;
+        text-align: left;
+        position: relative;
+
+        .issues {
+            position: relative;
+            flex-grow: 1;
+            overflow-y: auto;
+            overflow-x: hidden;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+    }
+
+    .right {
+        padding: 16px;
+        height: 100%;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        flex: 1;
+    }
 }
 
-// issue should pop up when the user hover over the issue
-.issue-list:hover {
-    box-shadow: 2px;
+// Issue
+
+.issue {
     cursor: pointer;
-    border: 3px solid #252b33;
+    padding: 16px;
+    background-color: #ffffff;
+    border: 1px solid #d3d3d3;
+    transition: all 0.1s ease;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    // box-shadow: 0 0 8px #d0d0d07c;
+
+    .issue-label {
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 400;
+        letter-spacing: 1px;
+        color: #7f7f7f;
+    }
+
+    .issue-title {
+        font-size: 16px;
+        font-weight: 500;
+        padding: 0;
+        margin: 0;
+        color: #4476f7;
+    }
+
+    &:hover {
+        background-color: #4476f7;
+        border-color: #4476f7;
+        color: #ffffff;
+
+        .issue-label {
+            color: #ffffff;
+        }
+
+        .issue-title {
+            color: #ffffff;
+        }
+    }
 }
 
-.issue-content {
-    background-color: white;
-    padding: 10px;
-    flex: 1 1 auto;
-    overflow-y: scroll;
+// Dropzone
+
+.dropzone {
+    padding: 2rem;
+    border-radius: 0.5rem;
+    border: 2px dashed #ebebeb;
+
+    .dropzone-instructions {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+        color: #7f7f7f;
+
+        p {
+            text-align: center;
+        }
+    }
 }
 
-.issue-title {
-    font-size: 20px;
-    font-weight: 600;
-    color: black;
+.files {
+    font-size: 14px;
+    color: #7f7f7f;
+
+    .file-list {
+        width: 100%;
+        list-style-type: none;
+        display: flex;
+        overflow-x: auto;
+        gap: 16px;
+        margin: 0;
+        padding: 0;
+
+        .file-name {
+            padding: 8px 12px;
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            white-space: nowrap;
+        }
+    }
 }
 
-.issue-body {
-    padding: 0 10px;
+// Detailed issue view
+
+.issue-view {
+    height: 100%;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    background-color: #ffffff;
     text-align: left;
-}
+    position: relative;
+    overflow: auto;
 
-.issue-body > * {
-    margin-top: 5px;
-}
+    .issue-label {
+        color: #7f7f7f;
 
-.issue-body img,
-.issue-body video {
-    display: block;
-    max-width: 100%;
-}
+        .issue-link {
+            cursor: pointer;
+            color: #4476f7;
+        }
+    }
 
-.report-issue-fab {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-}
+    .issue-title {
+        font-size: 24px;
+        margin: 0;
+        padding: 0;
+    }
 
-.loading-center {
-    margin: auto 0;
+    .issue-content {
+        font-size: 14px;
+        color: #7f7f7f;
+    }
 }
 
-.settings-content label {
-    margin-top: 10px;
-}
+// Old code
 
-.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;
-}
+// .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
index a08ef9979..3eebb8f15 100644
--- a/src/client/util/ReportManager.tsx
+++ b/src/client/util/ReportManager.tsx
@@ -1,62 +1,82 @@
-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/button/FontIconBox';
 import { DragManager } from './DragManager';
 import { GroupManager } from './GroupManager';
+import { CheckBox } from '../views/search/CheckBox';
+import { undoBatch } from './UndoManager';
+import * as React from 'react';
 import './SettingsManager.scss';
 import './ReportManager.scss';
-import { undoBatch } from './UndoManager';
+import { action, computed, observable, runInAction } from 'mobx';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { BsX } from 'react-icons/bs';
+import { BiX } from 'react-icons/bi';
+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 { Networking } from '../Network';
+import { MainViewModal } from '../views/MainViewModal';
 import { Octokit } from '@octokit/core';
-import { CheckBox } from '../views/search/CheckBox';
+import { Button, IconButton } from '@mui/material';
+import { Oval } from 'react-loader-spinner';
+import Dropzone from 'react-dropzone';
 import ReactLoading from 'react-loading';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
-import { Button, MenuItem, Select, SelectChangeEvent, TextField } from '@mui/material';
-import { FormControl, InputLabel } from '@material-ui/core';
+import { theme } from '../theme';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
 
+enum ViewState {
+    VIEW,
+    CREATE,
+}
+
 @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 public issues: any[] = [];
-    @action setIssues = action((issues: any[]) => {
-        this.issues = issues;
+    @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
+    public shownIssues: Issue[] = [];
+    @action setShownIssues = action((issues: Issue[]) => {
+        this.shownIssues = issues;
     });
 
-    // undefined is the default - null is if the user is making an issue
-    @observable public selectedIssue: any = undefined;
-    @action setSelectedIssue = action((issue: any) => {
+    @observable selectedIssue: Issue | undefined = undefined;
+    @action setSelectedIssue = action((issue: Issue | undefined) => {
         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()));
-    });
+    @observable private mediaFiles: File[] = [];
+    @action private setMediaFiles = (files: File[]) => {
+        this.mediaFiles = files;
+    };
 
     constructor(props: {}) {
         super(props);
@@ -68,17 +88,18 @@ export class ReportManager extends React.Component<{}> {
     }
 
     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));
-        }
+    public open = action(async () => {
         this.isOpen = true;
+        if (this.shownIssues.length === 0) {
+            try {
+                // load in the issues if not already loaded
+                const issues = (await this.getAllIssues()) as Issue[];
+                this.setShownIssues(issues.filter(issue => issue.state === 'open'));
+                // this.updateIssueSearch();
+            } catch (err) {
+                console.log(err);
+            }
+        }
     });
 
     @observable private bugTitle = '';
@@ -98,6 +119,14 @@ export class ReportManager extends React.Component<{}> {
         this.bugPriority = priortiy;
     });
 
+    private showReportIssueScreen = () => {
+        this.setSelectedIssue(undefined);
+    };
+
+    private closeReportIssueScreen = () => {
+        this.setSelectedIssue(undefined);
+    };
+
     // private toGithub = false;
     // will always be set to true - no alterntive option yet
     private toGithub = true;
@@ -133,30 +162,31 @@ export class ReportManager extends React.Component<{}> {
     };
 
     public async reportIssue() {
+        console.log(this.bugTitle);
+        console.log('reporting issue');
         if (this.bugTitle === '' || this.bugDescription === '' || this.bugType === '' || this.bugPriority === '') {
             alert('Please fill out all required fields to report an issue.');
             return;
         }
+        this.setSubmitting(true);
 
-        if (this.toGithub) {
-            const formattedLinks = (this.fileLinks ?? []).map(this.fileLinktoServerLink);
+        console.log('to github');
+        const links = await this.uploadFilesToServer();
+        const formattedLinks = (links ?? []).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],
-            });
+        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...
+        // 201 status means success
+        if (req.status !== 201) {
+            alert('Error creating issue on github.');
+            // on error, don't close the modal
+            return;
         }
 
         // if we're down here, then we're good to go. reset the fields.
@@ -166,7 +196,9 @@ export class ReportManager extends React.Component<{}> {
         this.setFileLinks([]);
         this.setBugType('');
         this.setBugPriority('');
-        this.close();
+        this.setSubmitting(false);
+        alert('Successfully submitted issue.');
+        // this.close();
     }
 
     @observable public fileLinks: any = [];
@@ -191,61 +223,216 @@ export class ReportManager extends React.Component<{}> {
         }
     };
 
-    @observable private age = '';
+    private uploadFilesToServer = async () => {
+        const links = await Networking.UploadFilesToServer(this.mediaFiles.map(file => ({ file })));
+        console.log('finshed uploading', links.map(this.getServerPath));
+        return (links ?? []).map(this.getServerPath);
+        // this.setFileLinks((links ?? []).map(this.getServerPath));
+    };
 
-    @action private setAge = (e: SelectChangeEvent) => {
-        this.age = e.target.value as string;
+    private onDrop = (files: File[]) => {
+        this.setMediaFiles(files);
+    };
+
+    private reportComponent = () => {
+        if (this.viewState === ViewState.VIEW) {
+            return this.viewIssuesComponent();
+        } else {
+            return this.reportIssueComponent();
+        }
+    };
+
+    private viewIssuesComponent = () => {
+        return (
+            <div className="view-issues">
+                <div className="left">
+                    <div className="report-header">
+                        <h2>Open Issues</h2>
+                        <Button
+                            variant="contained"
+                            onClick={() => {
+                                this.setViewState(ViewState.CREATE);
+                            }}>
+                            report issue
+                        </Button>
+                    </div>
+                    <input
+                        className="report-input"
+                        type="text"
+                        placeholder="Filter..."
+                        onChange={e => {
+                            this.setQuery(e.target.value);
+                        }}
+                        required
+                    />
+                    <div className="issues">
+                        {this.shownIssues
+                            .filter(issue => issue.title.toLowerCase().includes(this.query))
+                            .map(issue => (
+                                <IssueCard
+                                    key={issue.number}
+                                    issue={issue}
+                                    onSelect={() => {
+                                        this.setSelectedIssue(issue);
+                                    }}
+                                />
+                            ))}
+                    </div>
+                </div>
+                <div className="right">{this.selectedIssue ? <IssueView issue={this.selectedIssue} /> : <div>No issue selected</div>}</div>
+                <IconButton sx={{ position: 'absolute', top: '4px', right: '4px' }} onClick={this.close}>
+                    <BiX size="16px" />
+                </IconButton>
+            </div>
+        );
     };
 
     private reportIssueComponent = () => {
         return (
             <div className="report-issue">
-                <h2>Report an issue</h2>
-                <TextField
-                    fullWidth
-                    type="text"
-                    label="Please leave a title for the bug"
-                    placeholder="Title..."
-                    required
-                    sx={{
-                        '& .MuiInputBase-input': {
-                            fontSize: 'inherit',
-                        },
-                    }}
-                    onChange={e => this.setBugTitle(e.target.value)}
-                />
-                <label>Please leave a description for the bug and how it can be recreated.</label>
-                <textarea value={this.bugDescription} placeholder="description" onChange={e => this.setBugDescription(e.target.value as string)} required />
-                <FormControl fullWidth>
-                    <InputLabel id="demo-simple-select-label">Age</InputLabel>
-                    <Select labelId="demo-simple-select-label" id="demo-simple-select" value={this.age} label="Age" onChange={this.setAge}>
-                        <MenuItem value={10}>Ten</MenuItem>
-                        <MenuItem value={20}>Twenty</MenuItem>
-                        <MenuItem value={30}>Thirty</MenuItem>
-                    </Select>
-                </FormControl>
-                <FormControl fullWidth>
-                    <InputLabel>Bug Type</InputLabel>
-                    <Select value={this.bugType} label="Bug Type" onChange={e => this.setBugType(e.target.value)}>
-                        <MenuItem value="bug">Bug</MenuItem>
-                        <MenuItem value="Poor design or cosmetic">Poor design or cosmetic</MenuItem>
-                        <MenuItem value="Poor documentation">Poor documentation</MenuItem>
-                    </Select>
-                </FormControl>
-                <FormControl>
-                    <InputLabel>Bug Priority</InputLabel>
-                    <Select fullWidth value={this.bugPriority} label="Bug Priority" onChange={e => this.setBugPriority(e.target.value as string)}>
-                        <MenuItem value="bug">Bug</MenuItem>
-                        <MenuItem value="Poor design or cosmetic">Poor design or cosmetic</MenuItem>
-                        <MenuItem value="Poor documentation">Poor documentation</MenuItem>
-                    </Select>
-                </FormControl>
-                <Button variant="contained">Submit</Button>
+                <div className="report-header-vertical">
+                    <Button
+                        variant="text"
+                        onClick={() => {
+                            this.setViewState(ViewState.VIEW);
+                        }}
+                        sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                        <HiOutlineArrowLeft color={theme.palette.primary.main} />
+                        back to view
+                    </Button>
+                    <h2>Report an Issue</h2>
+                </div>
+                <div className="report-section">
+                    <label className="report-label">Please provide a title for the bug</label>
+                    <input className="report-input" value={this.bugTitle} type="text" placeholder="Title..." onChange={e => this.setBugTitle(e.target.value)} required />
+                </div>
+                <div className="report-section">
+                    <label className="report-label">Please leave a description for the bug and how it can be recreated</label>
+                    <textarea className="report-textarea" value={this.bugDescription} placeholder="Description..." onChange={e => this.setBugDescription(e.target.value)} required />
+                </div>
+                <div className="report-selects">
+                    <select className="report-select" name="bugType" onChange={e => (this.bugType = e.target.value)}>
+                        <option value="" disabled selected>
+                            Type
+                        </option>
+                        <option className="report-opt" value="priority-low">
+                            Bug
+                        </option>
+                        <option className="report-opt" value="priority-medium">
+                            Poor Design or Cosmetic
+                        </option>
+                        <option className="report-opt" value="priority-high">
+                            Poor Documentation
+                        </option>
+                    </select>
+                    <select className="report-select" name="bigPriority" onChange={e => (this.bugPriority = e.target.value)}>
+                        <option className="report-opt" 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>
+                <Dropzone
+                    onDrop={this.onDrop}
+                    accept={{
+                        'image/png': ['.png'],
+                        'image/jpg': ['.jpg'],
+                        'image/jpeg': ['.jpeg'],
+                        'video/mp4': ['.mp4'],
+                        'video/mpeg': ['.mpeg'],
+                        'video/webm': ['.webm'],
+                        'audio/mpeg': ['.mp3'],
+                        'audio/wav': ['.wav'],
+                        'audio/ogg': ['.ogg'],
+                    }}>
+                    {({ getRootProps, getInputProps }) => (
+                        <div {...getRootProps({ className: 'dropzone' })}>
+                            <input {...getInputProps()} />
+                            <div className="dropzone-instructions">
+                                <AiOutlineUpload size={25} />
+                                <p>Drop or select media that shows the bug (optional)</p>
+                            </div>
+                        </div>
+                    )}
+                </Dropzone>
+                {this.mediaFiles.length > 0 && (
+                    <div className="files">
+                        <ul className="file-list">
+                            {this.mediaFiles.map((file, i) => (
+                                <li key={file.name} className="file-name">
+                                    {file.name}
+                                    <IconButton
+                                        onClick={() => {
+                                            this.setMediaFiles(this.mediaFiles.filter(f => f !== file));
+                                        }}>
+                                        <BiX />
+                                    </IconButton>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                )}
+
+                <Button
+                    variant="contained"
+                    sx={{ fontSize: '14px', display: 'flex', alignItems: 'center', gap: '1rem' }}
+                    onClick={() => {
+                        this.reportIssue();
+                    }}>
+                    Submit
+                    {this.submitting && <Oval height={20} width={20} color="#ffffff" visible={true} ariaLabel="oval-loading" secondaryColor="#ffffff87" strokeWidth={3} strokeWidthSecondary={3} />}
+                </Button>
+                <IconButton sx={{ position: 'absolute', top: '4px', right: '4px' }} onClick={this.close}>
+                    <BiX size={'16px'} />
+                </IconButton>
             </div>
         );
     };
 
-    private renderIssue = (issue: any) => {
+    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.setQuery(e.target.value)}></input>
+                    <br />
+                    {this.shownIssues.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>
+        );
+    }
+
+    private renderIssue = (issue: Issue) => {
         const isReportingIssue = issue === null;
 
         return isReportingIssue ? (
@@ -275,7 +462,7 @@ export class ReportManager extends React.Component<{}> {
                         <option value="priority-high">Poor Documentation</option>
                     </select>
 
-                    <select name="bigPriority" onChange={e => (this.bugPriority = e.target.value)}>
+                    <select name="priority" onChange={e => (this.bugPriority = e.target.value)}>
                         <option value="" disabled selected>
                             Priority
                         </option>
@@ -304,71 +491,54 @@ export class ReportManager extends React.Component<{}> {
                     </a>
                 </h5>
                 <div className="issue-title">{issue.title}</div>
-                <ReactMarkdown children={issue.body} className="issue-body" linkTarget={'_blank'} remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} />
+                <ReactMarkdown children={issue.body as string} 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}
-                contents={this.reportIssueComponent()}
+                contents={this.reportComponent()}
                 isDisplayed={this.isOpen}
                 interactive={true}
                 closeOnExternalClick={this.close}
-                dialogueBoxStyle={{ width: 'auto', height: '500px', background: Cast(Doc.SharingDoc().userColor, 'string', null) }}
+                dialogueBoxStyle={{ width: 'auto', minWidth: '400px', height: '85vh', maxHeight: '90vh', background: '#ffffff', borderRadius: '8px' }}
             />
         );
     }
 }
+
+interface IssueCardProps {
+    issue: Issue;
+    onSelect: () => void;
+}
+const IssueCard = ({ issue, onSelect }: IssueCardProps) => {
+    return (
+        <div className="issue" onClick={onSelect}>
+            <label className="issue-label">#{issue.number}</label>
+            <h3 className="issue-title">{issue.title}</h3>
+        </div>
+    );
+};
+
+interface IssueViewProps {
+    issue: Issue;
+}
+
+const IssueView = ({ issue }: IssueViewProps) => {
+    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>
+            <ReactMarkdown children={issue.body as string} className="issue-content" linkTarget={'_blank'} remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} />
+            {/* <p className="issue-content">{issue.body}</p> */}
+        </div>
+    );
+};
diff --git a/src/client/util/reportManagerSchema.ts b/src/client/util/reportManagerSchema.ts
new file mode 100644
index 000000000..28ce6411d
--- /dev/null
+++ b/src/client/util/reportManagerSchema.ts
@@ -0,0 +1,877 @@
+/**
+ * Issues are a great way to keep track of tasks, enhancements, and bugs for your projects.
+ */
+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;
+}
-- 
cgit v1.2.3-70-g09d2


From fb939a1d2d59a776d9e3336dfc4a1e028ebc3113 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Sun, 9 Jul 2023 00:59:10 -0400
Subject: Almost done

---
 src/client/Network.ts              |  16 +-
 src/client/util/ReportManager.scss |  98 ++++++--
 src/client/util/ReportManager.tsx  | 468 +++++++++++++++++++------------------
 3 files changed, 324 insertions(+), 258 deletions(-)

(limited to 'src')

diff --git a/src/client/Network.ts b/src/client/Network.ts
index d606b9854..eb827e0c8 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;
@@ -40,7 +40,7 @@ export namespace Networking {
      * @param fileguidpairs the files and corresponding guids to be uploaded to the 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 +57,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 = '/uploadFormData';
+        const response = await fetch(endpoint, parameters);
         return response.json();
     }
 
diff --git a/src/client/util/ReportManager.scss b/src/client/util/ReportManager.scss
index 4ff86fd9c..b3bd998e6 100644
--- a/src/client/util/ReportManager.scss
+++ b/src/client/util/ReportManager.scss
@@ -31,7 +31,8 @@
 // Report
 
 .report-issue {
-    width: 45vw;
+    width: 450px;
+    min-width: 300px;
     padding: 16px;
     padding-top: 32px;
     display: flex;
@@ -61,10 +62,11 @@
 
     .report-selects {
         display: flex;
+        flex-direction: column;
+        align-items: stretch;
         gap: 16px;
 
         .report-select {
-            flex: 1;
             padding: 8px;
             border-color: #c6c6c6;
 
@@ -95,7 +97,7 @@
 
 .view-issues {
     width: 65vw;
-    min-width: 600px;
+    min-width: 500px;
     display: flex;
     gap: 16px;
     height: 100%;
@@ -134,6 +136,12 @@
     }
 }
 
+// video
+
+.default-video::-webkit-media-controls {
+    display: block !important;
+}
+
 // Issue
 
 .issue {
@@ -153,7 +161,6 @@
         cursor: pointer;
         font-size: 14px;
         font-weight: 400;
-        letter-spacing: 1px;
         color: #7f7f7f;
     }
 
@@ -200,26 +207,24 @@
     }
 }
 
-.files {
+.file-list {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
     font-size: 14px;
     color: #7f7f7f;
+    width: 100%;
+    overflow-x: auto;
+    list-style-type: none;
+    display: flex;
+    gap: 16px;
 
-    .file-list {
-        width: 100%;
-        list-style-type: none;
+    .file-name {
+        padding: 8px 12px;
         display: flex;
-        overflow-x: auto;
+        align-items: center;
         gap: 16px;
-        margin: 0;
-        padding: 0;
-
-        .file-name {
-            padding: 8px 12px;
-            display: flex;
-            align-items: center;
-            gap: 16px;
-            white-space: nowrap;
-        }
+        white-space: nowrap;
     }
 }
 
@@ -257,6 +262,61 @@
     }
 }
 
+// Media previews
+
+.report-media-wrapper {
+    position: relative;
+
+    .close-btn {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        opacity: 0;
+    }
+
+    .report-media-content {
+        position: relative;
+        display: inline block;
+        cursor: pointer;
+    }
+
+    .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 */
+    }
+
+    &: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;
+    }
+}
+
 // Old code
 
 // <---------------------------------------------------------------------------->
diff --git a/src/client/util/ReportManager.tsx b/src/client/util/ReportManager.tsx
index 3eebb8f15..125d20876 100644
--- a/src/client/util/ReportManager.tsx
+++ b/src/client/util/ReportManager.tsx
@@ -13,7 +13,6 @@ import * as React from 'react';
 import './SettingsManager.scss';
 import './ReportManager.scss';
 import { action, computed, observable, runInAction } from 'mobx';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { BsX } from 'react-icons/bs';
 import { BiX } from 'react-icons/bi';
 import { AiOutlineUpload } from 'react-icons/ai';
@@ -27,11 +26,11 @@ import { Octokit } from '@octokit/core';
 import { Button, IconButton } from '@mui/material';
 import { Oval } from 'react-loader-spinner';
 import Dropzone from 'react-dropzone';
-import ReactLoading from 'react-loading';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import { theme } from '../theme';
+import v4 = require('uuid/v4');
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -41,6 +40,16 @@ enum ViewState {
     CREATE,
 }
 
+interface FileData {
+    _id: string;
+    file: File;
+}
+
+// Format reference: "https://browndash.com/files/images/upload_cb31bc0fda59c96ca14193ec494f80cf_o.jpg" />
+
+/**
+ * Class for reporting and viewing Github issues within the app.
+ */
 @observer
 export class ReportManager extends React.Component<{}> {
     public static Instance: ReportManager;
@@ -62,6 +71,11 @@ export class ReportManager extends React.Component<{}> {
         this.submitting = submitting;
     };
 
+    @observable fetchingIssues: boolean = false;
+    @action private setFetchingIssues = (fetching: boolean) => {
+        this.fetchingIssues = fetching;
+    };
+
     @observable
     public shownIssues: Issue[] = [];
     @action setShownIssues = action((issues: Issue[]) => {
@@ -73,34 +87,7 @@ export class ReportManager extends React.Component<{}> {
         this.selectedIssue = issue;
     });
 
-    @observable private mediaFiles: File[] = [];
-    @action private setMediaFiles = (files: File[]) => {
-        this.mediaFiles = files;
-    };
-
-    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(async () => {
-        this.isOpen = true;
-        if (this.shownIssues.length === 0) {
-            try {
-                // load in the issues if not already loaded
-                const issues = (await this.getAllIssues()) as Issue[];
-                this.setShownIssues(issues.filter(issue => issue.state === 'open'));
-                // this.updateIssueSearch();
-            } catch (err) {
-                console.log(err);
-            }
-        }
-    });
+    // Form state
 
     @observable private bugTitle = '';
     @action setBugTitle = action((title: string) => {
@@ -119,20 +106,41 @@ export class ReportManager extends React.Component<{}> {
         this.bugPriority = priortiy;
     });
 
-    private showReportIssueScreen = () => {
-        this.setSelectedIssue(undefined);
+    @observable private mediaFiles: FileData[] = [];
+    @action private setMediaFiles = (files: FileData[]) => {
+        this.mediaFiles = files;
     };
 
-    private closeReportIssueScreen = () => {
-        this.setSelectedIssue(undefined);
-    };
+    public close = action(() => (this.isOpen = false));
+    public open = action(async () => {
+        this.isOpen = true;
+        if (this.shownIssues.length === 0) {
+            this.setFetchingIssues(true);
+            try {
+                // load in the issues if not already loaded
+                const issues = (await this.getAllIssues()) as Issue[];
+                this.setShownIssues(issues.filter(issue => issue.state === 'open' && !issue.pull_request));
+            } catch (err) {
+                console.log(err);
+            }
+            this.setFetchingIssues(false);
+        }
+    });
 
-    // private toGithub = false;
-    // will always be set to true - no alterntive option yet
-    private toGithub = true;
+    constructor(props: {}) {
+        super(props);
+        ReportManager.Instance = this;
 
-    private formatTitle = (title: string, userEmail: string) => `${title} - ${userEmail.replace('@brown.edu', '')}`;
+        // initializing Github connection
+        this.octokit = new Octokit({
+            auth: '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',
+        });
+    }
 
+    /**
+     * Fethches issues from Github.
+     * @returns array of all issues
+     */
     public async getAllIssues(): Promise<any[]> {
         const res = await this.octokit.request('GET /repos/{owner}/{repo}/issues', {
             owner: 'brown-dash',
@@ -147,53 +155,42 @@ export class ReportManager extends React.Component<{}> {
         }
     }
 
-    // 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() {
-        console.log(this.bugTitle);
-        console.log('reporting issue');
+    /**
+     * Sends a request to Github to report a new issue with the form data.
+     * @returns nothing
+     */
+    public async reportIssue(): Promise<void> {
         if (this.bugTitle === '' || this.bugDescription === '' || this.bugType === '' || this.bugPriority === '') {
             alert('Please fill out all required fields to report an issue.');
             return;
         }
         this.setSubmitting(true);
 
-        console.log('to github');
         const links = await this.uploadFilesToServer();
+        if (!links) {
+            // error uploading files to the server
+            return;
+        }
         const formattedLinks = (links ?? []).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')}`,
+            body: `${this.bugDescription} ${formattedLinks.length > 0 && `\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;
         }
 
-        // if we're down here, then we're good to go. reset the fields.
+        // Reset fields
         this.setBugTitle('');
         this.setBugDescription('');
-        // this.toGithub = false;
-        this.setFileLinks([]);
+        this.setMediaFiles([]);
         this.setBugType('');
         this.setBugPriority('');
         this.setSubmitting(false);
@@ -201,47 +198,118 @@ export class ReportManager extends React.Component<{}> {
         // this.close();
     }
 
-    @observable public fileLinks: any = [];
-    @action setFileLinks = action((links: any) => {
-        this.fileLinks = links;
-    });
+    /**
+     * Formats issue title.
+     *
+     * @param title title of issue
+     * @param userEmail email of issue submitter
+     * @returns formatted title
+     */
+    private formatTitle = (title: string, userEmail: string): string => `${title} - ${userEmail.replace('@brown.edu', '')}`;
 
-    private getServerPath = (link: any) => {
-        return link.result.accessPaths.agnostic.server;
+    // turns an upload link into a servable 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
+    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;
     };
 
-    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));
-            });
-        }
+    /**
+     * Gets the server file path.
+     *
+     * @param link response from file upload
+     * @returns server file path
+     */
+    private getServerPath = (link: any): string => {
+        return link.result.accessPaths.agnostic.server as string;
     };
 
-    private uploadFilesToServer = async () => {
-        const links = await Networking.UploadFilesToServer(this.mediaFiles.map(file => ({ file })));
-        console.log('finshed uploading', links.map(this.getServerPath));
-        return (links ?? []).map(this.getServerPath);
-        // this.setFileLinks((links ?? []).map(this.getServerPath));
+    /**
+     * Uploads media files to the server.
+     * @returns the server paths or undefined on error
+     */
+    private uploadFilesToServer = async (): Promise<string[] | undefined> => {
+        try {
+            const links = await Networking.UploadFilesToServer(
+                this.mediaFiles.map(file => ({ file: file.file })),
+                true
+            );
+            return (links ?? []).map(this.getServerPath);
+        } catch (err) {
+            if (err instanceof Error) {
+                alert(err.message);
+            } else {
+                alert(err);
+            }
+        }
     };
 
+    /**
+     * Handles file upload.
+     * @param files uploaded files
+     */
     private onDrop = (files: File[]) => {
-        this.setMediaFiles(files);
+        this.setMediaFiles([...this.mediaFiles, ...files.map(file => ({ _id: v4(), file }))]);
     };
 
-    private reportComponent = () => {
-        if (this.viewState === ViewState.VIEW) {
-            return this.viewIssuesComponent();
-        } else {
-            return this.reportIssueComponent();
+    /**
+     * 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={50} alt={`Preview of ${file.name}`} src={preview} style={{ display: 'block' }} />
+                    </div>
+                    <IconButton onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn">
+                        <BsX color="#ffffff" />
+                    </IconButton>
+                </div>
+            );
+        } else if (mimeType.startsWith('video/')) {
+            return (
+                <div key={fileData._id} className="report-media-wrapper">
+                    <div className="report-media-content">
+                        <video controls style={{ height: '50px', width: 'auto', display: 'block' }}>
+                            <source src={preview} type="video/mp4" />
+                            Your browser does not support the video tag.
+                        </video>
+                    </div>
+                    <IconButton onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn">
+                        <BsX color="#ffffff" />
+                    </IconButton>
+                </div>
+            );
+        } else if (mimeType.startsWith('audio/')) {
+            return (
+                <div key={fileData._id} className="report-audio-wrapper">
+                    <audio src={preview} controls />
+                    <IconButton onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn">
+                        <BsX />
+                    </IconButton>
+                </div>
+            );
         }
+        return <></>;
     };
 
+    /**
+     * @returns the component that dispays all issues
+     */
     private viewIssuesComponent = () => {
         return (
             <div className="view-issues">
@@ -266,17 +334,23 @@ export class ReportManager extends React.Component<{}> {
                         required
                     />
                     <div className="issues">
-                        {this.shownIssues
-                            .filter(issue => issue.title.toLowerCase().includes(this.query))
-                            .map(issue => (
-                                <IssueCard
-                                    key={issue.number}
-                                    issue={issue}
-                                    onSelect={() => {
-                                        this.setSelectedIssue(issue);
-                                    }}
-                                />
-                            ))}
+                        {this.fetchingIssues ? (
+                            <div style={{ flexGrow: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                                <Oval height={50} width={50} color={theme.palette.primary.main} visible={true} ariaLabel="oval-loading" secondaryColor={theme.palette.primary.main + 'b8'} strokeWidth={3} strokeWidthSecondary={3} />
+                            </div>
+                        ) : (
+                            this.shownIssues
+                                .filter(issue => issue.title.toLowerCase().includes(this.query))
+                                .map(issue => (
+                                    <IssueCard
+                                        key={issue.number}
+                                        issue={issue}
+                                        onSelect={() => {
+                                            this.setSelectedIssue(issue);
+                                        }}
+                                    />
+                                ))
+                        )}
                     </div>
                 </div>
                 <div className="right">{this.selectedIssue ? <IssueView issue={this.selectedIssue} /> : <div>No issue selected</div>}</div>
@@ -287,6 +361,9 @@ export class ReportManager extends React.Component<{}> {
         );
     };
 
+    /**
+     * @returns the form component for submitting issues
+     */
     private reportIssueComponent = () => {
         return (
             <div className="report-issue">
@@ -337,12 +414,8 @@ export class ReportManager extends React.Component<{}> {
                 <Dropzone
                     onDrop={this.onDrop}
                     accept={{
-                        'image/png': ['.png'],
-                        'image/jpg': ['.jpg'],
-                        'image/jpeg': ['.jpeg'],
-                        'video/mp4': ['.mp4'],
-                        'video/mpeg': ['.mpeg'],
-                        'video/webm': ['.webm'],
+                        'image/*': ['.png', '.jpg', '.jpeg', '.gif'],
+                        'video/*': ['.mp4', '.mpeg', '.webm', '.mov'],
                         'audio/mpeg': ['.mp3'],
                         'audio/wav': ['.wav'],
                         'audio/ogg': ['.ogg'],
@@ -357,24 +430,7 @@ export class ReportManager extends React.Component<{}> {
                         </div>
                     )}
                 </Dropzone>
-                {this.mediaFiles.length > 0 && (
-                    <div className="files">
-                        <ul className="file-list">
-                            {this.mediaFiles.map((file, i) => (
-                                <li key={file.name} className="file-name">
-                                    {file.name}
-                                    <IconButton
-                                        onClick={() => {
-                                            this.setMediaFiles(this.mediaFiles.filter(f => f !== file));
-                                        }}>
-                                        <BiX />
-                                    </IconButton>
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                )}
-
+                {this.mediaFiles.length > 0 && <ul className="file-list">{this.mediaFiles.map(file => this.getMediaPreview(file))}</ul>}
                 <Button
                     variant="contained"
                     sx={{ fontSize: '14px', display: 'flex', alignItems: 'center', gap: '1rem' }}
@@ -391,125 +447,32 @@ export class ReportManager extends React.Component<{}> {
         );
     };
 
-    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.setQuery(e.target.value)}></input>
-                    <br />
-                    {this.shownIssues.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>
-        );
-    }
-
-    private renderIssue = (issue: Issue) => {
-        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 value={this.bugTitle} type="text" placeholder="title" onChange={e => this.setBugTitle(e.target.value)} required />
-                {/* <TextField fullWidth type="text" placeholder="Title..." required onChange={e => this.setBugTitle(e.target.value)} /> */}
-                <br />
-                <label>Please leave a description for the bug and how it can be recreated.</label>
-                <textarea value={this.bugDescription} 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="priority-low">Bug</option>
-                        <option value="priority-medium">Poor Design or Cosmetic</option>
-                        <option value="priority-high">Poor Documentation</option>
-                    </select>
-
-                    <select name="priority" 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 as string} className="issue-body" linkTarget={'_blank'} remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} />
-            </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.reportInterface}
                 contents={this.reportComponent()}
                 isDisplayed={this.isOpen}
                 interactive={true}
                 closeOnExternalClick={this.close}
-                dialogueBoxStyle={{ width: 'auto', minWidth: '400px', height: '85vh', maxHeight: '90vh', background: '#ffffff', borderRadius: '8px' }}
+                dialogueBoxStyle={{ width: 'auto', minWidth: '300px', height: '85vh', maxHeight: '90vh', background: '#ffffff', borderRadius: '8px' }}
             />
         );
     }
 }
 
+// Mini components to render issues
+
 interface IssueCardProps {
     issue: Issue;
     onSelect: () => void;
@@ -528,6 +491,48 @@ interface IssueViewProps {
 }
 
 const IssueView = ({ issue }: IssueViewProps) => {
+    const parseBody = (body: string) => {
+        const imgTagRegex = /<img\b[^>]*\/?>/;
+        const fileRegex = /https:\/\/browndash\.com\/files/;
+        const parts = body.split('\n');
+
+        const modifiedParts = parts.map(part => {
+            if (imgTagRegex.test(part)) {
+                return getLinkFromTag(part);
+            } else if (fileRegex.test(part)) {
+                return getTagFromUrl(part);
+            } else {
+                return part;
+            }
+        });
+        return modifiedParts.join('\n');
+    };
+
+    const getLinkFromTag = (tag: string) => {
+        const regex = /src="([^"]+)"/;
+        let url = '';
+        const match = tag.match(regex);
+        if (match) {
+            url = match[1];
+        }
+
+        return `\n${url}`;
+    };
+
+    const getTagFromUrl = (url: string) => {
+        const imgRegex = /https:\/\/browndash\.com\/files[/\\]images/;
+        const videoRegex = /https:\/\/browndash\.com\/files[/\\]videos/;
+        const audioRegex = /https:\/\/browndash\.com\/files[/\\]audio/;
+
+        if (imgRegex.test(url)) {
+            return `${url}\n<img width="100%" alt="Issue asset" src=${url} />`;
+        } else if (videoRegex.test(url)) {
+            return url;
+        } else if (audioRegex.test(url)) {
+            return `${url}\n<audio src=${url} controls />`;
+        }
+    };
+
     return (
         <div className="issue-view">
             <span className="issue-label">
@@ -537,8 +542,7 @@ const IssueView = ({ issue }: IssueViewProps) => {
                 </a>
             </span>
             <h2 className="issue-title">{issue.title}</h2>
-            <ReactMarkdown children={issue.body as string} className="issue-content" linkTarget={'_blank'} remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} />
-            {/* <p className="issue-content">{issue.body}</p> */}
+            <ReactMarkdown children={issue.body ? parseBody(issue.body as string) : ''} className="issue-content" linkTarget={'_blank'} remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} />
         </div>
     );
 };
-- 
cgit v1.2.3-70-g09d2


From b1f189ffc7dfe558d5895c8f0cb103ab3e5c17d7 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Mon, 10 Jul 2023 19:10:34 -0400
Subject: filters and better ui

---
 package-lock.json                                  |  59 --
 package.json                                       |   1 -
 src/client/theme.ts                                |   8 +
 src/client/util/ReportManager.scss                 | 409 ----------
 src/client/util/ReportManager.tsx                  | 548 -------------
 src/client/util/reportManager/ReportManager.scss   | 473 +++++++++++
 src/client/util/reportManager/ReportManager.tsx    | 570 +++++++++++++
 .../util/reportManager/ReportManagerComponents.tsx | 153 ++++
 .../util/reportManager/reportManagerSchema.ts      | 877 +++++++++++++++++++++
 .../util/reportManager/reportManagerUtils.ts       |  54 ++
 src/client/util/reportManagerSchema.ts             | 877 ---------------------
 src/client/views/MainView.tsx                      |   2 +-
 .../CollectionFreeFormLinkView.tsx                 |   3 +
 src/client/views/nodes/LoadingBox.scss             |   4 +
 src/client/views/topbar/TopBar.tsx                 |   2 +-
 15 files changed, 2144 insertions(+), 1896 deletions(-)
 delete mode 100644 src/client/util/ReportManager.scss
 delete mode 100644 src/client/util/ReportManager.tsx
 create mode 100644 src/client/util/reportManager/ReportManager.scss
 create mode 100644 src/client/util/reportManager/ReportManager.tsx
 create mode 100644 src/client/util/reportManager/ReportManagerComponents.tsx
 create mode 100644 src/client/util/reportManager/reportManagerSchema.ts
 create mode 100644 src/client/util/reportManager/reportManagerUtils.ts
 delete mode 100644 src/client/util/reportManagerSchema.ts

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index 5b0c4e2f6..fe09f09bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19903,55 +19903,6 @@
             "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
             "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
         },
-        "react-loader-spinner": {
-            "version": "5.3.4",
-            "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-5.3.4.tgz",
-            "integrity": "sha512-G2vw4ssX+RDZ/vfaeva06yfNqyFViv/u+tVZ3kFLy5TKNlNx2DbuwreBSpRtPespQA+VxinxUJsigwLwG9erOg==",
-            "requires": {
-                "react-is": "^18.2.0",
-                "styled-components": "^5.3.5",
-                "styled-tools": "^1.7.2"
-            },
-            "dependencies": {
-                "css-to-react-native": {
-                    "version": "3.2.0",
-                    "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
-                    "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
-                    "requires": {
-                        "camelize": "^1.0.0",
-                        "css-color-keywords": "^1.0.0",
-                        "postcss-value-parser": "^4.0.2"
-                    }
-                },
-                "postcss-value-parser": {
-                    "version": "4.2.0",
-                    "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-                    "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
-                },
-                "react-is": {
-                    "version": "18.2.0",
-                    "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-                    "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
-                },
-                "styled-components": {
-                    "version": "5.3.11",
-                    "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
-                    "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
-                    "requires": {
-                        "@babel/helper-module-imports": "^7.0.0",
-                        "@babel/traverse": "^7.4.5",
-                        "@emotion/is-prop-valid": "^1.1.0",
-                        "@emotion/stylis": "^0.8.4",
-                        "@emotion/unitless": "^0.7.4",
-                        "babel-plugin-styled-components": ">= 1.12.0",
-                        "css-to-react-native": "^3.0.0",
-                        "hoist-non-react-statics": "^3.0.0",
-                        "shallowequal": "^1.1.0",
-                        "supports-color": "^5.5.0"
-                    }
-                }
-            }
-        },
         "react-loading": {
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/react-loading/-/react-loading-2.0.3.tgz",
@@ -21287,11 +21238,6 @@
             "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
             "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
         },
-        "shallowequal": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-            "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
-        },
         "sharp": {
             "version": "0.23.4",
             "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.23.4.tgz",
@@ -22309,11 +22255,6 @@
                 }
             }
         },
-        "styled-tools": {
-            "version": "1.7.2",
-            "resolved": "https://registry.npmjs.org/styled-tools/-/styled-tools-1.7.2.tgz",
-            "integrity": "sha512-IjLxzM20RMwAsx8M1QoRlCG/Kmq8lKzCGyospjtSXt/BTIIcvgTonaxQAsKnBrsZNwhpHzO9ADx5te0h76ILVg=="
-        },
         "stylis": {
             "version": "4.1.3",
             "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
diff --git a/package.json b/package.json
index 39f70ab66..97701913e 100644
--- a/package.json
+++ b/package.json
@@ -292,7 +292,6 @@
         "react-grid-layout": "^1.3.4",
         "react-icons": "^4.3.1",
         "react-jsx-parser": "^1.29.0",
-        "react-loader-spinner": "^5.3.4",
         "react-loading": "^2.0.3",
         "react-markdown": "^8.0.3",
         "react-measure": "^2.5.2",
diff --git a/src/client/theme.ts b/src/client/theme.ts
index f0a11fe6e..0ef2e5e2c 100644
--- a/src/client/theme.ts
+++ b/src/client/theme.ts
@@ -19,5 +19,13 @@ export const theme = createTheme({
                 },
             },
         },
+
+        MuiTooltip: {
+            styleOverrides: {
+                tooltip: {
+                    fontSize: '12px',
+                },
+            },
+        },
     },
 });
diff --git a/src/client/util/ReportManager.scss b/src/client/util/ReportManager.scss
deleted file mode 100644
index b3bd998e6..000000000
--- a/src/client/util/ReportManager.scss
+++ /dev/null
@@ -1,409 +0,0 @@
-@import '../views/global/globalCssVariables';
-
-// header
-
-.report-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    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;
-        color: #747474;
-    }
-
-    .report-section {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .report-textarea {
-        width: 100%;
-        height: 80px;
-        padding: 8px;
-        resize: none;
-    }
-
-    .report-selects {
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-        gap: 16px;
-
-        .report-select {
-            padding: 8px;
-            border-color: #c6c6c6;
-
-            .report-opt {
-                padding: 8px;
-            }
-        }
-    }
-}
-
-.report-input {
-    border: none;
-    outline: none;
-    border-bottom: 1px solid #c6c6c6;
-    padding: 8px;
-    padding-left: 0;
-    transition: all 0.2s ease;
-
-    &:hover {
-        border-bottom-color: #7f7f7f;
-    }
-    &:focus {
-        border-bottom-color: #4476f7;
-    }
-}
-
-// View issues
-
-.view-issues {
-    width: 65vw;
-    min-width: 500px;
-    display: flex;
-    gap: 16px;
-    height: 100%;
-
-    .left {
-        height: 100%;
-        flex: 1;
-        padding: 16px;
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-        background-color: #ffffff;
-        text-align: left;
-        position: relative;
-
-        .issues {
-            position: relative;
-            flex-grow: 1;
-            overflow-y: auto;
-            overflow-x: hidden;
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-    }
-
-    .right {
-        padding: 16px;
-        height: 100%;
-        overflow-y: auto;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        flex: 1;
-    }
-}
-
-// video
-
-.default-video::-webkit-media-controls {
-    display: block !important;
-}
-
-// Issue
-
-.issue {
-    cursor: pointer;
-    padding: 16px;
-    background-color: #ffffff;
-    border: 1px solid #d3d3d3;
-    transition: all 0.1s ease;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    border-radius: 8px;
-    transition: all 0.2s ease;
-    // box-shadow: 0 0 8px #d0d0d07c;
-
-    .issue-label {
-        cursor: pointer;
-        font-size: 14px;
-        font-weight: 400;
-        color: #7f7f7f;
-    }
-
-    .issue-title {
-        font-size: 16px;
-        font-weight: 500;
-        padding: 0;
-        margin: 0;
-        color: #4476f7;
-    }
-
-    &:hover {
-        background-color: #4476f7;
-        border-color: #4476f7;
-        color: #ffffff;
-
-        .issue-label {
-            color: #ffffff;
-        }
-
-        .issue-title {
-            color: #ffffff;
-        }
-    }
-}
-
-// Dropzone
-
-.dropzone {
-    padding: 2rem;
-    border-radius: 0.5rem;
-    border: 2px dashed #ebebeb;
-
-    .dropzone-instructions {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 16px;
-        color: #7f7f7f;
-
-        p {
-            text-align: center;
-        }
-    }
-}
-
-.file-list {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    font-size: 14px;
-    color: #7f7f7f;
-    width: 100%;
-    overflow-x: auto;
-    list-style-type: none;
-    display: flex;
-    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;
-    background-color: #ffffff;
-    text-align: left;
-    position: relative;
-    overflow: auto;
-
-    .issue-label {
-        color: #7f7f7f;
-
-        .issue-link {
-            cursor: pointer;
-            color: #4476f7;
-        }
-    }
-
-    .issue-title {
-        font-size: 24px;
-        margin: 0;
-        padding: 0;
-    }
-
-    .issue-content {
-        font-size: 14px;
-        color: #7f7f7f;
-    }
-}
-
-// Media previews
-
-.report-media-wrapper {
-    position: relative;
-
-    .close-btn {
-        position: absolute;
-        top: 2px;
-        right: 2px;
-        opacity: 0;
-    }
-
-    .report-media-content {
-        position: relative;
-        display: inline block;
-        cursor: pointer;
-    }
-
-    .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 */
-    }
-
-    &: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;
-    }
-}
-
-// Old code
-
-// <---------------------------------------------------------------------------->
-
-// .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 125d20876..000000000
--- a/src/client/util/ReportManager.tsx
+++ /dev/null
@@ -1,548 +0,0 @@
-import { ColorState, SketchPicker } from 'react-color';
-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 { FontIconBox } from '../views/nodes/button/FontIconBox';
-import { DragManager } from './DragManager';
-import { GroupManager } from './GroupManager';
-import { CheckBox } from '../views/search/CheckBox';
-import { undoBatch } from './UndoManager';
-import * as React from 'react';
-import './SettingsManager.scss';
-import './ReportManager.scss';
-import { action, computed, observable, runInAction } from 'mobx';
-import { BsX } from 'react-icons/bs';
-import { BiX } from 'react-icons/bi';
-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 { Networking } from '../Network';
-import { MainViewModal } from '../views/MainViewModal';
-import { Octokit } from '@octokit/core';
-import { Button, IconButton } from '@mui/material';
-import { Oval } from 'react-loader-spinner';
-import Dropzone from 'react-dropzone';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-import { theme } from '../theme';
-import v4 = require('uuid/v4');
-const higflyout = require('@hig/flyout');
-export const { anchorPoints } = higflyout;
-export const Flyout = higflyout.default;
-
-enum ViewState {
-    VIEW,
-    CREATE,
-}
-
-interface FileData {
-    _id: string;
-    file: File;
-}
-
-// Format reference: "https://browndash.com/files/images/upload_cb31bc0fda59c96ca14193ec494f80cf_o.jpg" />
-
-/**
- * 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 selectedIssue: Issue | undefined = undefined;
-    @action setSelectedIssue = action((issue: Issue | undefined) => {
-        this.selectedIssue = issue;
-    });
-
-    // Form state
-
-    @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;
-    });
-
-    @observable private mediaFiles: FileData[] = [];
-    @action private setMediaFiles = (files: FileData[]) => {
-        this.mediaFiles = files;
-    };
-
-    public close = action(() => (this.isOpen = false));
-    public open = action(async () => {
-        this.isOpen = true;
-        if (this.shownIssues.length === 0) {
-            this.setFetchingIssues(true);
-            try {
-                // load in the issues if not already loaded
-                const issues = (await this.getAllIssues()) 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: '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',
-        });
-    }
-
-    /**
-     * Fethches issues from Github.
-     * @returns array of all issues
-     */
-    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');
-        }
-    }
-
-    /**
-     * Sends a request to Github to report a new issue with the form data.
-     * @returns nothing
-     */
-    public async reportIssue(): Promise<void> {
-        if (this.bugTitle === '' || this.bugDescription === '' || this.bugType === '' || this.bugPriority === '') {
-            alert('Please fill out all required fields to report an issue.');
-            return;
-        }
-        this.setSubmitting(true);
-
-        const links = await this.uploadFilesToServer();
-        if (!links) {
-            // error uploading files to the server
-            return;
-        }
-        const formattedLinks = (links ?? []).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} ${formattedLinks.length > 0 && `\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.');
-            return;
-        }
-
-        // Reset fields
-        this.setBugTitle('');
-        this.setBugDescription('');
-        this.setMediaFiles([]);
-        this.setBugType('');
-        this.setBugPriority('');
-        this.setSubmitting(false);
-        alert('Successfully submitted issue.');
-        // this.close();
-    }
-
-    /**
-     * Formats issue title.
-     *
-     * @param title title of issue
-     * @param userEmail email of issue submitter
-     * @returns formatted title
-     */
-    private formatTitle = (title: string, userEmail: string): string => `${title} - ${userEmail.replace('@brown.edu', '')}`;
-
-    // turns an upload link into a servable 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
-    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;
-    };
-
-    /**
-     * Gets the server file path.
-     *
-     * @param link response from file upload
-     * @returns server file path
-     */
-    private 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
-     */
-    private uploadFilesToServer = async (): Promise<string[] | undefined> => {
-        try {
-            const links = await Networking.UploadFilesToServer(
-                this.mediaFiles.map(file => ({ file: file.file })),
-                true
-            );
-            return (links ?? []).map(this.getServerPath);
-        } catch (err) {
-            if (err instanceof Error) {
-                alert(err.message);
-            } else {
-                alert(err);
-            }
-        }
-    };
-
-    /**
-     * Handles file upload.
-     * @param files uploaded files
-     */
-    private onDrop = (files: File[]) => {
-        this.setMediaFiles([...this.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={50} alt={`Preview of ${file.name}`} src={preview} style={{ display: 'block' }} />
-                    </div>
-                    <IconButton onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn">
-                        <BsX color="#ffffff" />
-                    </IconButton>
-                </div>
-            );
-        } else if (mimeType.startsWith('video/')) {
-            return (
-                <div key={fileData._id} className="report-media-wrapper">
-                    <div className="report-media-content">
-                        <video controls style={{ height: '50px', width: 'auto', display: 'block' }}>
-                            <source src={preview} type="video/mp4" />
-                            Your browser does not support the video tag.
-                        </video>
-                    </div>
-                    <IconButton onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn">
-                        <BsX color="#ffffff" />
-                    </IconButton>
-                </div>
-            );
-        } else if (mimeType.startsWith('audio/')) {
-            return (
-                <div key={fileData._id} className="report-audio-wrapper">
-                    <audio src={preview} controls />
-                    <IconButton onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn">
-                        <BsX />
-                    </IconButton>
-                </div>
-            );
-        }
-        return <></>;
-    };
-
-    /**
-     * @returns the component that dispays all issues
-     */
-    private viewIssuesComponent = () => {
-        return (
-            <div className="view-issues">
-                <div className="left">
-                    <div className="report-header">
-                        <h2>Open Issues</h2>
-                        <Button
-                            variant="contained"
-                            onClick={() => {
-                                this.setViewState(ViewState.CREATE);
-                            }}>
-                            report issue
-                        </Button>
-                    </div>
-                    <input
-                        className="report-input"
-                        type="text"
-                        placeholder="Filter..."
-                        onChange={e => {
-                            this.setQuery(e.target.value);
-                        }}
-                        required
-                    />
-                    <div className="issues">
-                        {this.fetchingIssues ? (
-                            <div style={{ flexGrow: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                                <Oval height={50} width={50} color={theme.palette.primary.main} visible={true} ariaLabel="oval-loading" secondaryColor={theme.palette.primary.main + 'b8'} strokeWidth={3} strokeWidthSecondary={3} />
-                            </div>
-                        ) : (
-                            this.shownIssues
-                                .filter(issue => issue.title.toLowerCase().includes(this.query))
-                                .map(issue => (
-                                    <IssueCard
-                                        key={issue.number}
-                                        issue={issue}
-                                        onSelect={() => {
-                                            this.setSelectedIssue(issue);
-                                        }}
-                                    />
-                                ))
-                        )}
-                    </div>
-                </div>
-                <div className="right">{this.selectedIssue ? <IssueView issue={this.selectedIssue} /> : <div>No issue selected</div>}</div>
-                <IconButton sx={{ position: 'absolute', top: '4px', right: '4px' }} onClick={this.close}>
-                    <BiX size="16px" />
-                </IconButton>
-            </div>
-        );
-    };
-
-    /**
-     * @returns the form component for submitting issues
-     */
-    private reportIssueComponent = () => {
-        return (
-            <div className="report-issue">
-                <div className="report-header-vertical">
-                    <Button
-                        variant="text"
-                        onClick={() => {
-                            this.setViewState(ViewState.VIEW);
-                        }}
-                        sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                        <HiOutlineArrowLeft color={theme.palette.primary.main} />
-                        back to view
-                    </Button>
-                    <h2>Report an Issue</h2>
-                </div>
-                <div className="report-section">
-                    <label className="report-label">Please provide a title for the bug</label>
-                    <input className="report-input" value={this.bugTitle} type="text" placeholder="Title..." onChange={e => this.setBugTitle(e.target.value)} required />
-                </div>
-                <div className="report-section">
-                    <label className="report-label">Please leave a description for the bug and how it can be recreated</label>
-                    <textarea className="report-textarea" value={this.bugDescription} placeholder="Description..." onChange={e => this.setBugDescription(e.target.value)} required />
-                </div>
-                <div className="report-selects">
-                    <select className="report-select" name="bugType" onChange={e => (this.bugType = e.target.value)}>
-                        <option value="" disabled selected>
-                            Type
-                        </option>
-                        <option className="report-opt" value="priority-low">
-                            Bug
-                        </option>
-                        <option className="report-opt" value="priority-medium">
-                            Poor Design or Cosmetic
-                        </option>
-                        <option className="report-opt" value="priority-high">
-                            Poor Documentation
-                        </option>
-                    </select>
-                    <select className="report-select" name="bigPriority" onChange={e => (this.bugPriority = e.target.value)}>
-                        <option className="report-opt" 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>
-                <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' })}>
-                            <input {...getInputProps()} />
-                            <div className="dropzone-instructions">
-                                <AiOutlineUpload size={25} />
-                                <p>Drop or select media that shows the bug (optional)</p>
-                            </div>
-                        </div>
-                    )}
-                </Dropzone>
-                {this.mediaFiles.length > 0 && <ul className="file-list">{this.mediaFiles.map(file => this.getMediaPreview(file))}</ul>}
-                <Button
-                    variant="contained"
-                    sx={{ fontSize: '14px', display: 'flex', alignItems: 'center', gap: '1rem' }}
-                    onClick={() => {
-                        this.reportIssue();
-                    }}>
-                    Submit
-                    {this.submitting && <Oval height={20} width={20} color="#ffffff" visible={true} ariaLabel="oval-loading" secondaryColor="#ffffff87" strokeWidth={3} strokeWidthSecondary={3} />}
-                </Button>
-                <IconButton sx={{ position: 'absolute', top: '4px', right: '4px' }} onClick={this.close}>
-                    <BiX size={'16px'} />
-                </IconButton>
-            </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: '#ffffff', borderRadius: '8px' }}
-            />
-        );
-    }
-}
-
-// Mini components to render issues
-
-interface IssueCardProps {
-    issue: Issue;
-    onSelect: () => void;
-}
-const IssueCard = ({ issue, onSelect }: IssueCardProps) => {
-    return (
-        <div className="issue" onClick={onSelect}>
-            <label className="issue-label">#{issue.number}</label>
-            <h3 className="issue-title">{issue.title}</h3>
-        </div>
-    );
-};
-
-interface IssueViewProps {
-    issue: Issue;
-}
-
-const IssueView = ({ issue }: IssueViewProps) => {
-    const parseBody = (body: string) => {
-        const imgTagRegex = /<img\b[^>]*\/?>/;
-        const fileRegex = /https:\/\/browndash\.com\/files/;
-        const parts = body.split('\n');
-
-        const modifiedParts = parts.map(part => {
-            if (imgTagRegex.test(part)) {
-                return getLinkFromTag(part);
-            } else if (fileRegex.test(part)) {
-                return getTagFromUrl(part);
-            } else {
-                return part;
-            }
-        });
-        return modifiedParts.join('\n');
-    };
-
-    const getLinkFromTag = (tag: string) => {
-        const regex = /src="([^"]+)"/;
-        let url = '';
-        const match = tag.match(regex);
-        if (match) {
-            url = match[1];
-        }
-
-        return `\n${url}`;
-    };
-
-    const getTagFromUrl = (url: string) => {
-        const imgRegex = /https:\/\/browndash\.com\/files[/\\]images/;
-        const videoRegex = /https:\/\/browndash\.com\/files[/\\]videos/;
-        const audioRegex = /https:\/\/browndash\.com\/files[/\\]audio/;
-
-        if (imgRegex.test(url)) {
-            return `${url}\n<img width="100%" alt="Issue asset" src=${url} />`;
-        } else if (videoRegex.test(url)) {
-            return url;
-        } else if (audioRegex.test(url)) {
-            return `${url}\n<audio src=${url} controls />`;
-        }
-    };
-
-    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>
-            <ReactMarkdown children={issue.body ? parseBody(issue.body as string) : ''} className="issue-content" linkTarget={'_blank'} remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} />
-        </div>
-    );
-};
diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss
new file mode 100644
index 000000000..81af41cb0
--- /dev/null
+++ b/src/client/util/reportManager/ReportManager.scss
@@ -0,0 +1,473 @@
+@import '../../views/global/globalCssVariables';
+
+// header
+
+$text-gray: #64748b;
+$outline-gray: #cbd5e1;
+
+.report-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    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;
+        color: $text-gray;
+    }
+
+    .report-section {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .report-textarea {
+        width: 100%;
+        height: 80px;
+        padding: 8px;
+        resize: vertical;
+        // resize: none;
+    }
+
+    .report-selects {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 16px;
+
+        .report-select {
+            padding: 8px;
+            border-color: $outline-gray;
+
+            .report-opt {
+                padding: 8px;
+            }
+        }
+    }
+}
+
+.report-input {
+    border: none;
+    outline: none;
+    border-bottom: 1px solid $outline-gray;
+    padding: 8px;
+    padding-left: 0;
+    transition: all 0.2s ease;
+
+    &: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;
+        background-color: #ffffff;
+        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;
+    background-color: #ffffff;
+    border: 1px solid $outline-gray;
+    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;
+        color: $text-gray;
+        padding: 0;
+        margin: 0;
+    }
+
+    .issue-title {
+        font-size: 16px;
+        font-weight: 500;
+        padding: 0;
+        margin: 0;
+        color: #4476f7;
+    }
+
+    &:hover {
+        background-color: #4476f7;
+        border-color: #4476f7;
+        color: #ffffff;
+
+        .issue-label {
+            color: #ffffff;
+        }
+
+        .issue-title {
+            color: #ffffff;
+        }
+    }
+}
+
+// Dropzone
+
+.dropzone {
+    padding: 2rem;
+    border-radius: 0.5rem;
+    border: 2px dashed #f1f5f9;
+
+    .dropzone-instructions {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+        color: $text-gray;
+
+        p {
+            text-align: center;
+        }
+    }
+}
+
+.file-list {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+    color: $text-gray;
+    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;
+    background-color: #ffffff;
+    text-align: left;
+    position: relative;
+    overflow: auto;
+
+    .issue-label {
+        color: $text-gray;
+
+        .issue-link {
+            cursor: pointer;
+            color: #4476f7;
+        }
+    }
+
+    .issue-title {
+        font-size: 24px;
+        margin: 0;
+        padding: 0;
+    }
+
+    .issue-date {
+        font-size: 14px;
+        color: $text-gray;
+    }
+
+    .issue-content {
+        font-size: 14px;
+        color: $text-gray;
+    }
+}
+
+// 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;
+}
+
+// Old code
+
+// <---------------------------------------------------------------------------->
+
+// .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/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx
new file mode 100644
index 000000000..ff17a5097
--- /dev/null
+++ b/src/client/util/reportManager/ReportManager.tsx
@@ -0,0 +1,570 @@
+import * as React from 'react';
+import '.././SettingsManager.scss';
+import './ReportManager.scss';
+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 { Networking } from '../../Network';
+import { MainViewModal } from '../../views/MainViewModal';
+import { Octokit } from '@octokit/core';
+import { Button, IconButton, Tooltip } from '@mui/material';
+import Dropzone from 'react-dropzone';
+import { theme } from '../../theme';
+import ReactLoading from 'react-loading';
+import v4 = require('uuid/v4');
+import { BugType, FileData, Priority, ViewState, inactiveBorderColor, inactiveColor } from './reportManagerUtils';
+import { IssueCard, IssueView, Tag } from './ReportManagerComponents';
+// import { IconButton } from 'browndash-components';
+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 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;
+    });
+
+    @observable private mediaFiles: FileData[] = [];
+    @action private setMediaFiles = (files: FileData[]) => {
+        this.mediaFiles = files;
+    };
+
+    public close = action(() => (this.isOpen = false));
+    public open = action(async () => {
+        this.isOpen = true;
+        if (this.shownIssues.length === 0) {
+            this.setFetchingIssues(true);
+            try {
+                // load in the issues if not already loaded
+                const issues = (await this.getAllIssues()) as Issue[];
+                console.log(issues);
+                // filtering to include only open issues and exclude pull requests, maybe add a separate tab for pr's?
+                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,
+        });
+    }
+
+    /**
+     * Fethches issues from Github.
+     * @returns array of all issues
+     */
+    public async getAllIssues(): Promise<any[]> {
+        const res = await this.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');
+        }
+    }
+
+    /**
+     * Sends a request to Github to report a new issue with the form data.
+     * @returns nothing
+     */
+    public async reportIssue(): Promise<void> {
+        if (this.bugTitle === '' || this.bugDescription === '' || this.bugType === '' || this.bugPriority === '') {
+            alert('Please fill out all required fields to report an issue.');
+            return;
+        }
+        this.setSubmitting(true);
+
+        const links = await this.uploadFilesToServer();
+        if (!links) {
+            // error uploading files to the server
+            return;
+        }
+        console.log(links);
+        const formattedLinks = (links ?? []).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} ${formattedLinks.length > 0 && `\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.');
+        //     return;
+        // }
+
+        // Reset fields
+        this.setBugTitle('');
+        this.setBugDescription('');
+        this.setMediaFiles([]);
+        this.setBugType('');
+        this.setBugPriority('');
+        this.setSubmitting(false);
+        alert('Successfully submitted issue.');
+        // this.close();
+    }
+
+    /**
+     * Formats issue title.
+     *
+     * @param title title of issue
+     * @param userEmail email of issue submitter
+     * @returns formatted title
+     */
+    private formatTitle = (title: string, userEmail: string): string => `${title} - ${userEmail.replace('@brown.edu', '')}`;
+
+    // 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
+    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;
+    };
+
+    /**
+     * Gets the server file path.
+     *
+     * @param link response from file upload
+     * @returns server file path
+     */
+    private 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
+     */
+    private uploadFilesToServer = async (): Promise<string[] | undefined> => {
+        try {
+            // need to always upload to browndash
+            const links = await Networking.UploadFilesToServer(
+                this.mediaFiles.map(file => ({ file: file.file })),
+                true
+            );
+            return (links ?? []).map(this.getServerPath);
+        } catch (err) {
+            if (err instanceof Error) {
+                alert(err.message);
+            } else {
+                alert(err);
+            }
+        }
+    };
+
+    /**
+     * Handles file upload.
+     * @param files uploaded files
+     */
+    private onDrop = (files: File[]) => {
+        this.setMediaFiles([...this.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>
+                    <IconButton onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn">
+                        <BsX color="#ffffff" />
+                    </IconButton>
+                </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>
+                    <IconButton onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn">
+                        <BsX color="#ffffff" />
+                    </IconButton>
+                </div>
+            );
+        } else if (mimeType.startsWith('audio/')) {
+            return (
+                <div key={fileData._id} className="report-audio-wrapper">
+                    <audio src={preview} controls />
+                    <IconButton onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn">
+                        <BsX />
+                    </IconButton>
+                </div>
+            );
+        }
+        return <></>;
+    };
+
+    private passesTagFilter = (issue: Issue) => {
+        let passesPriority = true;
+        let passesBug = true;
+        if (this.priorityFilter) {
+            passesPriority = issue.labels.some(label => {
+                if (typeof label === 'string') {
+                    return label === this.priorityFilter;
+                } else {
+                    return label.name === this.priorityFilter;
+                }
+            });
+        }
+        if (this.bugFilter) {
+            passesBug = issue.labels.some(label => {
+                if (typeof label === 'string') {
+                    return label === this.bugFilter;
+                } else {
+                    return label.name === this.bugFilter;
+                }
+            });
+        }
+        return passesPriority && passesBug;
+    };
+
+    /**
+     * @returns the component that dispays all issues
+     */
+    private viewIssuesComponent = () => {
+        return (
+            <div className="view-issues">
+                <div className="left" style={{ display: this.rightExpanded ? 'none' : 'flex' }}>
+                    <div className="report-header">
+                        <h2>Open Issues</h2>
+                        <Button
+                            variant="contained"
+                            onClick={() => {
+                                this.setViewState(ViewState.CREATE);
+                            }}>
+                            report issue
+                        </Button>
+                    </div>
+                    <input
+                        className="report-input"
+                        type="text"
+                        placeholder="Filter by query..."
+                        onChange={e => {
+                            this.setQuery(e.target.value);
+                        }}
+                        required
+                    />
+                    <div className="issues-filters">
+                        <div className="issues-filter">
+                            <Tag
+                                text={'All'}
+                                onClick={() => {
+                                    this.setPriorityFilter(null);
+                                }}
+                                fontSize="12px"
+                                backgroundColor={this.priorityFilter === null ? theme.palette.primary.main : '#ffffff'}
+                                color={this.priorityFilter === null ? '#ffffff' : inactiveColor}
+                                border
+                                borderColor={this.priorityFilter === null ? theme.palette.primary.main : inactiveBorderColor}
+                            />
+                            {Object.values(Priority).map(p => {
+                                return (
+                                    <Tag
+                                        key={p}
+                                        text={p}
+                                        onClick={() => {
+                                            this.setPriorityFilter(p);
+                                        }}
+                                        fontSize="12px"
+                                        backgroundColor={this.priorityFilter === p ? theme.palette.primary.main : '#ffffff'}
+                                        color={this.priorityFilter === p ? '#ffffff' : inactiveColor}
+                                        border
+                                        borderColor={this.priorityFilter === p ? theme.palette.primary.main : inactiveBorderColor}
+                                    />
+                                );
+                            })}
+                        </div>
+                        <div className="issues-filter">
+                            <Tag
+                                text={'All'}
+                                onClick={() => {
+                                    this.setBugFilter(null);
+                                }}
+                                fontSize="12px"
+                                backgroundColor={this.bugFilter === null ? theme.palette.primary.main : '#ffffff'}
+                                color={this.bugFilter === null ? '#ffffff' : inactiveColor}
+                                border
+                                borderColor={this.bugFilter === null ? theme.palette.primary.main : inactiveBorderColor}
+                            />
+                            {Object.values(BugType).map(b => {
+                                return (
+                                    <Tag
+                                        key={b}
+                                        text={b}
+                                        onClick={() => {
+                                            this.setBugFilter(b);
+                                        }}
+                                        fontSize="12px"
+                                        backgroundColor={this.bugFilter === b ? theme.palette.primary.main : '#ffffff'}
+                                        color={this.bugFilter === b ? '#ffffff' : inactiveColor}
+                                        border
+                                        borderColor={this.bugFilter === b ? theme.palette.primary.main : inactiveBorderColor}
+                                    />
+                                );
+                            })}
+                        </div>
+                    </div>
+                    <div className="issues">
+                        {this.fetchingIssues ? (
+                            <div style={{ flexGrow: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                                <ReactLoading type="spin" color={theme.palette.primary.main} width={50} height={50} />
+                            </div>
+                        ) : (
+                            this.shownIssues
+                                .filter(issue => issue.title.toLowerCase().includes(this.query))
+                                .filter(issue => this.passesTagFilter(issue))
+                                .map(issue => (
+                                    <IssueCard
+                                        key={issue.number}
+                                        issue={issue}
+                                        onSelect={() => {
+                                            this.setSelectedIssue(issue);
+                                        }}
+                                    />
+                                ))
+                        )}
+                    </div>
+                </div>
+                <div className="right">{this.selectedIssue ? <IssueView issue={this.selectedIssue} /> : <div>No issue selected</div>} </div>
+                <div style={{ position: 'absolute', top: '8px', right: '8px', display: 'flex', gap: '16px' }}>
+                    <Tooltip title={this.rightExpanded ? 'Minimize right side' : 'Expand right side'}>
+                        <IconButton
+                            onClick={e => {
+                                e.stopPropagation();
+                                this.setRightExpanded(!this.rightExpanded);
+                            }}>
+                            {this.rightExpanded ? <BsArrowsAngleContract size="16px" /> : <BsArrowsAngleExpand size="16px" />}
+                        </IconButton>
+                    </Tooltip>
+                    <IconButton onClick={this.close}>
+                        <CgClose size="16px" />
+                    </IconButton>
+                </div>
+            </div>
+        );
+    };
+
+    /**
+     * @returns the form component for submitting issues
+     */
+    private reportIssueComponent = () => {
+        return (
+            <div className="report-issue">
+                <div className="report-header-vertical">
+                    <Button
+                        variant="text"
+                        onClick={() => {
+                            this.setViewState(ViewState.VIEW);
+                        }}
+                        sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                        <HiOutlineArrowLeft color={theme.palette.primary.main} />
+                        back to view
+                    </Button>
+                    <h2>Report an Issue</h2>
+                </div>
+                <div className="report-section">
+                    <label className="report-label">Please provide a title for the bug</label>
+                    <input className="report-input" value={this.bugTitle} type="text" placeholder="Title..." onChange={e => this.setBugTitle(e.target.value)} required />
+                </div>
+                <div className="report-section">
+                    <label className="report-label">Please leave a description for the bug and how it can be recreated</label>
+                    <textarea className="report-textarea" value={this.bugDescription} placeholder="Description..." onChange={e => this.setBugDescription(e.target.value)} required />
+                </div>
+                <div className="report-selects">
+                    <select className="report-select" name="bugType" onChange={e => (this.bugType = e.target.value)}>
+                        <option value="" disabled selected>
+                            Type
+                        </option>
+                        <option className="report-opt" value="bug">
+                            Bug
+                        </option>
+                        <option className="report-opt" value="cosmetic">
+                            Poor Design or Cosmetic
+                        </option>
+                        <option className="report-opt" value="documentation">
+                            Poor Documentation
+                        </option>
+                        <option className="report-opt" value="enhancement">
+                            New feature or request
+                        </option>
+                    </select>
+                    <select className="report-select" name="bigPriority" onChange={e => (this.bugPriority = e.target.value)}>
+                        <option className="report-opt" 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>
+                <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' })}>
+                            <input {...getInputProps()} />
+                            <div className="dropzone-instructions">
+                                <AiOutlineUpload size={25} />
+                                <p>Drop or select media that shows the bug (optional)</p>
+                            </div>
+                        </div>
+                    )}
+                </Dropzone>
+                {this.mediaFiles.length > 0 && <ul className="file-list">{this.mediaFiles.map(file => this.getMediaPreview(file))}</ul>}
+                <Button
+                    variant="contained"
+                    sx={{ fontSize: '14px', display: 'flex', alignItems: 'center', gap: '1rem' }}
+                    onClick={() => {
+                        this.reportIssue();
+                    }}>
+                    Submit
+                    {this.submitting && <ReactLoading type="spin" color={theme.palette.primary.main} width={20} height={20} />}
+                </Button>
+                <IconButton onClick={this.close} sx={{ position: 'absolute', top: '4px', right: '4px' }}>
+                    <CgClose size={'16px'} />
+                </IconButton>
+            </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: '#ffffff', borderRadius: '8px' }}
+            />
+        );
+    }
+}
diff --git a/src/client/util/reportManager/ReportManagerComponents.tsx b/src/client/util/reportManager/ReportManagerComponents.tsx
new file mode 100644
index 000000000..1a4ddb3a3
--- /dev/null
+++ b/src/client/util/reportManager/ReportManagerComponents.tsx
@@ -0,0 +1,153 @@
+import * as React from 'react';
+import { Issue } from './reportManagerSchema';
+import { getLabelColors } from './reportManagerUtils';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+
+// Mini components to render issues
+
+interface IssueCardProps {
+    issue: Issue;
+    onSelect: () => void;
+}
+export const IssueCard = ({ issue, onSelect }: IssueCardProps) => {
+    return (
+        <div className="issue-card" onClick={onSelect}>
+            <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;
+}
+
+export const IssueView = ({ issue }: IssueViewProps) => {
+    const [issueBody, setIssueBody] = React.useState('');
+
+    const isVideoValid = (src: string) => {
+        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;
+    };
+
+    const getLinkFromTag = async (tag: string) => {
+        const regex = /src="([^"]+)"/;
+        let url = '';
+        const match = tag.match(regex);
+        if (match) {
+            url = match[1];
+        }
+
+        if (url.startsWith('https://github.com/brown-dash/Dash-Web/assets')) {
+            return `\n${url} (Not authorized to display image here)`;
+        }
+        return await getTagFromUrl(url);
+    };
+
+    const getTagFromUrl = async (url: string) => {
+        const imgRegex = /https:\/\/browndash\.com\/files[/\\]images/;
+        const videoRegex = /https:\/\/browndash\.com\/files[/\\]videos/;
+        const audioRegex = /https:\/\/browndash\.com\/files[/\\]audio/;
+
+        if (imgRegex.test(url) || url.includes('user-images.githubusercontent.com')) {
+            return `\n${url}\n<img width="100%" alt="Issue asset" src=${url} />\n`;
+        } else if (videoRegex.test(url)) {
+            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`;
+        } else if (audioRegex.test(url)) {
+            return `\n${url}\n<audio src=${url} controls />\n`;
+        } else {
+            return url;
+        }
+    };
+
+    const parseBody = async (body: string) => {
+        const imgTagRegex = /<img\b[^>]*\/?>/;
+        const fileRegex = /https:\/\/browndash\.com\/files/;
+        const parts = body.split('\n');
+
+        const modifiedParts = await Promise.all(
+            parts.map(async part => {
+                if (imgTagRegex.test(part)) {
+                    return `\n${await getLinkFromTag(part)}\n`;
+                } else if (fileRegex.test(part)) {
+                    const tag = await getTagFromUrl(part);
+                    return tag;
+                } else {
+                    return part;
+                }
+            })
+        );
+
+        setIssueBody(modifiedParts.join('\n'));
+    };
+
+    React.useEffect(() => {
+        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;
+}
+
+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>
+    );
+};
diff --git a/src/client/util/reportManager/reportManagerSchema.ts b/src/client/util/reportManager/reportManagerSchema.ts
new file mode 100644
index 000000000..56b9aa32b
--- /dev/null
+++ b/src/client/util/reportManager/reportManagerSchema.ts
@@ -0,0 +1,877 @@
+/**
+ * Issue interface schema.
+ */
+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..3c919856a
--- /dev/null
+++ b/src/client/util/reportManager/reportManagerUtils.ts
@@ -0,0 +1,54 @@
+// Final file url reference: "https://browndash.com/files/images/upload_cb31bc0fda59c96ca14193ec494f80cf_o.jpg" />
+
+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',
+}
+
+// [bgColor, color]
+export const priorityColors: { [key: string]: string[] } = {
+    'priority-low': ['#d4e0ff', '#000000'],
+    'priority-medium': ['#6a91f6', '#ffffff'],
+    'priority-high': ['#4476f7', '#ffffff'],
+};
+
+// [bgColor, color]
+export const bugColors: { [key: string]: string[] } = {
+    bug: ['#fe6d6d', '#ffffff'],
+    cosmetic: ['#c650f4', '#ffffff'],
+    documentation: ['#36acf0', '#ffffff'],
+    enhancement: ['#36d4f0', '#ffffff'],
+};
+
+export const prioritySet = new Set(Object.values(Priority));
+export const bugSet = new Set(Object.values(BugType));
+
+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 ['#347bff', '#ffffff'];
+};
+
+export interface FileData {
+    _id: string;
+    file: File;
+}
+
+export const inactiveBorderColor = '#cbd5e1';
+export const inactiveColor = '#64748b';
diff --git a/src/client/util/reportManagerSchema.ts b/src/client/util/reportManagerSchema.ts
deleted file mode 100644
index 28ce6411d..000000000
--- a/src/client/util/reportManagerSchema.ts
+++ /dev/null
@@ -1,877 +0,0 @@
-/**
- * Issues are a great way to keep track of tasks, enhancements, and bugs for your projects.
- */
-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/views/MainView.tsx b/src/client/views/MainView.tsx
index 4557e5866..786154620 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';
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/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/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 20cf563c1..f131032b5 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -11,7 +11,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';
-- 
cgit v1.2.3-70-g09d2


From 71a5c4a6ff126a256b4053d539b6099e5a429bbc Mon Sep 17 00:00:00 2001
From: James Hu <51237606+jameshu111@users.noreply.github.com>
Date: Tue, 11 Jul 2023 11:26:44 -0400
Subject: clean up

---
 src/server/ApiManagers/AzureManager.ts |  2 +-
 src/server/DashUploadUtils.ts          | 72 ++++++++++++++++++++++++----------
 2 files changed, 53 insertions(+), 21 deletions(-)

(limited to 'src')

diff --git a/src/server/ApiManagers/AzureManager.ts b/src/server/ApiManagers/AzureManager.ts
index e105f5d80..7e319f123 100644
--- a/src/server/ApiManagers/AzureManager.ts
+++ b/src/server/ApiManagers/AzureManager.ts
@@ -3,7 +3,7 @@ import { ContainerClient, BlobServiceClient } from "@azure/storage-blob";
 import * as fs from "fs";
 import { Readable, Stream } from "stream";
 // dotenv.config();
-const AZURE_STORAGE_CONNECTION_STRING = "DefaultEndpointsProtocol=https;AccountName=dashblobstore;AccountKey=3i+E5XkCz3TJ0m5QOatiEnbRACz9V1qCW72L6ldiYGH1tLdfJWa2eQoRfYmPA68lx1a6YAcfYJfWHadIxQvhGQ==;EndpointSuffix=core.windows.net";
+const AZURE_STORAGE_CONNECTION_STRING = process.env.AZURE_STORAGE_CONNECTION_STRING;
 
 export class AzureManager {
     private _containerClient: ContainerClient;
diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts
index 74c4786b6..c33166d4a 100644
--- a/src/server/DashUploadUtils.ts
+++ b/src/server/DashUploadUtils.ts
@@ -18,6 +18,7 @@ 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');
@@ -66,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> {
@@ -336,7 +340,7 @@ export namespace DashUploadUtils {
             return { name: metadata.name, message: metadata.message };
         }
         console.log(originalFilename);
-        return UploadInspectedImage(metadata, filename || metadata.filename, originalFilename, prefix);
+        return UploadInspectedImage(metadata, filename || metadata.filename, prefix);
     };
 
     export async function buildFileDirectories() {
@@ -486,25 +490,48 @@ export namespace DashUploadUtils {
         };
     }
 
-    export const UploadInspectedImage = async (metadata: Upload.InspectionResults, filename?: string, originalFilename?: string, prefix = '', cleanUp = true): Promise<Upload.ImageInformation> => {
+    /**
+     * 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),
-                // azure: {
-                //     client: `https://dashblobstore.blob.core.windows.net/dashmedia/${filename}`,
-                //     server: `https://dashblobstore.blob.core.windows.net/dashmedia/${filename}`
-                // }
                 agnostic: usingAzure() ? {
-                    client: `https://dashblobstore.blob.core.windows.net/dashmedia/${filename}`,
-                    server: `https://dashblobstore.blob.core.windows.net/dashmedia/${filename}`
+                    client: BLOBSTORE_URL + `/${filename}`,
+                    server: BLOBSTORE_URL + `/${filename}`
                 } : getAccessPaths(images, resolved)
             },
             ...metadata,
         };
-        const writtenFiles = await outputResizedImages(() => request(requestable), resolved, pathToDirectory(Directory.images), originalFilename, metadata.contentType);
+        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]);
         }
@@ -549,31 +576,36 @@ export namespace DashUploadUtils {
         force: true,
     };
 
-    export async function outputResizedImages(streamProvider: () => Stream | Promise<Stream>, outputFileName: string, outputDirectory: string, originalFilename?: string, contentType?: string) {
-        const start = Date.now();
+    /**
+     * 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))) {
             const outputPath = path.resolve(outputDirectory, (writtenFiles[suffix] = InjectSize(outputFileName, suffix)));
-            console.log(`https://dashblobstore.blob.core.windows.net/dashmedia/${InjectSize(originalFilename!, suffix)}`);
-            console.log(`https://dashblobstore.blob.core.windows.net/dashmedia/${InjectSize(outputFileName, suffix)}`);
             await new Promise<void>(async (resolve, reject) => {
                 const source = streamProvider();
                 let readStream: Stream = source instanceof Promise ? await source : source;
                 if (resizer) {
                     readStream = readStream.pipe(resizer.withMetadata());
                 }
-                if(contentType && usingAzure()) {
-                    // AzureManager.UploadBlobStream(readStream as Readable, InjectSize(originalFilename, suffix), contentType);
-                    AzureManager.UploadBlobStream(readStream as Readable, InjectSize(outputFileName, suffix), contentType);
-                }
                 readStream.pipe(createWriteStream(outputPath)).on('close', resolve).on('error', reject);
             });
         }
-        const end = Date.now();
-        console.log(`Time taken: ${end - start}ms`);
         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 },
-- 
cgit v1.2.3-70-g09d2


From a5194a874236eafc42a61c96d5b22c8622170149 Mon Sep 17 00:00:00 2001
From: James Hu <51237606+jameshu111@users.noreply.github.com>
Date: Tue, 11 Jul 2023 11:32:43 -0400
Subject: clean up

---
 src/client/documents/Documents.ts      |  2 --
 src/server/ApiManagers/AzureManager.ts | 11 ++---------
 src/server/DashUploadUtils.ts          |  6 ++----
 3 files changed, 4 insertions(+), 15 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 43c9d2e7a..2532ef226 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1736,9 +1736,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 pathname = result.accessPaths.azure.client;
         const doc = await DocUtils.DocumentFromType(type, pathname, full, overwriteDoc);
         if (doc) {
             const proto = Doc.GetProto(doc);
diff --git a/src/server/ApiManagers/AzureManager.ts b/src/server/ApiManagers/AzureManager.ts
index 7e319f123..12bb98ad0 100644
--- a/src/server/ApiManagers/AzureManager.ts
+++ b/src/server/ApiManagers/AzureManager.ts
@@ -1,8 +1,6 @@
 import { ContainerClient, BlobServiceClient } from "@azure/storage-blob";
-// import * as dotenv from 'dotenv';
 import * as fs from "fs";
 import { Readable, Stream } from "stream";
-// dotenv.config();
 const AZURE_STORAGE_CONNECTION_STRING = process.env.AZURE_STORAGE_CONNECTION_STRING;
 
 export class AzureManager {
@@ -15,9 +13,8 @@ export class AzureManager {
 
     constructor() {
         if (!AZURE_STORAGE_CONNECTION_STRING) {
-            throw Error("Azure Storage Connection String Not Found");
+            throw new Error("Azure Storage Connection String Not Found");
         }
-        // this._blobServiceClient = BlobServiceClient.fromConnectionString(process.env.AZURE_STORAGE_CONNECTION_STRING);
         this._blobServiceClient = BlobServiceClient.fromConnectionString(AZURE_STORAGE_CONNECTION_STRING);
         this._containerClient = this.BlobServiceClient.getContainerClient(AzureManager.CONTAINER_NAME);
     }
@@ -35,7 +32,6 @@ export class AzureManager {
     }
 
     public static UploadBlob(filename: string, filepath: string, filetype: string) {
-        console.log("Upload Blob File");
         const blockBlobClient = this.Instance.ContainerClient.getBlockBlobClient(filename);
         const blobOptions = { blobHTTPHeaders: { blobContentType: filetype }};
         const stream = fs.createReadStream(filepath);
@@ -43,20 +39,17 @@ export class AzureManager {
     }
 
     public static UploadBlobStream(stream: Readable, filename: string, filetype: string) {
-        console.log("Upload Blob Stream: %s, %s", filename, filetype);
         const blockBlobClient = this.Instance.ContainerClient.getBlockBlobClient(filename);
         const blobOptions = { blobHTTPHeaders: { blobContentType: filetype }};
         return blockBlobClient.uploadStream(stream, undefined, undefined, blobOptions);
     }
 
     public static DeleteBlob(filename: string) {
-        console.log("Delete Blob from filename");
         const blockBlobClient = this.Instance.ContainerClient.getBlockBlobClient(filename);
         return blockBlobClient.deleteIfExists();
     }
 
     public static async GetBlobs() {
-        console.log("Get Blobs");
         const foundBlobs = [];
         for await (const blob of this.Instance.ContainerClient.listBlobsFlat()) {
             console.log(`${blob.name}`);
@@ -71,4 +64,4 @@ export class AzureManager {
 
         return foundBlobs;
     }
-}
\ No newline at end of file
+}
diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts
index c33166d4a..bff60568b 100644
--- a/src/server/DashUploadUtils.ts
+++ b/src/server/DashUploadUtils.ts
@@ -192,7 +192,6 @@ export namespace DashUploadUtils {
 
     export async function upload(file: File, overwriteGuid?: string): Promise<Upload.FileResponse> {
         const isAzureOn = usingAzure();
-        console.log("Azure usage: ", isAzureOn);
         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. 
@@ -204,7 +203,7 @@ export namespace DashUploadUtils {
         switch (category) {
             case 'image':
                 if (imageFormats.includes(format)) {
-                    const result = await UploadImage(path, basename(path), name);
+                    const result = await UploadImage(path, basename(path));
                     return { source: file, result };
                 }
                 fs.unlink(path, () => {});
@@ -334,12 +333,11 @@ export namespace DashUploadUtils {
      * 3) the size of the image, in bytes (4432130)
      * 4) the content type of the image, i.e. image/(jpeg | png | ...)
      */
-    export const UploadImage = async (source: string, filename?: string, originalFilename?: string, prefix: string = ''): Promise<Upload.ImageInformation | Error> => {
+    export const UploadImage = async (source: string, filename?: string, prefix: string = ''): Promise<Upload.ImageInformation | Error> => {
         const metadata = await InspectImage(source);
         if (metadata instanceof Error) {
             return { name: metadata.name, message: metadata.message };
         }
-        console.log(originalFilename);
         return UploadInspectedImage(metadata, filename || metadata.filename, prefix);
     };
 
-- 
cgit v1.2.3-70-g09d2


From c1df53a7616ccbb9afad2deaf3026e70f3e974b4 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Tue, 11 Jul 2023 13:30:51 -0400
Subject: starting connecting to new upload endpoint and standardized
 displaying media

---
 src/client/Network.ts                              |   2 +-
 src/client/util/reportManager/ReportManager.tsx    |  75 +++++-----
 .../util/reportManager/ReportManagerComponents.tsx | 162 +++++++++++++++------
 .../util/reportManager/reportManagerSchema.ts      |   2 +-
 .../util/reportManager/reportManagerUtils.ts       |   4 +-
 5 files changed, 161 insertions(+), 84 deletions(-)

(limited to 'src')

diff --git a/src/client/Network.ts b/src/client/Network.ts
index eb827e0c8..70b51d036 100644
--- a/src/client/Network.ts
+++ b/src/client/Network.ts
@@ -68,7 +68,7 @@ export namespace Networking {
             body: formData,
         };
 
-        const endpoint = '/uploadFormData';
+        const endpoint = browndash ? 'http://10.38.71.246:1050/uploadFormData' : '/uploadFormData';
         const response = await fetch(endpoint, parameters);
         return response.json();
     }
diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx
index ff17a5097..d091e2a34 100644
--- a/src/client/util/reportManager/ReportManager.tsx
+++ b/src/client/util/reportManager/ReportManager.tsx
@@ -164,11 +164,11 @@ export class ReportManager extends React.Component<{}> {
         this.setSubmitting(true);
 
         const links = await this.uploadFilesToServer();
+        console.log(links);
         if (!links) {
             // error uploading files to the server
             return;
         }
-        console.log(links);
         const formattedLinks = (links ?? []).map(this.fileLinktoServerLink);
 
         // const req = await this.octokit.request('POST /repos/{owner}/{repo}/issues', {
@@ -252,12 +252,43 @@ export class ReportManager extends React.Component<{}> {
 
     /**
      * Handles file upload.
+     *
      * @param files uploaded files
      */
     private onDrop = (files: File[]) => {
         this.setMediaFiles([...this.mediaFiles, ...files.map(file => ({ _id: v4(), file }))]);
     };
 
+    /**
+     * Returns when the issue passes the current filters.
+     *
+     * @param issue issue to check
+     * @returns boolean indicating whether the issue passes the current filters
+     */
+    private passesTagFilter = (issue: Issue) => {
+        let passesPriority = true;
+        let passesBug = true;
+        if (this.priorityFilter) {
+            passesPriority = issue.labels.some(label => {
+                if (typeof label === 'string') {
+                    return label === this.priorityFilter;
+                } else {
+                    return label.name === this.priorityFilter;
+                }
+            });
+        }
+        if (this.bugFilter) {
+            passesBug = issue.labels.some(label => {
+                if (typeof label === 'string') {
+                    return label === this.bugFilter;
+                } else {
+                    return label.name === this.bugFilter;
+                }
+            });
+        }
+        return passesPriority && passesBug;
+    };
+
     /**
      * Gets a JSX element to render a media preview
      * @param fileData file data
@@ -306,30 +337,6 @@ export class ReportManager extends React.Component<{}> {
         return <></>;
     };
 
-    private passesTagFilter = (issue: Issue) => {
-        let passesPriority = true;
-        let passesBug = true;
-        if (this.priorityFilter) {
-            passesPriority = issue.labels.some(label => {
-                if (typeof label === 'string') {
-                    return label === this.priorityFilter;
-                } else {
-                    return label.name === this.priorityFilter;
-                }
-            });
-        }
-        if (this.bugFilter) {
-            passesBug = issue.labels.some(label => {
-                if (typeof label === 'string') {
-                    return label === this.bugFilter;
-                } else {
-                    return label.name === this.bugFilter;
-                }
-            });
-        }
-        return passesPriority && passesBug;
-    };
-
     /**
      * @returns the component that dispays all issues
      */
@@ -487,26 +494,26 @@ export class ReportManager extends React.Component<{}> {
                         <option value="" disabled selected>
                             Type
                         </option>
-                        <option className="report-opt" value="bug">
+                        <option className="report-opt" value={BugType.BUG}>
                             Bug
                         </option>
-                        <option className="report-opt" value="cosmetic">
+                        <option className="report-opt" value={BugType.COSMETIC}>
                             Poor Design or Cosmetic
                         </option>
-                        <option className="report-opt" value="documentation">
+                        <option className="report-opt" value={BugType.DOCUMENTATION}>
                             Poor Documentation
                         </option>
-                        <option className="report-opt" value="enhancement">
+                        <option className="report-opt" value={BugType.ENHANCEMENT}>
                             New feature or request
                         </option>
                     </select>
-                    <select className="report-select" name="bigPriority" onChange={e => (this.bugPriority = e.target.value)}>
+                    <select className="report-select" name="priority" onChange={e => (this.bugPriority = e.target.value)}>
                         <option className="report-opt" value="" disabled selected>
                             Priority
                         </option>
-                        <option value="priority-low">Low</option>
-                        <option value="priority-medium">Medium</option>
-                        <option value="priority-high">High</option>
+                        <option value={Priority.LOW}>Low</option>
+                        <option value={Priority.MEDIUM}>Medium</option>
+                        <option value={Priority.HIGH}>High</option>
                     </select>
                 </div>
                 <Dropzone
@@ -536,7 +543,7 @@ export class ReportManager extends React.Component<{}> {
                         this.reportIssue();
                     }}>
                     Submit
-                    {this.submitting && <ReactLoading type="spin" color={theme.palette.primary.main} width={20} height={20} />}
+                    {this.submitting && <ReactLoading type="spin" color={'#ffffff'} width={20} height={20} />}
                 </Button>
                 <IconButton onClick={this.close} sx={{ position: 'absolute', top: '4px', right: '4px' }}>
                     <CgClose size={'16px'} />
diff --git a/src/client/util/reportManager/ReportManagerComponents.tsx b/src/client/util/reportManager/ReportManagerComponents.tsx
index 1a4ddb3a3..21c0cb43c 100644
--- a/src/client/util/reportManager/ReportManagerComponents.tsx
+++ b/src/client/util/reportManager/ReportManagerComponents.tsx
@@ -5,12 +5,16 @@ import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 
-// Mini components to render issues
+/**
+ * Mini components to render issues.
+ */
 
 interface IssueCardProps {
     issue: Issue;
     onSelect: () => void;
 }
+
+// Component for the issue cards list on the left
 export const IssueCard = ({ issue, onSelect }: IssueCardProps) => {
     return (
         <div className="issue-card" onClick={onSelect}>
@@ -33,62 +37,25 @@ interface IssueViewProps {
     issue: Issue;
 }
 
+// Detailed issue view that displays on the right
 export const IssueView = ({ issue }: IssueViewProps) => {
     const [issueBody, setIssueBody] = React.useState('');
 
-    const isVideoValid = (src: string) => {
-        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;
-    };
-
-    const getLinkFromTag = async (tag: string) => {
-        const regex = /src="([^"]+)"/;
-        let url = '';
-        const match = tag.match(regex);
-        if (match) {
-            url = match[1];
-        }
-
-        if (url.startsWith('https://github.com/brown-dash/Dash-Web/assets')) {
-            return `\n${url} (Not authorized to display image here)`;
-        }
-        return await getTagFromUrl(url);
-    };
-
-    const getTagFromUrl = async (url: string) => {
-        const imgRegex = /https:\/\/browndash\.com\/files[/\\]images/;
-        const videoRegex = /https:\/\/browndash\.com\/files[/\\]videos/;
-        const audioRegex = /https:\/\/browndash\.com\/files[/\\]audio/;
-
-        if (imgRegex.test(url) || url.includes('user-images.githubusercontent.com')) {
-            return `\n${url}\n<img width="100%" alt="Issue asset" src=${url} />\n`;
-        } else if (videoRegex.test(url)) {
-            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`;
-        } else if (audioRegex.test(url)) {
-            return `\n${url}\n<audio src=${url} controls />\n`;
-        } else {
-            return url;
-        }
-    };
-
+    // 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 parts = body.split('\n');
 
         const modifiedParts = await Promise.all(
             parts.map(async part => {
-                if (imgTagRegex.test(part)) {
-                    return `\n${await getLinkFromTag(part)}\n`;
+                if (imgTagRegex.test(part) || videoTagRegex.test(part) || audioTagRegex.test(part)) {
+                    return `\n${await parseFileTag(part)}\n`;
                 } else if (fileRegex.test(part)) {
-                    const tag = await getTagFromUrl(part);
+                    const tag = await parseDashFiles(part);
                     return tag;
                 } else {
                     return part;
@@ -99,6 +66,108 @@ export const IssueView = ({ issue }: IssueViewProps) => {
         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;
+        }
+    };
+
+    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) => {
+        const imgElement = document.createElement('video');
+        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) => {
+        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) => {
+        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(() => {
         parseBody((issue.body as string) ?? '');
     }, [issue]);
@@ -141,6 +210,7 @@ interface TagProps {
     onClick?: () => void;
 }
 
+// Small tag for labels of the issue
 export const Tag = ({ text, color, backgroundColor, fontSize, border, borderColor, onClick }: TagProps) => {
     return (
         <div
diff --git a/src/client/util/reportManager/reportManagerSchema.ts b/src/client/util/reportManager/reportManagerSchema.ts
index 56b9aa32b..9a1c7c3e9 100644
--- a/src/client/util/reportManager/reportManagerSchema.ts
+++ b/src/client/util/reportManager/reportManagerSchema.ts
@@ -1,5 +1,5 @@
 /**
- * Issue interface schema.
+ * Issue interface schema from Github.
  */
 export interface Issue {
     active_lock_reason?: null | string;
diff --git a/src/client/util/reportManager/reportManagerUtils.ts b/src/client/util/reportManager/reportManagerUtils.ts
index 3c919856a..51517e80d 100644
--- a/src/client/util/reportManager/reportManagerUtils.ts
+++ b/src/client/util/reportManager/reportManagerUtils.ts
@@ -22,7 +22,7 @@ export enum BugType {
 export const priorityColors: { [key: string]: string[] } = {
     'priority-low': ['#d4e0ff', '#000000'],
     'priority-medium': ['#6a91f6', '#ffffff'],
-    'priority-high': ['#4476f7', '#ffffff'],
+    'priority-high': ['#0f4ce7', '#ffffff'],
 };
 
 // [bgColor, color]
@@ -42,7 +42,7 @@ export const getLabelColors = (label: string): string[] => {
     } else if (bugSet.has(label as BugType)) {
         return bugColors[label];
     }
-    return ['#347bff', '#ffffff'];
+    return ['#0f73f6', '#ffffff'];
 };
 
 export interface FileData {
-- 
cgit v1.2.3-70-g09d2


From ccd82fe17dae56b2a3eaf0999d07687edb878c39 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Fri, 14 Jul 2023 10:42:51 -0400
Subject: override nested -> upgrade nested and a few small ui things

---
 src/client/util/SharingManager.tsx       | 10 +++++-----
 src/client/views/DocumentDecorations.tsx |  4 ++--
 src/client/views/PropertiesView.tsx      | 13 +++++--------
 3 files changed, 12 insertions(+), 15 deletions(-)

(limited to 'src')

diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 8e5ae7bc0..b20e48c61 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -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);
@@ -607,7 +607,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>
                                 )}
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 3522830e5..bab07ac96 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>
         ) : (
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 2e10bf346..d88d86e1a 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -490,23 +490,20 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
         return (
             <div>
-                <br />
+                <div>
+                    <br></br> Individual Users with Access to this Document
+                </div>
                 <div className="propertiesView-sharingTable">{<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">{<div> {groupTableEntries}</div>}</div>
                     </div>
                 ) : null}
-                Guest
+                <br></br> Guest
                 <div>{this.colorACLDropDown('Guest', true, publicPermission!, true)}</div>
-                <div>
-                    {' '}
-                    <br></br> Individual Users with Access to this Document{' '}
-                </div>
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From b24babcd89d51e7f6461c57ac16701630c86cf87 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Fri, 14 Jul 2023 10:55:54 -0400
Subject: more clear link to documentation

---
 src/client/util/SharingManager.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index b20e48c61..ae2f845e7 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -553,8 +553,8 @@ export class SharingManager extends React.Component<{}> {
                 {GroupManager.Instance?.currentGroup ? <GroupMemberView group={GroupManager.Instance.currentGroup} onCloseButtonClick={action(() => (GroupManager.Instance.currentGroup = undefined))} /> : null}
                 <div className="sharing-contents">
                     <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')} />
+                        <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-')}
-- 
cgit v1.2.3-70-g09d2


From d561f7d0803205ffded9e374be60853fa90438bd Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Mon, 17 Jul 2023 22:09:00 -0400
Subject: starting component integration

---
 src/client/util/reportManager/ReportManager.tsx    | 106 ++++++++++++---------
 .../util/reportManager/ReportManagerComponents.tsx |  19 +++-
 2 files changed, 78 insertions(+), 47 deletions(-)

(limited to 'src')

diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx
index d091e2a34..7d2d8d277 100644
--- a/src/client/util/reportManager/ReportManager.tsx
+++ b/src/client/util/reportManager/ReportManager.tsx
@@ -12,14 +12,13 @@ import { Doc } from '../../../fields/Doc';
 import { Networking } from '../../Network';
 import { MainViewModal } from '../../views/MainViewModal';
 import { Octokit } from '@octokit/core';
-import { Button, IconButton, Tooltip } from '@mui/material';
+import { Button, IconButton, OrientationType, Type } from 'browndash-components';
 import Dropzone from 'react-dropzone';
 import { theme } from '../../theme';
 import ReactLoading from 'react-loading';
 import v4 = require('uuid/v4');
 import { BugType, FileData, Priority, ViewState, inactiveBorderColor, inactiveColor } from './reportManagerUtils';
 import { IssueCard, IssueView, Tag } from './ReportManagerComponents';
-// import { IconButton } from 'browndash-components';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -113,7 +112,6 @@ export class ReportManager extends React.Component<{}> {
             try {
                 // load in the issues if not already loaded
                 const issues = (await this.getAllIssues()) as Issue[];
-                console.log(issues);
                 // filtering to include only open issues and exclude pull requests, maybe add a separate tab for pr's?
                 this.setShownIssues(issues.filter(issue => issue.state === 'open' && !issue.pull_request));
             } catch (err) {
@@ -163,6 +161,23 @@ export class ReportManager extends React.Component<{}> {
         }
         this.setSubmitting(true);
 
+        const body = {
+            email: 'aaa@gmail.com',
+            password: '1234',
+        };
+
+        //s%3A7pO_IijgvVbSaI3m2Tn6un4oQPHQYTBe.CsIRpBpvzy1AXbyQNXDz%2FCpo4M9A47aw%2F%2BQbCp9lXmc
+
+        const res = await fetch('http://10.38.71.246:1050/headlesslogin', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        });
+
+        console.log(res);
+
         const links = await this.uploadFilesToServer();
         console.log(links);
         if (!links) {
@@ -192,6 +207,16 @@ export class ReportManager extends React.Component<{}> {
         this.setBugType('');
         this.setBugPriority('');
         this.setSubmitting(false);
+        this.setFetchingIssues(true);
+        try {
+            // load in the issues if not already loaded
+            const issues = (await this.getAllIssues()) as Issue[];
+            // filtering to include only open issues and exclude pull requests, maybe add a separate tab for pr's?
+            this.setShownIssues(issues.filter(issue => issue.state === 'open' && !issue.pull_request));
+        } catch (err) {
+            console.log(err);
+        }
+        this.setFetchingIssues(false);
         alert('Successfully submitted issue.');
         // this.close();
     }
@@ -305,9 +330,9 @@ export class ReportManager extends React.Component<{}> {
                     <div className="report-media-content">
                         <img height={100} alt={`Preview of ${file.name}`} src={preview} style={{ display: 'block' }} />
                     </div>
-                    <IconButton onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn">
-                        <BsX color="#ffffff" />
-                    </IconButton>
+                    <div className="close-btn">
+                        <IconButton icon={<BsX color="#ffffff" />} onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} />
+                    </div>
                 </div>
             );
         } else if (mimeType.startsWith('video/')) {
@@ -319,18 +344,18 @@ export class ReportManager extends React.Component<{}> {
                             Your browser does not support the video tag.
                         </video>
                     </div>
-                    <IconButton onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn">
-                        <BsX color="#ffffff" />
-                    </IconButton>
+                    <div className="close-btn">
+                        <IconButton icon={<BsX color="#ffffff" />} onClick={() => this.setMediaFiles(this.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 />
-                    <IconButton onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn">
-                        <BsX />
-                    </IconButton>
+                    <div className="close-btn">
+                        <IconButton icon={<BsX color="#ffffff" />} onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} />
+                    </div>
                 </div>
             );
         }
@@ -347,12 +372,12 @@ export class ReportManager extends React.Component<{}> {
                     <div className="report-header">
                         <h2>Open Issues</h2>
                         <Button
-                            variant="contained"
+                            type={Type.PRIM}
+                            text="report issue"
                             onClick={() => {
                                 this.setViewState(ViewState.CREATE);
-                            }}>
-                            report issue
-                        </Button>
+                            }}
+                        />
                     </div>
                     <input
                         className="report-input"
@@ -444,20 +469,17 @@ export class ReportManager extends React.Component<{}> {
                         )}
                     </div>
                 </div>
-                <div className="right">{this.selectedIssue ? <IssueView issue={this.selectedIssue} /> : <div>No issue selected</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' }}>
-                    <Tooltip title={this.rightExpanded ? 'Minimize right side' : 'Expand right side'}>
-                        <IconButton
-                            onClick={e => {
-                                e.stopPropagation();
-                                this.setRightExpanded(!this.rightExpanded);
-                            }}>
-                            {this.rightExpanded ? <BsArrowsAngleContract size="16px" /> : <BsArrowsAngleExpand size="16px" />}
-                        </IconButton>
-                    </Tooltip>
-                    <IconButton onClick={this.close}>
-                        <CgClose size="16px" />
-                    </IconButton>
+                    <IconButton
+                        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 tooltip="close" icon={<CgClose size="16px" />} onClick={this.close} />
                 </div>
             </div>
         );
@@ -471,14 +493,13 @@ export class ReportManager extends React.Component<{}> {
             <div className="report-issue">
                 <div className="report-header-vertical">
                     <Button
-                        variant="text"
+                        text="back to view"
+                        icon={<HiOutlineArrowLeft color={theme.palette.primary.main} />}
+                        iconPosition={OrientationType.LEFT}
                         onClick={() => {
                             this.setViewState(ViewState.VIEW);
                         }}
-                        sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                        <HiOutlineArrowLeft color={theme.palette.primary.main} />
-                        back to view
-                    </Button>
+                    />
                     <h2>Report an Issue</h2>
                 </div>
                 <div className="report-section">
@@ -537,17 +558,16 @@ export class ReportManager extends React.Component<{}> {
                 </Dropzone>
                 {this.mediaFiles.length > 0 && <ul className="file-list">{this.mediaFiles.map(file => this.getMediaPreview(file))}</ul>}
                 <Button
-                    variant="contained"
-                    sx={{ fontSize: '14px', display: 'flex', alignItems: 'center', gap: '1rem' }}
+                    text="submit"
+                    icon={this.submitting ? <ReactLoading type="spin" color={'#ffffff'} width={20} height={20} /> : <></>}
+                    iconPosition={OrientationType.RIGHT}
                     onClick={() => {
                         this.reportIssue();
-                    }}>
-                    Submit
-                    {this.submitting && <ReactLoading type="spin" color={'#ffffff'} width={20} height={20} />}
-                </Button>
-                <IconButton onClick={this.close} sx={{ position: 'absolute', top: '4px', right: '4px' }}>
-                    <CgClose size={'16px'} />
-                </IconButton>
+                    }}
+                />
+                <div style={{ position: 'absolute', top: '4px', right: '4px' }}>
+                    <IconButton tooltip="close" icon={<CgClose size={'16px'} />} onClick={this.close} />
+                </div>
             </div>
         );
     };
diff --git a/src/client/util/reportManager/ReportManagerComponents.tsx b/src/client/util/reportManager/ReportManagerComponents.tsx
index 21c0cb43c..576c3c3a1 100644
--- a/src/client/util/reportManager/ReportManagerComponents.tsx
+++ b/src/client/util/reportManager/ReportManagerComponents.tsx
@@ -135,33 +135,43 @@ export const IssueView = ({ issue }: IssueViewProps) => {
     };
 
     // Loads an image and returns a promise that resolves as whether the image is valid or not
-    const isImgValid = (src: string) => {
-        const imgElement = document.createElement('video');
+    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));
+            // if taking too long to load, return prematurely (when the browndash server is down)
+            // setTimeout(() => {
+            //     resolve(false);
+            // }, 1500);
         });
         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) => {
+    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));
+            // setTimeout(() => {
+            //     resolve(false);
+            // }, 1500);
         });
         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) => {
+    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));
+            // setTimeout(() => {
+            //     resolve(false);
+            // }, 1500);
         });
         audioElement.src = src;
         return validPromise;
@@ -169,6 +179,7 @@ export const IssueView = ({ issue }: IssueViewProps) => {
 
     // Called on mount to parse the body
     React.useEffect(() => {
+        setIssueBody('Loading...');
         parseBody((issue.body as string) ?? '');
     }, [issue]);
 
-- 
cgit v1.2.3-70-g09d2


From 2bfad0eb9e3d8f8d26f66cf8e6daa801a694cab0 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Tue, 18 Jul 2023 01:03:09 -0400
Subject: nothing much

---
 src/client/util/reportManager/ReportManager.tsx | 26 ++++++++++++-------------
 1 file changed, 12 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx
index 7d2d8d277..b65ada7ec 100644
--- a/src/client/util/reportManager/ReportManager.tsx
+++ b/src/client/util/reportManager/ReportManager.tsx
@@ -177,7 +177,6 @@ export class ReportManager extends React.Component<{}> {
         });
 
         console.log(res);
-
         const links = await this.uploadFilesToServer();
         console.log(links);
         if (!links) {
@@ -186,19 +185,19 @@ export class ReportManager extends React.Component<{}> {
         }
         const formattedLinks = (links ?? []).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} ${formattedLinks.length > 0 && `\n\nFiles:\n${formattedLinks.join('\n')}`}`,
-        //     labels: ['from-dash-app', this.bugType, this.bugPriority],
-        // });
+        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} ${formattedLinks.length > 0 && `\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.');
-        //     return;
-        // }
+        // 201 status means success
+        if (req.status !== 201) {
+            alert('Error creating issue on github.');
+            return;
+        }
 
         // Reset fields
         this.setBugTitle('');
@@ -218,7 +217,6 @@ export class ReportManager extends React.Component<{}> {
         }
         this.setFetchingIssues(false);
         alert('Successfully submitted issue.');
-        // this.close();
     }
 
     /**
-- 
cgit v1.2.3-70-g09d2


From e332c268c013efbc7409bf0072b66e8bf646dfef Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Tue, 18 Jul 2023 13:32:49 -0400
Subject: theming

---
 package-lock.json                                  |   2 +-
 src/client/theme.ts                                |  31 ------
 src/client/util/reportManager/ReportManager.scss   |  32 ++++---
 src/client/util/reportManager/ReportManager.tsx    | 100 +++++++++++--------
 .../util/reportManager/reportManagerUtils.ts       |   4 +-
 src/client/views/pdf/AnchorMenu.tsx                | 106 ++++++---------------
 6 files changed, 111 insertions(+), 164 deletions(-)

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index 932008e73..54493e5a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24834,7 +24834,7 @@
         "to-fast-properties": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-            "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
+            "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
         },
         "to-object-path": {
             "version": "0.3.0",
diff --git a/src/client/theme.ts b/src/client/theme.ts
index 0ef2e5e2c..e69de29bb 100644
--- a/src/client/theme.ts
+++ b/src/client/theme.ts
@@ -1,31 +0,0 @@
-import '@mui/material/styles';
-import { createTheme } from '@mui/material/styles';
-
-export const theme = createTheme({
-    palette: {
-        primary: {
-            main: '#4476f7',
-        },
-    },
-    components: {
-        MuiButton: {
-            styleOverrides: {
-                root: {
-                    fontSize: '14px',
-                    boxShadow: 'none',
-                    '&:hover': {
-                        boxShadow: 'none',
-                    },
-                },
-            },
-        },
-
-        MuiTooltip: {
-            styleOverrides: {
-                tooltip: {
-                    fontSize: '12px',
-                },
-            },
-        },
-    },
-});
diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss
index 81af41cb0..f1ae6c387 100644
--- a/src/client/util/reportManager/ReportManager.scss
+++ b/src/client/util/reportManager/ReportManager.scss
@@ -2,8 +2,8 @@
 
 // header
 
-$text-gray: #64748b;
-$outline-gray: #cbd5e1;
+$text-gray: #555555;
+$outline-gray: #9c9c9c;
 
 .report-header {
     display: flex;
@@ -41,14 +41,14 @@ $outline-gray: #cbd5e1;
     display: flex;
     flex-direction: column;
     gap: 16px;
-    background-color: #ffffff;
+    // background-color: #ffffff;
     text-align: left;
     position: relative;
 
     .report-label {
         font-size: 14px;
         font-weight: 400;
-        color: $text-gray;
+        // color: $text-gray;
     }
 
     .report-section {
@@ -61,6 +61,7 @@ $outline-gray: #cbd5e1;
         height: 80px;
         padding: 8px;
         resize: vertical;
+        background: transparent;
         // resize: none;
     }
 
@@ -69,10 +70,12 @@ $outline-gray: #cbd5e1;
         flex-direction: column;
         align-items: stretch;
         gap: 16px;
+        background-color: transparent;
 
         .report-select {
             padding: 8px;
             border-color: $outline-gray;
+            background-color: transparent;
 
             .report-opt {
                 padding: 8px;
@@ -88,6 +91,7 @@ $outline-gray: #cbd5e1;
     padding: 8px;
     padding-left: 0;
     transition: all 0.2s ease;
+    background: transparent;
 
     &:hover {
         border-bottom-color: $text-gray;
@@ -118,7 +122,7 @@ $outline-gray: #cbd5e1;
         display: flex;
         flex-direction: column;
         gap: 16px;
-        background-color: #ffffff;
+        // background-color: #ffffff;
         text-align: left;
         position: relative;
 
@@ -153,7 +157,7 @@ $outline-gray: #cbd5e1;
 .issue-card {
     cursor: pointer;
     padding: 16px;
-    background-color: #ffffff;
+    // background-color: #ffffff;
     border: 1px solid $outline-gray;
     transition: all 0.1s ease;
     display: flex;
@@ -173,7 +177,7 @@ $outline-gray: #cbd5e1;
         cursor: pointer;
         font-size: 14px;
         font-weight: 400;
-        color: $text-gray;
+        // color: $text-gray;
         padding: 0;
         margin: 0;
     }
@@ -206,14 +210,14 @@ $outline-gray: #cbd5e1;
 .dropzone {
     padding: 2rem;
     border-radius: 0.5rem;
-    border: 2px dashed #f1f5f9;
+    border: 2px dashed $outline-gray;
 
     .dropzone-instructions {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 16px;
-        color: $text-gray;
+        // color: $text-gray;
 
         p {
             text-align: center;
@@ -226,7 +230,7 @@ $outline-gray: #cbd5e1;
     margin: 0;
     padding: 0;
     font-size: 14px;
-    color: $text-gray;
+    // color: $text-gray;
     width: 100%;
     overflow-x: auto;
     list-style-type: none;
@@ -251,13 +255,13 @@ $outline-gray: #cbd5e1;
     display: flex;
     flex-direction: column;
     gap: 16px;
-    background-color: #ffffff;
+    // background-color: #ffffff;
     text-align: left;
     position: relative;
     overflow: auto;
 
     .issue-label {
-        color: $text-gray;
+        // color: $text-gray;
 
         .issue-link {
             cursor: pointer;
@@ -273,12 +277,12 @@ $outline-gray: #cbd5e1;
 
     .issue-date {
         font-size: 14px;
-        color: $text-gray;
+        // color: $text-gray;
     }
 
     .issue-content {
         font-size: 14px;
-        color: $text-gray;
+        // color: $text-gray;
     }
 }
 
diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx
index b65ada7ec..7599b8949 100644
--- a/src/client/util/reportManager/ReportManager.tsx
+++ b/src/client/util/reportManager/ReportManager.tsx
@@ -14,15 +14,19 @@ import { MainViewModal } from '../../views/MainViewModal';
 import { Octokit } from '@octokit/core';
 import { Button, IconButton, OrientationType, Type } from 'browndash-components';
 import Dropzone from 'react-dropzone';
-import { theme } from '../../theme';
 import ReactLoading from 'react-loading';
 import v4 = require('uuid/v4');
 import { BugType, FileData, Priority, ViewState, inactiveBorderColor, inactiveColor } from './reportManagerUtils';
 import { IssueCard, IssueView, Tag } from './ReportManagerComponents';
+import { StrCast } from '../../../fields/Types';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
 
+// StrCast(Doc.UserDoc().userColor);
+// StrCast(Doc.UserDoc().userBackgroundColor);
+// StrCast(Doc.UserDoc().userVariantColor);
+
 /**
  * Class for reporting and viewing Github issues within the app.
  */
@@ -185,19 +189,19 @@ export class ReportManager extends React.Component<{}> {
         }
         const formattedLinks = (links ?? []).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} ${formattedLinks.length > 0 && `\n\nFiles:\n${formattedLinks.join('\n')}`}`,
-            labels: ['from-dash-app', this.bugType, this.bugPriority],
-        });
+        // 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} ${formattedLinks.length > 0 && `\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.');
-            return;
-        }
+        // // 201 status means success
+        // if (req.status !== 201) {
+        //     alert('Error creating issue on github.');
+        //     return;
+        // }
 
         // Reset fields
         this.setBugTitle('');
@@ -365,13 +369,14 @@ export class ReportManager extends React.Component<{}> {
      */
     private viewIssuesComponent = () => {
         return (
-            <div className="view-issues">
+            <div className="view-issues" style={{ backgroundColor: StrCast(Doc.UserDoc().userBackgroundColor) }}>
                 <div className="left" style={{ display: this.rightExpanded ? 'none' : 'flex' }}>
                     <div className="report-header">
-                        <h2>Open Issues</h2>
+                        <h2 style={{ color: StrCast(Doc.UserDoc().userColor) }}>Open Issues</h2>
                         <Button
-                            type={Type.PRIM}
-                            text="report issue"
+                            type={Type.TERT}
+                            color={StrCast(Doc.UserDoc().userVariantColor)}
+                            text="Report Issue"
                             onClick={() => {
                                 this.setViewState(ViewState.CREATE);
                             }}
@@ -394,10 +399,10 @@ export class ReportManager extends React.Component<{}> {
                                     this.setPriorityFilter(null);
                                 }}
                                 fontSize="12px"
-                                backgroundColor={this.priorityFilter === null ? theme.palette.primary.main : '#ffffff'}
-                                color={this.priorityFilter === null ? '#ffffff' : inactiveColor}
+                                backgroundColor={this.priorityFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
+                                color={this.priorityFilter === null ? StrCast(Doc.UserDoc().userColor) : inactiveColor}
                                 border
-                                borderColor={this.priorityFilter === null ? theme.palette.primary.main : inactiveBorderColor}
+                                borderColor={this.priorityFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : inactiveBorderColor}
                             />
                             {Object.values(Priority).map(p => {
                                 return (
@@ -408,10 +413,10 @@ export class ReportManager extends React.Component<{}> {
                                             this.setPriorityFilter(p);
                                         }}
                                         fontSize="12px"
-                                        backgroundColor={this.priorityFilter === p ? theme.palette.primary.main : '#ffffff'}
-                                        color={this.priorityFilter === p ? '#ffffff' : inactiveColor}
+                                        backgroundColor={this.priorityFilter === p ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
+                                        color={this.priorityFilter === p ? StrCast(Doc.UserDoc().userColor) : inactiveColor}
                                         border
-                                        borderColor={this.priorityFilter === p ? theme.palette.primary.main : inactiveBorderColor}
+                                        borderColor={this.priorityFilter === p ? StrCast(Doc.UserDoc().userVariantColor) : inactiveBorderColor}
                                     />
                                 );
                             })}
@@ -423,10 +428,10 @@ export class ReportManager extends React.Component<{}> {
                                     this.setBugFilter(null);
                                 }}
                                 fontSize="12px"
-                                backgroundColor={this.bugFilter === null ? theme.palette.primary.main : '#ffffff'}
-                                color={this.bugFilter === null ? '#ffffff' : inactiveColor}
+                                backgroundColor={this.bugFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
+                                color={this.bugFilter === null ? StrCast(Doc.UserDoc().userColor) : inactiveColor}
                                 border
-                                borderColor={this.bugFilter === null ? theme.palette.primary.main : inactiveBorderColor}
+                                borderColor={this.bugFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : inactiveBorderColor}
                             />
                             {Object.values(BugType).map(b => {
                                 return (
@@ -437,10 +442,10 @@ export class ReportManager extends React.Component<{}> {
                                             this.setBugFilter(b);
                                         }}
                                         fontSize="12px"
-                                        backgroundColor={this.bugFilter === b ? theme.palette.primary.main : '#ffffff'}
-                                        color={this.bugFilter === b ? '#ffffff' : inactiveColor}
+                                        backgroundColor={this.bugFilter === b ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
+                                        color={this.bugFilter === b ? StrCast(Doc.UserDoc().userColor) : inactiveColor}
                                         border
-                                        borderColor={this.bugFilter === b ? theme.palette.primary.main : inactiveBorderColor}
+                                        borderColor={this.bugFilter === b ? StrCast(Doc.UserDoc().userVariantColor) : inactiveBorderColor}
                                     />
                                 );
                             })}
@@ -449,7 +454,7 @@ export class ReportManager extends React.Component<{}> {
                     <div className="issues">
                         {this.fetchingIssues ? (
                             <div style={{ flexGrow: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                                <ReactLoading type="spin" color={theme.palette.primary.main} width={50} height={50} />
+                                <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userColor)} width={50} height={50} />
                             </div>
                         ) : (
                             this.shownIssues
@@ -491,9 +496,10 @@ export class ReportManager extends React.Component<{}> {
             <div className="report-issue">
                 <div className="report-header-vertical">
                     <Button
+                        type={Type.PRIM}
                         text="back to view"
-                        icon={<HiOutlineArrowLeft color={theme.palette.primary.main} />}
-                        iconPosition={OrientationType.LEFT}
+                        icon={<HiOutlineArrowLeft />}
+                        iconPlacement="left"
                         onClick={() => {
                             this.setViewState(ViewState.VIEW);
                         }}
@@ -555,14 +561,26 @@ export class ReportManager extends React.Component<{}> {
                     )}
                 </Dropzone>
                 {this.mediaFiles.length > 0 && <ul className="file-list">{this.mediaFiles.map(file => this.getMediaPreview(file))}</ul>}
-                <Button
-                    text="submit"
-                    icon={this.submitting ? <ReactLoading type="spin" color={'#ffffff'} width={20} height={20} /> : <></>}
-                    iconPosition={OrientationType.RIGHT}
-                    onClick={() => {
-                        this.reportIssue();
-                    }}
-                />
+                {this.submitting ? (
+                    <Button
+                        text="Submit"
+                        type={Type.TERT}
+                        icon={<ReactLoading type="spin" color={'#ffffff'} width={20} height={20} />}
+                        iconPlacement="right"
+                        onClick={() => {
+                            this.reportIssue();
+                        }}
+                    />
+                ) : (
+                    <Button
+                        text="Submit"
+                        type={Type.TERT}
+                        onClick={() => {
+                            this.reportIssue();
+                        }}
+                    />
+                )}
+
                 <div style={{ position: 'absolute', top: '4px', right: '4px' }}>
                     <IconButton tooltip="close" icon={<CgClose size={'16px'} />} onClick={this.close} />
                 </div>
@@ -588,7 +606,7 @@ export class ReportManager extends React.Component<{}> {
                 isDisplayed={this.isOpen}
                 interactive={true}
                 closeOnExternalClick={this.close}
-                dialogueBoxStyle={{ width: 'auto', minWidth: '300px', height: '85vh', maxHeight: '90vh', background: '#ffffff', borderRadius: '8px' }}
+                dialogueBoxStyle={{ width: 'auto', minWidth: '300px', height: '85vh', maxHeight: '90vh', background: StrCast(Doc.UserDoc().userBackgroundColor), borderRadius: '8px' }}
             />
         );
     }
diff --git a/src/client/util/reportManager/reportManagerUtils.ts b/src/client/util/reportManager/reportManagerUtils.ts
index 51517e80d..66394a0ca 100644
--- a/src/client/util/reportManager/reportManagerUtils.ts
+++ b/src/client/util/reportManager/reportManagerUtils.ts
@@ -50,5 +50,5 @@ export interface FileData {
     file: File;
 }
 
-export const inactiveBorderColor = '#cbd5e1';
-export const inactiveColor = '#64748b';
+export const inactiveBorderColor = '#b8b8b8';
+export const inactiveColor = '#808080';
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 07b2afd91..17a3d0a03 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,12 +309,7 @@ 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"/>}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />
+                    <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>}>
@@ -338,66 +330,30 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                         mode={this.GPTMode}
                     />
                     {AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : (
-                        <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'}
-                            onPointerDown={this.gptEdit}
-                            icon={<FontAwesomeIcon icon="pencil-alt" />}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                        />
+                        <IconButton tooltip={'Click to Record Annotation'} onPointerDown={this.audioDown} icon={<FontAwesomeIcon icon="microphone" />} color={StrCast(Doc.UserDoc().userColor)} />
                     )}
-                    <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)}
-                    />
+                    {this.canEdit() && <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" 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'}
-                            onPointerDown={this.cropDown}
-                            icon={<FontAwesomeIcon icon="image"/>}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                        />
+                        <IconButton tooltip={'Click/Drag to create cropped image'} onPointerDown={this.cropDown} 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)}
+                        />
+                    )}
                 </>
             );
 
-- 
cgit v1.2.3-70-g09d2


From 3cdb72716ed161f1e421e1bf4a2f8f009e221e00 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Tue, 18 Jul 2023 15:05:29 -0400
Subject: .

---
 src/client/util/SettingsManager.tsx             | 299 ++++++++++--------------
 src/client/util/reportManager/ReportManager.tsx |  17 +-
 2 files changed, 128 insertions(+), 188 deletions(-)

(limited to 'src')

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/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx
index 7599b8949..e15d3fdae 100644
--- a/src/client/util/reportManager/ReportManager.tsx
+++ b/src/client/util/reportManager/ReportManager.tsx
@@ -165,22 +165,6 @@ export class ReportManager extends React.Component<{}> {
         }
         this.setSubmitting(true);
 
-        const body = {
-            email: 'aaa@gmail.com',
-            password: '1234',
-        };
-
-        //s%3A7pO_IijgvVbSaI3m2Tn6un4oQPHQYTBe.CsIRpBpvzy1AXbyQNXDz%2FCpo4M9A47aw%2F%2BQbCp9lXmc
-
-        const res = await fetch('http://10.38.71.246:1050/headlesslogin', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(body),
-        });
-
-        console.log(res);
         const links = await this.uploadFilesToServer();
         console.log(links);
         if (!links) {
@@ -565,6 +549,7 @@ export class ReportManager extends React.Component<{}> {
                     <Button
                         text="Submit"
                         type={Type.TERT}
+                        color={StrCast(Doc.UserDoc().userVariantColor)}
                         icon={<ReactLoading type="spin" color={'#ffffff'} width={20} height={20} />}
                         iconPlacement="right"
                         onClick={() => {
-- 
cgit v1.2.3-70-g09d2


From e0c100ecb1fe2b16209e955911f7e8267a2535ef Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Wed, 19 Jul 2023 14:16:35 -0400
Subject: ui changes

---
 src/client/util/reportManager/ReportManager.scss   | 131 +--------------------
 src/client/util/reportManager/ReportManager.tsx    |  49 +++++---
 .../util/reportManager/ReportManagerComponents.tsx |  29 ++++-
 .../util/reportManager/reportManagerUtils.ts       |  44 +++++--
 4 files changed, 99 insertions(+), 154 deletions(-)

(limited to 'src')

diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss
index f1ae6c387..4e80cbeeb 100644
--- a/src/client/util/reportManager/ReportManager.scss
+++ b/src/client/util/reportManager/ReportManager.scss
@@ -2,9 +2,6 @@
 
 // header
 
-$text-gray: #555555;
-$outline-gray: #9c9c9c;
-
 .report-header {
     display: flex;
     justify-content: space-between;
@@ -48,7 +45,6 @@ $outline-gray: #9c9c9c;
     .report-label {
         font-size: 14px;
         font-weight: 400;
-        // color: $text-gray;
     }
 
     .report-section {
@@ -74,7 +70,6 @@ $outline-gray: #9c9c9c;
 
         .report-select {
             padding: 8px;
-            border-color: $outline-gray;
             background-color: transparent;
 
             .report-opt {
@@ -87,17 +82,17 @@ $outline-gray: #9c9c9c;
 .report-input {
     border: none;
     outline: none;
-    border-bottom: 1px solid $outline-gray;
+    border-bottom: 1px solid;
     padding: 8px;
     padding-left: 0;
     transition: all 0.2s ease;
     background: transparent;
 
     &:hover {
-        border-bottom-color: $text-gray;
+        // border-bottom-color: $text-gray;
     }
     &:focus {
-        border-bottom-color: #4476f7;
+        // border-bottom-color: #4476f7;
     }
 }
 
@@ -122,7 +117,6 @@ $outline-gray: #9c9c9c;
         display: flex;
         flex-direction: column;
         gap: 16px;
-        // background-color: #ffffff;
         text-align: left;
         position: relative;
 
@@ -157,8 +151,7 @@ $outline-gray: #9c9c9c;
 .issue-card {
     cursor: pointer;
     padding: 16px;
-    // background-color: #ffffff;
-    border: 1px solid $outline-gray;
+    border: 1px solid;
     transition: all 0.1s ease;
     display: flex;
     flex-direction: column;
@@ -177,7 +170,6 @@ $outline-gray: #9c9c9c;
         cursor: pointer;
         font-size: 14px;
         font-weight: 400;
-        // color: $text-gray;
         padding: 0;
         margin: 0;
     }
@@ -187,21 +179,6 @@ $outline-gray: #9c9c9c;
         font-weight: 500;
         padding: 0;
         margin: 0;
-        color: #4476f7;
-    }
-
-    &:hover {
-        background-color: #4476f7;
-        border-color: #4476f7;
-        color: #ffffff;
-
-        .issue-label {
-            color: #ffffff;
-        }
-
-        .issue-title {
-            color: #ffffff;
-        }
     }
 }
 
@@ -210,14 +187,13 @@ $outline-gray: #9c9c9c;
 .dropzone {
     padding: 2rem;
     border-radius: 0.5rem;
-    border: 2px dashed $outline-gray;
+    border: 2px dashed;
 
     .dropzone-instructions {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 16px;
-        // color: $text-gray;
 
         p {
             text-align: center;
@@ -230,7 +206,6 @@ $outline-gray: #9c9c9c;
     margin: 0;
     padding: 0;
     font-size: 14px;
-    // color: $text-gray;
     width: 100%;
     overflow-x: auto;
     list-style-type: none;
@@ -255,14 +230,11 @@ $outline-gray: #9c9c9c;
     display: flex;
     flex-direction: column;
     gap: 16px;
-    // background-color: #ffffff;
     text-align: left;
     position: relative;
     overflow: auto;
 
     .issue-label {
-        // color: $text-gray;
-
         .issue-link {
             cursor: pointer;
             color: #4476f7;
@@ -277,12 +249,10 @@ $outline-gray: #9c9c9c;
 
     .issue-date {
         font-size: 14px;
-        // color: $text-gray;
     }
 
     .issue-content {
         font-size: 14px;
-        // color: $text-gray;
     }
 }
 
@@ -384,94 +354,3 @@ $outline-gray: #9c9c9c;
     border-radius: 32px;
     transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
 }
-
-// Old code
-
-// <---------------------------------------------------------------------------->
-
-// .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/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx
index e15d3fdae..be46ba0a8 100644
--- a/src/client/util/reportManager/ReportManager.tsx
+++ b/src/client/util/reportManager/ReportManager.tsx
@@ -1,6 +1,9 @@
 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';
@@ -13,10 +16,7 @@ import { Networking } from '../../Network';
 import { MainViewModal } from '../../views/MainViewModal';
 import { Octokit } from '@octokit/core';
 import { Button, IconButton, OrientationType, Type } from 'browndash-components';
-import Dropzone from 'react-dropzone';
-import ReactLoading from 'react-loading';
-import v4 = require('uuid/v4');
-import { BugType, FileData, Priority, ViewState, inactiveBorderColor, inactiveColor } from './reportManagerUtils';
+import { BugType, FileData, Priority, ViewState, darkColors, isLightText, lightColors } from './reportManagerUtils';
 import { IssueCard, IssueView, Tag } from './ReportManagerComponents';
 import { StrCast } from '../../../fields/Types';
 const higflyout = require('@hig/flyout');
@@ -352,14 +352,19 @@ export class ReportManager extends React.Component<{}> {
      * @returns the component that dispays all issues
      */
     private viewIssuesComponent = () => {
+        const darkMode = isLightText(StrCast(Doc.UserDoc().userBackgroundColor));
+        const colors = darkMode ? darkColors : lightColors;
+        const isTagDarkMode = isLightText(StrCast(Doc.UserDoc().userVariantColor));
+        const activeTagTextColor = isTagDarkMode ? darkColors.text : lightColors.text;
+
         return (
-            <div className="view-issues" style={{ backgroundColor: StrCast(Doc.UserDoc().userBackgroundColor) }}>
+            <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: StrCast(Doc.UserDoc().userColor) }}>Open Issues</h2>
+                        <h2 style={{ color: colors.text }}>Open Issues</h2>
                         <Button
                             type={Type.TERT}
-                            color={StrCast(Doc.UserDoc().userVariantColor)}
+                            color={StrCast(Doc.UserDoc().userColor)}
                             text="Report Issue"
                             onClick={() => {
                                 this.setViewState(ViewState.CREATE);
@@ -384,9 +389,9 @@ export class ReportManager extends React.Component<{}> {
                                 }}
                                 fontSize="12px"
                                 backgroundColor={this.priorityFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
-                                color={this.priorityFilter === null ? StrCast(Doc.UserDoc().userColor) : inactiveColor}
+                                color={this.priorityFilter === null ? activeTagTextColor : colors.textGrey}
                                 border
-                                borderColor={this.priorityFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : inactiveBorderColor}
+                                borderColor={this.priorityFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : colors.border}
                             />
                             {Object.values(Priority).map(p => {
                                 return (
@@ -398,9 +403,9 @@ export class ReportManager extends React.Component<{}> {
                                         }}
                                         fontSize="12px"
                                         backgroundColor={this.priorityFilter === p ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
-                                        color={this.priorityFilter === p ? StrCast(Doc.UserDoc().userColor) : inactiveColor}
+                                        color={this.priorityFilter === p ? activeTagTextColor : colors.textGrey}
                                         border
-                                        borderColor={this.priorityFilter === p ? StrCast(Doc.UserDoc().userVariantColor) : inactiveBorderColor}
+                                        borderColor={this.priorityFilter === p ? StrCast(Doc.UserDoc().userVariantColor) : colors.border}
                                     />
                                 );
                             })}
@@ -413,9 +418,9 @@ export class ReportManager extends React.Component<{}> {
                                 }}
                                 fontSize="12px"
                                 backgroundColor={this.bugFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
-                                color={this.bugFilter === null ? StrCast(Doc.UserDoc().userColor) : inactiveColor}
+                                color={this.bugFilter === null ? activeTagTextColor : colors.textGrey}
                                 border
-                                borderColor={this.bugFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : inactiveBorderColor}
+                                borderColor={this.bugFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : colors.border}
                             />
                             {Object.values(BugType).map(b => {
                                 return (
@@ -427,9 +432,9 @@ export class ReportManager extends React.Component<{}> {
                                         }}
                                         fontSize="12px"
                                         backgroundColor={this.bugFilter === b ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
-                                        color={this.bugFilter === b ? StrCast(Doc.UserDoc().userColor) : inactiveColor}
+                                        color={this.bugFilter === b ? activeTagTextColor : colors.textGrey}
                                         border
-                                        borderColor={this.bugFilter === b ? StrCast(Doc.UserDoc().userVariantColor) : inactiveBorderColor}
+                                        borderColor={this.bugFilter === b ? StrCast(Doc.UserDoc().userVariantColor) : colors.border}
                                     />
                                 );
                             })}
@@ -459,6 +464,7 @@ export class ReportManager extends React.Component<{}> {
                 <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 => {
@@ -466,7 +472,7 @@ export class ReportManager extends React.Component<{}> {
                             this.setRightExpanded(!this.rightExpanded);
                         }}
                     />
-                    <IconButton tooltip="close" icon={<CgClose size="16px" />} onClick={this.close} />
+                    <IconButton color={StrCast(Doc.UserDoc().userColor)} tooltip="close" icon={<CgClose size="16px" />} onClick={this.close} />
                 </div>
             </div>
         );
@@ -476,11 +482,15 @@ export class ReportManager extends React.Component<{}> {
      * @returns the form component for submitting issues
      */
     private reportIssueComponent = () => {
+        const darkMode = isLightText(StrCast(Doc.UserDoc().userBackgroundColor));
+        const colors = darkMode ? darkColors : lightColors;
+
         return (
-            <div className="report-issue">
+            <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"
@@ -549,7 +559,7 @@ export class ReportManager extends React.Component<{}> {
                     <Button
                         text="Submit"
                         type={Type.TERT}
-                        color={StrCast(Doc.UserDoc().userVariantColor)}
+                        color={StrCast(Doc.UserDoc().userColor)}
                         icon={<ReactLoading type="spin" color={'#ffffff'} width={20} height={20} />}
                         iconPlacement="right"
                         onClick={() => {
@@ -560,6 +570,7 @@ export class ReportManager extends React.Component<{}> {
                     <Button
                         text="Submit"
                         type={Type.TERT}
+                        color={StrCast(Doc.UserDoc().userColor)}
                         onClick={() => {
                             this.reportIssue();
                         }}
@@ -567,7 +578,7 @@ export class ReportManager extends React.Component<{}> {
                 )}
 
                 <div style={{ position: 'absolute', top: '4px', right: '4px' }}>
-                    <IconButton tooltip="close" icon={<CgClose size={'16px'} />} onClick={this.close} />
+                    <IconButton color={StrCast(Doc.UserDoc().userColor)} tooltip="close" icon={<CgClose size={'16px'} />} onClick={this.close} />
                 </div>
             </div>
         );
diff --git a/src/client/util/reportManager/ReportManagerComponents.tsx b/src/client/util/reportManager/ReportManagerComponents.tsx
index 576c3c3a1..651442030 100644
--- a/src/client/util/reportManager/ReportManagerComponents.tsx
+++ b/src/client/util/reportManager/ReportManagerComponents.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { Issue } from './reportManagerSchema';
-import { getLabelColors } from './reportManagerUtils';
+import { darkColors, getLabelColors, isLightText, 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 components to render issues.
@@ -16,8 +18,31 @@ interface IssueCardProps {
 
 // 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('');
+    const [borderColor, setBorderColor] = React.useState('');
+
+    const resetColors = () => {
+        const darkMode = isLightText(StrCast(Doc.UserDoc().userBackgroundColor));
+        const colors = darkMode ? darkColors : lightColors;
+        setTextColor(colors.text);
+        setBorderColor(colors.border);
+        setBgColor('transparent');
+    };
+
+    const handlePointerOver = () => {
+        const darkMode = isLightText(StrCast(Doc.UserDoc().userVariantColor));
+        setTextColor(darkMode ? darkColors.text : lightColors.text);
+        setBorderColor(StrCast(Doc.UserDoc().userVariantColor));
+        setBgColor(StrCast(Doc.UserDoc().userVariantColor));
+    };
+
+    React.useEffect(() => {
+        resetColors();
+    }, []);
+
     return (
-        <div className="issue-card" onClick={onSelect}>
+        <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">
diff --git a/src/client/util/reportManager/reportManagerUtils.ts b/src/client/util/reportManager/reportManagerUtils.ts
index 66394a0ca..682113a89 100644
--- a/src/client/util/reportManager/reportManagerUtils.ts
+++ b/src/client/util/reportManager/reportManagerUtils.ts
@@ -18,11 +18,16 @@ export enum BugType {
     ENHANCEMENT = 'enhancement',
 }
 
+export interface FileData {
+    _id: string;
+    file: File;
+}
+
 // [bgColor, color]
 export const priorityColors: { [key: string]: string[] } = {
     'priority-low': ['#d4e0ff', '#000000'],
     'priority-medium': ['#6a91f6', '#ffffff'],
-    'priority-high': ['#0f4ce7', '#ffffff'],
+    'priority-high': ['#003cd5', '#ffffff'],
 };
 
 // [bgColor, color]
@@ -45,10 +50,35 @@ export const getLabelColors = (label: string): string[] => {
     return ['#0f73f6', '#ffffff'];
 };
 
-export interface FileData {
-    _id: string;
-    file: File;
-}
+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 isLightText = (bgHex: string): boolean => {
+    const { r, g, b } = hexToRgb(bgHex);
+    return r * 0.299 + g * 0.587 + b * 0.114 <= 186;
+};
 
-export const inactiveBorderColor = '#b8b8b8';
-export const inactiveColor = '#808080';
+export const lightColors = {
+    text: '#000000',
+    textGrey: '#5c5c5c',
+    border: '#b8b8b8',
+};
+
+export const darkColors = {
+    text: '#ffffff',
+    textGrey: '#d6d6d6',
+    border: '#717171',
+};
-- 
cgit v1.2.3-70-g09d2


From ea217200f1c42e4d4b142abc9abd55ca49535c49 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Wed, 19 Jul 2023 19:11:06 -0400
Subject: lots of changes, just need server endpoint before pull

---
 package-lock.json                                  |  18 +-
 src/client/Network.ts                              |   3 +-
 src/client/util/reportManager/ReportManager.scss   |  10 +-
 src/client/util/reportManager/ReportManager.tsx    | 382 +++++----------------
 .../util/reportManager/ReportManagerComponents.tsx | 137 +++++++-
 .../util/reportManager/reportManagerUtils.ts       | 181 +++++++++-
 src/client/views/PropertiesButtons.tsx             |  90 ++---
 7 files changed, 454 insertions(+), 367 deletions(-)

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index aa59ef2eb..1f3255512 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,15 @@
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
+        "@ampproject/remapping": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+            "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+            "requires": {
+                "@jridgewell/gen-mapping": "^0.3.0",
+                "@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",
@@ -119,15 +128,6 @@
                 "tslib": "^2.2.0"
             }
         },
-        "@babel/code-frame": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
-            "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
-            "requires": {
-                "@jridgewell/gen-mapping": "^0.3.0",
-                "@jridgewell/trace-mapping": "^0.3.9"
-            }
-        },
         "@babel/code-frame": {
             "version": "7.22.5",
             "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
diff --git a/src/client/Network.ts b/src/client/Network.ts
index 70b51d036..39bf69e32 100644
--- a/src/client/Network.ts
+++ b/src/client/Network.ts
@@ -38,6 +38,7 @@ 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[], browndash?: boolean): Promise<Upload.FileResponse<T>[]> {
@@ -68,7 +69,7 @@ export namespace Networking {
             body: formData,
         };
 
-        const endpoint = browndash ? 'http://10.38.71.246:1050/uploadFormData' : '/uploadFormData';
+        const endpoint = browndash ? '[insert endpoint allowing local => browndash]' : '/uploadFormData';
         const response = await fetch(endpoint, parameters);
         return response.json();
     }
diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss
index 4e80cbeeb..cd6a1d934 100644
--- a/src/client/util/reportManager/ReportManager.scss
+++ b/src/client/util/reportManager/ReportManager.scss
@@ -7,6 +7,12 @@
     justify-content: space-between;
     align-items: center;
 
+    .header-btns {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
     h2 {
         margin: 0;
         padding: 0;
@@ -53,12 +59,14 @@
     }
 
     .report-textarea {
+        border: none;
+        outline: none;
         width: 100%;
         height: 80px;
         padding: 8px;
         resize: vertical;
         background: transparent;
-        // resize: none;
+        transition: border 0.3s ease;
     }
 
     .report-selects {
diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx
index be46ba0a8..f20c2baaa 100644
--- a/src/client/util/reportManager/ReportManager.tsx
+++ b/src/client/util/reportManager/ReportManager.tsx
@@ -12,21 +12,17 @@ import { HiOutlineArrowLeft } from 'react-icons/hi';
 import { Issue } from './reportManagerSchema';
 import { observer } from 'mobx-react';
 import { Doc } from '../../../fields/Doc';
-import { Networking } from '../../Network';
 import { MainViewModal } from '../../views/MainViewModal';
 import { Octokit } from '@octokit/core';
-import { Button, IconButton, OrientationType, Type } from 'browndash-components';
-import { BugType, FileData, Priority, ViewState, darkColors, isLightText, lightColors } from './reportManagerUtils';
-import { IssueCard, IssueView, Tag } from './ReportManagerComponents';
+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;
 
-// StrCast(Doc.UserDoc().userColor);
-// StrCast(Doc.UserDoc().userBackgroundColor);
-// StrCast(Doc.UserDoc().userVariantColor);
-
 /**
  * Class for reporting and viewing Github issues within the app.
  */
@@ -85,44 +81,28 @@ export class ReportManager extends React.Component<{}> {
     });
 
     // Form state
-
-    @observable private bugTitle = '';
-    @action setBugTitle = action((title: string) => {
-        this.bugTitle = title;
-    });
-    @observable private bugDescription = '';
-    @action setBugDescription = action((description: string) => {
-        this.bugDescription = description;
+    @observable private formData: ReportForm = emptyReportForm;
+    @action setFormData = action((newData: ReportForm) => {
+        this.formData = newData;
     });
-    @observable private bugType = '';
-    @action setBugType = action((type: string) => {
-        this.bugType = type;
-    });
-    @observable private bugPriority = '';
-    @action setBugPriority = action((priortiy: string) => {
-        this.bugPriority = priortiy;
-    });
-
-    @observable private mediaFiles: FileData[] = [];
-    @action private setMediaFiles = (files: FileData[]) => {
-        this.mediaFiles = files;
-    };
 
     public close = action(() => (this.isOpen = false));
     public open = action(async () => {
         this.isOpen = true;
         if (this.shownIssues.length === 0) {
-            this.setFetchingIssues(true);
-            try {
-                // load in the issues if not already loaded
-                const issues = (await this.getAllIssues()) as Issue[];
-                // filtering to include only open issues and exclude pull requests, maybe add a separate tab for pr's?
-                this.setShownIssues(issues.filter(issue => issue.state === 'open' && !issue.pull_request));
-            } catch (err) {
-                console.log(err);
-            }
-            this.setFetchingIssues(false);
+            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: {}) {
@@ -135,169 +115,54 @@ export class ReportManager extends React.Component<{}> {
         });
     }
 
-    /**
-     * Fethches issues from Github.
-     * @returns array of all issues
-     */
-    public async getAllIssues(): Promise<any[]> {
-        const res = await this.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');
-        }
-    }
-
     /**
      * Sends a request to Github to report a new issue with the form data.
      * @returns nothing
      */
     public async reportIssue(): Promise<void> {
-        if (this.bugTitle === '' || this.bugDescription === '' || this.bugType === '' || this.bugPriority === '') {
+        if (this.formData.title === '' || this.formData.description === '') {
             alert('Please fill out all required fields to report an issue.');
             return;
         }
+        let formattedLinks: string[] = [];
         this.setSubmitting(true);
-
-        const links = await this.uploadFilesToServer();
-        console.log(links);
-        if (!links) {
-            // error uploading files to the server
-            return;
+        if (this.formData.mediaFiles.length > 0) {
+            const links = await uploadFilesToServer(this.formData.mediaFiles);
+            console.log(links);
+            if (!links) {
+                return;
+            }
+            formattedLinks = links;
         }
-        const formattedLinks = (links ?? []).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} ${formattedLinks.length > 0 && `\n\nFiles:\n${formattedLinks.join('\n')}`}`,
-        //     labels: ['from-dash-app', this.bugType, this.bugPriority],
-        // });
+        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.');
-        //     return;
-        // }
+        // 201 status means success
+        if (req.status !== 201) {
+            alert('Error creating issue on github.');
+            return;
+        }
 
         // Reset fields
-        this.setBugTitle('');
-        this.setBugDescription('');
-        this.setMediaFiles([]);
-        this.setBugType('');
-        this.setBugPriority('');
+        this.setFormData(emptyReportForm);
         this.setSubmitting(false);
-        this.setFetchingIssues(true);
-        try {
-            // load in the issues if not already loaded
-            const issues = (await this.getAllIssues()) as Issue[];
-            // filtering to include only open issues and exclude pull requests, maybe add a separate tab for pr's?
-            this.setShownIssues(issues.filter(issue => issue.state === 'open' && !issue.pull_request));
-        } catch (err) {
-            console.log(err);
-        }
-        this.setFetchingIssues(false);
+        await this.updateIssues();
         alert('Successfully submitted issue.');
     }
 
-    /**
-     * Formats issue title.
-     *
-     * @param title title of issue
-     * @param userEmail email of issue submitter
-     * @returns formatted title
-     */
-    private formatTitle = (title: string, userEmail: string): string => `${title} - ${userEmail.replace('@brown.edu', '')}`;
-
-    // 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
-    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;
-    };
-
-    /**
-     * Gets the server file path.
-     *
-     * @param link response from file upload
-     * @returns server file path
-     */
-    private 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
-     */
-    private uploadFilesToServer = async (): Promise<string[] | undefined> => {
-        try {
-            // need to always upload to browndash
-            const links = await Networking.UploadFilesToServer(
-                this.mediaFiles.map(file => ({ file: file.file })),
-                true
-            );
-            return (links ?? []).map(this.getServerPath);
-        } catch (err) {
-            if (err instanceof Error) {
-                alert(err.message);
-            } else {
-                alert(err);
-            }
-        }
-    };
-
     /**
      * Handles file upload.
      *
      * @param files uploaded files
      */
     private onDrop = (files: File[]) => {
-        this.setMediaFiles([...this.mediaFiles, ...files.map(file => ({ _id: v4(), file }))]);
-    };
-
-    /**
-     * Returns when the issue passes the current filters.
-     *
-     * @param issue issue to check
-     * @returns boolean indicating whether the issue passes the current filters
-     */
-    private passesTagFilter = (issue: Issue) => {
-        let passesPriority = true;
-        let passesBug = true;
-        if (this.priorityFilter) {
-            passesPriority = issue.labels.some(label => {
-                if (typeof label === 'string') {
-                    return label === this.priorityFilter;
-                } else {
-                    return label.name === this.priorityFilter;
-                }
-            });
-        }
-        if (this.bugFilter) {
-            passesBug = issue.labels.some(label => {
-                if (typeof label === 'string') {
-                    return label === this.bugFilter;
-                } else {
-                    return label.name === this.bugFilter;
-                }
-            });
-        }
-        return passesPriority && passesBug;
+        this.setFormData({ ...this.formData, mediaFiles: [...this.formData.mediaFiles, ...files.map(file => ({ _id: v4(), file }))] });
     };
 
     /**
@@ -317,7 +182,7 @@ export class ReportManager extends React.Component<{}> {
                         <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.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} />
+                        <IconButton icon={<BsX color="#ffffff" />} onClick={() => this.setFormData({ ...this.formData, mediaFiles: this.formData.mediaFiles.filter(f => f._id !== fileData._id) })} />
                     </div>
                 </div>
             );
@@ -331,7 +196,7 @@ export class ReportManager extends React.Component<{}> {
                         </video>
                     </div>
                     <div className="close-btn">
-                        <IconButton icon={<BsX color="#ffffff" />} onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} />
+                        <IconButton icon={<BsX color="#ffffff" />} onClick={() => this.setFormData({ ...this.formData, mediaFiles: this.formData.mediaFiles.filter(f => f._id !== fileData._id) })} />
                     </div>
                 </div>
             );
@@ -340,7 +205,7 @@ export class ReportManager extends React.Component<{}> {
                 <div key={fileData._id} className="report-audio-wrapper">
                     <audio src={preview} controls />
                     <div className="close-btn">
-                        <IconButton icon={<BsX color="#ffffff" />} onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} />
+                        <IconButton icon={<BsX color="#ffffff" />} onClick={() => this.setFormData({ ...this.formData, mediaFiles: this.formData.mediaFiles.filter(f => f._id !== fileData._id) })} />
                     </div>
                 </div>
             );
@@ -352,94 +217,31 @@ export class ReportManager extends React.Component<{}> {
      * @returns the component that dispays all issues
      */
     private viewIssuesComponent = () => {
-        const darkMode = isLightText(StrCast(Doc.UserDoc().userBackgroundColor));
+        const darkMode = isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor));
         const colors = darkMode ? darkColors : lightColors;
-        const isTagDarkMode = isLightText(StrCast(Doc.UserDoc().userVariantColor));
-        const activeTagTextColor = isTagDarkMode ? darkColors.text : lightColors.text;
 
         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>
-                        <Button
-                            type={Type.TERT}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                            text="Report Issue"
-                            onClick={() => {
-                                this.setViewState(ViewState.CREATE);
-                            }}
-                        />
-                    </div>
-                    <input
-                        className="report-input"
-                        type="text"
-                        placeholder="Filter by query..."
-                        onChange={e => {
-                            this.setQuery(e.target.value);
-                        }}
-                        required
-                    />
-                    <div className="issues-filters">
-                        <div className="issues-filter">
-                            <Tag
-                                text={'All'}
-                                onClick={() => {
-                                    this.setPriorityFilter(null);
-                                }}
-                                fontSize="12px"
-                                backgroundColor={this.priorityFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
-                                color={this.priorityFilter === null ? activeTagTextColor : colors.textGrey}
-                                border
-                                borderColor={this.priorityFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : colors.border}
-                            />
-                            {Object.values(Priority).map(p => {
-                                return (
-                                    <Tag
-                                        key={p}
-                                        text={p}
-                                        onClick={() => {
-                                            this.setPriorityFilter(p);
-                                        }}
-                                        fontSize="12px"
-                                        backgroundColor={this.priorityFilter === p ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
-                                        color={this.priorityFilter === p ? activeTagTextColor : colors.textGrey}
-                                        border
-                                        borderColor={this.priorityFilter === p ? StrCast(Doc.UserDoc().userVariantColor) : colors.border}
-                                    />
-                                );
-                            })}
-                        </div>
-                        <div className="issues-filter">
-                            <Tag
-                                text={'All'}
+                        <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.setBugFilter(null);
+                                    this.setViewState(ViewState.CREATE);
                                 }}
-                                fontSize="12px"
-                                backgroundColor={this.bugFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
-                                color={this.bugFilter === null ? activeTagTextColor : colors.textGrey}
-                                border
-                                borderColor={this.bugFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : colors.border}
                             />
-                            {Object.values(BugType).map(b => {
-                                return (
-                                    <Tag
-                                        key={b}
-                                        text={b}
-                                        onClick={() => {
-                                            this.setBugFilter(b);
-                                        }}
-                                        fontSize="12px"
-                                        backgroundColor={this.bugFilter === b ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
-                                        color={this.bugFilter === b ? activeTagTextColor : colors.textGrey}
-                                        border
-                                        borderColor={this.bugFilter === b ? StrCast(Doc.UserDoc().userVariantColor) : colors.border}
-                                    />
-                                );
-                            })}
                         </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' }}>
@@ -448,7 +250,7 @@ export class ReportManager extends React.Component<{}> {
                         ) : (
                             this.shownIssues
                                 .filter(issue => issue.title.toLowerCase().includes(this.query))
-                                .filter(issue => this.passesTagFilter(issue))
+                                .filter(issue => passesTagFilter(issue, this.priorityFilter, this.bugFilter))
                                 .map(issue => (
                                     <IssueCard
                                         key={issue.number}
@@ -482,7 +284,7 @@ export class ReportManager extends React.Component<{}> {
      * @returns the form component for submitting issues
      */
     private reportIssueComponent = () => {
-        const darkMode = isLightText(StrCast(Doc.UserDoc().userBackgroundColor));
+        const darkMode = isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor));
         const colors = darkMode ? darkColors : lightColors;
 
         return (
@@ -502,38 +304,37 @@ export class ReportManager extends React.Component<{}> {
                 </div>
                 <div className="report-section">
                     <label className="report-label">Please provide a title for the bug</label>
-                    <input className="report-input" value={this.bugTitle} type="text" placeholder="Title..." onChange={e => this.setBugTitle(e.target.value)} required />
+                    <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>
-                    <textarea className="report-textarea" value={this.bugDescription} placeholder="Description..." onChange={e => this.setBugDescription(e.target.value)} required />
+                    <FormTextArea value={this.formData.description} placeholder="Description..." onChange={val => this.setFormData({ ...this.formData, description: val })} />
                 </div>
                 <div className="report-selects">
-                    <select className="report-select" name="bugType" onChange={e => (this.bugType = e.target.value)}>
-                        <option value="" disabled selected>
-                            Type
-                        </option>
-                        <option className="report-opt" value={BugType.BUG}>
-                            Bug
-                        </option>
-                        <option className="report-opt" value={BugType.COSMETIC}>
-                            Poor Design or Cosmetic
-                        </option>
-                        <option className="report-opt" value={BugType.DOCUMENTATION}>
-                            Poor Documentation
-                        </option>
-                        <option className="report-opt" value={BugType.ENHANCEMENT}>
-                            New feature or request
-                        </option>
-                    </select>
-                    <select className="report-select" name="priority" onChange={e => (this.bugPriority = e.target.value)}>
-                        <option className="report-opt" value="" disabled selected>
-                            Priority
-                        </option>
-                        <option value={Priority.LOW}>Low</option>
-                        <option value={Priority.MEDIUM}>Medium</option>
-                        <option value={Priority.HIGH}>High</option>
-                    </select>
+                    <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}
@@ -545,7 +346,7 @@ export class ReportManager extends React.Component<{}> {
                         'audio/ogg': ['.ogg'],
                     }}>
                     {({ getRootProps, getInputProps }) => (
-                        <div {...getRootProps({ className: 'dropzone' })}>
+                        <div {...getRootProps({ className: 'dropzone' })} style={{ borderColor: isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor)) ? darkColors.border : lightColors.border }}>
                             <input {...getInputProps()} />
                             <div className="dropzone-instructions">
                                 <AiOutlineUpload size={25} />
@@ -554,12 +355,12 @@ export class ReportManager extends React.Component<{}> {
                         </div>
                     )}
                 </Dropzone>
-                {this.mediaFiles.length > 0 && <ul className="file-list">{this.mediaFiles.map(file => this.getMediaPreview(file))}</ul>}
+                {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().userColor)}
+                        color={StrCast(Doc.UserDoc().userVariantColor)}
                         icon={<ReactLoading type="spin" color={'#ffffff'} width={20} height={20} />}
                         iconPlacement="right"
                         onClick={() => {
@@ -570,13 +371,12 @@ export class ReportManager extends React.Component<{}> {
                     <Button
                         text="Submit"
                         type={Type.TERT}
-                        color={StrCast(Doc.UserDoc().userColor)}
+                        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>
diff --git a/src/client/util/reportManager/ReportManagerComponents.tsx b/src/client/util/reportManager/ReportManagerComponents.tsx
index 651442030..8f882c7f2 100644
--- a/src/client/util/reportManager/ReportManagerComponents.tsx
+++ b/src/client/util/reportManager/ReportManagerComponents.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Issue } from './reportManagerSchema';
-import { darkColors, getLabelColors, isLightText, lightColors } from './reportManagerUtils';
+import { darkColors, dashBlue, getLabelColors, isDarkMode, lightColors } from './reportManagerUtils';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
@@ -8,9 +8,56 @@ import { StrCast } from '../../../fields/Types';
 import { Doc } from '../../../fields/Doc';
 
 /**
- * Mini components to render issues.
+ * 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;
@@ -19,11 +66,11 @@ interface IssueCardProps {
 // 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('');
-    const [borderColor, setBorderColor] = React.useState('');
+    const [bgColor, setBgColor] = React.useState('transparent');
+    const [borderColor, setBorderColor] = React.useState('transparent');
 
     const resetColors = () => {
-        const darkMode = isLightText(StrCast(Doc.UserDoc().userBackgroundColor));
+        const darkMode = isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor));
         const colors = darkMode ? darkColors : lightColors;
         setTextColor(colors.text);
         setBorderColor(colors.border);
@@ -31,10 +78,10 @@ export const IssueCard = ({ issue, onSelect }: IssueCardProps) => {
     };
 
     const handlePointerOver = () => {
-        const darkMode = isLightText(StrCast(Doc.UserDoc().userVariantColor));
+        const darkMode = isDarkMode(StrCast(Doc.UserDoc().userColor));
         setTextColor(darkMode ? darkColors.text : lightColors.text);
-        setBorderColor(StrCast(Doc.UserDoc().userVariantColor));
-        setBgColor(StrCast(Doc.UserDoc().userVariantColor));
+        setBorderColor(StrCast(Doc.UserDoc().userColor));
+        setBgColor(StrCast(Doc.UserDoc().userColor));
     };
 
     React.useEffect(() => {
@@ -165,10 +212,6 @@ export const IssueView = ({ issue }: IssueViewProps) => {
         const validPromise: Promise<boolean> = new Promise(resolve => {
             imgElement.addEventListener('load', () => resolve(true));
             imgElement.addEventListener('error', () => resolve(false));
-            // if taking too long to load, return prematurely (when the browndash server is down)
-            // setTimeout(() => {
-            //     resolve(false);
-            // }, 1500);
         });
         imgElement.src = src;
         return validPromise;
@@ -180,9 +223,6 @@ export const IssueView = ({ issue }: IssueViewProps) => {
         const validPromise: Promise<boolean> = new Promise(resolve => {
             videoElement.addEventListener('loadeddata', () => resolve(true));
             videoElement.addEventListener('error', () => resolve(false));
-            // setTimeout(() => {
-            //     resolve(false);
-            // }, 1500);
         });
         videoElement.src = src;
         return validPromise;
@@ -194,9 +234,6 @@ export const IssueView = ({ issue }: IssueViewProps) => {
         const validPromise: Promise<boolean> = new Promise(resolve => {
             audioElement.addEventListener('loadeddata', () => resolve(true));
             audioElement.addEventListener('error', () => resolve(false));
-            // setTimeout(() => {
-            //     resolve(false);
-            // }, 1500);
         });
         audioElement.src = src;
         return validPromise;
@@ -257,3 +294,67 @@ export const Tag = ({ text, color, backgroundColor, fontSize, border, borderColo
         </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/reportManagerUtils.ts b/src/client/util/reportManager/reportManagerUtils.ts
index 682113a89..d8344220f 100644
--- a/src/client/util/reportManager/reportManagerUtils.ts
+++ b/src/client/util/reportManager/reportManagerUtils.ts
@@ -1,5 +1,11 @@
 // 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,
@@ -23,6 +29,174 @@ export interface FileData {
     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 = 'https://browndash.com/';
+
+    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 })),
+            true
+        );
+        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'],
@@ -38,9 +212,6 @@ export const bugColors: { [key: string]: string[] } = {
     enhancement: ['#36d4f0', '#ffffff'],
 };
 
-export const prioritySet = new Set(Object.values(Priority));
-export const bugSet = new Set(Object.values(BugType));
-
 export const getLabelColors = (label: string): string[] => {
     if (prioritySet.has(label as Priority)) {
         return priorityColors[label];
@@ -66,7 +237,7 @@ const hexToRgb = (hex: string) => {
 };
 
 // function that returns whether text should be light on the given bg color
-export const isLightText = (bgHex: string): boolean => {
+export const isDarkMode = (bgHex: string): boolean => {
     const { r, g, b } = hexToRgb(bgHex);
     return r * 0.299 + g * 0.587 + b * 0.114 <= 186;
 };
@@ -82,3 +253,5 @@ export const darkColors = {
     textGrey: '#d6d6d6',
     border: '#717171',
 };
+
+export const dashBlue = '#4476f7';
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 6105cc1b5..3a3b2fc38 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -56,24 +56,25 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     propertyToggleBtn = (label: (on?: any) => string, property: string, tooltip: (on?: any) => string, icon: (on?: any) => any, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => {
         const targetDoc = useUserDoc ? Doc.UserDoc() : this.selectedDoc;
         const onPropToggle = (dv: Opt<DocumentView>, doc: Doc, prop: string) => ((dv?.layoutDoc || doc)[prop] = (dv?.layoutDoc || doc)[prop] ? false : true);
-        return !targetDoc ? null : <Toggle
-            toggleStatus={BoolCast(targetDoc[property])}
-            text={label(targetDoc?.[property])}
-            color={StrCast(Doc.UserDoc().userColor)}
-            icon={icon(targetDoc?.[property] as any)}
-            iconPlacement={'left'}
-            align={'flex-start'}
-            fillWidth={true}
-            toggleType={ToggleType.BUTTON}
-            onClick={undoable(() => {
-                if (SelectionManager.Views().length > 1) {
-                    SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
-                } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
-            }, property)}
-        />
+        return !targetDoc ? null : (
+            <Toggle
+                toggleStatus={BoolCast(targetDoc[property])}
+                text={label(targetDoc?.[property])}
+                color={StrCast(Doc.UserDoc().userColor)}
+                icon={icon(targetDoc?.[property] as any)}
+                iconPlacement={'left'}
+                align={'flex-start'}
+                fillWidth={true}
+                toggleType={ToggleType.BUTTON}
+                onClick={undoable(() => {
+                    if (SelectionManager.Views().length > 1) {
+                        SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
+                    } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
+                }, property)}
+            />
+        );
     };
 
-
     // this implments a container pattern by marking the targetDoc (collection) as a lightbox
     // that always fits its contents to its container and that hides all other documents when
     // a link is followed that targets a 'lightbox' destination
@@ -148,7 +149,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
 
     @computed get clustersButton() {
         return this.propertyToggleBtn(
-            on => (on ?'DISABLE CLUSTERS' : 'HIGHLIGHT CLUSTERS'),
+            on => (on ? 'DISABLE CLUSTERS' : 'HIGHLIGHT CLUSTERS'),
             '_freeform_useClusters',
             on => `${on ? 'Hide' : 'Show'} clusters`,
             on => <FaBraille />
@@ -163,12 +164,13 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         );
     }
 
-    @computed get forceActiveButton() { //select text
+    @computed get forceActiveButton() {
+        //select text
         return this.propertyToggleBtn(
-            on => on ? 'INACTIVE INTERACTION' : 'ACTIVE INTERACTION',
+            on => (on ? 'INACTIVE INTERACTION' : 'ACTIVE INTERACTION'),
             '_forceActive',
             on => `${on ? 'Select to activate' : 'Contents always active'} `,
-            on => <MdTouchApp/> // 'eye'
+            on => <MdTouchApp /> // 'eye'
         );
     }
 
@@ -218,7 +220,8 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     }
 
     @computed get captionButton() {
-        return this.propertyToggleBtn( //DEVELOPER
+        return this.propertyToggleBtn(
+            //DEVELOPER
             on => (on ? 'HIDE CAPTION' : 'SHOW CAPTION'), //'Caption',
             '_layout_showCaption',
             on => `${on ? 'Hide' : 'Show'} caption footer`,
@@ -227,17 +230,19 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         );
     }
 
-    @computed get chromeButton() { // developer -- removing UI decoration
+    @computed get chromeButton() {
+        // developer -- removing UI decoration
         return this.propertyToggleBtn(
-            on => on ? 'ENABLE UI CONTROLS' : 'DISABLE UI CONTROLS',
+            on => (on ? 'ENABLE UI CONTROLS' : 'DISABLE UI CONTROLS'),
             '_chromeHidden',
             on => `${on ? 'Show' : 'Hide'} editing UI`,
-            on => on? <TbEditCircle/> :  <TbEditCircleOff/> , // 'edit',
+            on => (on ? <TbEditCircle /> : <TbEditCircleOff />), // 'edit',
             (dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden)
         );
     }
 
-    @computed get layout_autoHeightButton() { // store previous dimensions to store old values 
+    @computed get layout_autoHeightButton() {
+        // store previous dimensions to store old values
         return this.propertyToggleBtn(
             on => 'Auto\xA0Size',
             '_layout_autoHeight',
@@ -251,7 +256,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             on => (on ? 'HIDE GRID' : 'DISPLAY GRID'),
             '_freeform_backgroundGrid',
             on => `Display background grid in collection`,
-            on => (on ? <MdGridOff /> :<MdGridOn /> ) //'border-all'
+            on => (on ? <MdGridOff /> : <MdGridOn />) //'border-all'
         );
     }
 
@@ -288,13 +293,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     //         }
     //     );
     // }
-    @computed get snapButton() { // THESE ARE NOT COMING
+    @computed get snapButton() {
+        // THESE ARE NOT COMING
         return this.propertyToggleBtn(
             on => (on ? 'HIDE SNAP LINES' : 'SHOW SNAP LINES'),
             'freeform_snapLines',
             on => `Display snapping lines when objects are dragged`,
             on => <TfiBarChart />, //'th',
-            undefined,
+            undefined
         );
     }
 
@@ -346,11 +352,11 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const followLoc = this.selectedDoc._followLinkLocation;
         const linkedToLightboxView = () => LinkManager.Links(this.selectedDoc).some(link => LinkManager.getOppositeAnchor(link, this.selectedDoc)?._isLightbox);
 
-        if (followLoc === OpenWhere.lightbox && !linkedToLightboxView()) return 'linkInPlace'
-        else if (linkButton && followLoc === OpenWhere.addRight) return 'linkOnRight'
-        else if (linkButton && this.selectedDoc._followLinkLocation === OpenWhere.lightbox && linkedToLightboxView()) return 'enterPortal'
-        else if (ScriptCast(this.selectedDoc.onClick)?.script.originalScript.includes('toggleDetail')) return 'toggleDetail'
-        else return 'nothing'
+        if (followLoc === OpenWhere.lightbox && !linkedToLightboxView()) return 'linkInPlace';
+        else if (linkButton && followLoc === OpenWhere.addRight) return 'linkOnRight';
+        else if (linkButton && this.selectedDoc._followLinkLocation === OpenWhere.lightbox && linkedToLightboxView()) return 'enterPortal';
+        else if (ScriptCast(this.selectedDoc.onClick)?.script.originalScript.includes('toggleDetail')) return 'toggleDetail';
+        else return 'nothing';
     }
 
     @computed
@@ -362,22 +368,20 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             ['linkInPlace', 'Open Link in Lightbox'],
             ['linkOnRight', 'Open Link on Right'],
         ];
-        
+
         const items: IListItemProps[] = buttonList.map(value => {
-            return (
-                {
-                    text: value[1],
-                    val: value[1],
-                }
-            );
+            return {
+                text: value[1],
+                val: value[1],
+            };
         });
-        console.log("click val: ", this.onClickVal)
+        console.log('click val: ', this.onClickVal);
         return !this.selectedDoc ? null : (
             <Dropdown
-                tooltip={'Choose onClick behavior'} 
+                tooltip={'Choose onClick behavior'}
                 items={items}
                 selectedVal={this.onClickVal}
-                setSelectedVal={(val) => this.handleOptionChange(val as string)}
+                setSelectedVal={val => this.handleOptionChange(val as string)}
                 title={'Choose onClick behaviour'}
                 color={StrCast(Doc.UserDoc().userColor)}
                 dropdownType={DropdownType.SELECT}
-- 
cgit v1.2.3-70-g09d2


From 31368b599dee83ccd2538f33b760ae25f19073cc Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 20 Jul 2023 16:42:50 -0400
Subject: components + homepage

---
 src/client/util/GroupManager.scss    |  66 ++++++++++++++-------
 src/client/util/GroupManager.tsx     | 112 +++++++++++++++++++----------------
 src/client/util/GroupMemberView.scss |  33 ++++++++---
 src/client/util/GroupMemberView.tsx  |  47 +++++++++++----
 src/client/util/SharingManager.scss  | 109 +++++++++++++++++-----------------
 src/client/util/SharingManager.tsx   |  72 ++++++++++++----------
 src/client/views/DashboardView.tsx   |   2 +-
 src/client/views/PropertiesView.scss |  44 +++++---------
 src/client/views/PropertiesView.tsx  |  59 +++++++++---------
 src/client/views/topbar/TopBar.tsx   |  18 +++---
 10 files changed, 312 insertions(+), 250 deletions(-)

(limited to 'src')

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..5802d5ee0 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 } 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={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={this.createGroup} />
+                </div>
             </div>
         );
 
@@ -353,37 +366,34 @@ 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={"tertiary"} 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..f2050dc61 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -8,6 +8,7 @@ import { StrCast } from "../../fields/Types";
 import { MainViewModal } from "../views/MainViewModal";
 import { GroupManager, UserOptions } from "./GroupManager";
 import "./GroupMemberView.scss";
+import { Button, IconButton, Size } from "browndash-components";
 
 interface GroupMemberViewProps {
     group: Doc;
@@ -28,7 +29,7 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
         const hasEditAccess = GroupManager.Instance.hasEditAccess(this.props.group);
 
         return (!this.props.group ? null :
-            <div className="editing-interface">
+            <div className="editing-interface" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
                 <div className="editing-header">
                     <input
                         className="group-title"
@@ -38,28 +39,48 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
                         disabled={!hasEditAccess}
                     >
                     </input>
-                    <div className={"memberView-closeButton"} onClick={action(this.props.onCloseButtonClick)}>
-                        <FontAwesomeIcon icon={"times"} color={"black"} size={"lg"} />
+                    <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) ?
                         <div className="group-buttons">
-                            <div className="add-member-dropdown">
-                                <Select
+                            <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"}
                                     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 className={"delete-button"}>
+                                <Button text={"Delete Group"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.props.group)} />
+                            </div>
                         </div> :
                         null}
                     <div
@@ -69,7 +90,7 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
                         Emails {this.memberSort === "ascending" ? "↑" : this.memberSort === "descending" ? "↓" : ""} {/* → */}
                     </div>
                 </div>
-                <hr />
+                <div className={'style-divider'} style={{background: StrCast(Doc.UserDoc().userColor)}}/>
                 <div className="editing-contents"
                     style={{ height: hasEditAccess ? "62%" : "85%" }}
                 >
@@ -83,7 +104,7 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
                             </div>
                             {hasEditAccess ?
                                 <div className={"remove-button"} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}>
-                                    <FontAwesomeIcon icon={"trash-alt"} size={"sm"} />
+                                    <IconButton icon={<FontAwesomeIcon icon={'trash-alt'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)} />
                                 </div>
                                 : null}
                         </div>
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 abec58a26..795df9c08 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 } from 'browndash-components';
 import { concat, intersection } from 'lodash';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -525,13 +525,11 @@ 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>
+                        <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 ? (
@@ -557,28 +555,26 @@ export class SharingManager extends React.Component<{}> {
                         color: StrCast(Doc.UserDoc().userColor)
                     }}
                 >
-                    <p className="share-title">
+                    <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>
+                        <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={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} icon={<FontAwesomeIcon icon={"copy"} size="sm" />} iconPlacement={"left"} text={"Copy Guest URL"} />
+                    </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 +586,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 +611,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={"tertiary"} 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>
@@ -627,25 +638,22 @@ 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>
                         </div>
                         <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" />
+                                <div className="title-group" >
+                                    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>
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/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 060b506e3..b79486167 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -42,16 +42,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 {
@@ -68,14 +58,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;
@@ -83,18 +78,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;
@@ -102,18 +97,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;
@@ -177,19 +172,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 {
@@ -238,6 +221,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 a4b3899eb..27b9c3c7a 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,25 +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>
                 <div>
-                    <br></br> Individual Users with Access to this Document
+                    <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>
-                <div className="propertiesView-sharingTable">{<div> {individualTableEntries}</div>}</div>
                 {groupTableEntries.length > 0 ? (
                     <div>
                         <div>
                             <br></br> Groups with Access to this Document
                         </div>
-                        <div className="propertiesView-sharingTable">{<div> {groupTableEntries}</div>}</div>
+                        <div className="propertiesView-sharingTable" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+                            {<div> {groupTableEntries}</div>}
+                        </div>
                     </div>
                 ) : null}
                 <br></br> Guest
-                <div>{this.colorACLDropDown('Guest', true, publicPermission!, true)}</div>
+                <div>{this.colorACLDropDown('Guest', showAdmin, guestPermission!, true)}</div>
             </div>
         );
     }
@@ -1142,26 +1148,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/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 79f41fe9d..ec4252eb8 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -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" />} />
-- 
cgit v1.2.3-70-g09d2


From 955ca75035aaa223fc8bc07416ca4c31e7a9d1c2 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Thu, 27 Jul 2023 13:39:22 -0400
Subject: removed new endpoint for now

---
 src/client/util/reportManager/ReportManager.tsx     | 16 ++++++----------
 src/client/util/reportManager/reportManagerUtils.ts |  5 +----
 2 files changed, 7 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx
index f20c2baaa..e684bd637 100644
--- a/src/client/util/reportManager/ReportManager.tsx
+++ b/src/client/util/reportManager/ReportManager.tsx
@@ -124,15 +124,13 @@ export class ReportManager extends React.Component<{}> {
             alert('Please fill out all required fields to report an issue.');
             return;
         }
-        let formattedLinks: string[] = [];
         this.setSubmitting(true);
+        let formattedLinks: string[] = [];
         if (this.formData.mediaFiles.length > 0) {
             const links = await uploadFilesToServer(this.formData.mediaFiles);
-            console.log(links);
-            if (!links) {
-                return;
+            if (links) {
+                formattedLinks = links;
             }
-            formattedLinks = links;
         }
 
         const req = await this.octokit.request('POST /repos/{owner}/{repo}/issues', {
@@ -146,14 +144,12 @@ export class ReportManager extends React.Component<{}> {
         // 201 status means success
         if (req.status !== 201) {
             alert('Error creating issue on github.');
-            return;
+        } else {
+            await this.updateIssues();
+            alert('Successfully submitted issue.');
         }
-
-        // Reset fields
         this.setFormData(emptyReportForm);
         this.setSubmitting(false);
-        await this.updateIssues();
-        alert('Successfully submitted issue.');
     }
 
     /**
diff --git a/src/client/util/reportManager/reportManagerUtils.ts b/src/client/util/reportManager/reportManagerUtils.ts
index d8344220f..45727e203 100644
--- a/src/client/util/reportManager/reportManagerUtils.ts
+++ b/src/client/util/reportManager/reportManagerUtils.ts
@@ -110,10 +110,7 @@ export const getServerPath = (link: any): string => {
 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 })),
-            true
-        );
+        const links = await Networking.UploadFilesToServer(mediaFiles.map(file => ({ file: file.file })));
         return (links ?? []).map(getServerPath).map(fileLinktoServerLink);
     } catch (err) {
         if (err instanceof Error) {
-- 
cgit v1.2.3-70-g09d2


From 7535e446e9a8aa2a0afaf84c667f3a58f437d99b Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Thu, 27 Jul 2023 13:50:32 -0400
Subject: fixed media on localhost, not really practical but still:

---
 .../util/reportManager/ReportManagerComponents.tsx  | 21 +++++++++++++++++++++
 src/client/util/reportManager/reportManagerUtils.ts |  2 +-
 2 files changed, 22 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/util/reportManager/ReportManagerComponents.tsx b/src/client/util/reportManager/ReportManagerComponents.tsx
index 8f882c7f2..e870c073d 100644
--- a/src/client/util/reportManager/ReportManagerComponents.tsx
+++ b/src/client/util/reportManager/ReportManagerComponents.tsx
@@ -120,6 +120,7 @@ export const IssueView = ({ issue }: IssueViewProps) => {
         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(
@@ -129,6 +130,9 @@ export const IssueView = ({ issue }: IssueViewProps) => {
                 } 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;
                 }
@@ -189,6 +193,23 @@ export const IssueView = ({ issue }: IssueViewProps) => {
         }
     };
 
+    // 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':
diff --git a/src/client/util/reportManager/reportManagerUtils.ts b/src/client/util/reportManager/reportManagerUtils.ts
index 45727e203..b95417aa1 100644
--- a/src/client/util/reportManager/reportManagerUtils.ts
+++ b/src/client/util/reportManager/reportManagerUtils.ts
@@ -84,7 +84,7 @@ export const formatTitle = (title: string, userEmail: string): string => `${titl
 // 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 = 'https://browndash.com/';
+    const serverUrl = window.location.href.includes('browndash') ? 'https://browndash.com/' : 'http://localhost:1050/';
 
     const regex = 'public';
     const publicIndex = fileLink.indexOf(regex) + regex.length;
-- 
cgit v1.2.3-70-g09d2


From d33dd3cfd3cbeac764f2d0f7869bd8717da1d734 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 27 Jul 2023 14:15:01 -0400
Subject: fixed some type errors.

---
 src/client/util/SharingManager.tsx                 | 61 ++++++++++------------
 .../views/nodes/formattedText/DashFieldView.tsx    |  6 ++-
 2 files changed, 33 insertions(+), 34 deletions(-)

(limited to 'src')

diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 795df9c08..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 { Button, IconButton, Size } 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';
@@ -525,12 +525,10 @@ export class SharingManager extends React.Component<{}> {
             const permissions = uniform ? StrCast(targetDoc?.[groupKey]) : '-multiple-';
 
             return !permissions ? null : (
-                <div key={groupKey} className={'container'} style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+                <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 ? (
-                        <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (GroupManager.Instance.currentGroup = group))} />
-                    ) : 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)}>
@@ -549,32 +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" style={{color: StrCast(Doc.UserDoc().userColor)}}>
+                        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>
+                        <b>Share </b>
                         {this.focusOn(docs.length < 2 ? StrCast(targetDoc?.title, 'this document') : '-multiple-')}
                     </p>
                     <div className="share-copy-link">
-                        <Button type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} icon={<FontAwesomeIcon icon={"copy"} size="sm" />} iconPlacement={"left"} text={"Copy Guest URL"} />
+                        <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)}
-                        />
+                        <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" style={{border: StrCast(Doc.UserDoc().userColor)}}>
+                            <div className="share-setup" style={{ border: StrCast(Doc.UserDoc().userColor) }}>
                                 <Select
                                     className="user-search"
                                     placeholder="Enter user or group name..."
@@ -611,8 +605,8 @@ export class SharingManager extends React.Component<{}> {
                                         {this.sharingOptions(true)}
                                     </select>
                                 </div>
-                                <div className='share-button'>
-                                    <Button text={"SHARE"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={this.share} />
+                                <div className="share-button">
+                                    <Button text={'SHARE'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={this.share} />
                                 </div>
                             </div>
                             <div className="sort-checkboxes">
@@ -638,22 +632,30 @@ export class SharingManager extends React.Component<{}> {
                             </div>
                         </div>
                     )}
-                    <div className="main-container" style={{color: StrCast(Doc.UserDoc().userColor), border: StrCast(Doc.UserDoc().userColor)}}>
+                    <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
-                                    <IconButton icon={<FontAwesomeIcon icon={this.individualSort === 'ascending' ? 'caret-up' : this.individualSort === 'descending' ? 'caret-down' : 'caret-right'}/>} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
+                                    <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>
                         </div>
                         <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" >
+                                <div className="title-group">
                                     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)} />
+                                    <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>
@@ -665,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/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>
         );
-- 
cgit v1.2.3-70-g09d2


From bc19fd4221c1bd06135c894e5ed2edcfdb61b0be Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 27 Jul 2023 15:09:35 -0400
Subject: fixed FontIconBox scripts to set 'this' to fix tool bars buttons not
 working. enabled access to contextMenu in treeView and topBar even when
 hideContextMenu is set

---
 src/client/views/collections/CollectionMenu.tsx    |  37 ++---
 src/client/views/collections/TreeView.tsx          |  63 ++++----
 src/client/views/nodes/FontIconBox/FontIconBox.tsx | 165 +++++++++------------
 3 files changed, 120 insertions(+), 145 deletions(-)

(limited to 'src')

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/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index d904749b1..51c70633c 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -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);
         }
     };
 
@@ -540,8 +538,8 @@ 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))
+        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 +579,10 @@ export class TreeView extends React.Component<TreeViewProps> {
                 );
             }
             return (
-                <div style={{ 
-                    color: color
-                 }}>
+                <div
+                    style={{
+                        color: color,
+                    }}>
                     {!docs?.length || this.props.AddToMap /* hack to identify pres box trees */ ? null : (
                         <div className={'treeView-sorting'}>
                             <IconButton
@@ -725,26 +724,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 +768,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}
@@ -1015,9 +1005,10 @@ export class TreeView extends React.Component<TreeViewProps> {
                     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),
                         }}
                     />
                 </div>
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index 3ec53beac..da1b89200 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -86,10 +86,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 +124,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 +204,69 @@ 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')
+                console.log('selected');
                 if (selected) {
                     if (StrCast(selected.type) === DocumentType.COL) {
                         text = StrCast(selected._type_collection);
-                        console.log("collection selected", text)
+                        console.log('collection selected', text);
                     } else {
-                        console.log("doc selected", selected.title);
+                        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);
+        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 +277,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 +293,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 tooltip={tooltip}
                 label={this.label}
             />
-        )
+        );
     }
 
     @computed get toggleButton() {
@@ -315,25 +302,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 +330,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>
         );
@@ -403,7 +385,8 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             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}/>
+                    <IconButton tooltip={tooltip} 
+                    color={color} icon={this.Icon(color)!} label={this.label}/>
                 );
                 break;
             case ButtonType.TextButton: 
@@ -412,7 +395,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 );
                 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}/>
+                    <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;
         }
-- 
cgit v1.2.3-70-g09d2


From 5fd41117708e496113589f6a00cd5ef7f1bb9a53 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 27 Jul 2023 15:36:52 -0400
Subject: removed delete from treeview context menu. fixed close in treeView to
 not readd when closing from recently Closed.

---
 src/client/views/DocComponent.tsx         | 2 +-
 src/client/views/collections/TreeView.tsx | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

(limited to 'src')

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/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 51c70633c..a04f640df 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -342,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;
@@ -793,7 +792,6 @@ 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' };
@@ -807,7 +805,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                 ? [openEmbedding, makeFolder]
                 : this.doc._type_collection === CollectionViewType.Docking
                 ? []
-                : [deleteItem, openEmbedding, focusDoc]),
+                : [openEmbedding, focusDoc]),
         ];
     };
     childContextMenuItems = () => {
-- 
cgit v1.2.3-70-g09d2


From 9c18c60760098e0df4fddb6dccf391c235e6e0e4 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 27 Jul 2023 22:37:42 -0400
Subject: fixed importElementBox and made importBox be a masonry view.  fixed
 clicking background of importBox to deselect everything. fixed masonry view
 documennt screentolocal and fixed  column handle placement.  fixed 'never'
 disable click script flag.  fixed color of documentdeocrations title.

---
 src/Utils.ts                                       |  2 +-
 src/client/documents/Documents.ts                  | 21 +++++-
 src/client/util/CurrentUserUtils.ts                | 16 ++--
 src/client/util/SelectionManager.ts                |  3 +
 src/client/views/DocumentDecorations.tsx           |  8 +-
 .../collections/CollectionMasonryViewFieldRow.tsx  | 40 ++++++----
 .../views/collections/CollectionStackingView.scss  |  1 +
 .../views/collections/CollectionStackingView.tsx   | 25 +++---
 src/client/views/collections/TreeView.tsx          |  7 +-
 src/client/views/nodes/DocumentContentsView.tsx    |  4 +-
 src/client/views/nodes/DocumentView.tsx            | 13 +---
 .../views/nodes/importBox/ImportElementBox.tsx     | 88 +++++++---------------
 12 files changed, 116 insertions(+), 112 deletions(-)

(limited to 'src')

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/documents/Documents.ts b/src/client/documents/Documents.ts
index 5ef033e35..ff427b96c 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -58,6 +58,7 @@ import { SliderBox } from '../views/nodes/SliderBox';
 import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox';
 import { PresBox } from '../views/nodes/trails/PresBox';
 import { PresElementBox } from '../views/nodes/trails/PresElementBox';
+import { ImportElementBox } from '../views/nodes/importBox/ImportElementBox';
 import { VideoBox } from '../views/nodes/VideoBox';
 import { WebBox } from '../views/nodes/WebBox';
 import { SearchBox } from '../views/search/SearchBox';
@@ -354,6 +355,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;
@@ -620,7 +622,7 @@ export namespace Docs {
                 DocumentType.WEBCAM,
                 {
                     layout: { view: RecordingBox, dataField: defaultDataKey },
-                    options: { systemIcon: 'BsFillCameraVideoFill'  },
+                    options: { systemIcon: 'BsFillCameraVideoFill' },
                 },
             ],
             [
@@ -693,7 +695,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',
+                    },
                 },
             ],
         ]);
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 2e4fb0f1c..a86011042 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)'}}));
     }
@@ -805,19 +805,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/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/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index bab07ac96..956dac555 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -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/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/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..e964d41a8 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 = {
@@ -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);
     }
@@ -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 a04f640df..1098b56c2 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -795,6 +795,7 @@ export class TreeView extends React.Component<TreeViewProps> {
         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
@@ -805,6 +806,8 @@ export class TreeView extends React.Component<TreeViewProps> {
                 ? [openEmbedding, makeFolder]
                 : this.doc._type_collection === CollectionViewType.Docking
                 ? []
+                : this.props.treeView.rootDoc === Doc.MyRecentlyClosed
+                ? [reopenDoc]
                 : [openEmbedding, focusDoc]),
         ];
     };
@@ -1002,13 +1005,13 @@ export class TreeView extends React.Component<TreeViewProps> {
                     onPointerDown={this.ignoreEvent}
                     onPointerEnter={this.onPointerEnter}
                     onPointerLeave={this.onPointerLeave}>
-                    {contents}
                     <div
-                        className={`treeView-background`}
+                        className="treeView-background"
                         style={{
                             background: StrCast(Doc.UserDoc().userColor),
                         }}
                     />
+                    {contents}
                 </div>
                 {this.renderBorder}
             </>
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..977a64c2c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -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)
@@ -875,13 +874,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         // 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))
             ? 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;
     };
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
-- 
cgit v1.2.3-70-g09d2


From bf34928ad34d45f97c69da91b965c21f47edb5bf Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 27 Jul 2023 23:25:29 -0400
Subject: fixed longPress to terminate on pointerUp, not on Click.  changed
 followLink() script for buttons to return select = true if there are no
 links.  prevented turning off pointerevents for documentContents when
 isContentActive= true even if there is a click handler (this enables things
 like the imported docs background to deselect everything on click while still
 allowing the contents to be selected)

---
 src/client/util/LinkFollower.ts                         | 14 +++++++++-----
 src/client/views/MainView.tsx                           |  4 ++--
 src/client/views/collections/CollectionStackingView.tsx |  4 ++--
 src/client/views/nodes/DocumentView.tsx                 |  4 ++--
 4 files changed, 15 insertions(+), 11 deletions(-)

(limited to 'src')

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/views/MainView.tsx b/src/client/views/MainView.tsx
index 86e8bab13..dc85fdfae 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -215,7 +215,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 +534,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/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index e964d41a8..a5c276125 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -58,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?
@@ -408,7 +408,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
             e,
             this.onDividerMove,
             action(() => {
-                this._cursor = 'grab';
+                this._cursor = 'ew-resize';
                 batch.end();
             }),
             emptyFunction
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 977a64c2c..2990e2159 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -896,8 +896,8 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     };
     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
+    contentPointerEvents = () => ((!this.disableClickScriptFunc && this.onClickHandler && !this.props.onBrowseClick?.() && this.isContentActive() !== true) || this.isContentActive() === false ? 'none' : this.pointerEvents);
 
     @computed get contents() {
         TraceMobx();
-- 
cgit v1.2.3-70-g09d2


From 2eb42fd6299532d47ba16edb983e85fe49bb582f Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 28 Jul 2023 10:25:41 -0400
Subject: minor cleanup

---
 src/client/views/MainView.tsx       |  3 --
 src/client/views/pdf/AnchorMenu.tsx | 59 ++++++++++++++++++++++++++++++-------
 2 files changed, 48 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 44eeb253c..af8639d35 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -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';
@@ -66,8 +65,6 @@ import { PreviewCursor } from './PreviewCursor';
 import { PropertiesView } from './PropertiesView';
 import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider';
 import { TopBar } from './topbar/TopBar';
-import { ThemeProvider } from '@mui/material';
-import { theme } from '../theme';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 @observer
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 17a3d0a03..94bbc924a 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -309,14 +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" />} color={StrCast(Doc.UserDoc().userColor)} />
+                    <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"
@@ -330,19 +336,50 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                         mode={this.GPTMode}
                     />
                     {AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : (
-                        <IconButton tooltip={'Click to Record Annotation'} onPointerDown={this.audioDown} icon={<FontAwesomeIcon icon="microphone" />} color={StrCast(Doc.UserDoc().userColor)} />
+                        <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'} onPointerDown={this.gptEdit} icon={<FontAwesomeIcon icon="pencil-alt" />} color={StrCast(Doc.UserDoc().userColor)} />}
                     <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'} onPointerDown={this.cropDown} icon={<FontAwesomeIcon icon="image" />} color={StrCast(Doc.UserDoc().userColor)} />
+                        <IconButton
+                            tooltip="Click/Drag to create cropped image" //
+                            onPointerDown={this.cropDown}
+                            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.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'}
-- 
cgit v1.2.3-70-g09d2


From dc55e58d7e80448970a071271a96536c461f29c6 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 28 Jul 2023 10:43:08 -0400
Subject: minor tweaks

---
 package-lock.json                     | 114 +++++++++++++++++++++++++++++-----
 src/client/views/InkTranscription.tsx |   2 +-
 2 files changed, 98 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index dcfb6a11b..54d1b568c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,15 @@
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
+        "@ampproject/remapping": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+            "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+            "requires": {
+                "@jridgewell/gen-mapping": "^0.3.0",
+                "@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",
@@ -119,20 +128,6 @@
                 "tslib": "^2.2.0"
             }
         },
-        "@babel/code-frame": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
-            "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
-            "@ampproject/remapping": {
-                "version": "2.2.1",
-                "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
-                "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg=="
-            },
-            "requires": {
-                "@jridgewell/gen-mapping": "^0.3.0",
-                "@jridgewell/trace-mapping": "^0.3.9"
-            }
-        },
         "@babel/code-frame": {
             "version": "7.22.5",
             "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
@@ -6907,12 +6902,97 @@
                                         "strip-ansi": "^7.0.1"
                                     }
                                 },
+                                "string-width-cjs": {
+                                    "version": "npm:string-width@4.2.3",
+                                    "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+                                    "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+                                    "requires": {
+                                        "emoji-regex": "^8.0.0",
+                                        "is-fullwidth-code-point": "^3.0.0",
+                                        "strip-ansi": "^6.0.1"
+                                    },
+                                    "dependencies": {
+                                        "ansi-regex": {
+                                            "version": "5.0.1",
+                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+                                        },
+                                        "emoji-regex": {
+                                            "version": "8.0.0",
+                                            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+                                            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+                                        },
+                                        "strip-ansi": {
+                                            "version": "6.0.1",
+                                            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                                            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                                            "requires": {
+                                                "ansi-regex": "^5.0.1"
+                                            }
+                                        }
+                                    }
+                                },
                                 "strip-ansi": {
                                     "version": "7.1.0",
                                     "bundled": true,
                                     "requires": {
                                         "ansi-regex": "^6.0.1"
                                     }
+                                },
+                                "strip-ansi-cjs": {
+                                    "version": "npm:strip-ansi@6.0.1",
+                                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                                    "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                                    "requires": {
+                                        "ansi-regex": "^5.0.1"
+                                    },
+                                    "dependencies": {
+                                        "ansi-regex": {
+                                            "version": "5.0.1",
+                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+                                        }
+                                    }
+                                },
+                                "wrap-ansi-cjs": {
+                                    "version": "npm:wrap-ansi@7.0.0",
+                                    "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+                                    "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+                                    "requires": {
+                                        "ansi-styles": "^4.0.0",
+                                        "string-width": "^4.1.0",
+                                        "strip-ansi": "^6.0.0"
+                                    },
+                                    "dependencies": {
+                                        "ansi-regex": {
+                                            "version": "5.0.1",
+                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+                                        },
+                                        "emoji-regex": {
+                                            "version": "8.0.0",
+                                            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+                                            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+                                        },
+                                        "string-width": {
+                                            "version": "4.2.3",
+                                            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+                                            "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+                                            "requires": {
+                                                "emoji-regex": "^8.0.0",
+                                                "is-fullwidth-code-point": "^3.0.0",
+                                                "strip-ansi": "^6.0.1"
+                                            }
+                                        },
+                                        "strip-ansi": {
+                                            "version": "6.0.1",
+                                            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                                            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                                            "requires": {
+                                                "ansi-regex": "^5.0.1"
+                                            }
+                                        }
+                                    }
                                 }
                             }
                         },
@@ -8417,7 +8497,7 @@
                             }
                         },
                         "string-width-cjs": {
-                            "version": "npm:string-width@4.2.3",
+                            "version": "npm:string-width-cjs@4.2.3",
                             "bundled": true,
                             "requires": {
                                 "emoji-regex": "^8.0.0",
@@ -8440,7 +8520,7 @@
                             }
                         },
                         "strip-ansi-cjs": {
-                            "version": "npm:strip-ansi@6.0.1",
+                            "version": "npm:strip-ansi-cjs@6.0.1",
                             "bundled": true,
                             "requires": {
                                 "ansi-regex": "^5.0.1"
@@ -8599,7 +8679,7 @@
                             }
                         },
                         "wrap-ansi-cjs": {
-                            "version": "npm:wrap-ansi@7.0.0",
+                            "version": "npm:wrap-ansi-cjs@7.0.0",
                             "bundled": true,
                             "requires": {
                                 "ansi-styles": "^4.0.0",
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);
     };
-- 
cgit v1.2.3-70-g09d2


From c3ad219894475b71fa66b3b5749ba3a1da503ede Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 28 Jul 2023 11:02:41 -0400
Subject: fixes for treeView to match color palette

---
 src/client/views/collections/TreeView.tsx | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 1098b56c2..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';
@@ -537,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);
@@ -578,10 +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
@@ -660,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();
@@ -980,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,
-- 
cgit v1.2.3-70-g09d2


From 022540e2833025409fd8017c5c9ecb3bfc93867b Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 28 Jul 2023 11:08:12 -0400
Subject: minor formatting.  url field doesn't need to test for https --
 covered by testing for http

---
 src/client/views/pdf/AnchorMenu.tsx | 17 +++++++++++++++--
 src/fields/URLField.ts              |  2 +-
 2 files changed, 16 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 94bbc924a..b877cc36a 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -343,8 +343,21 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                             color={StrCast(Doc.UserDoc().userColor)}
                         />
                     )}
-                    {this.canEdit() && <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" type={Type.PRIM} icon={<FontAwesomeIcon icon={'search'} />} popup={<LinkPopup key="popup" linkCreateAnchor={this.onMakeAnchor} />} color={StrCast(Doc.UserDoc().userColor)} />
+                    {this.canEdit() && (
+                        <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" //
+                        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" //
diff --git a/src/fields/URLField.ts b/src/fields/URLField.ts
index 8db4d6003..8ac20b1e5 100644
--- a/src/fields/URLField.ts
+++ b/src/fields/URLField.ts
@@ -25,7 +25,7 @@ export abstract class URLField extends ObjectField {
     constructor(url: URL | string) {
         super();
         if (typeof url === 'string') {
-            url = (url.startsWith('http') || url.startsWith('https')) ? new URL(url) : new URL(url, window.location.origin);
+            url = url.startsWith('http') ? new URL(url) : new URL(url, window.location.origin);
         }
         this.url = url;
     }
-- 
cgit v1.2.3-70-g09d2


From 7edcc150d013343cb7feca49ce43228b99e6c7e5 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 28 Jul 2023 11:33:06 -0400
Subject: cleanup of compile errors

---
 src/client/documents/Documents.ts                  |   1 -
 src/client/util/GroupManager.tsx                   |  30 ++--
 src/client/util/GroupMemberView.tsx                | 104 +++++--------
 src/client/views/DocumentButtonBar.tsx             |   1 -
 .../views/newlightbox/ButtonMenu/ButtonMenu.tsx    |  79 +++++-----
 .../views/newlightbox/ExploreView/ExploreView.tsx  |  53 ++++---
 .../components/Recommendation/Recommendation.tsx   | 171 +++++++++++----------
 7 files changed, 211 insertions(+), 228 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index f22fa9f17..c5a9ce824 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -58,7 +58,6 @@ import { SliderBox } from '../views/nodes/SliderBox';
 import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox';
 import { PresBox } from '../views/nodes/trails/PresBox';
 import { PresElementBox } from '../views/nodes/trails/PresElementBox';
-import { ImportElementBox } from '../views/nodes/importBox/ImportElementBox';
 import { VideoBox } from '../views/nodes/VideoBox';
 import { WebBox } from '../views/nodes/WebBox';
 import { SearchBox } from '../views/search/SearchBox';
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 5802d5ee0..e406d89e7 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -15,7 +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 } from 'browndash-components';
+import { Button, IconButton, Size, Type } from 'browndash-components';
 
 /**
  * Interface for options for the react-select component
@@ -281,7 +281,7 @@ export class GroupManager extends React.Component<{}> {
      */
     private get groupCreationModal() {
         const contents = (
-            <div className="group-create" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+            <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>
@@ -297,10 +297,10 @@ export class GroupManager extends React.Component<{}> {
                         />
                     </div>
                 </div>
-                <div className="group-input" style={{border: StrCast(Doc.UserDoc().userColor)}} >
+                <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)}}>
+                <div style={{ border: StrCast(Doc.UserDoc().userColor) }}>
                     <Select
                         className="select-users"
                         isMulti
@@ -331,8 +331,8 @@ export class GroupManager extends React.Component<{}> {
                         }}
                     />
                 </div>
-                <div className={"create-button"}>
-                    <Button text={"Create"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={this.createGroup} />
+                <div className={'create-button'}>
+                    <Button text={'Create'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={this.createGroup} />
                 </div>
             </div>
         );
@@ -366,29 +366,25 @@ 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" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+            <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 icon={<FontAwesomeIcon icon={'plus'}/>} iconPlacement={'left'} text={"Create Group"} type={"tertiary"} 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)}
-                        />
+                    <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
-                        <IconButton icon={<FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'}/>} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
+                        <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={'style-divider'} style={{background: StrCast(Doc.UserDoc().userColor)}}/>
-                    <div className="group-body" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+                    <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>
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index f2050dc61..057f94f64 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -1,14 +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 { Button, IconButton, Size } from "browndash-components";
+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;
@@ -17,44 +17,37 @@ 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" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+        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"} >
-                        <Button
-                            icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
-                            onClick={action(this.props.onCloseButtonClick)}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                        />
+                        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 style={{border: StrCast(Doc.UserDoc().userColor)}} >
-                                <Select 
+                            <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={{
                                         control: () => ({
@@ -78,52 +71,33 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
                                     }}
                                 />
                             </div>
-                            <div className={"delete-button"}>
-                                <Button text={"Delete Group"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.props.group)} />
+                            <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>
+                    ) : 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>
-                <div className={'style-divider'} style={{background: StrCast(Doc.UserDoc().userColor)}}/>
-                <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)}>
+                        <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/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/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
+    );
+};
-- 
cgit v1.2.3-70-g09d2


From 08f125f5880247280c02633feeb31a8df1912b97 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 31 Jul 2023 00:06:16 -0400
Subject: fixed dictation into text boxes to stop when component unmounts.  
 fixed some icons.  fixed multiToggle for alignments.  added link docs to user
 cache.  fixed background color for tab stack buttons.    added a bunch of
 @computeds to try to help performacne with lots of docs.  chnaged text boxes
 to no expand/contract padding when selected.

---
 package-lock.json                                  | 103 ++-------------------
 package.json                                       |   2 +-
 src/client/DocServer.ts                            |   3 +-
 src/client/documents/Documents.ts                  |   4 +-
 src/client/util/CurrentUserUtils.ts                |  58 ++++++------
 src/client/util/RTFMarkup.tsx                      |   2 +-
 src/client/views/PropertiesButtons.tsx             |   4 +-
 .../views/collections/CollectionDockingView.scss   |   1 +
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  20 ++--
 .../collectionLinear/CollectionLinearView.tsx      |  33 +++----
 .../collectionSchema/CollectionSchemaView.tsx      |   1 -
 src/client/views/global/globalScripts.ts           |  52 +++++------
 src/client/views/nodes/DocumentView.tsx            |  55 ++++++-----
 src/client/views/nodes/FontIconBox/FontIconBox.tsx |  72 +++++++-------
 .../nodes/formattedText/FormattedTextBox.scss      |  20 +---
 .../views/nodes/formattedText/FormattedTextBox.tsx |  48 ++++++----
 src/fields/Doc.ts                                  |   2 +-
 src/fields/List.ts                                 |  46 ++++-----
 18 files changed, 228 insertions(+), 298 deletions(-)

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index 54d1b568c..082531ea0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6351,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",
@@ -6902,97 +6902,12 @@
                                         "strip-ansi": "^7.0.1"
                                     }
                                 },
-                                "string-width-cjs": {
-                                    "version": "npm:string-width@4.2.3",
-                                    "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-                                    "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-                                    "requires": {
-                                        "emoji-regex": "^8.0.0",
-                                        "is-fullwidth-code-point": "^3.0.0",
-                                        "strip-ansi": "^6.0.1"
-                                    },
-                                    "dependencies": {
-                                        "ansi-regex": {
-                                            "version": "5.0.1",
-                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-                                        },
-                                        "emoji-regex": {
-                                            "version": "8.0.0",
-                                            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-                                            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-                                        },
-                                        "strip-ansi": {
-                                            "version": "6.0.1",
-                                            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-                                            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-                                            "requires": {
-                                                "ansi-regex": "^5.0.1"
-                                            }
-                                        }
-                                    }
-                                },
                                 "strip-ansi": {
                                     "version": "7.1.0",
                                     "bundled": true,
                                     "requires": {
                                         "ansi-regex": "^6.0.1"
                                     }
-                                },
-                                "strip-ansi-cjs": {
-                                    "version": "npm:strip-ansi@6.0.1",
-                                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-                                    "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-                                    "requires": {
-                                        "ansi-regex": "^5.0.1"
-                                    },
-                                    "dependencies": {
-                                        "ansi-regex": {
-                                            "version": "5.0.1",
-                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-                                        }
-                                    }
-                                },
-                                "wrap-ansi-cjs": {
-                                    "version": "npm:wrap-ansi@7.0.0",
-                                    "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-                                    "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-                                    "requires": {
-                                        "ansi-styles": "^4.0.0",
-                                        "string-width": "^4.1.0",
-                                        "strip-ansi": "^6.0.0"
-                                    },
-                                    "dependencies": {
-                                        "ansi-regex": {
-                                            "version": "5.0.1",
-                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-                                        },
-                                        "emoji-regex": {
-                                            "version": "8.0.0",
-                                            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-                                            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-                                        },
-                                        "string-width": {
-                                            "version": "4.2.3",
-                                            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-                                            "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-                                            "requires": {
-                                                "emoji-regex": "^8.0.0",
-                                                "is-fullwidth-code-point": "^3.0.0",
-                                                "strip-ansi": "^6.0.1"
-                                            }
-                                        },
-                                        "strip-ansi": {
-                                            "version": "6.0.1",
-                                            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-                                            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-                                            "requires": {
-                                                "ansi-regex": "^5.0.1"
-                                            }
-                                        }
-                                    }
                                 }
                             }
                         },
@@ -8497,7 +8412,7 @@
                             }
                         },
                         "string-width-cjs": {
-                            "version": "npm:string-width-cjs@4.2.3",
+                            "version": "npm:string-width@4.2.3",
                             "bundled": true,
                             "requires": {
                                 "emoji-regex": "^8.0.0",
@@ -8520,7 +8435,7 @@
                             }
                         },
                         "strip-ansi-cjs": {
-                            "version": "npm:strip-ansi-cjs@6.0.1",
+                            "version": "npm:strip-ansi@6.0.1",
                             "bundled": true,
                             "requires": {
                                 "ansi-regex": "^5.0.1"
@@ -8679,7 +8594,7 @@
                             }
                         },
                         "wrap-ansi-cjs": {
-                            "version": "npm:wrap-ansi-cjs@7.0.0",
+                            "version": "npm:wrap-ansi@7.0.0",
                             "bundled": true,
                             "requires": {
                                 "ansi-styles": "^4.0.0",
@@ -9865,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"
             }
diff --git a/package.json b/package.json
index 8da591254..822460a10 100644
--- a/package.json
+++ b/package.json
@@ -177,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",
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/documents/Documents.ts b/src/client/documents/Documents.ts
index f22fa9f17..d38e2292c 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -636,7 +636,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 },
                 },
             ],
             [
@@ -854,7 +854,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.
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index a86011042..8e91bf83f 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -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);
     }
 
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/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/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/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/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 2990e2159..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() {
@@ -862,28 +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._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() &&
@@ -893,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) and the contents aren't forced active, or if contents are marked inactive
-    contentPointerEvents = () => ((!this.disableClickScriptFunc && this.onClickHandler && !this.props.onBrowseClick?.() && this.isContentActive() !== true) || this.isContentActive() === false ? 'none' : this.pointerEvents);
-
+    @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;
@@ -1081,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)`,
                 }}>
@@ -1216,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',
@@ -1241,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 da1b89200..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',
@@ -209,13 +210,10 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             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';
@@ -240,8 +238,6 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             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))
@@ -295,6 +291,34 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             />
         );
     }
+    @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() {
         // Determine the type of toggle button
@@ -356,48 +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} 
-                    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({ this: this.layoutDoc, 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/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/fields/Doc.ts b/src/fields/Doc.ts
index 5a8a6e4b6..ad557e079 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
-- 
cgit v1.2.3-70-g09d2