ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-02-02 20:43:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: enhance UI components with improved styling and layout

Browse Source 
- Updated global CSS to include new status colors for better visual feedback.
- Refined button, badge, card, and input components with enhanced styles and transitions for a more polished user experience.
- Adjusted sidebar and dialog components for improved aesthetics and usability.
- Implemented gradient backgrounds and shadow effects across various sections to elevate the overall design.
- Enhanced keyboard shortcuts and settings views with consistent styling and layout adjustments for better accessibility.
This commit is contained in:
SuperComboGamer
2025-12-14 19:21:20 -05:00
parent f6c50ce336
commit e378704c63
23 changed files with 1312 additions and 885 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/app/src/components/views/settings-view/api-keys/api-keys-section.tsx
View File

@@ -7,6 +7,7 @@ import { buildProviderConfigs } from "@/config/api-providers";
import { AuthenticationStatusDisplay } from "./authentication-status-display";
import { SecurityNotice } from "./security-notice";
import { useApiKeyManagement } from "./hooks/use-api-key-management";
import { cn } from "@/lib/utils";
export function ApiKeysSection() {
const { apiKeys } = useAppStore();
@@ -20,16 +21,22 @@ export function ApiKeysSection() {
return (
<div
id="api-keys"
className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
className={cn(
"rounded-2xl overflow-hidden scroll-mt-6",
"border border-border/50",
"bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
"shadow-sm shadow-black/5"
)}
>
<div className="p-6 border-b border-border">
<div className="flex items-center gap-2 mb-2">
<Key className="w-5 h-5 text-brand-500" />
<h2 className="text-lg font-semibold text-foreground">API Keys</h2>
<div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
<div className="flex items-center gap-3 mb-2">
<div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
<Key className="w-5 h-5 text-brand-500" />
</div>
<h2 className="text-lg font-semibold text-foreground tracking-tight">API Keys</h2>
</div>
<p className="text-sm text-muted-foreground">
Configure your AI provider API keys. Keys are stored locally in your
browser.
<p className="text-sm text-muted-foreground/80 ml-12">
Configure your AI provider API keys. Keys are stored locally in your browser.
</p>
</div>
<div className="p-6 space-y-6">
@@ -53,7 +60,15 @@ export function ApiKeysSection() {
<Button
onClick={handleSave}
data-testid="save-settings"
className="min-w-[120px] bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-primary-foreground border-0"
className={cn(
"min-w-[140px] h-10",
"bg-gradient-to-r from-brand-500 to-brand-600",
"hover:from-brand-600 hover:to-brand-600",
"text-white font-medium border-0",
"shadow-md shadow-brand-500/20 hover:shadow-lg hover:shadow-brand-500/25",
"transition-all duration-200 ease-out",
"hover:scale-[1.02] active:scale-[0.98]"
)}
>
{saved ? (
<>