Merge branch 'master' into sophie-ai-images

1 files changed, 13 insertions, 24 deletions

diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx
index 7aad0f2b1..b25d51b41 100644
--- a/src/client/util/reportManager/ReportManager.tsx
+++ b/src/client/util/reportManager/ReportManager.tsx
@@ -20,9 +20,6 @@ import { Filter, FormInput, FormTextArea, IssueCard, IssueView, Tag } from './Re
 import { StrCast } from '../../../fields/Types';
 import { MdRefresh } from 'react-icons/md';
 import { SettingsManager } from '../SettingsManager';
-const higflyout = require('@hig/flyout');
-export const { anchorPoints } = higflyout;
-export const Flyout = higflyout.default;
 
 /**
  * Class for reporting and viewing Github issues within the app.
@@ -214,11 +211,11 @@ export class ReportManager extends React.Component<{}> {
      * @returns the component that dispays all issues
      */
     private viewIssuesComponent = () => {
-        const darkMode = isDarkMode(SettingsManager.Instance.userBackgroundColor);
+        const darkMode = isDarkMode(SettingsManager.userBackgroundColor);
         const colors = darkMode ? darkColors : lightColors;
 
         return (
-            <div className="view-issues" style={{ backgroundColor: SettingsManager.Instance.userBackgroundColor, color: colors.text }}>
+            <div className="view-issues" style={{ backgroundColor: SettingsManager.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>
@@ -311,6 +308,7 @@ export class ReportManager extends React.Component<{}> {
                     <Dropdown
                         color={StrCast(Doc.UserDoc().userColor)}
                         formLabel={'Type'}
+                        closeOnSelect={true}
                         items={bugDropdownItems}
                         selectedVal={this.formData.type}
                         setSelectedVal={val => {
@@ -323,6 +321,7 @@ export class ReportManager extends React.Component<{}> {
                     <Dropdown
                         color={StrCast(Doc.UserDoc().userColor)}
                         formLabel={'Priority'}
+                        closeOnSelect={true}
                         items={priorityDropdownItems}
                         selectedVal={this.formData.priority}
                         setSelectedVal={val => {
@@ -333,25 +332,15 @@ export class ReportManager extends React.Component<{}> {
                         fillWidth
                     />
                 </div>
-                <Dropzone
-                    onDrop={this.onDrop}
-                    accept={{
-                        'image/*': ['.png', '.jpg', '.jpeg', '.gif'],
-                        'video/*': ['.mp4', '.mpeg', '.webm', '.mov'],
-                        'audio/mpeg': ['.mp3'],
-                        'audio/wav': ['.wav'],
-                        'audio/ogg': ['.ogg'],
-                    }}>
-                    {({ getRootProps, getInputProps }) => (
-                        <div {...getRootProps({ className: 'dropzone' })} style={{ borderColor: isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor)) ? darkColors.border : lightColors.border }}>
-                            <input {...getInputProps()} />
-                            <div className="dropzone-instructions">
-                                <AiOutlineUpload size={25} />
-                                <p>Drop or select media that shows the bug (optional)</p>
-                            </div>
-                        </div>
-                    )}
-                </Dropzone>
+                <input
+                    type="file"
+                    accept="image/*, video/*, audio/*"
+                    multiple
+                    onChange={e => {
+                        if (!e.target.files) return;
+                        this.setFormData({ ...this.formData, mediaFiles: [...this.formData.mediaFiles, ...Array.from(e.target.files).map(file => ({ _id: v4(), file }))] });
+                    }}
+                />
                 {this.formData.mediaFiles.length > 0 && <ul className="file-list">{this.formData.mediaFiles.map(file => this.getMediaPreview(file))}</ul>}
                 {this.submitting ? (
                     <Button