canvas design complete

Author: aruncode49

src/components/workspace/Canvas.tsx

@@ -1,3 +1,4 @@
+import { MainMenu, WelcomeScreen } from "@excalidraw/excalidraw";
 import dynamic from "next/dynamic";
 const Excalidraw = dynamic(
   async () => (await import("@excalidraw/excalidraw")).Excalidraw,
@@ -21,7 +22,18 @@ export default function Canvas() {
             toggleTheme: false,
           },
         }}
-      />
+      >
+        <MainMenu>
+          <MainMenu.DefaultItems.SaveAsImage />
+          <MainMenu.DefaultItems.ClearCanvas />
+          <MainMenu.DefaultItems.ChangeCanvasBackground />
+        </MainMenu>
+
+        <WelcomeScreen>
+          <WelcomeScreen.Hints.MenuHint />
+          <WelcomeScreen.Hints.ToolbarHint />
+        </WelcomeScreen>
+      </Excalidraw>
     </div>
   );
 }

src/components/workspace/Header.tsx

@@ -18,7 +18,7 @@ const links = [
   {
     id: 2,
     name: "Both",
-    class: "border-l border-r border-zinc-600",
+    class: "border-l border-r border-zinc-300",
   },
   {
     id: 3,
@@ -54,7 +54,7 @@ const Header = ({
 
       {/* selector (doc, both, canvas) */}
       <div>
-        <ul className="flex items-center text-sm border border-zinc-400 rounded">
+        <ul className="flex items-center text-sm border border-zinc-300 rounded">
           {links.map((link) => (
             <li
               key={link.id}