LucasSlunt · JamesBirni · Mar 28, 2025 · Mar 28, 2025 · Mar 28, 2025 · Mar 28, 2025
diff --git a/frontend/react-app/package-lock.json b/frontend/react-app/package-lock.json
diff --git a/frontend/react-app/package.json b/frontend/react-app/package.json
@@ -6,10 +6,12 @@
     "@auth-kit/react-router": "^3.1.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "ajv": "^8.17.1",
+    "ajv-keywords": "^5.1.0",
     "jquery": "^3.7.1",
-    "react": "^19.0.0",
+    "react": "^18.3.1",
     "react-cookie": "^7.2.2",
-    "react-dom": "^19.0.0",
+    "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
     "react-router-dom": "^7.2.0",
     "react-scripts": "5.0.1",

diff --git a/frontend/react-app/src/CreateTask.test.js b/frontend/react-app/src/CreateTask.test.js
@@ -0,0 +1,9 @@
+import CreateTask from "./pages/CreateTask";
+import { render, screen } from "@testing-library/react";
+test("renders Task page", () => {
+    render(<CreateTask/>);
+
+    //check if the Create Task is rendered
+    expect(screen.getByText("Task Name")).toBeInTheDocument()
+
+  });
diff --git a/frontend/react-app/src/CreateTaskForm.test.js b/frontend/react-app/src/CreateTaskForm.test.js
@@ -0,0 +1,13 @@
+import CreateTaskForm from "./components/CreateTaskForm";
+import { render, screen } from "@testing-library/react";
+import fakeData from "./FakeData/fakeTeamData.json"
+test("renders Task page", () => {
+    render(<CreateTaskForm
+        team={fakeData}
+    />);
+
+    //check if the Create Task is rendered with all team members as options is rendered
+    fakeData.map((teamMember)=>(
+        expect(screen.getByText(teamMember.name)).toBeInTheDocument()
+    ))
+  });
diff --git a/frontend/react-app/src/Home.js b/frontend/react-app/src/Home.js
@@ -0,0 +1,72 @@
+import {useEffect, useState} from 'react';
+import './home.css';
+
+
+import Task from './Task';
+
+
+const testTask = [
+    { taskName: "Create wireframe", taskTeam: "Team 1", dueDate: "11/05/25" },
+    { taskName: "Plan things", taskTeam: "Team 2", dueDate: "10/04/25" }
+]
+
+
+/**/
+
+
+const Home = () => {
+    return (
+
+
+        <body>
+
+
+        <div id="topBar">
+            <a href="https://www.ubc.ca/">Notifications </a>
+            <a href="https://www.ubc.ca/">Messages </a>
+            <a href="https://www.ubc.ca/">Profile</a>
+        </div>
+
+
+
+        <main>
+            <div id="teamSection">
+                <h2>My Teams</h2>
+
+                <div id="teamButtons">
+                    <button className="teamButton">Team 1 Name</button>
+                    <button className="teamButton">Team 2 Name</button>
+                </div>
+            </div>
+
+
+            <div id="taskSection">
+                <h2>My Tasks (Preview)</h2>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Task Name</th>
+                            <th>Team</th>
+                            <th>Deadline</th>
+                        </tr>
+                    </thead>
+                        <tbody>
+                            {testTask.map((task, index) => (
+                                <Task key={index} {...task}/>
+                            ))}
+                        </tbody>
+                </table>
+            </div>
+        </main>
+
+
+        </body>
+
+
+
+    )
+};
+
+
+export default Home;
+
diff --git a/frontend/react-app/src/Login.js b/frontend/react-app/src/Login.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import './login.css';
+
+const Login = () => {
+    return (
+        <body id="login">
+            <div class="container">
+
+                <div id="siteName">
+                    <img src="https://www.shutterstock.com/image-vector/sample-logo-business-brand-identity-600nw-1948366864.jpg" alt="logo"/>
+                    <h1>Our site name</h1>
+                    <p1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum nulla pharetra, ultrices mauris ut, pharetra massa. Morbi sodales in metus in porta. Morbi vel semper ligula, at dignissim eros. Aenean sollicitudin, diam et cursus elementum, elit dui viverra leo, et commodo tortor urna et dolor</p1>
+                </div>
+
+
+                <form id="loginForm">
+                    <label>Log in</label>
+
+                    <input type="text" name="username" placeholder="Username"/>
+
+                    <input type="password" name="password" placeholder="Password"/>
+
+                    <button type="submit">Login</button>
+
+                </form>
+            </div>
+        </body>
+    )
+};
+
+export default Login;
diff --git a/frontend/react-app/src/MyTasks.test.js b/frontend/react-app/src/MyTasks.test.js
@@ -0,0 +1,13 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import MyTasks from "./pages/MyTasks"
+
+//jest mock tests for the page
+jest.mock("./pages/MyTasks", () => () => <div data-testid="task-info">Mock Taskinfo</div>);
+//renders
+test("renders My Task page", () => {
+  render(<MyTasks/>);
+
+  //check if the View task is rendered
+  expect(screen.getByTestId("task-info")).toBeInTheDocument();
+});
diff --git a/frontend/react-app/src/components/LoginForm.jsx b/frontend/react-app/src/components/LoginForm.jsx
@@ -24,6 +24,7 @@ function LoginForm(){
         } 
     };
     return(
+        <div id="loginFormWrapper">
         <form onSubmit = {handleSubmit(onSubmit)} id="loginForm" >
                     <label>Log in</label>
 
@@ -44,6 +45,7 @@ function LoginForm(){
                     <button type="submit" >Login</button>
 
                 </form>
+            </div>
     )
 
 }

diff --git a/frontend/react-app/src/css/Header.css b/frontend/react-app/src/css/Header.css
@@ -0,0 +1,35 @@
+*{
+    text-decoration: none;
+}
+
+h1.inner-header{
+    align-self: start;
+    margin: 0;
+    font-family: Calibri;
+    width: 100%;
+    margin-left: 5%;
+    margin-right: 5%;
+    height: auto;
+    min-height: 10%;
+    background-color: #3b3355;
+    display: flex; 
+    align-items: center; 
+    justify-content: space-between;
+
+}
+
+li{
+    list-style: none;
+    display: inline-block;
+}
+li a{
+    color: #bfcde0;
+    font-size: calc(20%+2vw); 
+    font-weight: bold; 
+    margin-right: 25px;
+}
+li.logo a{
+    margin-right: 60px;
+    font-size: calc(30%+2vw);
+    color: #fefcfd;
+}
diff --git a/frontend/react-app/src/css/MyTasks.css b/frontend/react-app/src/css/MyTasks.css
@@ -14,7 +14,7 @@ div.MyTasksPage{
     flex-direction: column;
 }
 div.content-wrapper{
-    color: #bfcde0;
+    /* color: #bfcde0; */
     margin-left: 5%;
     margin-right: 5%;
     font-family: Calibri;
@@ -32,8 +32,8 @@ div.flexbox{
 }
 
 .create-task-btn {
-    background-color: #eaeaea;
-    color: rgb(0, 0, 0);
+    background-color: #238de3;
+    color: white;
     border: none;
     padding: 15px 30px;
     text-align: center;

diff --git a/frontend/react-app/src/css/TaskList.css b/frontend/react-app/src/css/TaskList.css
@@ -10,10 +10,10 @@ table{
 }
 th,td{
     padding:10px;
-    background-color: darkgrey;
+    background-color: white;
 }
 thead th{
-    background-color: dimgrey;
+    background-color: #437676;
 }
 .tableHeader :hover{
     background-color: darkslategray;
@@ -25,29 +25,42 @@ thead th{
     padding: 2px;
     height: 100%;
     width: 25% !important;
+    background-color: white;
 }
 .searchContainer{
     width: 75% !important;
     height: 100%;
+    margin-left: 10px;
 }
 .Selector-Search{
     padding: 3px;
     display: flex;
-
+    margin-top: 5px;
 }
 .search-form {
     display: flex;
     gap: 1rem;
     width: 100%;
     height: 100%;
+
+  }
+
+  .selector {
+   height: 43px;
   }
 
   .search-input {
     flex: 1;
     padding: 0.75rem 1rem;
     border: none;
     border-radius: 4px;
-    background-color: #bfc1de;
     color: rgb(0, 0, 0);
     font-size: 1rem;
+    background-color: white;
+  }
+
+  td a {
+    color: black;
+    text-decoration: underline;
+    color: #0f145b;
   }
diff --git a/frontend/react-app/src/css/home.css b/frontend/react-app/src/css/home.css
@@ -1,11 +1,11 @@
 
 
- body {
+ /* body {
     background-color:#BFCDE0;
     margin-left:5%;
     margin-right: 5%;
     margin-top: 50px;
- };
+ }; */
 
 #topBar {
     display: flex;
@@ -56,14 +56,12 @@ td {
     width: 70%;
     height: 100%;
     min-width:fit-content;
-    padding-top: 10px;
-    padding-left: 15px;
-    padding-bottom: 10px;
-    padding-right: 15px;
+    padding: 15px 40px;
     border: none;
     border-radius: 15px;
     background-color:#3B3355;
     color: white;
+    font-size: 1.5em;
 }
 
 .teamButton:hover {
@@ -99,4 +97,10 @@ tbody {
 
 #taskSection h2 {
     text-decoration: underline;
+}
+
+.pageContainer {
+    /* background-color: #f6edff; */
+    background-color: #cfe1fb;
+    width: 100%;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,7 @@ function LoginForm(){ @@
             }
         };
         return(
+            <div id="loginFormWrapper">
             <form onSubmit = {handleSubmit(onSubmit)} id="loginForm" >
                         <label>Log in</label>
@@ Expand All / @@ -44,6 +45,7 @@ function LoginForm(){ @@
                         <button type="submit" >Login</button>
                     </form>
+                </div>
         )
     }
@@ Expand Down @@