Herzog design feedback (#21)

Author: thomasyuill-livekit

app-config.ts

@@ -5,9 +5,9 @@ export const APP_CONFIG_DEFAULTS: AppConfig = {
   pageTitle: 'Voice Assistant',
   pageDescription: 'A voice assistant built with LiveKit',
 
-  suportsChatInput: false,
-  suportsVideoInput: false,
-  suportsScreenShare: false,
+  suportsChatInput: true,
+  suportsVideoInput: true,
+  suportsScreenShare: true,
 
   logo: '/lk-logo.svg',
   accent: '#002cf2',

app/globals.css

@@ -4,6 +4,33 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
+  --fg0: #000000;
+  --fg1: #3b3b3b;
+  --fg2: #4d4d4d;
+  --fg3: #636363;
+  --fg4: #707070;
+  --fgSerious: #db1b06;
+  --fgSuccess: #006430;
+  --fgModerate: #a65006;
+  --fgAccent: #002cf2;
+
+  --bg1: #f9f9f6;
+  --bg2: #f3f3f1;
+  --bg3: #e2e2df;
+  --bgSerious: #fae6e6;
+  --bgSerious2: #ffcdc7;
+  --bgSuccess: #d1fadf;
+  --bgModerate: #faedd1;
+  --bgAccent: #b3ccff;
+  --bgAccentPrimary: #e2ebfd;
+
+  --separator1: #ffcdc7;
+  --separator2: #bdbdbb;
+  --separatorSerious: #ffcdc7;
+  --separatorSuccess: #94dcb5;
+  --separatorModerate: #fbd7a0;
+  --separatorAccent: #b3ccff;
+
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
@@ -15,7 +42,7 @@
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
+  --muted: #f3f3f1;
   --muted-foreground: oklch(0.556 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
@@ -35,17 +62,36 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
-
-  --button: #f1f1ef;
-  --button-border: #dbdbd8;
-  --button-foreground: #3b3b3b;
-
-  --destructive: #fcf1f1;
-  --destructive-border: #fdc2bc;
-  --destructive-foreground: #a54135;
 }
 
 .dark {
+  --fg0: #ffffff;
+  --fg1: #cccccc;
+  --fg2: #b2b2b2;
+  --fg3: #999999;
+  --fg4: #666666;
+  --fgSerious: #ff7566;
+  --fgSuccess: #3bc981;
+  --fgModerate: #ffb752;
+  --fgAccent: #6e9dfe;
+
+  --bg1: #070707;
+  --bg2: #131313;
+  --bg3: #202020;
+  --bgSerious: #1f0e0b;
+  --bgSerious2: #5a1c16;
+  --bgSuccess: #001905;
+  --bgModerate: #1a0e04;
+  --bgAccent: #090c17;
+  --bgAccentPrimary: #0c1640;
+
+  --separator1: #202020;
+  --separator2: #30302f;
+  --separatorSerious: #5a1c16;
+  --separatorSuccess: #003213;
+  --separatorModerate: #3f2208;
+  --separatorAccent: #0c1640;
+
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
@@ -56,7 +102,7 @@
   --primary-foreground: oklch(0.205 0 0);
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
+  --muted: #131313;
   --muted-foreground: oklch(0.708 0 0);
   --accent: oklch(0.371 0 0);
   --accent-foreground: oklch(0.985 0 0);
@@ -76,25 +122,20 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.439 0 0);
-
-  --button: #131313;
-  --button-border: #202020;
-  --button-foreground: #cccccc;
-
-  --destructive: #1f0e0b;
-  --destructive-border: #4c1f19;
-  --destructive-foreground: #ff6352;
 }
 
 @theme inline {
+  --color-fg1: var(--fg1);
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--bgAccentPrimary);
+  --color-primary-hover: var(--bgAccent);
+  --color-primary-foreground: var(--fgAccent);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
@@ -119,13 +160,17 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  --color-button: var(--button);
-  --color-button-border: var(--button-border);
-  --color-button-foreground: var(--button-foreground);
+  --color-button: var(--bg2);
+  --color-button-hover: var(--bg3);
+  --color-button-foreground: var(--fg1);
+  --color-button-primary: var(--bg2);
+  --color-button-primary-foreground: var(--fgSerious);
+  --color-button-secondary: var(--bgAccentPrimary);
+  --color-button-secondary-foreground: var(--fgAccent);
 
-  --color-destructive: var(--destructive);
-  --color-destructive-border: var(--destructive-border);
-  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive: var(--bgSerious);
+  --color-destructive-hover: var(--bgSerious2);
+  --color-destructive-foreground: var(--fgSerious);
 }
 
 @layer base {
@@ -138,18 +183,39 @@
 }
 
 @layer utils {
-  .animate-text-gradient {
-    animation: slide-text-gradient 5s linear infinite;
+  .animate-text-shimmer {
+    animation-delay: 0.5s;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+    animation-name: text-shimmer;
+    background: var(--muted-foreground)
+      gradient(
+        linear,
+        100% 0,
+        0 0,
+        from(var(--muted-foreground)),
+        color-stop(0.5, var(--secondary-foreground)),
+        to(var(--muted-foreground))
+      );
+    background: var(--muted-foreground) -webkit-gradient(
+        linear,
+        100% 0,
+        0 0,
+        from(var(--muted-foreground)),
+        color-stop(0.5, var(--secondary-foreground)),
+        to(var(--muted-foreground))
+      );
+    background-repeat: no-repeat;
+    background-size: 50% 200%;
+    display: inline-block;
   }
 
-  @keyframes slide-text-gradient {
+  @keyframes text-shimmer {
     0% {
-      width: 300px;
-      background-position-x: 0;
+      background-position: -100% 0;
     }
     100% {
-      width: 300px;
-      background-position-x: 300px;
+      background-position: 250% 0;
     }
   }
 }

components/app.tsx

@@ -68,28 +68,6 @@ export function App({ appConfig }: AppProps) {
 
   return (
     <>
-      <header className="fixed top-0 left-0 z-50 hidden w-full flex-row justify-between p-6 md:flex">
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://livekit.io"
-          className="scale-100 transition-transform duration-300 hover:scale-110"
-        >
-          <img src="/lk-logo.svg" alt="LiveKit Logo" className="size-6" />
-        </a>
-        <span className="text-foreground font-mono text-xs font-bold tracking-wider uppercase">
-          Built with{' '}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://github.com/livekit/agents"
-            className="underline underline-offset-4"
-          >
-            LiveKit Agents
-          </a>
-        </span>
-      </header>
-
       <RoomContext.Provider value={room}>
         <motion.div
           key="session-view"

components/livekit/agent-control-bar/agent-control-bar.tsx

@@ -67,7 +67,7 @@ export function AgentControlBar({
     <div
       aria-label="Voice assistant controls"
       className={cn(
-        'bg-background flex flex-col rounded-md border p-3 drop-shadow-xl/3',
+        'bg-background flex flex-col rounded-[31px] p-3 shadow-[0_0_4px_rgba(0,0,0,0.05)] drop-shadow-md/3',
         className
       )}
       {...props}
@@ -88,58 +88,80 @@ export function AgentControlBar({
       )}
 
       <div className="flex flex-row justify-between gap-1">
-        <div className="flex w-full gap-1">
+        <div className="flex gap-1">
           {visibleControls.microphone && (
             <div className="flex items-center gap-0">
               <TrackToggle
-                className="peer relative w-auto md:rounded-r-none md:border-r-0"
+                variant="primary"
                 source={Track.Source.Microphone}
+                className="peer/track group/track relative w-auto pr-3 pl-3 md:rounded-r-none md:border-r-0 md:pr-1"
               >
                 <BarVisualizer
-                  className="flex h-full w-auto items-center justify-center gap-0.5"
+                  barCount={5}
                   trackRef={micTrackRef}
-                  barCount={12}
                   options={{ minHeight: 5 }}
+                  className="flex h-full w-auto items-center justify-center gap-0.5"
                 >
-                  <span className="data-lk-highlighted:bg-foreground data-lk-muted:bg-muted h-full w-0.5 origin-center rounded-2xl"></span>
+                  <span
+                    className={cn([
+                      'h-full w-0.5 origin-center rounded-2xl',
+                      'group-data-[state=on]/track:bg-fg1 group-data-[state=off]/track:bg-destructive-foreground',
+                      'data-lk-muted:bg-muted',
+                    ])}
+                  ></span>
                 </BarVisualizer>
               </TrackToggle>
               <DeviceSelect
-                className="peer-data-[state=on]:border-button-foreground hidden rounded-l-none border-l-0 md:block"
                 size="sm"
                 kind="audioinput"
-                onActiveDeviceChange={handleDeviceChange}
                 onError={handleError}
+                onActiveDeviceChange={handleDeviceChange}
+                className={cn([
+                  'peer-data-[state=off]/track:text-destructive-foreground',
+                  'hover:text-fg1 focus:text-fg1',
+                  'hover:peer-data-[state=off]/track:text-destructive-foreground focus:peer-data-[state=off]/track:text-destructive-foreground',
+                  'hidden rounded-l-none md:block',
+                ])}
               />
             </div>
           )}
 
           {capabilities.suportsVideoInput && visibleControls.camera && (
             <div className="flex items-center gap-0">
               <TrackToggle
-                className="peer relative w-auto md:rounded-r-none md:border-r-0"
+                variant="primary"
                 source={Track.Source.Camera}
+                className="peer/track relative w-auto pr-3 pl-3 md:rounded-r-none md:border-r-0 md:pr-1"
               />
               <DeviceSelect
-                className="peer-data-[state=on]:border-button-foreground hidden rounded-l-none border-l-0 md:block"
                 size="sm"
                 kind="videoinput"
-                onActiveDeviceChange={handleDeviceChange}
                 onError={handleError}
+                onActiveDeviceChange={handleDeviceChange}
+                className={cn([
+                  'peer-data-[state=off]/track:text-destructive-foreground',
+                  'hover:text-fg1 focus:text-fg1',
+                  'hover:peer-data-[state=off]/track:text-destructive-foreground focus:peer-data-[state=off]/track:text-destructive-foreground',
+                  'hidden rounded-l-none md:block',
+                ])}
               />
             </div>
           )}
 
           {capabilities.suportsScreenShare && visibleControls.screenShare && (
             <div className="flex items-center gap-0">
-              <TrackToggle className="relative w-auto" source={Track.Source.ScreenShare} />
+              <TrackToggle
+                variant="secondary"
+                className="relative w-auto"
+                source={Track.Source.ScreenShare}
+              />
             </div>
           )}
 
           {visibleControls.chat && (
             <Toggle
+              variant="secondary"
               aria-label="Toggle chat"
-              variant="outline"
               pressed={chatOpen}
               onPressedChange={setChatOpen}
               className="aspect-square h-full"

components/livekit/chat/chat-input.tsx

@@ -37,9 +37,9 @@ export function ChatInput({ onSend, className, disabled, ...props }: ChatInputPr
         disabled={disabled}
       />
       <Button
-        type="submit"
         size="sm"
-        variant={isDisabled ? 'secondary' : 'default'}
+        type="submit"
+        variant={isDisabled ? 'secondary' : 'primary'}
         disabled={isDisabled}
         className="font-mono"
       >

components/livekit/device-select.tsx

@@ -24,7 +24,10 @@ type DeviceSelectProps = React.ComponentProps<typeof SelectTrigger> & {
 };
 
 const selectVariants = cva(
-  'w-full rounded-md border px-3 py-2 text-sm cursor-pointer disabled:not-allowed',
+  [
+    'w-full rounded-full pl-1 pr-3 py-2 text-sm cursor-pointer',
+    'disabled:not-allowed hover:bg-button-hover focus:bg-button-hover',
+  ],
   {
     variants: {
       size: {

components/livekit/track-toggle.tsx

@@ -26,21 +26,16 @@ function getSourceIcon(source: Track.Source, enabled: boolean) {
   }
 }
 
-export function TrackToggle(props: TrackToggleProps) {
-  const { enabled, pending, toggle } = useTrackToggle({
-    source: props.source,
-  });
-  const variant = props.variant || 'outline';
-  const icon = getSourceIcon(props.source, enabled);
+export function TrackToggle({ source, ...props }: TrackToggleProps) {
+  const { enabled, pending, toggle } = useTrackToggle({ source });
+  const icon = getSourceIcon(source, enabled);
+
   return (
     <Toggle
-      variant={variant}
-      aria-label={`Toggle ${props.source}`}
-      onPressedChange={() => {
-        console.log('toggle change');
-        toggle();
-      }}
+      pressed={enabled}
       disabled={pending}
+      aria-label={`Toggle ${source}`}
+      onPressedChange={toggle}
       {...props}
     >
       {icon}