Modal Window with Project Select

src/DialogComp/PreferencesDialog.tsx

@@ -0,0 +1,49 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import React, { useState } from "react";
+
+import Select from "@/ui/Select";
+
+import "./styles.css";
+const selectUrl = "https://enanomapper.adma.ai/api/projects.json";
+
+const PreferencesDialog = ({ setProjectName, projectName }) => {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button id="makeCopy" className="buttonMenu">
+          Preferences
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className="DialogOverlay" />
+        <Dialog.Content className="DialogContent">
+          <Dialog.Title className="DialogTitle">Choose Project</Dialog.Title>
+          <Dialog.Description className="DialogDescription">
+            You can choose your project.
+            <br />
+          </Dialog.Description>
+
+          <Select
+            url={selectUrl}
+            setProjectName={setProjectName}
+            projectName={projectName}
+          />
+
+          <div
+            style={{
+              display: "flex",
+              marginTop: 25,
+              justifyContent: "flex-end",
+            }}
+          >
+            <Dialog.Close asChild>
+              <button className="Button">Ok</button>
+            </Dialog.Close>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+export default PreferencesDialog;

src/IconsComponents/CloseIcon.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export default function CloseIcon() {
+  return (
+    <svg
+      width="11"
+      height="11"
+      viewBox="0 0 11 11"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M1 10L9.99999 1.00001" stroke="#ccc" strokeWidth="2" />
+      <path d="M1 1L9.99999 9.99999" stroke="#ccc" strokeWidth="2" />
+    </svg>
+  );
+}

src/MenuBar/Header.css

@@ -75,3 +75,9 @@
   gap: 16px;
   align-items: center;
 }
+
+.projectPromt {
+  font-size: 13px;
+  color: #ea5252;
+  font-weight: 500;
+}

src/MenuBar/LogoBar.tsx

@@ -1,14 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 import { Navigate } from "react-router-dom";
 import "./Header.css";
 
+import PreferencesDialog from "@/DialogComp/PreferencesDialog";
+
 import { useSetUuid, useSetIsShosen } from "../store/store";
 import { Link } from "react-router-dom";
 import Button from "@/ui/Button";
 
 export default function LogoBar({ startScreen, uuid }) {
   const setUUID = useSetUuid();
   const setIdShosen = useSetIsShosen();
+  const [projectName, setProjectName] = useState(() =>
+    localStorage.getItem("project")
+  );
   return (
     <div className={startScreen ? "headerStartScreen" : "header"}>
       <div>
@@ -28,15 +33,18 @@ export default function LogoBar({ startScreen, uuid }) {
         </Link>
       </div>
       <div style={{ display: "flex", gap: "22px", alignItems: "center" }}>
-        {localStorage.getItem("project") && (
+        {projectName ? (
           <div className="projectName">
             <span className="projectLabel">Project:</span>
-            <span>{localStorage.getItem("project")}</span>
+            <span>{projectName}</span>
           </div>
+        ) : (
+          <p className="projectPromt">Project is not selected</p>
         )}
-        <Link to="/preferences">
-          <Button label="Preferences" disabled={false} />
-        </Link>
+        <PreferencesDialog
+          setProjectName={setProjectName}
+          projectName={projectName}
+        />
       </div>
     </div>
   );

src/StartScreenComp/StartScreenComp.tsx

@@ -2,11 +2,10 @@
 import React, { useState } from "react";
 import { Navigate } from "react-router-dom";
 import MakeCopyDialog from "../DialogComp/MakeCopyDialog";
-import ProcessingBluePrintDialog from "../DialogComp/ProcessingBluePrintDialog";
+
 import LogoBar from "../MenuBar/LogoBar";
 import Button from "../ui/Button";
 import config from "../utils/config";
-import urlConfig from "../utils/appUrl";
 import CreateNewDialog from "./../DialogComp/CreateNewDialog";
 
 import TemplateTable from "@/DataTable/TemplateTable";

src/ui/Select.css

@@ -10,6 +10,7 @@
   display: flex;
   align-items: center;
   gap: 12px;
+  margin-bottom: 1rem;
 }
 
 .selectOptions {
@@ -18,6 +19,8 @@
   font-size: 0.8rem;
   cursor: pointer;
   user-select: none;
+  height: 260px;
+  overflow-y: auto;
 }
 
 .projectLabel {
@@ -35,3 +38,8 @@
   align-items: center;
   gap: 12px;
 }
+
+.closeBtn {
+  cursor: pointer;
+  margin-left: 1rem;
+}