From 881eadfa70c04c310b9967b61f1337670f07bde7 Mon Sep 17 00:00:00 2001
From: Timothy Carambat <rambat1010@gmail.com>
Date: Thu, 8 May 2025 09:30:54 -0700
Subject: [PATCH] minor UI patches (#3784)

---
 .../src/components/Modals/NewWorkspace.jsx    |  1 +
 .../src/components/WorkspaceChat/index.jsx    | 41 +++++++++++--------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Modals/NewWorkspace.jsx b/frontend/src/components/Modals/NewWorkspace.jsx
index 5eed3773..bd2d2bd5 100644
--- a/frontend/src/components/Modals/NewWorkspace.jsx
+++ b/frontend/src/components/Modals/NewWorkspace.jsx
@@ -62,6 +62,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
                     placeholder={t("new-workspace.placeholder")}
                     required={true}
                     autoComplete="off"
+                    autoFocus={true}
                   />
                 </div>
                 {error && (
diff --git a/frontend/src/components/WorkspaceChat/index.jsx b/frontend/src/components/WorkspaceChat/index.jsx
index 0621693e..a4d601dc 100644
--- a/frontend/src/components/WorkspaceChat/index.jsx
+++ b/frontend/src/components/WorkspaceChat/index.jsx
@@ -6,6 +6,7 @@ import paths from "@/utils/paths";
 import ModalWrapper from "../ModalWrapper";
 import { useParams } from "react-router-dom";
 import { DnDFileUploaderProvider } from "./ChatContainer/DnDWrapper";
+import { WarningCircle } from "@phosphor-icons/react";
 import {
   TTSProvider,
   useWatchForAutoPlayAssistantTTSResponse,
@@ -41,24 +42,32 @@ export default function WorkspaceChat({ loading, workspace }) {
       <>
         {loading === false && !workspace && (
           <ModalWrapper isOpen={true}>
-            <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
-              <div className="flex flex-col gap-y-4 w-full p-6 text-center">
-                <p className="font-semibold text-red-500 text-xl">
-                  Workspace not found!
-                </p>
-                <p className="text-sm mt-4 text-white">
-                  It looks like a workspace by this name is not available.
-                </p>
-
-                <div className="flex w-full justify-center items-center mt-4">
-                  <a
-                    href={paths.home()}
-                    className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm flex items-center gap-x-2"
-                  >
-                    Go back to homepage
-                  </a>
+            <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+              <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+                <div className="w-full flex gap-x-2 items-center">
+                  <WarningCircle
+                    className="text-red-500 w-6 h-6"
+                    weight="fill"
+                  />
+                  <h3 className="text-xl font-semibold text-red-500 overflow-hidden overflow-ellipsis whitespace-nowrap">
+                    Workspace not found
+                  </h3>
                 </div>
               </div>
+              <div className="py-7 px-9 space-y-2 flex-col">
+                <p className="text-white text-sm">
+                  The workspace you're looking for is not available. It may have
+                  been deleted or you may not have access to it.
+                </p>
+              </div>
+              <div className="flex w-full justify-end items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
+                <a
+                  href={paths.home()}
+                  className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+                >
+                  Return to homepage
+                </a>
+              </div>
             </div>
           </ModalWrapper>
         )}