Minor log style tweak

4 files changed, 43 insertions, 44 deletions

diff --git a/src/components/Logs.module.css b/src/components/Logs.module.css
index 5113afc..508e9c6 100644
--- a/src/components/Logs.module.css
+++ b/src/components/Logs.module.css
@@ -3,7 +3,6 @@
   align-items: center;
   flex-wrap: wrap;
   font-size: 0.9em;
-  padding: 10px;
 }
 
 .logType {
@@ -11,8 +10,7 @@
   flex-shrink: 0;
   text-align: center;
   width: 66px;
-  background: green;
-  border-radius: 5px;
+  border-radius: 100px;
   padding: 3px 5px;
   margin: 0 8px;
 }
diff --git a/src/components/Logs.tsx b/src/components/Logs.tsx
index 3a4dabd..7271f0e 100644
--- a/src/components/Logs.tsx
+++ b/src/components/Logs.tsx
@@ -1,18 +1,23 @@
 import cx from 'clsx';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { areEqual, FixedSizeList as List } from 'react-window';
+import {
+  areEqual,
+  FixedSizeList as List,
+  ListChildComponentProps,
+} from 'react-window';
+import { fetchLogs } from 'src/api/logs';
+import ContentHeader from 'src/components/ContentHeader';
+import LogSearch from 'src/components/LogSearch';
+import { connect } from 'src/components/StateProvider';
+import SvgYacd from 'src/components/SvgYacd';
+import useRemainingViewPortHeight from 'src/hooks/useRemainingViewPortHeight';
+import { getClashAPIConfig } from 'src/store/app';
+import { getLogLevel } from 'src/store/configs';
+import { appendLog, getLogsForDisplay } from 'src/store/logs';
+import { Log,State } from 'src/store/types';
 
-import { fetchLogs } from '../api/logs';
-import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
-import { getClashAPIConfig } from '../store/app';
-import { getLogLevel } from '../store/configs';
-import { appendLog, getLogsForDisplay } from '../store/logs';
-import ContentHeader from './ContentHeader';
-import s0 from './Logs.module.css';
-import LogSearch from './LogSearch';
-import { connect } from './StateProvider';
-import SvgYacd from './SvgYacd';
+import s from './Logs.module.css';
 
 const { useCallback, memo, useEffect } = React;
 
@@ -20,48 +25,44 @@ const paddingBottom = 30;
 const colors = {
   debug: 'none',
   // debug: '#8a8a8a',
-  info: '#454545',
-  // info: '#147d14',
+  info: 'var(--bg-log-info-tag)',
   warning: '#b99105',
   error: '#c11c1c',
 };
 
-type LogLineProps = {
-  time?: string;
-  even?: boolean;
-  payload?: string;
-  type?: string;
-};
+type LogLineProps = Partial<Log>;
 
 function LogLine({ time, even, payload, type }: LogLineProps) {
-  const className = cx({ even }, s0.log);
+  const className = cx({ even }, s.log);
   return (
     <div className={className}>
-      <div className={s0.logMeta}>
-        <div className={s0.logTime}>{time}</div>
-        <div className={s0.logType} style={{ backgroundColor: colors[type] }}>
+      <div className={s.logMeta}>
+        <div className={s.logTime}>{time}</div>
+        <div className={s.logType} style={{ backgroundColor: colors[type] }}>
           {type}
         </div>
-        <div className={s0.logText}>{payload}</div>
+        <div className={s.logText}>{payload}</div>
       </div>
     </div>
   );
 }
 
-function itemKey(index, data) {
+function itemKey(index: number, data: LogLineProps[]) {
   const item = data[index];
   return item.id;
 }
 
-// @ts-expect-error ts-migrate(2339) FIXME: Property 'index' does not exist on type '{ childre... Remove this comment to see the full error message
-const Row = memo(({ index, style, data }) => {
-  const r = data[index];
-  return (
-    <div style={style}>
-      <LogLine {...r} />
-    </div>
-  );
-}, areEqual);
+const Row = memo(
+  ({ index, style, data }: ListChildComponentProps<LogLineProps>) => {
+    const r = data[index];
+    return (
+      <div style={style}>
+        <LogLine {...r} />
+      </div>
+    );
+  },
+  areEqual
+);
 
 function Logs({ dispatch, logLevel, apiConfig, logs }) {
   const appendLogInternal = useCallback(
@@ -80,23 +81,20 @@ function Logs({ dispatch, logLevel, apiConfig, logs }) {
     <div>
       <ContentHeader title={t('Logs')} />
       <LogSearch />
-      {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'number | MutableRefObject<any>' is not assig... Remove this comment to see the full error message */}
       <div ref={refLogsContainer} style={{ paddingBottom }}>
         {logs.length === 0 ? (
           <div
-            className={s0.logPlaceholder}
-            // @ts-expect-error ts-migrate(2362) FIXME: The left-hand side of an arithmetic operation must... Remove this comment to see the full error message
+            className={s.logPlaceholder}
             style={{ height: containerHeight - paddingBottom }}
           >
-            <div className={s0.logPlaceholderIcon}>
+            <div className={s.logPlaceholderIcon}>
               <SvgYacd width={200} height={200} />
             </div>
             <div>{t('no_logs')}</div>
           </div>
         ) : (
-          <div className={s0.logsWrapper}>
+          <div className={s.logsWrapper}>
             <List
-              // @ts-expect-error ts-migrate(2362) FIXME: The left-hand side of an arithmetic operation must... Remove this comment to see the full error message
               height={containerHeight - paddingBottom}
               width="100%"
               itemCount={logs.length}
@@ -113,7 +111,7 @@ function Logs({ dispatch, logLevel, apiConfig, logs }) {
   );
 }
 
-const mapState = (s) => ({
+const mapState = (s: State) => ({
   logs: getLogsForDisplay(s),
   logLevel: getLogLevel(s),
   apiConfig: getClashAPIConfig(s),
diff --git a/src/components/Root.css b/src/components/Root.css
index 2c78a38..cd85047 100644
--- a/src/components/Root.css
+++ b/src/components/Root.css
@@ -124,6 +124,7 @@ body.dark {
   --color-btn-fg: #bebebe;
   --color-bg-proxy: #303030;
   --color-row-odd: #282828;
+  --bg-log-info-tag: #454545;
   --bg-modal: #1f1f20;
   --bg-near-transparent: rgba(255, 255, 255, 0.1);
   --bg-tooltip: #111;
@@ -151,6 +152,7 @@ body.light {
   --color-btn-fg: #101010;
   --color-bg-proxy: #fafafa;
   --color-row-odd: #f5f5f5;
+  --bg-log-info-tag: #888;
   --bg-modal: #fbfbfb;
   --bg-near-transparent: rgba(0, 0, 0, 0.1);
   --bg-tooltip: #f0f0f0;
diff --git a/src/components/ToggleSwitch.module.css b/src/components/ToggleSwitch.module.css
index 9103fab..4b1388c 100644
--- a/src/components/ToggleSwitch.module.css
+++ b/src/components/ToggleSwitch.module.css
@@ -1,5 +1,6 @@
 .ToggleSwitch {
   user-select: none;
+  border-radius: 4px;
   border: 1px solid #525252;
   color: var(--color-text);
   background: var(--color-toggle-bg);