style(ui): refine header layout and AppSwitcher color scheme
Improve application header and component styling: ## App.tsx Header Layout - Wrap title and settings button in flex container with gap - Add vertical divider between title and settings icon - Apply responsive padding (pl-1 sm:pl-2) - Reformat JSX for better readability (prettier) - Fix string template formatting in className ## AppSwitcher Color Update - Change Claude tab gradient from orange/amber to teal/emerald/green - Update shadow color to match new teal theme - Change hover color from orange-500 to teal-500 - Align visual style with emerald/teal brand colors ## Dialog Component Cleanup - Remove default close button (X icon) from DialogContent - Allow parent components to control close button placement - Remove unused lucide-react X import ## index.css Header Border - Add top border (2px solid) to glass-header - Apply to both light and dark mode variants - Improve visual separation of header area These changes enhance visual consistency and modernize the UI appearance with a cohesive teal color scheme.
This commit is contained in:
YoVinchen
46
src/App.tsx
46
src/App.tsx
@@ -375,23 +375,26 @@ function App() {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<a
|
||||
href="https://github.com/farion1231/cc-switch"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-xl font-semibold text-blue-500 transition-colors hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
>
|
||||
CC Switch
|
||||
</a>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setCurrentView("settings")}
|
||||
title={t("common.settings")}
|
||||
className="ml-2 hover:bg-black/5 dark:hover:bg-white/5"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex items-center gap-2 pl-1 sm:pl-2">
|
||||
<a
|
||||
href="https://github.com/farion1231/cc-switch"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-xl font-semibold text-blue-500 transition-colors hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
>
|
||||
CC Switch
|
||||
</a>
|
||||
<div className="h-5 w-[1px] bg-black/10 dark:bg-white/15" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setCurrentView("settings")}
|
||||
title={t("common.settings")}
|
||||
className="hover:bg-black/5 dark:hover:bg-white/5"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<UpdateBadge onClick={() => setCurrentView("settings")} />
|
||||
</>
|
||||
)}
|
||||
@@ -506,8 +509,9 @@ function App() {
|
||||
</header>
|
||||
|
||||
<main
|
||||
className={`flex-1 overflow-y-auto pb-12 px-6 animate-fade-in scroll-overlay ${currentView === "providers" ? "pt-24" : "pt-20"
|
||||
}`}
|
||||
className={`flex-1 overflow-y-auto pb-12 px-6 animate-fade-in scroll-overlay ${
|
||||
currentView === "providers" ? "pt-24" : "pt-20"
|
||||
}`}
|
||||
style={{ overflowX: "hidden" }}
|
||||
>
|
||||
{renderContent()}
|
||||
@@ -550,8 +554,8 @@ function App() {
|
||||
message={
|
||||
confirmDelete
|
||||
? t("confirm.deleteProviderMessage", {
|
||||
name: confirmDelete.name,
|
||||
})
|
||||
name: confirmDelete.name,
|
||||
})
|
||||
: ""
|
||||
}
|
||||
onConfirm={() => void handleConfirmDelete()}
|
||||
|
||||
@@ -19,12 +19,12 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
|
||||
onClick={() => handleSwitch("claude")}
|
||||
className={`group relative flex items-center gap-2 px-4 py-2.5 rounded-full text-sm font-semibold overflow-hidden transition-all duration-300 ease-out ${
|
||||
activeApp === "claude"
|
||||
? "text-white scale-[1.02] shadow-[0_12px_35px_-15px_rgba(249,115,22,0.8)] ring-1 ring-white/10"
|
||||
? "text-white scale-[1.02] shadow-[0_12px_35px_-15px_rgba(20,184,166,0.6)] ring-1 ring-white/10"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
|
||||
}`}
|
||||
>
|
||||
{activeApp === "claude" && (
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-orange-500 via-amber-500 to-red-600 rounded-full opacity-90 blur-[1px] transition-all duration-500 -z-10 scale-100" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-teal-500 via-emerald-500 to-green-600 rounded-full opacity-90 blur-[1px] transition-all duration-500 -z-10 scale-100" />
|
||||
)}
|
||||
{activeApp !== "claude" && (
|
||||
<div className="absolute inset-0 rounded-full bg-white/0 transition-all duration-300 -z-10" />
|
||||
@@ -34,7 +34,7 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
|
||||
className={
|
||||
activeApp === "claude"
|
||||
? "text-white"
|
||||
: "text-muted-foreground group-hover:text-orange-500 transition-colors"
|
||||
: "text-muted-foreground group-hover:text-teal-500 transition-colors"
|
||||
}
|
||||
/>
|
||||
<span>Claude</span>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import * as React from "react";
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||
import { X } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Dialog = DialogPrimitive.Root;
|
||||
@@ -84,10 +83,6 @@ const DialogContent = React.forwardRef<
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">关闭</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
);
|
||||
|
||||
@@ -110,11 +110,13 @@
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
border: none;
|
||||
border-top: 2px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.dark .glass-header {
|
||||
background: hsl(var(--background));
|
||||
border: none;
|
||||
border-top: 2px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
/* Tauri 拖拽区域 */
|
||||
|
||||
Reference in New Issue
Block a user