Merge pull request #91 from analog-m4/fix/light-mode

Fix Light Mode Bug

src/components/WhiteBoard/WhiteBoard.js

@@ -16,7 +16,9 @@ function WhiteBoard() {
   var remoteLastY = 0;
   var isErasing = false;
   const defaultColor = "#000000";
-  const backgroundColor = appColor === "light" ? "white" : "#636363";
+
+  const backgroundColor = appColor === "light" ? "white" : "#8d8c8d";
+
 
   function received(data) {
     const jsonData = JSON.parse(data.data);
@@ -45,7 +47,9 @@ function WhiteBoard() {
   function toggleEraser() {
     isErasing = !isErasing;
     context.strokeStyle = isErasing ? backgroundColor : defaultColor;
-    context.lineWidth = 25;
+
+    context.lineWidth = 25
+
   }
 
   function drawRemoteData(x, y) {
@@ -94,9 +98,9 @@ function WhiteBoard() {
 
     socket.addEventListener("message", received);
 
-    document
-      .getElementById("eraserButton")
-      .addEventListener("click", toggleEraser);
+
+    document.getElementById('eraserButton').addEventListener('click', toggleEraser);
+
 
     return () => {
       window.addEventListener("resize", updateCanvasSize);
@@ -109,49 +113,49 @@ 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";
@@ -179,10 +183,12 @@ 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
+
     };
   }
 
@@ -191,23 +197,26 @@ 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 className="whiteboard-palette flex justify-center p-3 gap-3">
-        <div className="rounded-full">
-          <input type="color" id="colorPicker" defaultValue="#000000" className="w-8 h-8"/>
-        </div>
+      <div>
+        <input type="color" id="colorPicker" defaultValue="#000000" />
         <input type="range" id="lineSize" min="1" max="20" defaultValue="1" />
-        <button id="eraserButton"><img src={eraserIcon} className="w-9 h-9"/></button>
+        <button id="eraserButton">Eraser</button>
+
       </div>
     </div>
   );
+
 }
 export default WhiteBoard;