Use icon button for theme/language settings

sdcb · sdcb · commit 062024281b3e · 2025-11-07T18:42:06.000+08:00
diff --git a/src/FE/components/settings/tabs/GeneralTab.tsx b/src/FE/components/settings/tabs/GeneralTab.tsx
@@ -8,13 +8,7 @@ import { toFixed } from '@/utils/common';
 
 import { IconDesktop, IconMoon, IconSun } from '@/components/Icons';
 import { Card, CardContent } from '@/components/ui/card';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
 
 import { getUserBalanceOnly } from '@/apis/clientApis';
 
@@ -44,49 +38,81 @@ const GeneralTab = () => {
           <div className="flex min-h-10 flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
             <div className="font-medium min-w-[80px]">{t('Theme')}</div>
             <div className="max-w-xs w-full">
-              <Select value={theme} onValueChange={(value) => setTheme(value)}>
-                <SelectTrigger className="w-full flex items-center p-0 m-0 leading-[0px]">
-                  <SelectValue placeholder={t('Select Theme')} />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="system">
-                    <div className="flex items-center">
-                      <IconDesktop size={16} className="mr-2" />
-                      {t('System')}
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="light">
-                    <div className="flex items-center">
-                      <IconSun size={16} className="mr-2" />
-                      {t('Light')}
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="dark">
-                    <div className="flex items-center">
-                      <IconMoon size={16} className="mr-2" />
-                      {t('Dark')}
-                    </div>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
+              <div className="grid grid-cols-3 gap-2">
+                <button
+                  type="button"
+                  onClick={() => setTheme('system')}
+                  className={cn(
+                    'flex flex-col items-center justify-center p-3 rounded-lg border-2 transition-all hover:border-primary/50',
+                    theme === 'system'
+                      ? 'border-primary bg-primary/10'
+                      : 'border-border bg-background'
+                  )}
+                >
+                  <IconDesktop size={24} className="mb-1" />
+                  <span className="text-xs">{t('System')}</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setTheme('light')}
+                  className={cn(
+                    'flex flex-col items-center justify-center p-3 rounded-lg border-2 transition-all hover:border-primary/50',
+                    theme === 'light'
+                      ? 'border-primary bg-primary/10'
+                      : 'border-border bg-background'
+                  )}
+                >
+                  <IconSun size={24} className="mb-1" />
+                  <span className="text-xs">{t('Light')}</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setTheme('dark')}
+                  className={cn(
+                    'flex flex-col items-center justify-center p-3 rounded-lg border-2 transition-all hover:border-primary/50',
+                    theme === 'dark'
+                      ? 'border-primary bg-primary/10'
+                      : 'border-border bg-background'
+                  )}
+                >
+                  <IconMoon size={24} className="mb-1" />
+                  <span className="text-xs">{t('Dark')}</span>
+                </button>
+              </div>
             </div>
           </div>
 
           <div className="flex min-h-10 flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
             <div className="font-medium min-w-[80px]">{t('Language')}</div>
             <div className="max-w-xs w-full">
-              <Select
-                value={language}
-                onValueChange={(value) => changeLanguage(value)}
-              >
-                <SelectTrigger className="w-full">
-                  <SelectValue placeholder={t('Select Language')} />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="zh-CN">简体中文</SelectItem>
-                  <SelectItem value="en">English</SelectItem>
-                </SelectContent>
-              </Select>
+              <div className="grid grid-cols-2 gap-2">
+                <button
+                  type="button"
+                  onClick={() => changeLanguage('zh-CN')}
+                  className={cn(
+                    'flex flex-col items-center justify-center p-3 rounded-lg border-2 transition-all hover:border-primary/50',
+                    language === 'zh-CN'
+                      ? 'border-primary bg-primary/10'
+                      : 'border-border bg-background'
+                  )}
+                >
+                  <span className="text-2xl mb-1">🇨🇳</span>
+                  <span className="text-xs">简体中文</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => changeLanguage('en')}
+                  className={cn(
+                    'flex flex-col items-center justify-center p-3 rounded-lg border-2 transition-all hover:border-primary/50',
+                    language === 'en'
+                      ? 'border-primary bg-primary/10'
+                      : 'border-border bg-background'
+                  )}
+                >
+                  <span className="text-2xl mb-1">🇺🇸</span>
+                  <span className="text-xs">English</span>
+                </button>
+              </div>
             </div>
           </div>
         </CardContent>
