senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): Zone 13 - Settings view polish (Header glass, Tabs container, Content/Skeleton sync)

Browse source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-07 16:45:35 +01:00
parent 68179a5912
commit be5ef43cee
5 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/web/src/components/views/settings-view/SettingsView.tsx
View file

@ -12,7 +12,7 @@ export function SettingsView({ initialTab = 'profile' }: SettingsViewProps = {})
);
return (
<div className="flex flex-col gap-8 animate-fadeIn pb-20">
<div className="flex flex-col gap-8 animate-fadeIn pb-20 min-h-layout-page">
<SettingsViewHeader />
<SettingsViewTabs

2
apps/web/src/components/views/settings-view/SettingsViewContent.tsx
View file

@ -29,7 +29,7 @@ export function SettingsViewContent({ activeTab }: SettingsViewContentProps) {
if (activeTab === 'audio' || activeTab === 'notifications') {
return (
<Card variant="default" className="min-h-layout-page-sm">
<Card variant="glass" className="min-h-layout-page-sm border-white/5 bg-black/20 backdrop-blur-xl">
<div className="flex flex-col items-center justify-center h-full text-center animate-fadeIn py-24">
<div className="w-20 h-20 rounded-full bg-muted flex items-center justify-center mb-6">
{activeTab === 'audio' ? (

7
apps/web/src/components/views/settings-view/SettingsViewHeader.tsx
View file

@ -1,12 +1,13 @@
import React from 'react';
import { Card } from '@/components/ui/card';
export function SettingsViewHeader() {
return (
<div>
<h2 className="text-3xl font-display font-bold text-white mb-2">SETTINGS</h2>
<Card variant="glass" className="p-6 border-white/5 bg-black/20 backdrop-blur-xl hover-glow-cyan transition-shadow duration-300">
<h2 className="text-3xl font-display font-bold text-foreground mb-2">SETTINGS</h2>
<p className="text-muted-foreground font-mono text-sm">
Configure your studio, account, and preferences.
</p>
</div>
</Card>
);
}

2
apps/web/src/components/views/settings-view/SettingsViewSkeleton.tsx
View file

@ -18,7 +18,7 @@ export function SettingsViewSkeleton() {
</div>
<div className="min-h-layout-page">
<Skeleton className="h-96 w-full rounded-xl" />
<Skeleton className="h-96 w-full rounded-[var(--radius-xl)]" />
</div>
</div>
);

2
apps/web/src/components/views/settings-view/SettingsViewTabs.tsx
View file

@ -14,7 +14,7 @@ export function SettingsViewTabs({
tabs,
}: SettingsViewTabsProps) {
return (
<div className="border-b border-border">
<div className="border-b border-border bg-card/30 backdrop-blur-sm rounded-t-[var(--radius-xl)] px-2">
<Tabs value={activeTab} onValueChange={onTabChange} className="pb-0">
<TabsList className="bg-transparent border-none p-0">
{tabs.map((tab) => (