Skip to content

feat(ui): complete luxury studio UI/UX overhaul, navigation fixes & refined aesthetics - #3

Open
Mohan-Badiger wants to merge 2 commits into
omshdev:masterfrom
Mohan-Badiger:feature/UIandUX_Premiun_Design
Open

feat(ui): complete luxury studio UI/UX overhaul, navigation fixes & refined aesthetics#3
Mohan-Badiger wants to merge 2 commits into
omshdev:masterfrom
Mohan-Badiger:feature/UIandUX_Premiun_Design

Conversation

@Mohan-Badiger

Copy link
Copy Markdown

Summary

This PR delivers a comprehensive UI and UX overhaul of the Riverside platform, transforming it into an elite, luxury studio experience inspired by Apple Pro, Linear, and Riverside.fm.

All changes are strictly visual and UX enhancements—100% of the underlying backend APIs, Prisma database models, WebSocket signaling, WebRTC peer connection pipelines, and media chunk streaming logic remain untouched.


Key Changes

1. Luxury Design System & Typography

  • Loaded Plus Jakarta Sans (clean, modern sans-serif) and JetBrains Mono (precision timecodes and session codes) via Google Fonts.
  • Introduced an Obsidian design token system (#07080b, #0b0d13, #121620), titanium hairline borders, and frosted glass panels.
  • Refined button geometry to tasteful rounded-lg (8px / 0.5rem) instead of bubbly or oversized pill radii.

2. Navigation & Authentication UX

  • Logo Click Behavior: Clicking the "RiverSide" logo now intelligently navigates to /dashboard for logged-in users and / for guests. No longer logs the user out on logo click.
  • Dedicated Logout Button: Explicit logout button with confirmation styling that properly clears credentials and redirects to /login.
  • Compact & Premium Footer: Replaced the bulky 5-column layout with a sleek, balanced studio footer featuring quick navigation, GitHub/Twitter links, and a live studio telemetry indicator.

3. Public Landing & Auth Pages

  • Redesigned landing page with a hero section, studio viewport mockup, audio meters, timecode HUD, and pricing tiers.
  • Upgraded Login.tsx and Signup.tsx with Obsidian glassmorphic cards and inline validation (removed browser alert() popups).

4. Studio Hub & Management

  • Dashboard: Fixed the "Recordindwqgs" typo, added studio telemetry cards (Active Studios, Master Resolution, S3 Storage, BullMQ), real-time search filtering, and one-click copyable session code chips.
  • Create & Join Session: Added back navigation, home links, automatic 6-character room code extraction from URLs, and clipboard paste support.
  • Recent Sessions & Master Tracks: Automated track fetching on page load with cinema video players and direct S3 .webm download buttons.

5. Cinema-Grade Broadcast Studios (Nsender & Nreceiver)

  • Host Studio (Nsender.tsx): 16:9 cinema viewport, live REC 00:00:00 HUD indicator, embedded Picture-in-Picture for local feed (HOST CAM), floating control bar, and studio takes archive drawer with direct downloads.
  • Guest Studio (Nreceiver.tsx): Broadcast-matched aesthetic with a standby state awaiting host stream, automatic recording sync, and guest master track downloader.

Screenshots:

Screenshot 2026-09-06 230345 Screenshot 2026-09-06 230356 Screenshot 2026-09-06 230405 Screenshot 2026-09-06 230529

Verification

  • Monorepo production build (turbo run build across all 9 packages) passed with 0 errors.
  • Frontend bundle (tsc -b && vite build) built cleanly in 5.59s.
  • Preserved all WebRTC callbacks (pc.ontrack, pc.onicecandidate, create-offer, create-answer) and MediaRecorder chunk upload intervals.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant