wasp-lang/wasp
1
1
Fork 0
mirror of https://github.com/wasp-lang/wasp.git synced 2024-12-29 20:12:28 +03:00
Code Issues Projects Releases Wiki Activity

Logs box in wasp-ai app is now dark and gets green/red hue according to success/failure.

Browse Source
This commit is contained in:
Martin Sosic 2023-06-30 19:40:23 +02:00
parent c8cb6393da
commit 20790435fa
3 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
wasp-ai/src/client/Main.css
View File

@ -33,6 +33,10 @@ textarea {
@apply bg-slate-50 text-slate-800 p-8 rounded-xl;
}
.big-box-dark {
@apply bg-slate-900 text-white p-8 rounded-xl;
}
.status-icon {
@apply rounded-full w-[27px] h-[27px] flex items-center justify-center;
}

3
wasp-ai/src/client/components/Loader.css
View File

@ -46,8 +46,7 @@
height: 24px;
width: 24px;
clip: rect(0, 24px, 24px, 12px);
border: 3px solid;
@apply border-slate-800;
border: 3px solid #fff;
border-radius: 50%;
animation: loader-1-3 1.2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

13
wasp-ai/src/client/pages/ResultPage.jsx
View File

@ -267,7 +267,14 @@ export const ResultPage = () => {
{logs && (
<>
<header className="big-box mt-4 mb-4 flex justify-between items-flex-start">
<header className="relative big-box-dark mt-4 mb-4 flex justify-between items-flex-start">
{currentStatus.status === "success" && (
<div className="absolute inset-0 bg-green-500 opacity-20 z-0"></div>
)}
{currentStatus.status === "error" && (
<div className="absolute inset-0 bg-red-500 opacity-20 z-0"></div>
)}
<div className="flex-shrink-0 mr-3">
{currentStatus.status === "inProgress" && <Loader />}
{currentStatus.status === "success" && (
@ -308,10 +315,10 @@ export const ResultPage = () => {
</pre>
)}
{logs.length > 1 && (
<div className="flex-shrink-0 ml-3">
<div className="flex-shrink-0 ml-3 z-10">
<button
onClick={toggleLogs}
className="p-2 px-4 rounded-full bg-slate-100 hover:bg-slate-200"
className="p-2 px-4 rounded-full bg-slate-800 hover:bg-slate-700"
>
{logsVisible ? "Collapse the logs" : "Expand the logs"}
</button>