aboutsummaryrefslogtreecommitdiff
path: root/src/client/util/reportManager/ReportManager.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/util/reportManager/ReportManager.tsx')
-rw-r--r--src/client/util/reportManager/ReportManager.tsx100
1 files changed, 59 insertions, 41 deletions
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' }}
/>
);
}