diff --git a/public/background.png b/public/background.png new file mode 100644 index 0000000..e4ca681 Binary files /dev/null and b/public/background.png differ diff --git a/src/app/[...projectIds]/page.js b/src/app/[...projectIds]/page.js index 27245c6..c05aaf9 100644 --- a/src/app/[...projectIds]/page.js +++ b/src/app/[...projectIds]/page.js @@ -39,17 +39,19 @@ export default function page ({ params }) { }, []) return ( -
+ <> -
-
Project: {project && project.name}
+
+ +
Project {project && project.name}
{/* On click, delete project, return to home page, and refresh */} -
+ + + - -
) } diff --git a/src/app/layout.js b/src/app/layout.js index 8b002e2..4e338fc 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -19,16 +19,17 @@ async function RootLayout ({ children }) { - +
- -
- -
{children}
+ + + +
+
{children}
diff --git a/src/app/page.js b/src/app/page.js index 8682fac..4dd0cc5 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,6 +1,6 @@ export default function Home () { return ( -
+
quayside.app @@ -9,8 +9,10 @@ export default function Home () {
Ignite Collaborative Productivity
-
- Create or select a project to get started... +
+
+ Create or select a project to get started... +
diff --git a/src/components/ContactUsModal.js b/src/components/ContactUsModal.js index 272d32b..e9500bb 100644 --- a/src/components/ContactUsModal.js +++ b/src/components/ContactUsModal.js @@ -93,7 +93,7 @@ export default function ContactUsModal ({ isOpen, handleClose }) { return (
-
+
-
+
{dropdownComponents}
diff --git a/src/components/Graph.js b/src/components/Graph.js index f580a73..eb4b870 100644 --- a/src/components/Graph.js +++ b/src/components/Graph.js @@ -3,44 +3,28 @@ import React, { useEffect, useRef, useState } from 'react' import cytoscape from 'cytoscape' import cxtmenu from 'cytoscape-cxtmenu' import cydagre from 'cytoscape-dagre' +import xIcon from '../../public/svg/x.svg' +import Image from 'next/image' cytoscape.use(cxtmenu) cytoscape.use(cydagre) const Modal = ({ show, onClose, onSubmit, children }) => { if (!show) return null - const modalContentStyle = { - width: '30%', // Adjust the width of the modal as per your requirement - minWidth: '300px', // Minimum width to ensure responsiveness - marginTop: '20px', // Margin from the top to push the modal down a bit - backgroundColor: 'grey', // Background color of the modal - padding: '20px', // Padding inside the modal - borderRadius: '5px', // Rounded corners of the modal - boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)', // Box shadow for a subtle depth effect - display: 'flex', // Use flex layout - flexDirection: 'column', // Stack children vertically - alignItems: 'center' // Center-align children horizontally - } - - const modalBackdropStyle = { - position: 'fixed', // Fixes the backdrop in relation to the viewport - top: 0, // Aligns the top edge of the backdrop with the top of the viewport - left: 0, // Aligns the left edge of the backdrop with the left of the viewport - right: 0, // Aligns the right edge of the backdrop with the right of the viewport - bottom: 0, // Aligns the bottom edge of the backdrop with the bottom of the viewport - backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent black background - display: 'flex', // Uses flexbox layout - justifyContent: 'center', // Centers children horizontally - alignItems: 'flex-start', // Aligns children to the start of the cross axis, i.e., top - paddingTop: '50px' // Adds padding at the top - } - return ( -
-
- {children} - - +
+
+ +
Edit Task
+
+ + {children} +
+
+ +
) @@ -148,7 +132,6 @@ function TreeGraph ({ className, projectID }) { }) } }) - // Tailwind's bg-gray-200 #E5E7EB const cy = cytoscape({ container: containerRef.current, @@ -157,37 +140,36 @@ function TreeGraph ({ className, projectID }) { { selector: 'node', style: { - shape: 'roundrectangle', + shape: 'round-rectangle', width: 1500, - height: 'label', // Use the 'label' keyword to dynamically size the width based on the label - 'background-color': 'black', + height: 'label', + 'background-color': '#262626', 'text-valign': 'center', label: 'data(label)', 'text-wrap': 'wrap', 'text-max-width': 1500, padding: 75, color: 'white', - 'font-size': 50, // Adjust font size as needed - 'border-width': 10, - 'border-color': '#FFFFFF' + 'font-size': 80, // Adjust font size as needed + 'border-color': 'white', + 'border-width': '10px' + } }, { selector: 'edge', style: { - // 'curve-style': 'unbundled-bezier', - // 'control-point-distances': 100, // Sharpness of the bend - // 'control-point-weights': 0.5, // Position of the control point along the edge (0.5 is halfway) + 'curve-style': 'haystack', 'line-color': 'white', - width: 10, - targetArrowShape: 'triangle', - 'target-arrow-color': 'white' // Tailwind's border-gray-300 + 'taxi-turn-min-distance': '50px', + 'taxi-turn': '1000px', + width: 10 } } ], layout: { name: 'dagre', - spacingFactor: 1.5, + spacingFactor: 1.4, padding: 10, directed: true, avoidOverlap: true, @@ -195,9 +177,11 @@ function TreeGraph ({ className, projectID }) { rankDir: 'LR', nodeSep: 50, rankSep: 150 + }, minZoom: 0.08, // Minimum zoom level (e.g., 0.5 means the graph can be zoomed out to half its original size) - maxZoom: 1 // Maximum zoom level (e.g., 2 means the graph can be zoomed in to twice its original size) + maxZoom: 1, // Maximum zoom level (e.g., 2 means the graph can be zoomed in to twice its original size) + wheelSensitivity: 0.1 }) // creates context radial menu around each node @@ -236,22 +220,46 @@ function TreeGraph ({ className, projectID }) { // ... [more commands as needed] ] }) - }, [tasks]) + function assignDepth (rootId) { + const queue = [{ id: rootId, depth: 0 }] - const inputStyle = { - color: 'black', // Set font color to black - padding: '10px', // Optional: Add padding for better appearance - margin: '5px 0', // Optional: Add some margin for spacing - width: '100%' // Optional: Set width to fill the modal - // Add any other styles you need for the input - } + while (queue.length > 0) { + const { id, depth } = queue.shift() + const node = cy.getElementById(id) + + // Set custom data + node.data('depth', depth) + + // Get connected nodes and add them to the queue + const connectedNodes = node.connectedEdges().targets().filter(n => n.data('depth') === undefined) + connectedNodes.forEach(n => queue.push({ id: n.id(), depth: depth + 1 })) + } + } + const first = cy.nodes().first().id() + assignDepth(first) + function getColorForDepth (depth) { + // Simple example: increasing shades of blue + const colors = ['#262626', '#262626', '#262626', '#262626', '#262626'] + return colors[depth % colors.length] + } + + cy.style().selector('node').style({ + 'background-color': function (node) { + return getColorForDepth(node.data('depth')) + } + }) + + cy.autolock(true) + }, [tasks]) return (
+ - setEditLabel(e.target.value)} style={inputStyle} /> + setEditLabel(e.target.value)} className='rounded-lg w-full text-black p-4' /> +
) } diff --git a/src/components/LeftSidebar.js b/src/components/LeftSidebar.js index 84c937b..8ccb5f3 100644 --- a/src/components/LeftSidebar.js +++ b/src/components/LeftSidebar.js @@ -51,7 +51,7 @@ export default function LeftSidebar ({ className }) {
    {body.projects.map((project, index) => (
  • -
    • ))}
@@ -67,7 +67,7 @@ export default function LeftSidebar ({ className }) {
-
+
    @@ -83,7 +83,7 @@ export default function LeftSidebar ({ className }) {
-
+
diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 386dd3a..cb3955d 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -20,7 +20,7 @@ import Link from 'next/link' * // Using the component * */ -const Navbar = () => { +const Navbar = ({ className }) => { const [name, setName] = useState(null) const { data: session } = useSession() @@ -46,77 +46,79 @@ const Navbar = () => { }) return ( -
- +
) diff --git a/src/components/NewProjectButton.js b/src/components/NewProjectButton.js index 59ee16a..65c99c2 100644 --- a/src/components/NewProjectButton.js +++ b/src/components/NewProjectButton.js @@ -24,7 +24,7 @@ export default function NewProjectButton () { return (
setIsOpen(false)} isOpen={isOpen} /> -
    • +
    • ) } diff --git a/src/components/NewProjectModal.js b/src/components/NewProjectModal.js index e9ced3a..583d980 100644 --- a/src/components/NewProjectModal.js +++ b/src/components/NewProjectModal.js @@ -88,7 +88,7 @@ const NewProjectModal = ({ isOpen, handleClose }) => {
    {errorMessage && } -
    +