Move to Herzogs design

livekit-examples · Sep 16, 2024 · 821bb4b · 821bb4b
1 parent 32dd03d
commit 821bb4b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 10 deletions.
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -68,16 +68,14 @@ function SimpleVoiceAssistant() {
   return (
     <div className="h-80">
       <BarVisualizer state={state} barCount={7} trackRef={audioTrack} />
-      <p className="font-mono text-center">{state}</p>
+      <p className="text-center">{state}</p>
       <NoAgentNotification state={state}>
-        <p className="font-bold mb-1">No agent</p>
         <p>
-          No agent has joined the room yet. Please ensure you&#39;ve followed
-          the setup instructions and started your agent on your machine.{" "}
-          <a href="#" className="underline">
-            Learn more
-          </a>
+          No agent joined this session. Follow the guide to setup your agent.
         </p>
+        <a href="#" className="underline whitespace-nowrap">
+          View guide
+        </a>
       </NoAgentNotification>
     </div>
   );

diff --git a/frontend/components/NoAgentNotification.tsx b/frontend/components/NoAgentNotification.tsx
@@ -30,13 +30,45 @@ export function NoAgentNotification(props: NoAgentNotificationProps) {
     };
   }, [props.state]);
 
-  React.useEffect(() => {}, [props.state]);
-
   return (
     <>
       {showNotification ? (
-        <div className="fixed text-sm bottom-[var(--lk-control-bar-height)] border border-cyan-500 font-mono m-4 w-96 max-w-[80vw] px-4 py-3 rounded left-0 bg-[var(--lk-bg)]">
+        <div className="fixed text-sm left-1/2 -translate-x-1/2 flex top-6 items-center gap-4 bg-[#131313] font-mono px-4 py-3 rounded">
+          <div>
+            {/* Warning Icon */}
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M9.85068 3.63564C10.8197 2.00589 13.1793 2.00589 14.1484 3.63564L21.6323 16.2223C22.6232 17.8888 21.4223 20 19.4835 20H4.51555C2.57676 20 1.37584 17.8888 2.36671 16.2223L9.85068 3.63564ZM12 8.5C12.2761 8.5 12.5 8.72386 12.5 9V13.5C12.5 13.7761 12.2761 14 12 14C11.7239 14 11.5 13.7761 11.5 13.5V9C11.5 8.72386 11.7239 8.5 12 8.5ZM12.75 16C12.75 16.4142 12.4142 16.75 12 16.75C11.5858 16.75 11.25 16.4142 11.25 16C11.25 15.5858 11.5858 15.25 12 15.25C12.4142 15.25 12.75 15.5858 12.75 16Z"
+                fill="#666666"
+              />
+            </svg>
+          </div>
           {props.children}
+          <button onClick={() => setShowNotification(false)}>
+            {/* Close Icon */}
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.16602 3.16666L12.8327 12.8333M12.8327 3.16666L3.16602 12.8333"
+                stroke="#999999"
+                strokeWidth="1.5"
+                strokeLinecap="square"
+              />
+            </svg>
+          </button>
         </div>
       ) : null}
     </>