feat: update logo usage across components to use light variant and enhance Logo component release:patch

Author: ralyodio

README.md

@@ -342,19 +342,19 @@ pnpm dev
 ### MVP (v1.0)
 
 - [x] Documentation and architecture
-- [ ] Monorepo setup
-- [ ] Marketing website
-- [ ] Desktop host app
-- [ ] PWA viewer
-- [ ] Screen sharing
-- [ ] Remote control
-- [ ] Package manager distribution
+- [x] Monorepo setup
+- [x] Marketing website
+- [x] Desktop host app
+- [x] PWA viewer
+- [x] Screen sharing
+- [x] Remote control
+- [x] Package manager distribution
+- [x] Multi-viewer support (up to 5 for p2p, 100k for SNF)
+- [x] Session recording
+- [x] Chat and annotations
 
 ### Future
 
-- [ ] Multi-viewer support (up to 5)
-- [ ] Session recording
-- [ ] Chat and annotations
 - [ ] File transfer
 - [ ] Mobile viewer app
 

apps/desktop/src/renderer/components/auth/LoginForm.tsx

@@ -64,7 +64,11 @@ export function LoginForm() {
     <Card className="w-full max-w-md border-border">
       <CardHeader className="space-y-1 text-center">
         <div className="mb-4 flex justify-center">
-          <img src={`${import.meta.env.BASE_URL}logo.svg`} alt="PairUX" className="h-12 w-12" />
+          <img
+            src={`${import.meta.env.BASE_URL}logo.light.svg`}
+            alt="PairUX"
+            className="h-11 w-auto"
+          />
         </div>
         <CardTitle className="text-2xl font-semibold">Welcome back</CardTitle>
         <CardDescription>Sign in to your PairUX account</CardDescription>

apps/desktop/src/renderer/components/layout/TitleBar.tsx

@@ -23,7 +23,11 @@ export function TitleBar() {
       } pr-4`}
     >
       <div className="no-drag flex items-center gap-2">
-        <img src={`${import.meta.env.BASE_URL}logo.svg`} alt="PairUX" className="h-6 w-auto" />
+        <img
+          src={`${import.meta.env.BASE_URL}logo.light.svg`}
+          alt="PairUX"
+          className="h-7 w-auto"
+        />
       </div>
 
       <div className="flex-1" />

apps/web/src/app/host/[id]/page.tsx

@@ -26,6 +26,7 @@ import { useScreenCapture, type CaptureQuality } from '@/hooks/useScreenCapture'
 import { useRecording, formatDuration, type RecordingQuality } from '@/hooks/useRecording';
 import { useWebRTCHost } from '@/hooks/useWebRTCHost';
 import type { SessionParticipant } from '@pairux/shared-types';
+import { Logo } from '@/components/Logo';
 
 interface SessionData {
   id: string;
@@ -243,12 +244,7 @@ export default function HostSessionPage({ params }: { params: Promise<{ id: stri
         <header className="border-b border-gray-800 bg-gray-900">
           <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="flex h-14 items-center">
-              <Link href="/" className="flex items-center gap-2">
-                <div className="bg-primary-600 flex h-7 w-7 items-center justify-center rounded-lg text-xs font-bold text-white">
-                  P
-                </div>
-                <span className="text-lg font-bold text-white">PairUX</span>
-              </Link>
+              <Logo size="sm" variant="light" />
             </div>
           </div>
         </header>
@@ -281,12 +277,7 @@ export default function HostSessionPage({ params }: { params: Promise<{ id: stri
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="flex h-14 items-center justify-between">
             <div className="flex items-center gap-4">
-              <Link href="/" className="flex items-center gap-2">
-                <div className="bg-primary-600 flex h-7 w-7 items-center justify-center rounded-lg text-xs font-bold text-white">
-                  P
-                </div>
-                <span className="text-lg font-bold text-white">PairUX</span>
-              </Link>
+              <Logo size="sm" variant="light" />
               <div className="flex items-center gap-2">
                 <span className="rounded-full bg-green-900/50 px-2 py-0.5 text-xs font-medium text-green-400">
                   Hosting

apps/web/src/app/join/[joinCode]/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, use } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { User, Loader2, AlertCircle, Users, Monitor, CheckCircle } from 'lucide-react';
+import { Logo } from '@/components/Logo';
 
 interface SessionInfo {
   id: string;
@@ -184,12 +185,7 @@ export default function JoinPage({ params }: { params: Promise<{ joinCode: strin
       <header className="border-b border-gray-200 bg-white">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="flex h-16 items-center">
-            <Link href="/" className="flex items-center gap-2">
-              <div className="bg-primary-600 flex h-8 w-8 items-center justify-center rounded-lg text-sm font-bold text-white">
-                P
-              </div>
-              <span className="text-xl font-bold text-gray-900">PairUX</span>
-            </Link>
+            <Logo size="sm" />
           </div>
         </div>
       </header>

apps/web/src/app/session/[id]/page.tsx

@@ -24,6 +24,7 @@ import {
 } from '@/components/control';
 import { ChatPanel } from '@/components/chat/ChatPanel';
 import { SessionSettingsPanel } from '@/components/session/SessionSettingsPanel';
+import { Logo } from '@/components/Logo';
 
 type SidebarPanel = 'participants' | 'chat' | 'settings' | null;
 
@@ -149,12 +150,7 @@ export default function SessionViewerPage({ params }: { params: Promise<{ id: st
         <header className="border-b border-gray-800 bg-gray-900">
           <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="flex h-14 items-center">
-              <Link href="/" className="flex items-center gap-2">
-                <div className="bg-primary-600 flex h-7 w-7 items-center justify-center rounded-lg text-xs font-bold text-white">
-                  P
-                </div>
-                <span className="text-lg font-bold text-white">PairUX</span>
-              </Link>
+              <Logo size="sm" variant="light" />
             </div>
           </div>
         </header>
@@ -187,12 +183,7 @@ export default function SessionViewerPage({ params }: { params: Promise<{ id: st
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="flex h-14 items-center justify-between">
             <div className="flex items-center gap-4">
-              <Link href="/" className="flex items-center gap-2">
-                <div className="bg-primary-600 flex h-7 w-7 items-center justify-center rounded-lg text-xs font-bold text-white">
-                  P
-                </div>
-                <span className="text-lg font-bold text-white">PairUX</span>
-              </Link>
+              <Logo size="sm" variant="light" />
               <div className="hidden items-center gap-2 sm:flex">
                 <span className="text-sm text-gray-500">Session</span>
                 <span className="font-mono text-sm font-semibold text-white">

apps/web/src/app/view/[sessionId]/page.tsx

@@ -14,6 +14,7 @@ import {
   InputCapture,
   CursorOverlay,
 } from '@/components/control';
+import { Logo } from '@/components/Logo';
 
 interface Participant {
   id: string;
@@ -147,12 +148,7 @@ export default function GuestSessionViewerPage({
         <header className="border-b border-gray-800 bg-gray-900">
           <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="flex h-14 items-center">
-              <Link href="/" className="flex items-center gap-2">
-                <div className="bg-primary-600 flex h-7 w-7 items-center justify-center rounded-lg text-xs font-bold text-white">
-                  P
-                </div>
-                <span className="text-lg font-bold text-white">PairUX</span>
-              </Link>
+              <Logo size="sm" variant="light" />
             </div>
           </div>
         </header>
@@ -185,12 +181,7 @@ export default function GuestSessionViewerPage({
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="flex h-14 items-center justify-between">
             <div className="flex items-center gap-4">
-              <Link href="/" className="flex items-center gap-2">
-                <div className="bg-primary-600 flex h-7 w-7 items-center justify-center rounded-lg text-xs font-bold text-white">
-                  P
-                </div>
-                <span className="text-lg font-bold text-white">PairUX</span>
-              </Link>
+              <Logo size="sm" variant="light" />
               <div className="hidden items-center gap-2 sm:flex">
                 <span className="text-sm text-gray-500">Session</span>
                 <span className="font-mono text-sm font-semibold text-white">

apps/web/src/components/Logo.tsx

@@ -4,31 +4,44 @@ import { cn } from '@/lib/utils';
 
 interface LogoProps {
   size?: 'sm' | 'md' | 'lg';
+  /** Use 'light' variant on dark backgrounds (white text). Default uses dark text for light backgrounds. */
+  variant?: 'default' | 'light';
+  /** Set to false to render without a Link wrapper (e.g. when already inside a Link). */
+  asLink?: boolean;
   className?: string;
 }
 
 const sizes = {
-  sm: { height: 24 },
-  md: { height: 32 },
-  lg: { height: 40 },
+  sm: { height: 28 },
+  md: { height: 36 },
+  lg: { height: 44 },
 };
 
-export function Logo({ size = 'md', className }: LogoProps) {
+export function Logo({ size = 'md', variant = 'default', asLink = true, className }: LogoProps) {
   const sizeConfig = sizes[size];
   // Logo aspect ratio is approximately 2.83:1 (512.75 / 181.44)
   const width = Math.round(sizeConfig.height * 2.83);
+  const src = variant === 'light' ? '/logo.light.svg' : '/logo.svg';
+
+  const image = (
+    <Image
+      src={src}
+      alt="PairUX"
+      width={width}
+      height={sizeConfig.height}
+      className="h-auto"
+      style={{ height: sizeConfig.height }}
+      priority
+    />
+  );
+
+  if (!asLink) {
+    return <span className={cn('flex items-center', className)}>{image}</span>;
+  }
 
   return (
     <Link href="/" className={cn('flex items-center', className)}>
-      <Image
-        src="/logo.svg"
-        alt="PairUX"
-        width={width}
-        height={sizeConfig.height}
-        className="h-auto"
-        style={{ height: sizeConfig.height }}
-        priority
-      />
+      {image}
     </Link>
   );
 }

apps/web/src/components/footer.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import Image from 'next/image';
+import { Logo } from '@/components/Logo';
 
 // Custom GitHub icon SVG component (brand icons deprecated in lucide)
 function GitHubIcon({ className }: { className?: string }) {
@@ -87,9 +87,7 @@ export function Footer() {
         <div className="grid grid-cols-2 gap-8 lg:grid-cols-5">
           {/* Brand */}
           <div className="col-span-2 lg:col-span-1">
-            <Link href="/" className="flex items-center">
-              <Image src="/logo.svg" alt="PairUX" width={113} height={40} className="h-10 w-auto" />
-            </Link>
+            <Logo size="lg" />
             <p className="mt-4 text-sm text-gray-600">
               Collaborative screen sharing with simultaneous remote control. Like Screenhero, but
               open source.