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>
This commit is contained in:
Sean Hatfield 2023-11-02 16:17:02 -07:00 committed by GitHub
parent c3abbfbf27
commit eebafd7327
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 12 deletions

View File

@ -31,21 +31,21 @@ export default function WorkspaceChat({ loading, workspace }) {
<dialog <dialog
open={true} open={true}
style={{ zIndex: 100 }} 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="relative w-full md:max-w-2xl max-h-full bg-main-gradient rounded-lg shadow p-4">
<div className="flex flex-col w-full"> <div className="flex flex-col gap-y-4 w-full p-6 text-center">
<p className="font-semibold text-red-500"> <p className="font-semibold text-red-500 text-xl">
We cannot locate this workspace! Workspace not found!
</p> </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. It looks like a workspace by this name is not available.
</p> </p>
<div className="flex w-full justify-center items-center mt-4"> <div className="flex w-full justify-center items-center mt-4">
<a <a
href={paths.home()} 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 Go back to homepage
</a> </a>

View File

@ -71,21 +71,21 @@ function hideModal(modalName) {
const TextPreview = ({ text, modalName }) => { const TextPreview = ({ text, modalName }) => {
return ( return (
<dialog id={modalName} className="bg-transparent outline-none w-full"> <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="relative w-full md:max-w-2xl max-h-full">
<div className="min-w-1/2 relative rounded-lg shadow bg-stone-700"> <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"> <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> <h3 className="text-xl font-semibold text-white">Viewing Text</h3>
<button <button
onClick={() => hideModal(modalName)} onClick={() => hideModal(modalName)}
type="button" 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" data-modal-hide="staticModal"
> >
<X className="text-gray-300 text-lg" /> <X className="text-gray-300 text-lg" />
</button> </button>
</div> </div>
<div className="w-full p-4 flex"> <div className="w-full p-6">
<pre className="w-full flex h-[200px] py-2 px-4 overflow-scroll rounded-lg bg-gray-200 text-slate-800"> <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} {text}
</pre> </pre>
</div> </div>