fix: improve button cursor styles in UI components

This commit is contained in:
Simon
2026-03-16 23:23:27 +08:00
parent 5e7fe18463
commit 80dda37f8c
3 changed files with 7 additions and 6 deletions

View File

@@ -40,7 +40,7 @@ export default function LanguageSwitcher() {
<div className="relative" ref={dropdownRef}> <div className="relative" ref={dropdownRef}>
<button <button
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors text-sm font-medium border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300" className="flex cursor-pointer items-center gap-2 rounded-lg border border-gray-200 bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
aria-label={isZh ? '切换语言' : 'Switch language'} aria-label={isZh ? '切换语言' : 'Switch language'}
aria-expanded={isOpen} aria-expanded={isOpen}
aria-haspopup="true" aria-haspopup="true"
@@ -81,7 +81,7 @@ export default function LanguageSwitcher() {
<button <button
key={lang.code} key={lang.code}
onClick={() => handleLanguageChange(lang.code)} onClick={() => handleLanguageChange(lang.code)}
className={`w-full flex items-center gap-2 px-4 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${ className={`flex w-full cursor-pointer items-center gap-2 px-4 py-2 text-left text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 ${
language === lang.code language === lang.code
? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300' ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
: 'text-gray-700 dark:text-gray-300' : 'text-gray-700 dark:text-gray-300'

View File

@@ -52,7 +52,7 @@ export default function ThemeSwitcher() {
return ( return (
<button <button
onClick={toggleTheme} onClick={toggleTheme}
className="relative inline-flex items-center h-8 w-16 rounded-full transition-colors duration-300 ease-in-out focus:outline-none" className="relative inline-flex h-8 w-16 cursor-pointer items-center rounded-full transition-colors duration-300 ease-in-out focus:outline-none"
style={{ style={{
backgroundColor: theme === 'dark' ? '#1e293b' : '#e0f2fe', backgroundColor: theme === 'dark' ? '#1e293b' : '#e0f2fe',
}} }}
@@ -62,10 +62,11 @@ export default function ThemeSwitcher() {
> >
{/* 滑块 */} {/* 滑块 */}
<span <span
className="inline-block h-6 w-6 transform rounded-full transition-all duration-300 ease-in-out shadow-md" className={`inline-block h-6 w-6 rounded-full transition-all duration-300 ease-in-out shadow-md ${
theme === 'dark' ? 'translate-x-9' : 'translate-x-1'
}`}
style={{ style={{
backgroundColor: theme === 'dark' ? '#475569' : '#fbbf24', backgroundColor: theme === 'dark' ? '#475569' : '#fbbf24',
transform: theme === 'dark' ? 'translateX(2.25rem)' : 'translateX(0.25rem)',
}} }}
> >
{/* 图标 */} {/* 图标 */}

View File

@@ -410,7 +410,7 @@ export default function TroubleshootingPage() {
.getElementById(section.id) .getElementById(section.id)
?.scrollIntoView({ behavior: 'smooth', block: 'start' }) ?.scrollIntoView({ behavior: 'smooth', block: 'start' })
} }
className={`block text-sm py-1 text-left transition-colors ${ className={`block cursor-pointer py-1 text-left text-sm transition-colors ${
activeId === section.id activeId === section.id
? 'text-blue-600 dark:text-blue-400 font-medium' ? 'text-blue-600 dark:text-blue-400 font-medium'
: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'