From c4a11c1768d88b170e91722629b7376a4cb32dd5 Mon Sep 17 00:00:00 2001
From: lideming <me@yuuza.net>
Date: Mon, 27 Nov 2023 21:21:18 +0800
Subject: [PATCH] fix: logs color in dark mode

---
 .../src/components/dashboard/project/logs.css | 34 ++++++++++++++++--
 .../src/components/dashboard/project/logs.tsx | 35 ++-----------------
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/neetbox/frontend/src/components/dashboard/project/logs.css b/neetbox/frontend/src/components/dashboard/project/logs.css
index 5b600d2c..4ef4bbdf 100644
--- a/neetbox/frontend/src/components/dashboard/project/logs.css
+++ b/neetbox/frontend/src/components/dashboard/project/logs.css
@@ -1,3 +1,33 @@
-[theme-mode="dark"] .log-tag {
-  background-color: #333;
+.log-item {
+  margin-bottom: 5px;
+  font-family: "Courier New", Courier, monospace;
+  font-size: 13px;
+
+  .log-tag {
+    display: inline-block;
+    --log-tag-bg-hs: 0, 0%;
+    --log-tag-bg-l: 80%;
+    background-color: hsl(var(--log-tag-bg-hs), var(--log-tag-bg-l));
+    padding: 0 3px;
+    border-radius: 5px;
+  }
+  .log-prefix-info {
+    --log-tag-bg-hs: 222, 80%;
+  }
+  .log-prefix-ok {
+    --log-tag-bg-hs: 128, 80%;
+  }
+  .log-prefix-warning {
+    --log-tag-bg-hs: 55, 80%;
+  }
+  .log-prefix-debug {
+    --log-tag-bg-hs: 277, 80%;
+  }
+  .log-prefix-error {
+    --log-tag-bg-hs: 0, 80%;
+  }
+}
+
+[theme-mode="dark"] .log-item .log-tag {
+  --log-tag-bg-l: 30%;
 }
diff --git a/neetbox/frontend/src/components/dashboard/project/logs.tsx b/neetbox/frontend/src/components/dashboard/project/logs.tsx
index 34c431d2..497bd750 100644
--- a/neetbox/frontend/src/components/dashboard/project/logs.tsx
+++ b/neetbox/frontend/src/components/dashboard/project/logs.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { styled } from "styled-components";
 import { LogData, useProjectLogs } from "../../../services/projects";
 import "./logs.css";
 
@@ -51,34 +50,6 @@ const LogItems = ({ logs }: { logs: LogData[] }) => {
   return logs.map((x) => <LogItem key={x._id} data={x} />);
 };
 
-const LogItemContainer = styled.div`
-  margin-bottom: 5px;
-  font-family: "Courier New", Courier, monospace;
-  font-size: 13px;
-
-  .log-tag {
-    display: inline-block;
-    background-color: #ddd;
-    padding: 0 3px;
-    border-radius: 5px;
-  }
-  .log-prefix-info {
-    background-color: #bbcffc;
-  }
-  .log-prefix-ok {
-    background-color: #a2ffae;
-  }
-  .log-prefix-warning {
-    background-color: #ede483;
-  }
-  .log-prefix-debug {
-    background-color: #c483ed;
-  }
-  .log-prefix-error {
-    background-color: #ffa2a2;
-  }
-`;
-
 function getColorFromWhom(whom: string) {
   const hue =
     50 +
@@ -87,14 +58,14 @@ function getColorFromWhom(whom: string) {
       .reduce((prev, char) => ((prev * 11) % 360) + char.charCodeAt(0), 0) *
       233) %
       200);
-  return `hsl(${hue}, 70%, 80%)`;
+  return `hsl(${hue}, 70%, var(--log-tag-bg-l))`;
 }
 
 const LogItem = React.memo(({ data }: { data: LogData }) => {
   let { prefix } = data;
   if (!prefix) prefix = "log";
   return (
-    <LogItemContainer>
+    <div className="log-item">
       <span className="log-tag log-datetime">{data.datetime}</span>{" "}
       <span className={`log-tag log-prefix log-prefix-${prefix}`}>
         {prefix}
@@ -106,6 +77,6 @@ const LogItem = React.memo(({ data }: { data: LogData }) => {
         {data.whom}
       </span>{" "}
       {data.msg}
-    </LogItemContainer>
+    </div>
   );
 });