Merge pull request #92 from analog-m4/fix/whiteboard-responsiveness

Update Whiteboard
analog-m4 · Jan 11, 2024 · 34db584 · 34db584
2 parents d94f3c5 + c48eb09
commit 34db584
Show file tree

Hide file tree

Showing 14 changed files with 104 additions and 51 deletions.
diff --git a/src/components/Account/Account.js b/src/components/Account/Account.js
@@ -17,7 +17,7 @@ function Account({ userStatus }) {
         {userStatus === false ? (
           <>
             <div
-              className="demo-btn text-xs text-white flex items-center font-lato h-10 self-center pl-5 pr-5 rounded-3xl cursor-pointer bg-gray-900 hover:bg-gray-700 active:bg-gray-900"
+              className="demo-btn text-xs text-white flex items-center font-lato h-10 self-center pl-5 pr-5 rounded-3xl cursor-pointer bg-gray-700 hover:bg-gray-600 active:bg-gray-700"
               onClick={() => navigate("/projects")}
             >
               DEMO

diff --git a/src/components/AddProject/AddProject.js b/src/components/AddProject/AddProject.js
@@ -42,7 +42,7 @@ function AddProject() {
   return (
     <>
       <div
-        className="add-project-btn flex text-gray-400 font-light text-md items-center cursor-pointer mt-2 hover:text-green-400 hover:font-normal dark:text-darkText"
+        className="add-project-btn flex text-gray-400 font-normal text-md items-center cursor-pointer mt-2 dark:text-darkText"
         onClick={handleShow}
       >
         <svg

diff --git a/src/components/AddTask/AddTask.js b/src/components/AddTask/AddTask.js
@@ -24,7 +24,7 @@ function AddTask({ taskStatus }) {
   return (
     <>
       <div
-        className="add-task-btn flex text-gray-400 text-sm items-center cursor-pointer pb-4 gap-1 hover:text-green-400 dark:text-darkText"
+        className="add-task-btn flex text-gray-400 font-normal text-md items-center cursor-pointer pb-4 gap-1 dark:text-darkText"
         onClick={handleShow}
       >
         <svg

diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -42,7 +42,7 @@ function App() {
   }
 
   return error ? (
-    <div className="bg-cream font-lato dark:bg-darkBG h-screen">
+    <div className="bg-cream font-lato dark:bg-darkBG">
       <Header
         userStatus={userStatus}
         // user={user}
@@ -51,7 +51,7 @@ function App() {
     </div>
   ) : (
     <div className={appColor}>
-      <div className="bg-cream font-lato dark:bg-darkBG dark:text-darkText h-screen">
+      <div className="font-lato bg-cream dark:bg-darkBG dark:text-darkText">
         <Header
           userStatus={userStatus}
           // user={user}

diff --git a/src/components/BuiltWith/BuiltWith.js b/src/components/BuiltWith/BuiltWith.js
@@ -98,7 +98,7 @@ function BuiltWith() {
         THIS APPLICATION WAS BUILT WITH
       </div>
       <div className="flex justify-center">
-        <div className="built-with-images flex flex-wrap gap-2 cursor-pointer hover:animate-wiggle hover:animate-infinite hover:animate-duration-2000 justify-center">
+        <div className="built-with-images dark:bg-cream p-3 rounded-full flex flex-wrap gap-2 cursor-pointer hover:animate-wiggle hover:animate-infinite hover:animate-duration-2000 justify-center">
           {react}
           {tailwind}
           {redux}

diff --git a/src/components/Column/Column.js b/src/components/Column/Column.js
@@ -1,7 +1,10 @@
 import Task from "../Task/Task";
+import { useSelector } from "react-redux";
 import AddTask from "../AddTask/AddTask";
 
 function Column({ columnName, tasks, taskStatus }) {
+  const appColor = useSelector((state) => state.appColor.appColor);
+
   const columnTasks = tasks.map((task) => {
     return (
       <Task
@@ -17,8 +20,12 @@ function Column({ columnName, tasks, taskStatus }) {
 
   return (
     <>
-      <div className="column flex flex-col w-5/12 min-w-1/4 light:bg-white dark:bg-darkBG2 dark:text-darkText">
-        <div className="column-title ml-1 font-bold pt-3 pb-3 text-gray-900 font-fjalla text-xl dark:text-white">
+      <div
+        className={`column flex flex-col w-5/12 min-w-1/4 ${
+          appColor === "dark" ? "bg-dark" : "bg-white"
+        } dark:text-darkText`}
+      >
+        <div className="column-title ml-1 font-bold pt-3 pb-3 text-gray-900 font-fjalla text-2xl dark:text-white">
           {columnName}
         </div>
         <div className="sm:w-10/12 md:w-11/12">{columnTasks}</div>

diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js
@@ -26,18 +26,22 @@ function Dashboard({ userStatus }) {
   });
 
   return (
-    <div className={appColor}>
+    <div className="">
       <div className={`sm:flex h-auto w-full`}>
         <div className={`sm:w-1/4 md:w-3/12 sm:ml-5 sm:mr-5`}>
           {/* this line */}
           <div
-            className="dashboard w-full p-3 light:bg-white dark:bg-darkBG2 dark:text-darkText border border-gray-200 rounded-lg shadow-sm "
+            className={`dashboard w-full p-3 ${
+              appColor === "dark" ? "bg-dark" : "bg-white"
+            } dark:bg-darkBG2 dark:text-darkText border border-gray-200 rounded-lg shadow-sm`}
             style={{ maxHeight: "545px", overflowY: "auto" }}
           >
-            <div className="projects font-bold text-gray-900 border-b pb-1 mb-1 font-fjalla text-xl dark:text-darkText">
+            <div className="projects font-normal text-gray-900 border-b pb-1 mb-1 font-fjalla text-2xl dark:text-darkText">
               Projects
             </div>
-            <div className="project-buttons flex flex-col">{userProjects}</div>
+            <div className="project-buttons flex flex-col text-md font-light">
+              {userProjects}
+            </div>
             <AddProject />
           </div>
           <div className="flex">

diff --git a/src/components/FileUpload/FileUpload.js b/src/components/FileUpload/FileUpload.js
@@ -1,8 +1,10 @@
 import React, { useState } from "react";
+import { useSelector } from "react-redux";
 
 function FileUpload() {
   const [file, setFile] = useState(null);
   const baseUrl = "https://s3-microservice-3d025e97e722.herokuapp.com"; // Replace with AWS deployment line for deployment checks
+  const appColor = useSelector((state) => state.appColor.appColor);
 
   const handleFileChange = (event) => {
     setFile(event.target.files[0]);
@@ -69,14 +71,18 @@ function FileUpload() {
   };
 
   return (
-    <div className="files-container flex flex-col pl-2mt-4 mb-3 sm:mt-5 sm:mb-5">
+    <div className="files-container flex flex-col pl-2 mt-4 mb-3 sm:mt-5 sm:mb-5">
       <label
         htmlFor="formFile"
-        className="form-label font-bold text-gray-900 border-b pb-1 mb-2 ml-1 font-fjalla text-xl dark:text-white"
+        className="form-label font-normal text-gray-900 border-b pb-1 mb-2 ml-1 font-fjalla text-2xl dark:text-white"
       >
         Files
       </label>
-      <div className="p-3 sm:p-3 border border-gray-200 rounded-lg shadow-sm dark:bg-darkBG2 light:bg-white">
+      <div
+        className={`p-3 sm:p-3 border border-gray-200 rounded-lg shadow-sm ${
+          appColor === "dark" ? "bg-dark" : "bg-white"
+        }`}
+      >
         <div className="upload-file flex">
           <input
             className="form-control flex"

diff --git a/src/components/Project/Project.js b/src/components/Project/Project.js
@@ -25,7 +25,7 @@ function Project({ title, id, color }) {
           onClick={() => dispatch(setSelectedProject(id))}
         >
           <div
-            className="project-color self-center sm:w-2 sm:h-2 md:w-3 md:h-3 border-600 p-1 mr-1 border bg-600 rounded-full"
+            className="project-color self-center sm:w-4 sm:h-4 md:w-4 md:h- p-1 mr-1 rounded-full"
             style={circleStyle}
           ></div>
           <div className="project-title">{title}</div>

diff --git a/src/components/ProjectBoard/ProjectBoard.js b/src/components/ProjectBoard/ProjectBoard.js
@@ -4,6 +4,7 @@ import Column from "../Column/Column";
 function ProjectBoard() {
   const selectedProject = useSelector((state) => state.user.selectedProject);
   const user = useSelector((state) => state.user.user.attributes);
+  const appColor = useSelector((state) => state.appColor.appColor);
 
   console.log("Selected Project:", selectedProject);
 
@@ -25,12 +26,14 @@ function ProjectBoard() {
         {selectedProject ? (
           <></>
         ) : (
-          <div className="no-project-selected flex justify-center w-9/12 font-fjalla text-2xl text-purple-700 mb-1">
+          <div className="no-project-selected flex justify-center w-9/12 font-fjalla text-3xl text-purple-700 mb-1">
             No project selected
           </div>
         )}
         <div
-          className="flex h-3/4 sm:w-11/12 md:w-10/12 border border-gray-200 rounded-lg  shadow-sm pl-3 sm:pl-3 md:pl-6 light:bg-white dark:bg-darkBG2 dark:text-darkText"
+          className={`flex h-3/4 sm:w-11/12 md:w-10/12 border border-gray-200 rounded-lg shadow-sm pl-3 sm:pl-3 md:pl-6 ${
+            appColor === "dark" ? "bg-dark" : "bg-white"
+          } dark:text-darkText`}
           style={{ maxHeight: "545px", overflowY: "auto" }}
         >
           <Column

diff --git a/src/components/Task/Task.js b/src/components/Task/Task.js
@@ -3,10 +3,10 @@ import EditTask from "../EditTask/EditTask";
 function Task({ title, id, description, status, priority }) {
   return (
     <>
-      <div className="task flex justify-between rounded-md border border-gray-200 p-3 shadow-sm mb-3 h-max md:m-1 text-sm">
+      <div className="task flex justify-between rounded-md border border-gray-200 p-3 shadow-sm mb-3 h-max md:m-1 text-md">
         <div className="flex flex-col gap-1">
         <div className="task-title">{title}</div>
-        <div className="task-description font-light text-sm">{description}</div>
+        <div className="task-description font-light text-md">{description}</div>
         </div>
         <EditTask
           taskId={id}

diff --git a/src/components/WhiteBoard/WhiteBoard.js b/src/components/WhiteBoard/WhiteBoard.js
@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { useSelector } from "react-redux";
 import createSocket from "../utils/websocket";
+import eraserIcon from "../../images/eraser-icon.png"
 
 function WhiteBoard() {
   const appColor = useSelector((state) => state.appColor.appColor);
@@ -15,7 +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);
@@ -44,7 +45,7 @@ function WhiteBoard() {
   function toggleEraser() {
     isErasing = !isErasing;
     context.strokeStyle = isErasing ? backgroundColor : defaultColor;
-    context.lineWidth = 25
+    context.lineWidth = 25;
   }
 
   function drawRemoteData(x, y) {
@@ -64,19 +65,41 @@ function WhiteBoard() {
     context = ctx;
     remoteContext = canvas.getContext("2d");
 
-    ctx.fillStyle = `${appColor === "light" ? "white" : "#8d8c8d"}`;
-    context.strokeStyle = `${appColor === "light" ? "black" : "white"}`;
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    function updateCanvasSize() {
+      const parent = canvas.parentElement;
 
+      // Set maximum width and height for the canvas
+      const maxWidth = 1200;
+      const maxHeight = 600;
+
+      // Calculate new width and height based on the parent size
+      const newWidth = Math.min(parent.clientWidth, maxWidth);
+      const newHeight = Math.min(parent.clientHeight, maxHeight);
+
+      // Set canvas size
+      canvas.width = newWidth;
+      canvas.height = newHeight;
+
+      ctx.fillStyle = `${appColor === "light" ? "white" : "#636363"}`;
+      context.strokeStyle = `${appColor === "light" ? "black" : "white"}`;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+
+    updateCanvasSize();
+
+    window.addEventListener("resize", updateCanvasSize);
     canvas.addEventListener("mousedown", startDrawing);
     canvas.addEventListener("mouseup", stopDrawing);
     canvas.addEventListener("mousemove", draw);
 
     socket.addEventListener("message", received);
 
-    document.getElementById('eraserButton').addEventListener('click', toggleEraser);
+    document
+      .getElementById("eraserButton")
+      .addEventListener("click", toggleEraser);
 
     return () => {
+      window.addEventListener("resize", updateCanvasSize);
       canvas.removeEventListener("mousedown", startDrawing);
       canvas.removeEventListener("mouseup", stopDrawing);
       canvas.removeEventListener("mousemove", draw);
@@ -86,51 +109,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);
@@ -152,34 +179,35 @@ 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,
     };
   }
 
   return (
     <div className="whiteboard flex flex-col sm:w-11/12 md:w-10/12 pb-5 mt-4 ">
-      <div className="whiteboard-title flex font-fjalla text-gray-900 self-start text-xl ml-1 border-b w-full mb-2 dark:text-white">
+      <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;
diff --git a/src/images/eraser-icon.png b/src/images/eraser-icon.png
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,14 +9,19 @@ module.exports = {
       },
       colors: {
         cream: "#FFF6F6",
-        darkBG: "#171717",
-        darkBG2: "#8d8c8d",
+        darkBG: "#1d232a",
+        darkBG2: "#191e23",
       },
       textColor: {
-        darkText: "#ffffff",
+        darkText: "#FFFFFF",
       },
     },
   },
   plugins: [require("tailwindcss-animated"), require("daisyui")],
   darkMode: "class",
+  variants: {
+    extend: {
+      backgroundColor: ["dark", "light"],
+    },
+  },
 };