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

style(views): elevate StudioView to SaaS Premium

Browse source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-07 14:23:54 +01:00
parent c25b0e957f
commit 6b762173c8
6 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/web/src/components/views/StudioView.stories.tsx
View file

@ -8,7 +8,7 @@ const meta: Meta<typeof StudioView> = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="bg-kodo-background min-h-layout-main p-4">
<div className="bg-background min-h-layout-main p-4">
<Story />
</div>
),

2
apps/web/src/components/views/studio-view/StudioViewContent.tsx
View file

@ -10,7 +10,7 @@ interface StudioViewContentProps {
export function StudioViewContent({ activeTab }: StudioViewContentProps) {
return (
<div className="flex-1 bg-kodo-graphite/30 border border-kodo-steel/30 rounded-xl p-8 overflow-hidden">
<div className="flex-1 bg-muted/30 border border-border rounded-xl p-8 overflow-hidden">
{activeTab === 'files' && <CloudFileBrowser />}
{activeTab === 'tools' && <AIToolsView />}
{activeTab === 'connect' && <ConnectivityView />}

12
apps/web/src/components/views/studio-view/StudioViewHeader.tsx
View file

@ -12,7 +12,7 @@ export function StudioViewHeader({ onSwitchToProjects }: StudioViewHeaderProps)
<h2 className="text-3xl font-display font-bold text-white mb-2">
CLOUD STUDIO
</h2>
<p className="text-kodo-content-dim font-mono text-sm">
<p className="text-muted-foreground font-mono text-sm">
Manage assets, process audio, and sync devices.
</p>
</div>
@ -24,12 +24,12 @@ export function StudioViewHeader({ onSwitchToProjects }: StudioViewHeaderProps)
>
Switch to Projects
</Button>
<div className="px-4 py-2 bg-kodo-ink border border-kodo-steel rounded-lg flex items-center gap-4">
<Cloud className="w-4 h-4 text-kodo-steel" />
<div className="w-32 h-2 bg-kodo-steel rounded-full overflow-hidden">
<div className="w-2/3 h-full bg-kodo-cyan" />
<div className="px-4 py-2 bg-card border border-border rounded-xl flex items-center gap-4">
<Cloud className="w-4 h-4 text-muted-foreground" />
<div className="w-32 h-2 bg-muted rounded-full overflow-hidden">
<div className="w-2/3 h-full bg-primary" />
</div>
<span className="text-xs font-mono text-kodo-content-dim">
<span className="text-xs font-mono text-muted-foreground">
65GB / 100GB
</span>
</div>

2
apps/web/src/components/views/studio-view/StudioViewNavButton.tsx
View file

@ -17,7 +17,7 @@ export function StudioViewNavButton({
<button
type="button"
onClick={onClick}
className={`w-full flex items-center gap-4 px-4 py-4 rounded-lg text-sm font-medium transition-all ${active ? 'bg-kodo-cyan/10 text-kodo-cyan border border-kodo-cyan/30' : 'text-kodo-content-dim hover:text-white hover:bg-white/5 border border-transparent'}`}
className={`w-full flex items-center gap-4 px-4 py-4 rounded-xl text-sm font-medium transition-all duration-[var(--duration-normal)] ${active ? 'bg-primary/10 text-primary border border-primary/30' : 'text-muted-foreground hover:text-foreground hover:bg-muted/50 border border-transparent'}`}
>
{icon}
{label}

4
apps/web/src/components/views/studio-view/StudioViewSidebar.tsx
View file

@ -43,8 +43,8 @@ export function StudioViewSidebar({
label="Storage Settings"
/>
<div className="mt-auto p-4 bg-kodo-ink rounded-xl border border-kodo-steel">
<h4 className="text-xs font-bold text-kodo-content-dim uppercase mb-2">
<div className="mt-auto p-4 bg-card rounded-xl border border-border">
<h4 className="text-xs font-bold text-muted-foreground uppercase mb-2">
Quick Actions
</h4>
<div className="space-y-2">

4
apps/web/src/components/views/studio-view/StudioViewSkeleton.tsx
View file

@ -20,13 +20,13 @@ export function StudioViewSkeleton() {
<div className="h-14 rounded-lg bg-muted animate-pulse" />
<div className="h-14 rounded-lg bg-muted animate-pulse" />
<div className="h-14 rounded-lg bg-muted animate-pulse" />
<div className="mt-auto p-4 rounded-xl border border-kodo-steel bg-kodo-ink space-y-2">
<div className="mt-auto p-4 rounded-xl border border-border bg-card space-y-2">
<div className="h-4 w-24 rounded bg-muted animate-pulse" />
<div className="h-9 w-full rounded bg-muted animate-pulse" />
<div className="h-9 w-full rounded bg-muted animate-pulse" />
</div>
</div>
<div className="flex-1 rounded-xl border border-kodo-steel/30 bg-kodo-graphite/30 p-8 min-h-0">
<div className="flex-1 rounded-xl border border-border bg-muted/30 p-8 min-h-0">
<div className="h-full rounded bg-muted/30 animate-pulse" />
</div>
</div>