perf: improve monitor detail style, enhance style difference

src/client/components/CommonList.tsx

@@ -89,8 +89,9 @@ export const CommonList: React.FC<CommonListProps> = React.memo((props) => {
               <button
                 key={item.id}
                 className={cn(
-                  'hover:bg-accent flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all',
+                  'flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all',
-                  isSelected && 'bg-muted'
+                  'hover:bg-gray-50 dark:hover:bg-gray-900',
+                  isSelected && 'bg-gray-50 dark:bg-gray-900'
                 )}
                 onClick={() => {
                   globalEventBus.emit('commonListSelected');

src/client/components/monitor/MonitorHealthBar.tsx

@@ -9,11 +9,13 @@ import { getMonitorProvider, getProviderDisplay } from './provider';
 import { MonitorProvider } from './provider/types';
 import { useTranslation } from '@i18next-toolkit/react';
 import clsx from 'clsx';
+import { cn } from '@/utils/style';
 
 interface MonitorHealthBarProps {
   workspaceId: string;
   monitorId: string;
   monitorType?: string;
+  active?: boolean;
   count?: number;
   size?: HealthBarProps['size'];
   healthBarClassName?: string;
@@ -29,6 +31,7 @@ export const MonitorHealthBar: React.FC<MonitorHealthBarProps> = React.memo(
     const {
       workspaceId,
       monitorId,
+      active = true,
       size = 'small',
       count = 20,
       showCurrentStatus = false,
@@ -106,7 +109,9 @@ export const MonitorHealthBar: React.FC<MonitorHealthBarProps> = React.memo(
     });
 
     return (
-      <div className="flex items-center">
+      <div
+        className={cn('flex items-center', active === false && 'opacity-50')}
+      >
         {showPercent && (
           <span
             className={clsx(
@@ -131,7 +136,18 @@ export const MonitorHealthBar: React.FC<MonitorHealthBarProps> = React.memo(
 
         {showCurrentStatus && (
           <>
-            {last(beats)?.status === 'health' ? (
+            {active === false ? (
+              <div
+                className={clsx(
+                  'ml-2 rounded-full bg-gray-400 px-4 py-1 text-lg font-bold text-white',
+                  {
+                    'text-sm': size === 'small',
+                  }
+                )}
+              >
+                {t('Stopped')}
+              </div>
+            ) : last(beats)?.status === 'health' ? (
               <div
                 className={clsx(
                   'ml-2 rounded-full bg-green-500 px-4 py-1 text-lg font-bold text-white',

src/client/components/monitor/MonitorInfo.tsx

@@ -261,7 +261,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
               )}
             </Space>
 
-            <div className="text-black text-opacity-75 dark:text-gray-200">
+            <div className="text-right text-black text-opacity-75 dark:text-gray-200">
               <div>
                 {t('Monitored for {{dayNum}} days', {
                   dayNum: dayjs().diff(dayjs(monitorInfo.createdAt), 'days'),

src/client/routes/monitor.tsx

@@ -43,6 +43,7 @@ function MonitorComponent() {
       <MonitorHealthBar
         workspaceId={workspaceId}
         monitorId={item.id}
+        active={item.active}
         showPercent={true}
         showCurrentStatus={true}
       />