ui changes

4 files changed, 99 insertions, 154 deletions

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',
+};