Update palette position

src/components/WhiteBoard/WhiteBoard.js

@@ -44,7 +44,7 @@ function WhiteBoard() {
   function toggleEraser() {
     isErasing = !isErasing;
     context.strokeStyle = isErasing ? backgroundColor : defaultColor;
-    context.lineWidth = 25
+    context.lineWidth = 25;
   }
 
   function drawRemoteData(x, y) {
@@ -93,7 +93,9 @@ function WhiteBoard() {
 
     socket.addEventListener("message", received);
 
-    document.getElementById('eraserButton').addEventListener('click', toggleEraser);
+    document
+      .getElementById("eraserButton")
+      .addEventListener("click", toggleEraser);
 
     return () => {
       window.addEventListener("resize", updateCanvasSize);
@@ -106,51 +108,55 @@ function WhiteBoard() {
 
   function startDrawing(event) {
     isDrawing = true;
-    const canvas = document.getElementById('canvas');
+    const canvas = document.getElementById("canvas");
     var mousePos = getMousePos(canvas, event);
-  
+
     if (!isErasing) {
       context.strokeStyle = document.getElementById("colorPicker").value;
       context.lineWidth = document.getElementById("lineSize").value;
     }
-  
+
     lastX = mousePos.x;
     lastY = mousePos.y;
     lastSent = Date.now();
-    sendDrawData(mousePos.x, mousePos.y, "start", context.strokeStyle, context.lineWidth);
-  }  
+    sendDrawData(
+      mousePos.x,
+      mousePos.y,
+      "start",
+      context.strokeStyle,
+      context.lineWidth
+    );
+  }
 
   function stopDrawing(event) {
     isDrawing = false;
-    const canvas = document.getElementById('canvas');
+    const canvas = document.getElementById("canvas");
     var mousePos = getMousePos(canvas, event);
-  
+
     lastX = mousePos.x;
     lastY = mousePos.y;
     lastSent = Date.now();
     sendDrawData(mousePos.x, mousePos.y, "stop");
   }
-
 
   function draw(event) {
     if (!isDrawing) return;
-  
-    const canvas = document.getElementById('canvas');
+
+    const canvas = document.getElementById("canvas");
     var mousePos = getMousePos(canvas, event);
-  
+
     if (Date.now() - lastSent > 10) {
       sendDrawData(mousePos.x, mousePos.y, "drawing");
       lastSent = Date.now();
     }
     drawData(mousePos.x, mousePos.y);
-  }  
+  }
 
   function drawData(x, y) {
     context.lineJoin = "round";
     context.lineCap = "round";
     context.beginPath();
 
-
     context.moveTo(lastX, lastY);
 
     context.lineTo(x, y);
@@ -172,10 +178,10 @@ function WhiteBoard() {
   }
 
   function getMousePos(canvas, evt) {
-    var rect = canvas.getBoundingClientRect(); 
+    var rect = canvas.getBoundingClientRect();
     return {
       x: evt.clientX - rect.left,
-      y: evt.clientY - rect.top
+      y: evt.clientY - rect.top,
     };
   }
 
@@ -184,22 +190,23 @@ function WhiteBoard() {
       <div className="whiteboard-title flex font-fjalla text-gray-900 self-start text-2xl ml-1 border-b w-full mb-2 dark:text-white">
         Whiteboard
       </div>
-      <div style={{ width: '865px', height: '450px' }}>
+      <div style={{ width: "865px", height: "450px" }}>
         <canvas
           id="canvas"
           width="865"
           height="450"
           className="rounded-2xl border-gray-200 shadow-sm"
-          style={{ width: '865px', height: '450px' }}
+          style={{ width: "865px", height: "450px" }}
         ></canvas>
       </div>
-      <div>
-        <input type="color" id="colorPicker" defaultValue="#000000" />
+      <div className="whiteboard-palette flex items-center justify-center p-3 gap-3">
+        <div className="rounded-full">
+          <input type="color" id="colorPicker" defaultValue="#000000" className="w-8 h-8"/>
+        </div>
         <input type="range" id="lineSize" min="1" max="20" defaultValue="1" />
         <button id="eraserButton">Eraser</button>
       </div>
     </div>
   );
-
 }
 export default WhiteBoard;