diff --git a/src/components/Account/Account.js b/src/components/Account/Account.js index a11f67f..d5ab2a9 100644 --- a/src/components/Account/Account.js +++ b/src/components/Account/Account.js @@ -17,7 +17,7 @@ function Account({ userStatus }) { {userStatus === false ? ( <>
navigate("/projects")} > DEMO diff --git a/src/components/AddProject/AddProject.js b/src/components/AddProject/AddProject.js index 61c45cd..1f82b22 100644 --- a/src/components/AddProject/AddProject.js +++ b/src/components/AddProject/AddProject.js @@ -42,7 +42,7 @@ function AddProject() { return ( <>
+
) : (
-
+
-
+
{react} {tailwind} {redux} diff --git a/src/components/Column/Column.js b/src/components/Column/Column.js index d3864ee..750a5d7 100644 --- 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 ( -
-
+
+
{columnName}
{columnTasks}
diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js index d389ad6..680fe8b 100644 --- a/src/components/Dashboard/Dashboard.js +++ b/src/components/Dashboard/Dashboard.js @@ -26,18 +26,22 @@ function Dashboard({ userStatus }) { }); return ( -
+
{/* this line */}
-
+
Projects
-
{userProjects}
+
+ {userProjects} +
diff --git a/src/components/FileUpload/FileUpload.js b/src/components/FileUpload/FileUpload.js index 267c25f..da88bd5 100644 --- 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 ( -
+
-
+
dispatch(setSelectedProject(id))} >
{title}
diff --git a/src/components/ProjectBoard/ProjectBoard.js b/src/components/ProjectBoard/ProjectBoard.js index a46f0b5..2d7f832 100644 --- 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 ? ( <> ) : ( -
+
No project selected
)}
-
+
{title}
-
{description}
+
{description}
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 (
-
+
Whiteboard
-
+
-
- +
+
+ +
- +
); - } export default WhiteBoard; diff --git a/src/images/eraser-icon.png b/src/images/eraser-icon.png new file mode 100644 index 0000000..cc1027c Binary files /dev/null and b/src/images/eraser-icon.png differ diff --git a/tailwind.config.js b/tailwind.config.js index 35a5de7..592929e 100644 --- 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"], + }, + }, };