admin/cc-switch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine: enhance settings dialog UI with improved visual feedback

Browse Source 
Improve the visual hierarchy and interaction feedback in the settings dialog:

1. Tab navigation enhancement:
   - Active tabs now use blue background (blue-500/600) with white text
   - Add shadow effect to active tabs for better depth perception
   - Inactive tabs show hover effects (opacity + background)
   - Consistent with app's primary blue theme color

2. Switch component visual improvement:
   - Checked state: blue background (blue-500/600) for clear indication
   - Unchecked state: gray background (gray-300/700) for neutral appearance
   - White thumb color for better contrast on both states
   - Enhanced focus ring (ring-2 + offset-2) for accessibility

3. Layout spacing refinement:
   - Change content area padding from pb-4 to py-4 for symmetrical spacing
   - Ensure consistent 4-unit spacing between all dialog sections

4. Clarify plugin integration description:
   - Update description to accurately reflect that provider switching
     in this app will sync with VS Code Claude Code extension
   - Previous wording was ambiguous about the synchronization behavior

Files changed:
- src/components/ui/tabs.tsx: Enhanced tab visual states
- src/components/ui/switch.tsx: Improved switch contrast
- src/components/settings/SettingsDialog.tsx: Fixed spacing
- src/i18n/locales/{zh,en}.json: Updated plugin description
This commit is contained in:
Jason
2025-10-17 23:40:07 +08:00
parent 8e82ded158
commit e6b66f425a
5 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ui/tabs.tsx
View File

@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger
ref={ref}
className={cn(
"inline-flex min-w-[120px] items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=inactive]:opacity-60",
"inline-flex min-w-[120px] items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:shadow-sm dark:data-[state=active]:bg-blue-600 data-[state=inactive]:opacity-60 data-[state=inactive]:hover:opacity-100 data-[state=inactive]:hover:bg-muted/50",
className,
)}
{...props}