From a284053831f17524722195aab390c9c3a21ecd2e Mon Sep 17 00:00:00 2001
From: Omid Saadat <omid3098@gmail.com>
Date: Wed, 29 Oct 2025 01:34:47 +0100
Subject: [PATCH] refactor(web): remove ThemeInfoCard from preferences section

- Remove detailed theme system explanation from user preferences
- Keep simple descriptive label for user theme preference
- Maintain clean UI without technical details
---
 .../Settings/PreferencesSection.tsx           |  3 --
 web/src/components/ThemeInfoCard.tsx          | 33 -------------------
 2 files changed, 36 deletions(-)
 delete mode 100644 web/src/components/ThemeInfoCard.tsx

diff --git a/web/src/components/Settings/PreferencesSection.tsx b/web/src/components/Settings/PreferencesSection.tsx
index a24d7eeeb..df237e023 100644
--- a/web/src/components/Settings/PreferencesSection.tsx
+++ b/web/src/components/Settings/PreferencesSection.tsx
@@ -8,7 +8,6 @@ import { useTranslate } from "@/utils/i18n";
 import { convertVisibilityFromString, convertVisibilityToString } from "@/utils/memo";
 import LocaleSelect from "../LocaleSelect";
 import ThemeSelect from "../ThemeSelect";
-import ThemeInfoCard from "../ThemeInfoCard";
 import VisibilityIcon from "../VisibilityIcon";
 import WebhookSection from "./WebhookSection";
 
@@ -55,8 +54,6 @@ const PreferencesSection = observer(() => {
         <ThemeSelect value={setting.theme} onValueChange={handleThemeChange} />
       </div>
 
-      <ThemeInfoCard />
-
       <p className="font-medium text-muted-foreground">{t("setting.preference")}</p>
 
       <div className="w-full flex flex-row justify-between items-center">
diff --git a/web/src/components/ThemeInfoCard.tsx b/web/src/components/ThemeInfoCard.tsx
deleted file mode 100644
index a762c303b..000000000
--- a/web/src/components/ThemeInfoCard.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { observer } from "mobx-react-lite";
-import { Info } from "lucide-react";
-import { userStore, workspaceStore } from "@/store";
-
-const ThemeInfoCard = observer(() => {
-  const userTheme = userStore.state.userGeneralSetting?.theme;
-  const workspaceTheme = workspaceStore.state.theme || "default";
-  const effectiveTheme = userTheme || workspaceTheme;
-
-  return (
-    <div className="border border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950 rounded-lg p-4">
-      <div className="flex items-start gap-3">
-        <Info className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5" />
-        <div className="space-y-2">
-          <h4 className="font-medium text-blue-900 dark:text-blue-100">Theme System</h4>
-          <div className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
-            <p><strong>Current effective theme:</strong> {effectiveTheme}</p>
-            <p><strong>Workspace default:</strong> {workspaceTheme}</p>
-            {userTheme && (
-              <p><strong>Your preference:</strong> {userTheme}</p>
-            )}
-            <p className="text-xs mt-2">
-              Your personal theme preference overrides the workspace default. 
-              If you haven't set a personal preference, the workspace default is used.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-});
-
-export default ThemeInfoCard;
\ No newline at end of file