diff --git a/src/DialogComp/Notification.tsx b/src/DialogComp/Notification.tsx index 6f0501f..bd981ec 100644 --- a/src/DialogComp/Notification.tsx +++ b/src/DialogComp/Notification.tsx @@ -5,9 +5,9 @@ function Notification({ children, mode }) { return (
{children} diff --git a/src/DialogComp/styles.css b/src/DialogComp/styles.css index f5b30c5..fd5876f 100644 --- a/src/DialogComp/styles.css +++ b/src/DialogComp/styles.css @@ -233,6 +233,18 @@ button[disabled] { border-radius: 4px; } +.notification-content-screen { + width: max-content; + position: absolute; + bottom: -2.4rem; + left: 15.3rem; + font-size: 0.8rem; + background-color: #292929; + color: #fff; + padding: 0.5rem 1rem; + border-radius: 4px; +} + @keyframes overlayShow { from { opacity: 0; diff --git a/src/MenuBar/TopMenuBar.tsx b/src/MenuBar/TopMenuBar.tsx index 60fa6cf..9e972ce 100644 --- a/src/MenuBar/TopMenuBar.tsx +++ b/src/MenuBar/TopMenuBar.tsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import { useSetSaveOnServer } from "../store/store"; import Button from "../ui/Button"; +import Notification from "@/DialogComp/Notification"; import "./Header.css"; import config from "../utils/config"; @@ -18,6 +19,7 @@ export default function TopMenuBar() { const uuid = useUuid(); const interData = useIntermediateData(); const projectID = useProjectID(); + const [showNotification, setShowNotification] = useState(false); const apiUrl = config.apiUrl; @@ -35,6 +37,10 @@ export default function TopMenuBar() { setCopied(false); }, 3000); + setTimeout(() => { + setShowNotification(false); + }, 8000); + return (
@@ -50,9 +56,26 @@ export default function TopMenuBar() { >
-
downloadFile(uuid, templateURL)}> -
+ {showNotification && ( + + Project is not selected.   + + + )} + {projectID ? ( +
downloadFile(uuid, templateURL)}> +
+ ) : ( +
setShowNotification(true)}> +
+ )}
{uuid && (