Disable buttons that can't be used yet

Also make construction message hidable.
related to #360

app/web/src/components/EditorMenu/EditorMenu.tsx

@@ -21,8 +21,9 @@ const EditorMenu = () => {
         <Svg name='drag-grid' className="w-4 p-px" />
       </div>
       <button
-        className="text-gray-300 px-3 h-full"
+        className="text-gray-300 px-3 h-full cursor-not-allowed"
         aria-label="editor settings"
+        disabled
       >
         <Svg name='gear' className="w-7 p-px" />
       </button>
@@ -32,10 +33,10 @@ const EditorMenu = () => {
           handleRender={handleRender}
           handleStlDownload={handleStlDownload}
         />
-        <button className="text-gray-100">
+        <button className="text-gray-100 cursor-not-allowed" disabled>
           Edit
         </button>
-        <button className="text-gray-100">
+        <button className="text-gray-100 cursor-not-allowed" disabled>
           View
         </button>
       </div>

app/web/src/components/IdeHeader/IdeHeader.tsx

@@ -3,9 +3,19 @@ import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import { copyTextToClipboard } from 'src/helpers/clipboard'
 import { encode } from 'src/helpers/compress'
 
-const TopButton = ({children, onClick}: {onClick?: () => void, children: React.ReactNode}) => (
+const TopButton = ({
-  <button onClick={onClick} className="flex bg-gray-500 h-10 justify-center items-center px-4 rounded">
+    onClick,
-    <div className="rounded-full bg-gray-200 h-6 w-6 mr-4"/>
+    children,
+    className,
+    iconColor,
+  }: {
+    onClick?: () => void
+    children: React.ReactNode
+    className?: string
+    iconColor: string
+  }) => (
+  <button onClick={onClick} className={`flex bg-gray-200 h-10 justify-center items-center px-4 rounded ${className}`}>
+    <div className={`rounded-full h-6 w-6 mr-4 ${iconColor}`}/>
     {children}
   </button>
 )
@@ -16,8 +26,11 @@ const IdeHeader = ({handleRender}: {handleRender: () => void}) => {
       <div className="bg-gray-700 pr-48 h-full">
       </div>
       <div className="text-gray-200 flex gap-4 mr-4">
-        <TopButton onClick={handleRender}>Render</TopButton>
+        <TopButton
-
+          className="bg-gray-600 text-gray-200"
+          iconColor="bg-gray-300"
+          onClick={handleRender}
+        >Render</TopButton>
 
         <Popover className="relative outline-none w-full h-full">
           {({open}) => {
@@ -25,9 +38,8 @@ const IdeHeader = ({handleRender}: {handleRender: () => void}) => {
             return (
               <>
                 <Popover.Button className="h-full w-full outline-none">
-                  <TopButton>Share</TopButton>
+                  <TopButton iconColor="bg-gray-600" className="text-gray-700">Share</TopButton>
                 </Popover.Button>
-
                 {open && <Popover.Panel className="absolute z-10 mt-4 right-0">
                   <Tabs
                     className="bg-gray-300 rounded-md shadow-md overflow-hidden text-gray-700"
@@ -52,7 +64,7 @@ const IdeHeader = ({handleRender}: {handleRender: () => void}) => {
             )
           }}
         </Popover>
-        <TopButton>Fork</TopButton>
+        {/* <TopButton>Fork</TopButton> */}
       </div>
     </div>
   )

app/web/src/components/IdeSideBar/IdeSideBar.tsx

@@ -9,7 +9,7 @@ const IdeSideBar = () => {
             <Svg className="w-12" name="favicon" />
           </Link>
         </div>
-      <button className=" text-gray-300 p-2 pb-4 flex justify-center" aria-label="IDE settings">
+      <button className="text-gray-300 p-2 pb-4 flex justify-center cursor-not-allowed" aria-label="IDE settings" disabled>
         <Svg name="big-gear" />
       </button>
     </div>

app/web/src/components/IdeToolbarNew/IdeToolbarNew.js

@@ -1,4 +1,4 @@
-import { createContext, useEffect } from 'react'
+import { createContext, useEffect, useState } from 'react'
 import IdeContainer from 'src/components/IdeContainer'
 import { isBrowser } from '@redwoodjs/prerender/browserUtils'
 import { useIdeState } from 'src/helpers/hooks/useIdeState'
@@ -8,6 +8,7 @@ import { flow } from 'lodash/fp'
 import OutBound from 'src/components/OutBound'
 import IdeSideBar from 'src/components/IdeSideBar'
 import IdeHeader from 'src/components/IdeHeader'
+import Svg from 'src/components/Svg'
 
 export const githubSafe = (url) =>
   url.includes('github.com')
@@ -21,6 +22,7 @@ const prepareEncodedUrl = flow(decodeURIComponent, githubSafe)
 export const IdeContext = createContext()
 const IdeToolbarNew = ({ cadPackage }) => {
   const [state, thunkDispatch] = useIdeState()
+  const [shouldShowConstructionMessage, setShouldShowConstructionMessage] = useState(true)
   const scriptKey = 'encoded_script'
   const scriptKeyV2 = 'encoded_script_v2'
   const fetchText = 'fetch_text_v1'
@@ -75,8 +77,8 @@ const IdeToolbarNew = ({ cadPackage }) => {
           <nav className="flex">
             <IdeHeader handleRender={handleRender} />
           </nav>
-          <div className="py-2 bg-pink-200">
+          {shouldShowConstructionMessage && <div className="py-2 bg-pink-200 flex">
-            <div className="mx-auto max-w-3xl">
+            <div className="flex-grow text-center">
               We're still working on this. Since you're here, have a look what{' '}
               <OutBound
                 className="text-pink-700"
@@ -86,7 +88,10 @@ const IdeToolbarNew = ({ cadPackage }) => {
               </OutBound>
               .
             </div>
-          </div>
+            <button className="flex" onClick={() => setShouldShowConstructionMessage(false)}>
+              <Svg className="h-4 w-6 text-gray-500 mr-3 items-center" name="x"/>
+            </button>
+          </div>}
           <IdeContainer />
         </div>
       </div>

app/web/src/components/PanelToolbar/PanelToolbar.tsx

@@ -11,7 +11,7 @@ const PanelToolbar = ({ panelName }: { panelName : string }) => {
           <Svg name='drag-grid' className="w-4 p-px" />
         </div>
       )}
-      <button className="bg-gray-500 text-gray-300 px-3 rounded-br-lg h-full" aria-label={`${panelName} settings`}>
+      <button className="bg-gray-500 text-gray-300 px-3 rounded-br-lg h-full cursor-not-allowed" aria-label={`${panelName} settings`} disabled>
         <Svg name='gear' className="w-7 p-px" />
       </button>
     </div>