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

Revert "Fix Light Mode Bug"

src/components/WhiteBoard/WhiteBoard.js

@@ -16,9 +16,7 @@ function WhiteBoard() {
   var remoteLastY = 0;
   var isErasing = false;
   const defaultColor = "#000000";
-
-  const backgroundColor = appColor === "light" ? "white" : "#8d8c8d";
-
+  const backgroundColor = appColor === "light" ? "white" : "#636363";
 
   function received(data) {
     const jsonData = JSON.parse(data.data);
@@ -47,9 +45,7 @@ function WhiteBoard() {
   function toggleEraser() {
     isErasing = !isErasing;
     context.strokeStyle = isErasing ? backgroundColor : defaultColor;
-
-    context.lineWidth = 25
-
+    context.lineWidth = 25;
   }
 
   function drawRemoteData(x, y) {
@@ -98,9 +94,9 @@ function WhiteBoard() {
 
     socket.addEventListener("message", received);
 
-
-    document.getElementById('eraserButton').addEventListener('click', toggleEraser);
-
+    document
+      .getElementById("eraserButton")
+      .addEventListener("click", toggleEraser);
 
     return () => {
       window.addEventListener("resize", updateCanvasSize);
@@ -113,49 +109,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";
@@ -183,12 +179,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,
     };
   }
 
@@ -197,26 +191,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 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>
-
+        <button id="eraserButton"><img src={eraserIcon} className="w-9 h-9"/></button>
       </div>
     </div>
   );
-
 }
 export default WhiteBoard;