diff options
Diffstat (limited to 'src/client/util/reportManager/ReportManager.tsx')
-rw-r--r-- | src/client/util/reportManager/ReportManager.tsx | 100 |
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' }} /> ); } |