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 7663d46c2..98a77a425 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 9132b6cd2..16e4dfaee 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>
--
GitLab