Disable Buttons until Item has been selected

src/IconsComponents/CopyFileIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function CopyFileIcon() {
+export default function CopyFileIcon({ disabled }) {
   return (
     <svg
       width="14"
@@ -11,9 +11,12 @@ export default function CopyFileIcon() {
     >
       <path
         d="M12.9459 12.7353H4C3.72386 12.7353 3.5 12.5114 3.5 12.2353V1C3.5 0.723858 3.72386 0.5 4 0.5H10.2947C10.4255 0.5 10.551 0.551223 10.6445 0.64269L13.2957 3.23786C13.3918 3.33191 13.4459 3.46071 13.4459 3.59517V12.2353C13.4459 12.5114 13.2221 12.7353 12.9459 12.7353Z"
-        stroke="black"
+        stroke={disabled ? "#999999" : "black"}
+      />
+      <path
+        d="M1 4.41177V14C1 14.5523 1.44772 15 2 15H10"
+        stroke={disabled ? "#999999" : "#000"}
       />
-      <path d="M1 4.41177V14C1 14.5523 1.44772 15 2 15H10" stroke="black" />
     </svg>
   );
 }

src/MenuBar/Header.css

@@ -54,6 +54,7 @@
 }
 .uuid {
   color: #282828;
+  margin: 0;
 }
 .saveUuid {
   display: flex;

src/StartScreenComp/StartScreenComp.css

@@ -109,6 +109,8 @@ table {
   overflow-y: scroll;
   overflow-x: hidden;
   height: 285px;
+  scrollbar-color: #919191 #d5d5d5;
+  scrollbar-width: thin;
 }
 thead th {
   position: sticky;
@@ -149,6 +151,3 @@ tr.choosen {
 iframe {
   border: none;
 }
-
-/* .previewPlaceholder {
-} */

src/StartScreenComp/StartScreenComp.tsx

@@ -125,23 +125,28 @@ export default function StartScreenComp({
             value={value}
             mode={mode}
           />
+
           <div className="buttonsWrap">
             <div onClick={editORView}>
-              <Button label={mode == "Finalized" ? "View" : "Edit"} />
+              <Button
+                disabled={!UUID}
+                label={mode == "Finalized" ? "View" : "Edit"}
+              />
             </div>
-            <Button label="Make a copy" />
+            <Button disabled={!UUID} label="Make a copy" />
             <div
               onClick={() => {
                 copyLink();
                 setCopied(true);
               }}
             >
               <Button
+                disabled={!UUID}
                 label={copied ? "Copied to clipboard!" : "Share a link"}
               />
             </div>
             <div onClick={dowloadXLS}>
-              <Button label="Download XLS" />
+              <Button disabled={!UUID} label="Download XLS" />
             </div>
           </div>
         </div>

src/ui/Button.css

@@ -12,7 +12,7 @@ leading-none rounded text-violet11 text-[14px] hover:bg-indigo-100 */
   color: #282828;
 }
 
-.buttonMenu:hover {
+.buttonMenu:hover:enabled {
   background-color: #c8edff;
   outline: none;
   border: none;
@@ -21,3 +21,8 @@ leading-none rounded text-violet11 text-[14px] hover:bg-indigo-100 */
   outline: none;
   border: none;
 }
+button:disabled,
+button[disabled] {
+  background-color: #e7e7e7;
+  color: #919191;
+}

src/ui/Button.tsx

@@ -6,11 +6,13 @@ import PublishIcon from "../IconsComponents/PublishIcon";
 import SaveIcon from "../IconsComponents/SaveIcon";
 import "./Button.css";
 
-export default function Button({ label }) {
+export default function Button({ label, disabled }) {
   return (
-    <button className="buttonMenu">
+    <button className="buttonMenu" disabled={disabled ? true : false}>
       {label == "New" && <NewFileIcon />}
-      {label == "Make a copy" && <CopyFileIcon />}
+      {label == "Make a copy" && (
+        <CopyFileIcon disabled={disabled ? true : false} />
+      )}
       {label == "Open" && <OpenFileIcon />}
       {label == "Publish" && <PublishIcon />}
       {label == "Save" && <SaveIcon />}