ui changes

1 files changed, 30 insertions, 19 deletions

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>
         );