ui changes

1 files changed, 27 insertions, 2 deletions

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">