From 821bb4ba91f59244075fba8671f8bdf36cd54787 Mon Sep 17 00:00:00 2001
From: Jonas Schell <jonas@livekit.io>
Date: Mon, 16 Sep 2024 19:18:08 +0200
Subject: [PATCH] Move to Herzogs design

---
 frontend/app/page.tsx                       | 12 +++----
 frontend/components/NoAgentNotification.tsx | 38 +++++++++++++++++++--
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 1af9141..e5981f1 100644
--- 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
index f94e9f7..d8399a5 100644
--- 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}
     </>