Toolbar5

whiteboard-client/package.json

@@ -9,9 +9,16 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+
     "styled-components": "^5.3.1",
+    "web-vitals": "^1.0.1"
     "web-vitals": "^1.1.2",
     "styled-components": "^5.3.1"
+
+    "styled-components": "^5.3.1",
+    "web-vitals": "^1.1.2",
+    "styled-components": "^5.3.1"
+
   },
   "scripts": {
     "start": "react-scripts start",

whiteboard-client/src/components/toolbar-5/Toolbar5.css

@@ -0,0 +1,33 @@
+.toolContainer {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  width: 430px;
+  height: 45px;
+  left: 822px;
+  top: 364px;
+  background: #ffffff;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 9px;
+}
+
+.tools {
+  height: 34px;
+  width: 34px;
+  left: 1089px;
+  top: 370px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #ffffff;
+  border: 1px solid #c4c4c4;
+  border-radius: 10px;
+  margin: 5px 5px 0px 5px;
+}
+
+img {
+  background: whitesmoke;
+  width: inherit;
+  margin: 5px;
+  border-radius: 9px;
+}

whiteboard-client/src/components/toolbar-5/Toolbar5.js

@@ -0,0 +1,52 @@
+import React from "react";
+import "./Toolbar5.css";
+import bullets from "./asset/bullets.svg";
+import trash from "./asset/trash.svg";
+import eclipse from "./asset/eclipse.svg";
+import line_icon from "./asset/line_icon.svg";
+import link from "./asset/link.svg";
+import pin from "./asset/pin.svg";
+import twosquares from "./asset/twosquares.svg";
+import active from "./asset/active.svg";
+
+function Toolbar5() {
+  return (
+    <div>
+      <div className="toolContainer">
+        <div className="tools">
+          <img src={pin} alt="" />
+        </div>
+
+        <div className="tools">
+          <img src={eclipse} alt="" />
+        </div>
+
+        <div className="tools">
+          <img src={line_icon} alt="" />
+        </div>
+
+        <div className="tools">
+          <img src={active} alt="" />
+        </div>
+
+        <div className="tools">
+          <img src={twosquares} alt="" />
+        </div>
+
+        <div className="tools">
+          <img src={link} alt="" />
+        </div>
+
+        <div className="tools">
+          <img src={trash} alt="" />
+        </div>
+
+        <div className="tools">
+          <img src={bullets} alt="" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Toolbar5;

whiteboard-client/src/pages/Whiteboard.js

@@ -1,22 +1,53 @@
 import React from "react";
 import "../App.css";
+
+import Participants from "../components/Participants";
+import Toolbar5 from "../components/toolbar-5/Toolbar5";
+import WhiteboardCanvas from "../components/Whiteboard-Canvas/WhiteboardCanvas";
+import Participants from "../components/Participants";
+import ToolBar from "../components/ToolBar";
+import SideBar from "../components/sidebar-component/sidebar.js";
+import ShapeSelector from "../components/ShapesSelector/ShapeSelector";
+import SavedFileView from "../components/SavedFileView/SavedFileView";
+import ColorPicker from "../components/Colorpicker/Colorpicker";
 // import WhiteboardCanvas from "../components/Whiteboard-Canvas/WhiteboardCanvas";
 import ToolBar from "../components/ToolBar/ToolBar";
 import SearchBar from "../components/SearchBar/SearchBar";
 import Zoom from "../components/Zoom/Zoom";
 import Header from "../components/Header/Header";
 import Board from "../components/Whiteboard-Canvas/Board";
 
+
 function Whiteboard() {
   return (
     <div className="App">
+
+
+      {/* <header className="App-header">Zuri whiteboard plugin</header> */}
+      <Participants />
+
+      {/* issues 268 Tool bar  */}
+      <Toolbar5 />
+
+      <SideBar />
+      <WhiteboardCanvas />
+      {/* <header className="App-header">Zuri whiteboard plugin</header> */}
+      <Participants />
+      <ToolBar />
+      <ColorPicker />
+      <ShapeSelector />
+
+      <SavedFileView />
+
+
       <SearchBar />
       <Header />
       {/* <WhiteboardCanvas /> */}
       <Board />
       <ToolBar />
       <Zoom />
     </div>
+
   );
 }