Create New in Survey Comp

ideaconsult · Feb 6, 2024 · 0cd7308 · 0cd7308
1 parent 02527cd
commit 0cd7308
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 15 deletions.
diff --git a/src/MenuBar/Header.css b/src/MenuBar/Header.css
@@ -44,9 +44,19 @@
   align-items: center;
   gap: 10px;
   padding: 0.4rem 1.5rem;
+  justify-content: space-between;
 }
 
-.uuid {
+.uuidWORD {
   font-size: small;
   font-weight: 700;
+  color: #282828;
+}
+.uuid {
+  color: #282828;
+}
+.saveUuid {
+  display: flex;
+  gap: 16px;
+  align-items: center;
 }
diff --git a/src/MenuBar/TopMenuBar.tsx b/src/MenuBar/TopMenuBar.tsx
@@ -4,7 +4,7 @@ import Button from "../ui/Button";
 import MakeCopyDialog from "../DialogComp/MakeCopyDialog";
 import OpenFileDialog from "../DialogComp/OpenFileDialog";
 import "./Header.css";
-import { useUuid, useSetSaveOnServer } from "../store/store";
+import { useUuid, useSetUuid, useSetSaveOnServer } from "../store/store";
 
 export default function TopMenuBar({
   setSurveyReset,
@@ -13,20 +13,34 @@ export default function TopMenuBar({
   saveResults,
 }) {
   const uuid = useUuid();
+  const setUUID = useSetUuid();
   const save = useSetSaveOnServer();
   return (
     <div className="topMenuBar">
-      <div onClick={() => save()}>
-        <Button label="Save" />
-      </div>
-      {/* <OpenFileDialog setTemplateURL={setTemplateURL} />
+      <div className="saveUuid">
+        <div onClick={() => save()}>
+          <Button label="Save" />
+        </div>
+        {/* <OpenFileDialog setTemplateURL={setTemplateURL} />
       <MakeCopyDialog />
       <Button label="Publish" /> */}
-      {uuid && (
-        <p>
-          <span className="uuid">UUID:</span> {uuid}
-        </p>
-      )}
+        {uuid && (
+          <p className="uuid">
+            <span className="uuidWORD">UUID:</span> {uuid}
+          </p>
+        )}
+      </div>
+      <button
+        className="createNewBtn"
+        onClick={() => {
+          // setShowStartScreen(false);
+          // setStartScreen();
+          setSurveyReset(true);
+          setUUID("");
+        }}
+      >
+        Create a new Draft
+      </button>
     </div>
   );
 }
diff --git a/src/StartScreenComp/StartScreenComp.css b/src/StartScreenComp/StartScreenComp.css
@@ -23,8 +23,8 @@
 .createNewBtn {
   border-radius: 8px;
   text-transform: uppercase;
-  padding: 0.6rem 1rem;
-  font-size: 1rem;
+  padding: 0.6rem 0.4rem;
+  font-size: 0.9rem;
   font-weight: 500;
   color: #fff;
   font-family: inherit;

diff --git a/src/SurveyComp/SurveyComp.jsx b/src/SurveyComp/SurveyComp.jsx
@@ -29,9 +29,9 @@ function SurveyComponent({ setResult, surveyReset, templateURL }) {
 
   useEffect(() => {
     surveyReset && !UUID && survey.clear();
-    surveyReset && !UUID && window.localStorage.setItem(storageItemKey, "");
+    // surveyReset && !UUID && window.localStorage.setItem(storageItemKey, "");
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [surveyReset]);
+  }, [surveyReset, UUID]);
 
   survey.addNavigationItem({
     id: "sv-nav-clear-page",

diff --git a/src/index.css b/src/index.css
@@ -58,6 +58,10 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+pre {
+  color: #282828 !important;
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;