Zoom component

whiteboard-client/package.json

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

whiteboard-client/src/components/Zoom/Zoom.css

@@ -0,0 +1,65 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap');
+
+.zoom-area {
+    height: 100px;
+    font-family: 'Lato', sans-serif;
+    position: relative;
+    top: -800px;
+    right: -550px;
+
+}
+
+.zoom-container {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 2rem;
+    border: 2px solid #00B87C;
+    border-radius: 10px;
+    width: 223px;
+    height: 48px;
+    padding: 10px;
+    position: relative;
+
+
+}
+
+.zoom-amount {
+    font-size: 15px;
+    font-weight: 900;
+    color: #999999;
+}
+
+.zoom-out img,
+.zoom-in img {
+    height: 1.5rem;
+    padding: .3rem;
+    cursor: pointer;
+
+    fill: #ffff;
+}
+
+
+.reset {
+    border: 2px solid #00B87C;
+    border-radius: 5px;
+
+    width: 50px;
+    color: #00B87C;
+
+}
+
+.reset-btn {
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    border: none;
+    padding: 1px 2px;
+    cursor: pointer;
+    font-family: 'Lato', sans-serif;
+    background: #FFFFFF;
+    color: #00B87C;
+    font-weight: 500;
+
+
+}

whiteboard-client/src/components/Zoom/Zoom.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import zoomout from './zimgs/zoomout.png'
+import zoomin from './zimgs/zoomin.png'
+import "./Zoom.css";
+
+
+
+const Zoom = () => {
+
+    const zoomOut=()=>{
+        alert('zoom out')
+    }
+
+    const zoomIn=()=>{
+        alert('zoom in')
+    }
+
+
+    return (
+        <div className="zoom-area">
+        <div className="zoom-container">
+         <div className="zoom-amount">100%</div>
+         <div onClick = {zoomOut} className="zoom-out">
+            <img src={zoomout} alt={zoomout}/>
+         </div>
+         <div onClick = {zoomIn}  className="zoom-in">
+         <img class ="zoom" src={zoomin} alt={zoomin} />
+              </div>  
+
+              <div className="reset">
+                  <button className="reset-btn">Reset</button>
+               </div>   
+        </div>
+        </div>
+    )
+}
+
+<div>Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
+
+export default Zoom;

whiteboard-client/src/index.js

@@ -1,11 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import SideBar from "./components/sidebar-component/sidebar.js";
 import "./index.css";
-import Whiteboard from "./pages/Whiteboard";
+// import Whiteboard from "./pages/Whiteboard";
 
 ReactDOM.render(
   <React.StrictMode>
-    <Whiteboard />
+    {/* <Whiteboard /> */}
+    <SideBar/>
   </React.StrictMode>,
   document.getElementById("root")
 );

whiteboard-client/src/pages/Whiteboard.js

@@ -7,18 +7,25 @@ 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 Zoom from "../components/Zoom/Zoom";
+import Participants from "../components/Participants";
 
 function Whiteboard() {
   return (
     <div className="App">
       <SideBar />
       <WhiteboardCanvas />
+
       {/* <header className="App-header">Zuri whiteboard plugin</header> */}
       <Participants />
       <ToolBar />
+
       <ColorPicker />
       <ShapeSelector />
       <SavedFileView />
+      <Zoom />
+      {/* <header className="App-header">Zuri whiteboard plugin</header> */}
+      <Participants />
     </div>
   );
 }