From eebafd732780989a31601d5d8174eb142b497ad3 Mon Sep 17 00:00:00 2001
From: Sean Hatfield <seanhatfield5@gmail.com>
Date: Thu, 2 Nov 2023 16:17:02 -0700
Subject: [PATCH] Replace old modals to match UI (#328)

* workspace not found modal updated to match ui

* update text preview modal to match new ui

* Mobile styles

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>
---
 frontend/src/components/WorkspaceChat/index.jsx  | 14 +++++++-------
 frontend/src/pages/Admin/Chats/ChatRow/index.jsx | 10 +++++-----
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/index.jsx b/frontend/src/components/WorkspaceChat/index.jsx
index 7663d46c..98a77a42 100644
--- a/frontend/src/components/WorkspaceChat/index.jsx
+++ b/frontend/src/components/WorkspaceChat/index.jsx
@@ -31,21 +31,21 @@ export default function WorkspaceChat({ loading, workspace }) {
           <dialog
             open={true}
             style={{ zIndex: 100 }}
-            className="fixed top-0 flex bg-black bg-opacity-50 w-[100vw] h-full items-center justify-center "
+            className="fixed top-0 flex bg-black bg-opacity-50 w-full md:w-[100vw] h-full items-center justify-center"
           >
-            <div className="w-fit px-10 p-4 w-1/4 rounded-lg bg-white shadow dark:bg-stone-700 text-black dark:text-slate-200">
-              <div className="flex flex-col w-full">
-                <p className="font-semibold text-red-500">
-                  We cannot locate this workspace!
+            <div className="relative w-full md:max-w-2xl max-h-full bg-main-gradient rounded-lg shadow p-4">
+              <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">
+                <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="border border-gray-800 text-gray-800 hover:bg-gray-100 px-4 py-1 rounded-lg dark:text-slate-200 dark:border-slate-200 dark:hover:bg-stone-900"
+                    className="border border-slate-200 text-white hover:bg-slate-200 hover:text-slate-800 px-4 py-2 rounded-lg text-sm items-center flex gap-x-2 transition-all duration-300"
                   >
                     Go back to homepage
                   </a>
diff --git a/frontend/src/pages/Admin/Chats/ChatRow/index.jsx b/frontend/src/pages/Admin/Chats/ChatRow/index.jsx
index 9132b6cd..16e4dfae 100644
--- a/frontend/src/pages/Admin/Chats/ChatRow/index.jsx
+++ b/frontend/src/pages/Admin/Chats/ChatRow/index.jsx
@@ -71,21 +71,21 @@ function hideModal(modalName) {
 const TextPreview = ({ text, modalName }) => {
   return (
     <dialog id={modalName} className="bg-transparent outline-none w-full">
-      <div className="relative w-full max-w-2xl max-h-full min-w-1/2">
-        <div className="min-w-1/2 relative rounded-lg shadow bg-stone-700">
+      <div className="relative w-full md:max-w-2xl max-h-full">
+        <div className="relative bg-main-gradient rounded-lg shadow">
           <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-600">
             <h3 className="text-xl font-semibold text-white">Viewing Text</h3>
             <button
               onClick={() => hideModal(modalName)}
               type="button"
-              className="text-gray-400 bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center hover:bg-gray-600 hover:text-white"
+              className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
               data-modal-hide="staticModal"
             >
               <X className="text-gray-300 text-lg" />
             </button>
           </div>
-          <div className="w-full p-4 flex">
-            <pre className="w-full flex h-[200px] py-2 px-4 overflow-scroll rounded-lg bg-gray-200 text-slate-800">
+          <div className="w-full p-6">
+            <pre className="w-full h-[200px] py-2 px-4 whitespace-pre-line overflow-auto rounded-lg bg-zinc-900 border border-gray-500 text-white text-sm">
               {text}
             </pre>
           </div>