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

aesthetic-improvements: apply design direction to pages batch 2 (Action 11.5.1.5)

Browse source 
- Pages: Updated padding (p-6 → p-8) and spacing (space-y-6 → space-y-8, gap-6 → gap-8) for 8px grid alignment
  - LivePage, SocialPage, EducationPage, QueuePage, DeveloperPage, SettingsPage
- Views: Updated spacing and removed decorative effects
  - ProfileView: Removed decorative hover scale (group-hover:scale-105), replaced decorative gradient with solid color (bg-gradient-to-r → bg-kodo-ink), updated spacing
  - CheckoutView, FileDetailsView, AnalyticsView, GearView, DiscoverView, StudioView, SearchPageView, EducationView, CartView: Updated spacing (space-y-6 → space-y-8, gap-6 → gap-8, p-6 → p-8)
- Action 11.5.1.5: Apply direction to all pages - Batch 2 complete (6 pages + 10 views = 16 files)
This commit is contained in:
senke 2026-01-16 11:58:55 +01:00
parent f56781a93a
commit da74375ca5
16 changed files with 39 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/web/src/components/views/AnalyticsView.tsx
View file

@ -108,7 +108,7 @@ export const AnalyticsView: React.FC<AnalyticsViewProps> = ({
</div>
{/* KPI Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<StatCard
label="Total Plays"
value={stats.total_plays?.toLocaleString()}
@ -183,7 +183,7 @@ export const AnalyticsView: React.FC<AnalyticsViewProps> = ({
</Card>
{/* Traffic Sources */}
<div className="space-y-6">
<div className="space-y-8">
<Card variant="default">
<h3 className="font-bold text-white mb-4">Traffic Sources</h3>
<div className="space-y-4">

4
apps/web/src/components/views/CartView.tsx
View file

@ -85,8 +85,8 @@ export const CartView: React.FC<CartViewProps> = ({
</div>
{/* Summary Sidebar */}
<div className="space-y-6">
<Card variant="gaming" className="p-6">
<div className="space-y-8">
<Card variant="gaming" className="p-8">
<h3 className="font-bold text-white mb-6 uppercase tracking-wider text-sm border-b border-kodo-steel pb-2">
Order Summary
</h3>

4
apps/web/src/components/views/CheckoutView.tsx
View file

@ -212,8 +212,8 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
</div>
{/* Right: Order Summary */}
<div className="space-y-6">
<div className="bg-kodo-ink border border-kodo-steel rounded-xl p-6 sticky top-24 shadow-2xl">
<div className="space-y-8">
<div className="bg-kodo-ink border border-kodo-steel rounded-xl p-8 sticky top-24 shadow-2xl">
<h3 className="font-bold text-white mb-4 uppercase tracking-wider text-sm">
Order Summary
</h3>

4
apps/web/src/components/views/DiscoverView.tsx
View file

@ -110,7 +110,7 @@ export const DiscoverView: React.FC = () => {
</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<Card
variant="gaming"
className="col-span-1 md:col-span-2 relative overflow-hidden group cursor-pointer h-64 flex items-end p-8 border-none"
@ -240,7 +240,7 @@ export const DiscoverView: React.FC = () => {
</h2>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
{newReleases.map((release) => (
<div
key={release.id}

2
apps/web/src/components/views/EducationView.tsx
View file

@ -118,7 +118,7 @@ export const EducationView: React.FC<EducationViewProps> = ({
<Loader2 className="w-10 h-10 text-kodo-steel animate-spin" />
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
{filtered.map((course) => (
<CourseCard
key={course.id}

2
apps/web/src/components/views/FileDetailsView.tsx
View file

@ -82,7 +82,7 @@ export const FileDetailsView: React.FC<FileDetailsViewProps> = ({
const isImage = file.type === 'image';
return (
<div className="animate-fadeIn space-y-6 pb-20">
<div className="animate-fadeIn space-y-8 pb-20">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">

2
apps/web/src/components/views/GearView.tsx
View file

@ -160,7 +160,7 @@ export const GearView: React.FC = () => {
};
return (
<div className="space-y-6 animate-fadeIn relative">
<div className="space-y-8 animate-fadeIn relative">
{/* Header */}
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div>

8
apps/web/src/components/views/ProfileView.tsx
View file

@ -235,7 +235,7 @@ export const ProfileView: React.FC<ProfileViewProps> = ({ userId }) => {
{profile.banner ? (
<img
src={profile.banner}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full bg-gradient-gaming opacity-50"></div>
@ -359,7 +359,7 @@ export const ProfileView: React.FC<ProfileViewProps> = ({ userId }) => {
{/* --- MAIN LAYOUT --- */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 px-0 md:px-4">
{/* SIDEBAR (Quick Info) */}
<div className="lg:col-span-4 space-y-6">
<div className="lg:col-span-4 space-y-8">
<Card variant="default">
<h3 className="text-sm font-bold text-kodo-content-dim uppercase tracking-wider mb-4">
Connections
@ -451,7 +451,7 @@ export const ProfileView: React.FC<ProfileViewProps> = ({ userId }) => {
<div className="space-y-8 animate-fadeIn">
{/* Spotlight */}
{tracks.length > 0 ? (
<div className="relative rounded-2xl overflow-hidden bg-gradient-to-r from-kodo-ink to-kodo-void border border-kodo-steel">
<div className="relative rounded-2xl overflow-hidden bg-kodo-ink border border-kodo-steel">
<div className="p-6 md:p-8 flex flex-col md:flex-row gap-6 items-center">
<div className="w-32 h-32 md:w-48 md:h-48 shrink-0 shadow-2xl rounded-lg overflow-hidden">
<img
@ -570,7 +570,7 @@ export const ProfileView: React.FC<ProfileViewProps> = ({ userId }) => {
)}
{activeTab === 'playlists' && (
<div className="grid grid-cols-2 md:grid-cols-3 gap-6 animate-fadeIn">
<div className="grid grid-cols-2 md:grid-cols-3 gap-8 animate-fadeIn">
{playlists.length > 0 ? (
playlists.map((playlist) => (
<PlaylistCard key={playlist.id} playlist={playlist} />

4
apps/web/src/components/views/SearchPageView.tsx
View file

@ -84,7 +84,7 @@ export const SearchPageView: React.FC<SearchPageViewProps> = ({
</div>
<div className="flex justify-between items-center px-4">
<div className="flex gap-6 overflow-x-auto no-scrollbar">
<div className="flex gap-8 overflow-x-auto no-scrollbar">
{tabs.map((tab) => (
<button
key={tab.id}
@ -126,7 +126,7 @@ export const SearchPageView: React.FC<SearchPageViewProps> = ({
<div className="flex gap-8 items-start">
{/* Sidebar Filters */}
{showFilters && (
<div className="w-64 flex-shrink-0 hidden lg:block sticky top-48 space-y-6 animate-slideInLeft">
<div className="w-64 flex-shrink-0 hidden lg:block sticky top-48 space-y-8 animate-slideInLeft">
<div className="pb-4 border-b border-kodo-steel">
<h3 className="font-bold text-white mb-4 text-sm uppercase">
Genre

4
apps/web/src/components/views/StudioView.tsx
View file

@ -80,7 +80,7 @@ export const StudioView: React.FC<StudioViewProps> = ({
</div>
</div>
<div className="flex flex-1 gap-6 overflow-hidden">
<div className="flex flex-1 gap-8 overflow-hidden">
{/* Sidebar Navigation */}
<div className="w-64 flex flex-col gap-2 shrink-0">
<NavButton
@ -142,7 +142,7 @@ export const StudioView: React.FC<StudioViewProps> = ({
</div>
{/* Main Content Area */}
<div className="flex-1 bg-kodo-graphite/30 border border-kodo-steel/30 rounded-xl p-6 overflow-hidden">
<div className="flex-1 bg-kodo-graphite/30 border border-kodo-steel/30 rounded-xl p-8 overflow-hidden">
{activeTab === 'files' && <CloudFileBrowser />}
{activeTab === 'tools' && <AIToolsView />}
{activeTab === 'connect' && <ConnectivityView />}

4
apps/web/src/pages/DeveloperPage.tsx
View file

@ -3,8 +3,8 @@ import { Button } from '@/components/ui/button';
export function DeveloperPage() {
return (
<div className="min-h-screen p-6 space-y-8">
<div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
<div className="min-h-screen p-8 space-y-8">
<div className="glass-hud rounded-2xl border-white/10 p-8 hud-corner">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-xl bg-kodo-steel/20 flex items-center justify-center border border-kodo-steel/30">

4
apps/web/src/pages/EducationPage.tsx
View file

@ -3,8 +3,8 @@ import { Button } from '@/components/ui/button';
export function EducationPage() {
return (
<div className="min-h-screen p-6 space-y-8">
<div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
<div className="min-h-screen p-8 space-y-8">
<div className="glass-hud rounded-2xl border-white/10 p-8 hud-corner">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-xl bg-kodo-lime/20 flex items-center justify-center border border-kodo-lime/30">

4
apps/web/src/pages/LivePage.tsx
View file

@ -3,8 +3,8 @@ import { Button } from '@/components/ui/button';
export function LivePage() {
return (
<div className="min-h-screen p-6 space-y-8">
<div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
<div className="min-h-screen p-8 space-y-8">
<div className="glass-hud rounded-2xl border-white/10 p-8 hud-corner">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-xl bg-kodo-red/20 flex items-center justify-center border border-kodo-red/30 animate-pulse">

4
apps/web/src/pages/QueuePage.tsx
View file

@ -3,8 +3,8 @@ import { Button } from '@/components/ui/button';
export function QueuePage() {
return (
<div className="min-h-screen p-6 space-y-8">
<div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
<div className="min-h-screen p-8 space-y-8">
<div className="glass-hud rounded-2xl border-white/10 p-8 hud-corner">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-xl bg-kodo-magenta/20 flex items-center justify-center border border-kodo-magenta/30">

16
apps/web/src/pages/SettingsPage.tsx
View file

@ -32,9 +32,9 @@ export function SettingsPage() {
];
return (
<div className="min-h-screen p-6 space-y-8">
<div className="min-h-screen p-8 space-y-8">
{/* Header */}
<div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
<div className="glass-hud rounded-2xl border-white/10 p-8 hud-corner">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-xl bg-kodo-steel/20 flex items-center justify-center border border-kodo-steel/30">
<Settings className="w-6 h-6 text-kodo-steel" />
@ -50,7 +50,7 @@ export function SettingsPage() {
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
{/* Sidebar */}
<div className="glass-hud rounded-xl border-white/10 p-4 h-fit">
<nav className="space-y-1">
@ -75,9 +75,9 @@ export function SettingsPage() {
</div>
{/* Content */}
<div className="lg:col-span-3 glass-hud rounded-xl border-white/10 p-6">
<div className="lg:col-span-3 glass-hud rounded-xl border-white/10 p-8">
{activeTab === 'profile' && (
<div className="space-y-6">
<div className="space-y-8">
<h2 className="text-xl font-bold text-white">Profile Settings</h2>
<div className="space-y-4">
<div>
@ -116,7 +116,7 @@ export function SettingsPage() {
)}
{activeTab === 'appearance' && (
<div className="space-y-6">
<div className="space-y-8">
<h2 className="text-xl font-bold text-white">Appearance</h2>
<ThemeSwitcher
@ -148,7 +148,7 @@ export function SettingsPage() {
)}
{activeTab === 'language' && (
<div className="space-y-6">
<div className="space-y-8">
<h2 className="text-xl font-bold text-white">Language</h2>
<div className="space-y-4">
<div>
@ -169,7 +169,7 @@ export function SettingsPage() {
)}
{(activeTab === 'notifications' || activeTab === 'privacy') && (
<div className="space-y-6">
<div className="space-y-8">
<h2 className="text-xl font-bold text-white">
{activeTab === 'notifications' ? 'Notifications' : 'Privacy'}
</h2>

8
apps/web/src/pages/SocialPage.tsx
View file

@ -28,9 +28,9 @@ export function SocialPage() {
]);
return (
<div className="min-h-screen p-6 space-y-8">
<div className="min-h-screen p-8 space-y-8">
{/* Header */}
<div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
<div className="glass-hud rounded-2xl border-white/10 p-8 hud-corner">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-xl bg-kodo-steel/20 flex items-center justify-center border border-kodo-steel/30">
@ -92,7 +92,7 @@ export function SocialPage() {
{posts.map((post) => (
<div
key={post.id}
className="glass-hud rounded-xl border-white/10 p-6 hud-corner"
className="glass-hud rounded-xl border-white/10 p-8 hud-corner"
>
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-xl bg-kodo-graphite border border-white/10 flex items-center justify-center text-2xl">
@ -108,7 +108,7 @@ export function SocialPage() {
</div>
</div>
<p className="text-white mb-4">{post.content}</p>
<div className="flex items-center gap-6">
<div className="flex items-center gap-8">
<Button variant="ghost" size="sm" className="text-kodo-secondary hover:text-kodo-magenta">
<Heart className="w-4 h-4" />
<span className="text-sm">{post.likes}</span>