From 9e01d4e49518d563ab97d1fce02f32fcda5d5ad3 Mon Sep 17 00:00:00 2001 From: Tanish Garg Date: Sun, 14 Sep 2025 01:01:34 -0500 Subject: [PATCH 01/11] refactor: front-end refactoring --- package.json | 5 + web/{src => }/index.html | 4 +- web/package.json | 5 +- web/src/App.tsx | 35 +++ web/src/FAQ/FAQ.html | 19 -- web/src/FAQ/FAQ.tsx | 24 +- web/src/Index.tsx | 18 -- web/src/about/About.tsx | 26 +- web/src/about/about.html | 19 -- web/src/account/AccountSettings.tsx | 364 +++++++++++++---------- web/src/account/account.html | 19 -- web/src/account/account.tsx | 10 - web/src/assets/react.svg | 1 - web/src/assignment/AssignmentBody.tsx | 78 ----- web/src/assignment/assignment.html | 19 -- web/src/assignment/assignment.tsx | 89 +++++- web/src/classroom/ClassroomBody.tsx | 163 ---------- web/src/classroom/classroom.html | 19 -- web/src/classroom/classroom.tsx | 169 ++++++++++- web/src/components/navbar/Navbar.tsx | 96 +++--- web/src/dashboard/Dashboard.tsx | 139 ++++++++- web/src/dashboard/DashboardBody.tsx | 111 ------- web/src/dashboard/dashboard.html | 21 -- web/src/{index.css => home/Home.css} | 2 +- web/src/home/Home.tsx | 15 + web/src/login/Login.tsx | 91 +++++- web/src/login/LoginInputs.tsx | 76 ----- web/src/login/login.html | 19 -- web/src/main.tsx | 14 + web/src/resetpassword/Resetpassword.tsx | 24 +- web/src/resetpassword/resetpassword.html | 19 -- web/src/signup/Signup.tsx | 12 +- web/src/signup/signup.html | 19 -- web/src/test/Test.tsx | 53 ---- web/src/test/test.css | 22 -- web/src/test/test.html | 19 -- web/tsconfig.app.tsbuildinfo | 2 +- web/vite.config.ts | 50 ++-- web/web.go | 59 +--- web/yarn.lock | 58 ++-- yarn.lock | 28 ++ 41 files changed, 918 insertions(+), 1117 deletions(-) create mode 100644 package.json rename web/{src => }/index.html (88%) create mode 100644 web/src/App.tsx delete mode 100644 web/src/FAQ/FAQ.html delete mode 100644 web/src/Index.tsx delete mode 100644 web/src/about/about.html delete mode 100644 web/src/account/account.html delete mode 100644 web/src/account/account.tsx delete mode 100644 web/src/assets/react.svg delete mode 100644 web/src/assignment/AssignmentBody.tsx delete mode 100644 web/src/assignment/assignment.html delete mode 100644 web/src/classroom/ClassroomBody.tsx delete mode 100644 web/src/classroom/classroom.html delete mode 100644 web/src/dashboard/DashboardBody.tsx delete mode 100644 web/src/dashboard/dashboard.html rename web/src/{index.css => home/Home.css} (93%) create mode 100644 web/src/home/Home.tsx delete mode 100644 web/src/login/LoginInputs.tsx delete mode 100644 web/src/login/login.html create mode 100644 web/src/main.tsx delete mode 100644 web/src/resetpassword/resetpassword.html delete mode 100644 web/src/signup/signup.html delete mode 100644 web/src/test/Test.tsx delete mode 100644 web/src/test/test.css delete mode 100644 web/src/test/test.html create mode 100644 yarn.lock diff --git a/package.json b/package.json new file mode 100644 index 0000000..a5d176c --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "react-router-dom": "^7.9.1" + } +} diff --git a/web/src/index.html b/web/index.html similarity index 88% rename from web/src/index.html rename to web/index.html index 9b1afba..528ec59 100644 --- a/web/src/index.html +++ b/web/index.html @@ -10,11 +10,11 @@ - UDCS Autograder + Autograder
- +
diff --git a/web/package.json b/web/package.json index 00daa45..fa7bba6 100644 --- a/web/package.json +++ b/web/package.json @@ -13,8 +13,9 @@ "@monaco-editor/react": "^4.7.0", "@tailwindcss/vite": "^4.0.3", "clsx": "^2.1.1", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.1.1", + "react-dom": "^19.1.1", + "react-router-dom": "^7.9.1", "react-select": "^5.10.0", "react-switch": "^7.1.0", "styled-components": "^6.1.14", diff --git a/web/src/App.tsx b/web/src/App.tsx new file mode 100644 index 0000000..e335f96 --- /dev/null +++ b/web/src/App.tsx @@ -0,0 +1,35 @@ +import { Routes, Route, Navigate } from "react-router-dom"; +import Home from "./home/Home"; +import NavBar from "./components/navbar/NavBar"; +import Login from "./login/Login"; +import Signup from "./signup/Signup"; +import About from "./about/About"; +import Account from "./account/AccountSettings"; +import Assignment from "./assignment/Assignment"; +import Classroom from "./classroom/Classroom"; +import Dashboard from "./dashboard/Dashboard"; +import Faq from "./faq/FAQ"; +import ResetPassword from "./resetpassword/ResetPassword"; + +function App() { + return ( +
+ + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + +
+ ); +} + +export default App; diff --git a/web/src/FAQ/FAQ.html b/web/src/FAQ/FAQ.html deleted file mode 100644 index a1d8bbc..0000000 --- a/web/src/FAQ/FAQ.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - UDCS Autograder - - -
- - - \ No newline at end of file diff --git a/web/src/FAQ/FAQ.tsx b/web/src/FAQ/FAQ.tsx index 9321711..a286213 100644 --- a/web/src/FAQ/FAQ.tsx +++ b/web/src/FAQ/FAQ.tsx @@ -1,14 +1,12 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import Navbar from "../components/navbar/Navbar" -import './FAQ.css' +import "./FAQ.css"; -createRoot(document.getElementById('root')!).render( - - -
-

Page under development

- Test page -
- , -) \ No newline at end of file +function Faq() { + return ( + <> +

Page under development

+ Test page + + ); +} + +export default Faq; diff --git a/web/src/Index.tsx b/web/src/Index.tsx deleted file mode 100644 index a4fed86..0000000 --- a/web/src/Index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import Navbar from "./components/navbar/Navbar" -import Logo from "./components/logo/Logo" -import './index.css' - -createRoot(document.getElementById('root')!).render( - - -
-

Welcome to

-
- -
- Test page -
- , -) diff --git a/web/src/about/About.tsx b/web/src/about/About.tsx index c2f3aff..58a61a6 100644 --- a/web/src/about/About.tsx +++ b/web/src/about/About.tsx @@ -1,14 +1,14 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import Navbar from "../components/navbar/Navbar" -import './about.css' +import "./About.css"; -createRoot(document.getElementById('root')!).render( - - -
-

Page under development

- Test page -
- , -) \ No newline at end of file +function About() { + return ( + <> +

Page under development

+ + About + + + ); +} + +export default About; diff --git a/web/src/about/about.html b/web/src/about/about.html deleted file mode 100644 index 1fba6a6..0000000 --- a/web/src/about/about.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - UDCS Autograder - - -
- - - \ No newline at end of file diff --git a/web/src/account/AccountSettings.tsx b/web/src/account/AccountSettings.tsx index a327743..c0066b1 100644 --- a/web/src/account/AccountSettings.tsx +++ b/web/src/account/AccountSettings.tsx @@ -2,182 +2,220 @@ import { useEffect, useState } from "react"; import BlueButton from "../components/buttons/BlueButton"; import TextField from "../components/textfield/Textfield"; import ToggleSwitch from "../components/toggleswitch/ToggleSwitch"; +import "./Account.css"; +function Account() { + enum ButtonState { + Idle, + Error, + Success, + Waiting, + } + const [isLoggedIn, setIsLoggedIn] = useState(true); + const [passwordMessage, setPasswordMessage] = useState(""); + const [passwordButtonDisabled, setPasswordButtonDisabled] = useState(false); + const [loaded, setLoaded] = useState(false); + const [submitState, setSubmitState] = useState(ButtonState.Idle); -function AccountSettings() { - enum ButtonState { - Idle, - Error, - Success, - Waiting - } - const [isLoggedIn, setIsLoggedIn] = useState(true); - const [passwordMessage, setPasswordMessage] = useState(""); - const [passwordButtonDisabled, setPasswordButtonDisabled] = useState(false); - const [loaded, setLoaded] = useState(false); - const [submitState, setSubmitState] = useState(ButtonState.Idle); - - const [firstName, setFirstName] = useState(""); - const [lastName, setLastName] = useState(""); - - useEffect(() => { - const redirectToLogin = () => { - setTimeout(() => { - window.location.href = "/login" - }, 3000); - } - const getIsLoggedIn = async () => { - if(!loaded) { - try { - var response = await fetch('/api/auth/valid_login'); - if (response.ok) { - var json = await response.json(); - var loggedIn = json['message'] == 'true'; - if (!loggedIn) { - setIsLoggedIn(false); - redirectToLogin(); - } - } - } catch (err){ - setIsLoggedIn(false); - redirectToLogin(); - } - } - }; - const getUserName =async () => { - if (!loaded) { - try { - var response = await fetch('/api/auth/user_name'); - if (response.ok) { - var json = await response.json(); - var firstName = json['FirstName']; - var lastName = json['LastName']; - setFirstName(firstName); - setLastName(lastName); - } else { - console.log(response); - } - } catch (err){ - console.log(err); - } - } - }; - getIsLoggedIn().then(getUserName).then(() => { - setLoaded(true); - }); - }); + const [firstName, setFirstName] = useState(""); + const [lastName, setLastName] = useState(""); - const onResetButtonPressed = async () => { - setSubmitState(ButtonState.Waiting); + useEffect(() => { + const redirectToLogin = () => { + setTimeout(() => { + window.location.href = "/login"; + }, 3000); + }; + const getIsLoggedIn = async () => { + if (!loaded) { try { - var response = await fetch('/api/auth/password', {method: "POST"}); - if (response.ok) { - setPasswordButtonDisabled(true); - setPasswordMessage("Password reset link sent!") - } else { - console.log(response.status) - setPasswordMessage("Password reset link failed to send.") + const response = await fetch("/api/auth/valid_login"); + if (response.ok) { + const json = await response.json(); + const loggedIn = json["message"] == "true"; + if (!loggedIn) { + setIsLoggedIn(false); + redirectToLogin(); } + } + } catch { + setIsLoggedIn(false); + redirectToLogin(); + } + } + }; + const getUserName = async () => { + if (!loaded) { + try { + const response = await fetch("/api/auth/user_name"); + if (response.ok) { + const json = await response.json(); + const firstName = json["FirstName"]; + const lastName = json["LastName"]; + setFirstName(firstName); + setLastName(lastName); + } else { + console.log(response); + } } catch (err) { - setPasswordMessage("Password reset link failed to send."); + console.log(err); } + } + }; + getIsLoggedIn() + .then(getUserName) + .then(() => { + setLoaded(true); + }); + }); + + const onResetButtonPressed = async () => { + setSubmitState(ButtonState.Waiting); + try { + const response = await fetch("/api/auth/password", { method: "POST" }); + if (response.ok) { + setPasswordButtonDisabled(true); + setPasswordMessage("Password reset link sent!"); + } else { + console.log(response.status); + setPasswordMessage("Password reset link failed to send."); + } + } catch { + setPasswordMessage("Password reset link failed to send."); } + }; - const ChangeUserInfo = async () => { - if (firstName == '' || lastName == '') { - setSubmitState(ButtonState.Error); - } else { - try { - var response = await fetch('/api/auth/user_info', { - method:"PUT", - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - "first_name": firstName, - "last_name": lastName - }) - }); - if (response.ok) { - setSubmitState(ButtonState.Success); - } - } catch (err) { - setSubmitState(ButtonState.Error); - } + const ChangeUserInfo = async () => { + if (firstName == "" || lastName == "") { + setSubmitState(ButtonState.Error); + } else { + try { + const response = await fetch("/api/auth/user_info", { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + first_name: firstName, + last_name: lastName, + }), + }); + if (response.ok) { + setSubmitState(ButtonState.Success); } + } catch { + setSubmitState(ButtonState.Error); + } } + }; - return <> - -
- {isLoggedIn ? - <> -

Account Settings

- - - - - - - - - - - - - - - - - -
-
First Name:
- 		- - { - setFirstName(data.value); - setSubmitState(ButtonState.Idle); - }} className="nameField input" id="firstName" label="" value={firstName} /> - -
Last Name:
- 		- { - setLastName(data.value); - setSubmitState(ButtonState.Idle); - }} className="nameField input" id="lastName" label="" value={lastName} /> -
-
Password:
- 		-
last updated September 1st 2024
- 		- Reset Password -
-
Light Mode
- 		-
- -
Dark Mode
-
- 		-
- {passwordMessage} -
-
- - {submitState == ButtonState.Error - ? ((firstName == '' || lastName == '') ? "Name Cannot be Blank" : "An Error Occurred") - : submitState == ButtonState.Success ? "Profile Successfully Updated" : "Submit Changes"} - - - : - <> -

You have to be logged in to view account settings

+ return ( + <> +
+ {isLoggedIn ? ( + <> +

Account Settings

+ + + + + + + + + + + + + + + + + +
+
First Name:
+ 		+ { + setFirstName(data.value); + setSubmitState(ButtonState.Idle); + }} + className="nameField input" + id="firstName" + label="" + value={firstName} + /> + +
Last Name:
+ 		+ { + setLastName(data.value); + setSubmitState(ButtonState.Idle); + }} + className="nameField input" + id="lastName" + label="" + value={lastName} + /> +
+
Password:
+ 		+
+ last updated September 1st 2024 +
+ 		+ + Reset Password + +
+
Light Mode
+ 		+
+ +
+ Dark Mode +
+
+ 		+
{passwordMessage}
+
+ + {submitState == ButtonState.Error + ? firstName == "" || lastName == "" + ? "Name Cannot be Blank" + : "An Error Occurred" + : submitState == ButtonState.Success + ? "Profile Successfully Updated" + : "Submit Changes"} + + + ) : ( + <> +

+ You have to be logged in to view account settings +

Redirecting to login...
- } -
- + + )} +
- + ); } -export default AccountSettings; \ No newline at end of file +export default Account; diff --git a/web/src/account/account.html b/web/src/account/account.html deleted file mode 100644 index 8fdf71e..0000000 --- a/web/src/account/account.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - Account Settings - - -
- - - \ No newline at end of file diff --git a/web/src/account/account.tsx b/web/src/account/account.tsx deleted file mode 100644 index 1abe8d3..0000000 --- a/web/src/account/account.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { createRoot } from "react-dom/client"; -import Navbar from "../components/navbar/Navbar"; -import './account.css' -import AccountSettings from "./AccountSettings"; - - -createRoot(document.getElementById('root')!).render(
- - -
) \ No newline at end of file diff --git a/web/src/assets/react.svg b/web/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/web/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web/src/assignment/AssignmentBody.tsx b/web/src/assignment/AssignmentBody.tsx deleted file mode 100644 index b4e1209..0000000 --- a/web/src/assignment/AssignmentBody.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { useEffect, useState } from "react"; -import AssignmentPanel from "../components/assignment/AssignmentPanel"; -import Navbar from "../components/navbar/Navbar"; - -function AssignmentBody() { - const [loading, setLoading] = useState(true); - const [errorMessage, setErrorMessage] = useState(""); - const [assignmentInfo, setAssignmentInfo] = useState({}); - const urlParams = new URLSearchParams(window.location.search); - const assignmentId = urlParams.get('id'); - - useEffect(() => { - var isError = false; - const getAssignment = async () => { - var response = await fetch(`/api/classroom/assignment/${assignmentId}`); - if (response.ok) { - var json = await response.json(); - setAssignmentInfo(json); - } else { - setErrorMessage("Error getting the assignment. Either the assignment does not exist or you do not have the permissions to see it."); - } - } - const verifyLogin = async () => { - try { - var response = await fetch('/api/auth/valid_login'); - if (response.ok) { - var json = await response.json(); - if (json['message'] != 'true') { - isError = true; - setErrorMessage("You need to be logged in to view assignments"); - stopLoading(); - } - } else { - isError = true; - setErrorMessage("You need to be logged in to view assignments"); - stopLoading(); - } - } catch (err){ - console.error("Fetch error: ", err); - } - } - const stopLoading = () => { - setLoading(false); - } - (async function () { - if (loading) { - await verifyLogin(); - if (isError) return; - await getAssignment(); - stopLoading(); - } else if (errorMessage === "") { - const hash = window.location.hash.substring(1); - if (hash) { - const el = document.getElementById(hash); - if (el) { - el.scrollIntoView({ behavior: "smooth" }); - } - } - } - })(); - }); - - return <> - {!loading ? -
- -
- {errorMessage === "" ? - - : -
{errorMessage}
- } -
-
- : <>} - -} -export default AssignmentBody; \ No newline at end of file diff --git a/web/src/assignment/assignment.html b/web/src/assignment/assignment.html deleted file mode 100644 index e2c4b9a..0000000 --- a/web/src/assignment/assignment.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - Assignment - - -
- - - \ No newline at end of file diff --git a/web/src/assignment/assignment.tsx b/web/src/assignment/assignment.tsx index 64596bd..dbd09a6 100644 --- a/web/src/assignment/assignment.tsx +++ b/web/src/assignment/assignment.tsx @@ -1,6 +1,85 @@ -import { createRoot } from "react-dom/client"; -import AssignmentBody from "./AssignmentBody"; +import { useEffect, useState } from "react"; +import AssignmentPanel from "../components/assignment/AssignmentPanel"; +import Navbar from "../components/navbar/NavBar"; +import "./Assignment.css"; -createRoot(document.getElementById('root')!).render( - -) \ No newline at end of file +function Assignment() { + const [loading, setLoading] = useState(true); + const [errorMessage, setErrorMessage] = useState(""); + const [assignmentInfo, setAssignmentInfo] = useState({}); + const urlParams = new URLSearchParams(window.location.search); + const assignmentId = urlParams.get("id"); + + useEffect(() => { + let isError = false; + const getAssignment = async () => { + const response = await fetch(`/api/classroom/assignment/${assignmentId}`); + if (response.ok) { + const json = await response.json(); + setAssignmentInfo(json); + } else { + setErrorMessage( + "Error getting the assignment. Either the assignment does not exist or you do not have the permissions to see it." + ); + } + }; + const verifyLogin = async () => { + try { + const response = await fetch("/api/auth/valid_login"); + if (response.ok) { + const json = await response.json(); + if (json["message"] != "true") { + isError = true; + setErrorMessage("You need to be logged in to view assignments"); + stopLoading(); + } + } else { + isError = true; + setErrorMessage("You need to be logged in to view assignments"); + stopLoading(); + } + } catch (err) { + console.error("Fetch error: ", err); + } + }; + const stopLoading = () => { + setLoading(false); + }; + (async function () { + if (loading) { + await verifyLogin(); + if (isError) return; + await getAssignment(); + stopLoading(); + } else if (errorMessage === "") { + const hash = window.location.hash.substring(1); + if (hash) { + const el = document.getElementById(hash); + if (el) { + el.scrollIntoView({ behavior: "smooth" }); + } + } + } + })(); + }); + + return ( + <> + {!loading ? ( +
+ +
+ {errorMessage === "" ? ( + + ) : ( +
{errorMessage}
+ )} +
+
+ ) : ( + <> + )} + + ); +} +export default Assignment; diff --git a/web/src/classroom/ClassroomBody.tsx b/web/src/classroom/ClassroomBody.tsx deleted file mode 100644 index c39555a..0000000 --- a/web/src/classroom/ClassroomBody.tsx +++ /dev/null @@ -1,163 +0,0 @@ -import { useEffect, useState } from "react"; -import AssignmentDropdown from "../components/assignment/AssignmentDropdown"; -import QuestionBulletPoint, { CompletionState } from "../components/question/QuestionBulletPoint"; -import HomeworkAssignment from "../components/homework/HomeworkAssignment"; -import HomeworkSidebar from "../components/homework/HomeworkSidebar"; -import Navbar from "../components/navbar/Navbar"; -import TitleBanner from "../components/titlebanner/TitleBanner"; -import BlueButton from "../components/buttons/BlueButton"; - -function ClassroomBody() { - - const msInTwoWeeks = 2 * 7 * 24 * 60 * 60 * 1000; - - const [errorMsg, setErrorMsg] = useState(""); - - const [loading, setLoading] = useState(true); - const [classroomName, setClassroomName] = useState(""); - const [assignments, setAssignments] = useState([]); - const urlParams = new URLSearchParams(window.location.search); - const classroomId = urlParams.get('id'); - - const questionsJSONToReact = (questions: any[], assignmentId: string) => { - if (questions) { - return questions.map((q) => { - const points = q["points"]; - const score = q["score"]; - const name = q["header"]; - const questionId = q["id"]; - var state: CompletionState = "none"; - if (score >= points) { - state = "full"; - } else if (score > 0) { - state = "partial"; - } - return - {name} - - }); - } - return []; - } - - const assignmentsJSONToReact = () => { - if (!assignments) return []; - return assignments.map((a) => { - return - {...questionsJSONToReact(a["questions"], a["id"])} - - }); - } - - const homeworkFromJSON = () => { - if (!assignments) return []; - return assignments.filter((a) => { - var dueDate = new Date(a["due_at"]); - var now = new Date(); - var timeDifference = dueDate.getTime() - now.getTime(); - return timeDifference <= msInTwoWeeks; - }).map(a => - - ) - } - - const reRoute = () => { - window.location.href = `/classroom/manage/?id=${classroomId}`; - } - - useEffect(() => { - var isError = false; - const verifyLogin = async () => { - try { - var response = await fetch('/api/auth/valid_login'); - if (response.ok) { - var json = await response.json(); - if (json['message'] != 'true') { - isError = true; - setErrorMsg("You need to be logged in to view classrooms"); - stopLoading(); - } - } else { - isError = true; - setErrorMsg("You need to be logged in to view classrooms"); - stopLoading(); - } - } catch (err){ - console.error("Fetch error: ", err); - } - }; - const getClassroomName = async () => { - var response = await fetch(`/api/classroom/${classroomId}`); - if (response.ok) { - var json = await response.json(); - setClassroomName(json["name"]); - } else { - isError = true; - setErrorMsg("Either the classroom does not exist or you are not part of this classroom"); - stopLoading(); - } - } - const getAssignments = async () => { - var response = await fetch(`/api/classroom/${classroomId}/view_assignments`); - if (response.ok) { - var json = await response.json(); - setAssignments(json['assignments']); - } else { - console.error(response.statusText); - } - }; - const stopLoading = () => { - setLoading(false); - } - // const getUserRole = async () => { - // var response = await fetch(`api/classroom/${classroomId}/`) - // } - - if (loading) { - verifyLogin().then(() => { - if (!isError) { - getClassroomName().then(() => { - if (!isError) { - getAssignments().then(stopLoading); - } - }); - } - } - ) - } - }); - - return (<> - {!loading? - <> - - {(errorMsg == "")? - <> - {classroomName} -
-
- {...assignmentsJSONToReact()} -
- -
- - :
{errorMsg}
} - - : <>} - ); -} - -export default ClassroomBody; \ No newline at end of file diff --git a/web/src/classroom/classroom.html b/web/src/classroom/classroom.html deleted file mode 100644 index 21a5431..0000000 --- a/web/src/classroom/classroom.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - Classroom Home - - -
- - - \ No newline at end of file diff --git a/web/src/classroom/classroom.tsx b/web/src/classroom/classroom.tsx index 9a35faf..f251fc3 100644 --- a/web/src/classroom/classroom.tsx +++ b/web/src/classroom/classroom.tsx @@ -1,8 +1,165 @@ -import { createRoot } from "react-dom/client"; -import './classroom.css' -import ClassroomBody from "./ClassroomBody"; +import { useEffect, useState } from "react"; +import AssignmentDropdown from "../components/assignment/AssignmentDropdown"; +import QuestionBulletPoint, { + CompletionState, +} from "../components/question/QuestionBulletPoint"; +import HomeworkAssignment from "../components/homework/HomeworkAssignment"; +import HomeworkSidebar from "../components/homework/HomeworkSidebar"; +import Navbar from "../components/navbar/NavBar"; +import TitleBanner from "../components/titlebanner/TitleBanner"; +import "./Classroom.css"; +function Classroom() { + const msInTwoWeeks = 2 * 7 * 24 * 60 * 60 * 1000; -createRoot(document.getElementById('root')!).render(
- -
) \ No newline at end of file + const [errorMsg, setErrorMsg] = useState(""); + + const [loading, setLoading] = useState(true); + const [classroomName, setClassroomName] = useState(""); + const [assignments, setAssignments] = useState([]); + const urlParams = new URLSearchParams(window.location.search); + const classroomId = urlParams.get("id"); + + const questionsJSONToReact = (questions: any[], assignmentId: string) => { + if (questions) { + return questions.map((q) => { + const points = q["points"]; + const score = q["score"]; + const name = q["header"]; + const questionId = q["id"]; + let state: CompletionState = "none"; + if (score >= points) { + state = "full"; + } else if (score > 0) { + state = "partial"; + } + return ( + + {name} + + ); + }); + } + return []; + }; + + const assignmentsJSONToReact = () => { + if (!assignments) return []; + return assignments.map((a) => { + return ( + + {...questionsJSONToReact(a["questions"], a["id"])} + + ); + }); + }; + + const homeworkFromJSON = () => { + if (!assignments) return []; + return assignments + .filter((a) => { + const dueDate = new Date(a["due_at"]); + const now = new Date(); + const timeDifference = dueDate.getTime() - now.getTime(); + return timeDifference <= msInTwoWeeks; + }) + .map((a) => ( + + )); + }; + + useEffect(() => { + let isError = false; + const verifyLogin = async () => { + try { + const response = await fetch("/api/auth/valid_login"); + if (response.ok) { + const json = await response.json(); + if (json["message"] != "true") { + isError = true; + setErrorMsg("You need to be logged in to view classrooms"); + stopLoading(); + } + } else { + isError = true; + setErrorMsg("You need to be logged in to view classrooms"); + stopLoading(); + } + } catch (err) { + console.error("Fetch error: ", err); + } + }; + const getClassroomName = async () => { + const response = await fetch(`/api/classroom/${classroomId}`); + if (response.ok) { + const json = await response.json(); + setClassroomName(json["name"]); + } else { + isError = true; + setErrorMsg( + "Either the classroom does not exist or you are not part of this classroom" + ); + stopLoading(); + } + }; + const getAssignments = async () => { + const response = await fetch( + `/api/classroom/${classroomId}/view_assignments` + ); + if (response.ok) { + const json = await response.json(); + setAssignments(json["assignments"]); + } else { + console.error(response.statusText); + } + }; + const stopLoading = () => { + setLoading(false); + }; + if (loading) { + verifyLogin().then(() => { + if (!isError) { + getClassroomName().then(() => { + if (!isError) { + getAssignments().then(stopLoading); + } + }); + } + }); + } + }); + return ( + <> + {!loading ? ( + <> + + {errorMsg == "" ? ( + <> + {classroomName} +
+
{...assignmentsJSONToReact()}
+
+ {...homeworkFromJSON()} +
+
+ + ) : ( +
{errorMsg}
+ )} + + ) : ( + <> + )} + + ); +} + +export default Classroom; diff --git a/web/src/components/navbar/Navbar.tsx b/web/src/components/navbar/Navbar.tsx index e516114..12d22f3 100644 --- a/web/src/components/navbar/Navbar.tsx +++ b/web/src/components/navbar/Navbar.tsx @@ -1,49 +1,57 @@ -import { useEffect, useState } from 'react'; -import './Navbar.css' -import '/global.css' -import AnimatedLogo from './AnimatedLogo'; +import { useEffect, useState } from "react"; +import AnimatedLogo from "./AnimatedLogo"; +import { Link } from "react-router-dom"; +import "./NavBar.css"; +// import "../global.css"; +// TODO: The text within the navbar is somehow not centered vertically. This is a problem to fix later +function Navbar() { + const [isLoggedIn, setLoggedIn] = useState(false); -// The text within the navbar is somehow not centered vertically. This is a problem to fix later -function Navbar(){ + useEffect(() => { + const getIsLoggedIn = async () => { + try { + const response = await fetch("/api/auth/valid_login"); + if (response.ok) { + const json = await response.json(); + setLoggedIn(json["message"] == "true"); + } + } catch (err) { + console.error("Fetch error: ", err); + } + }; + getIsLoggedIn(); + }); - const [isLoggedIn, setLoggedIn] = useState(false); - - - useEffect(() => { - const getIsLoggedIn = async () => { - try { - var response = await fetch('/api/auth/valid_login'); - if (response.ok) { - var json = await response.json(); - setLoggedIn(json['message'] == 'true'); - } - } catch (err){ - console.error("Fetch error: ", err); - } - }; - getIsLoggedIn(); - }); - - return ( - - ); + return ( + + ); } -export default Navbar; \ No newline at end of file +export default Navbar; diff --git a/web/src/dashboard/Dashboard.tsx b/web/src/dashboard/Dashboard.tsx index 18a45c1..efbfee4 100644 --- a/web/src/dashboard/Dashboard.tsx +++ b/web/src/dashboard/Dashboard.tsx @@ -1,10 +1,129 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import './dashboard.css' -import DashboardBody from './DashboardBody' - -createRoot(document.getElementById('root')!).render( - - - , -) \ No newline at end of file +import { useEffect, useState } from "react"; +import Navbar from "../components/navbar/NavBar"; +import DashboardSection from "./DashboardSection"; +import "./Dashboard.css"; + +function Dashboard() { + const [loading, setLoading] = useState(true); + const [errorMessage, setErrorMessage] = useState(""); + + const [enrolledClasses, setEnrolledClasses] = useState([]); + const [activeClasses, setActiveClasses] = useState([]); + const [expiredClasses, setExpiredClasses] = useState([]); + const [noClasses, setNoClasses] = useState(false); + + useEffect(() => { + let isError = false; + const parseDateString = (dateString: string) => { + const parts = dateString + .split("-") + .map((p, i) => Number(p) - Number(i == 1)); + return new Date(parts[0], parts[1], parts[2]); + }; + const verifyLogin = async () => { + try { + const response = await fetch("/api/auth/valid_login"); + if (response.ok) { + const json = await response.json(); + if (json["message"] != "true") { + isError = true; + setErrorMessage("You need to be logged in to view assignments"); + stopLoading(); + } + } else { + isError = true; + setErrorMessage("You need to be logged in to view assignments"); + stopLoading(); + } + } catch (err) { + console.error("Fetch error: ", err); + } + }; + const getClassrooms = async () => { + const request = await fetch("/api/classroom/all"); + + const currentEnrolledClasses: object[] = []; + const currentActiveClasses: object[] = []; + const currentExpiredClasses: object[] = []; + + if (request.ok) { + const json = await request.json(); + const classrooms = json["classrooms"]; + if (classrooms != null) { + const now = new Date().getTime(); + for (const classroom of classrooms) { + const classStart = parseDateString(classroom.start_date).getTime(); + const classExpire = parseDateString(classroom.end_date).getTime(); + if (now > classExpire) { + currentExpiredClasses.push(classroom); + } else if (now < classStart) { + currentEnrolledClasses.push(classroom); + } else { + currentActiveClasses.push(classroom); + } + } + setEnrolledClasses(currentEnrolledClasses); + setActiveClasses(currentActiveClasses); + setExpiredClasses(currentExpiredClasses); + } else { + setNoClasses(true); + } + } else { + setErrorMessage("Error retrieving the classrooms"); + } + }; + const stopLoading = () => { + setLoading(false); + }; + if (loading) { + (async function () { + await verifyLogin(); + if (isError) return; + await getClassrooms(); + stopLoading(); + })(); + } + }); + return ( + <> + {loading ? ( + <> + ) : ( + <> + + {errorMessage === "" ? ( + <> + {!noClasses ? ( + <> + + + + + ) : ( +
+
+ You are not part of any classrooms +
+
+ )} + + ) : ( +
+
{errorMessage}
+
+ )} + + )} + + ); +} +export default Dashboard; diff --git a/web/src/dashboard/DashboardBody.tsx b/web/src/dashboard/DashboardBody.tsx deleted file mode 100644 index 27b856d..0000000 --- a/web/src/dashboard/DashboardBody.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { useEffect, useState } from "react"; -import Navbar from "../components/navbar/Navbar"; -import DashboardSection from "./DashboardSection"; -import { parseDateString } from "../utils/classroom"; - -function DashboardBody() { - const [loading, setLoading] = useState(true); - const [errorMessage, setErrorMessage] = useState(""); - - const [enrolledClasses, setEnrolledClasses] = useState([]); - const [activeClasses, setActiveClasses] = useState([]); - const [expiredClasses, setExpiredClasses] = useState([]); - const [noClasses, setNoClasses] = useState(false); - - useEffect(() => { - var isError = false; - - const verifyLogin = async () => { - try { - var response = await fetch('/api/auth/valid_login'); - if (response.ok) { - var json = await response.json(); - if (json['message'] != 'true') { - isError = true; - setErrorMessage("You need to be logged in to view assignments"); - stopLoading(); - } - } else { - isError = true; - setErrorMessage("You need to be logged in to view assignments"); - stopLoading(); - } - } catch (err){ - console.error("Fetch error: ", err); - } - } - const getClassrooms = async () => { - var request = await fetch('/api/classroom/all'); - - var currentEnrolledClasses = []; - var currentActiveClasses = []; - var currentExpiredClasses = [] - - if (request.ok) { - var json = await request.json(); - var classrooms = json['classrooms']; - if (classrooms != null) { - var now = new Date().getTime(); - for (let classroom of classrooms) { - let classStart = parseDateString(classroom.start_date).getTime(); - let classExpire = parseDateString(classroom.end_date).getTime(); - if (now > classExpire) { - currentExpiredClasses.push(classroom); - } else if (now < classStart) { - currentEnrolledClasses.push(classroom); - } else { - currentActiveClasses.push(classroom); - } - } - setEnrolledClasses(currentEnrolledClasses); - setActiveClasses(currentActiveClasses); - setExpiredClasses(currentExpiredClasses); - } else { - setNoClasses(true); - } - } else { - setErrorMessage("Error retrieving the classrooms") - } - } - const stopLoading = () => { - setLoading(false); - } - if (loading) { - (async function () { - await verifyLogin(); - if (isError) return; - await getClassrooms(); - stopLoading(); - })(); - } - }) - return <> - {loading? <> : <> - - {errorMessage === "" ? - <> - {!noClasses ? - <> - - - - - : -
-
- You are not part of any classrooms -
-
- } - - : -
-
- {errorMessage} -
-
- } - } - -} -export default DashboardBody; \ No newline at end of file diff --git a/web/src/dashboard/dashboard.html b/web/src/dashboard/dashboard.html deleted file mode 100644 index df5f3a3..0000000 --- a/web/src/dashboard/dashboard.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - Dashboard - - -
- -
- - - diff --git a/web/src/index.css b/web/src/home/Home.css similarity index 93% rename from web/src/index.css rename to web/src/home/Home.css index 0cd5aa5..15358d2 100644 --- a/web/src/index.css +++ b/web/src/home/Home.css @@ -1,4 +1,4 @@ -@import url(./reset.css); +@import url(..//reset.css); * { overscroll-behavior: none; diff --git a/web/src/home/Home.tsx b/web/src/home/Home.tsx new file mode 100644 index 0000000..d6403e0 --- /dev/null +++ b/web/src/home/Home.tsx @@ -0,0 +1,15 @@ +import Logo from "../components/logo/Logo"; +import "./Home.css"; + +function Home() { + return ( + <> +

Welcome to

+
+ +
+ + ); +} + +export default Home; diff --git a/web/src/login/Login.tsx b/web/src/login/Login.tsx index 1b329dd..250971c 100644 --- a/web/src/login/Login.tsx +++ b/web/src/login/Login.tsx @@ -1,12 +1,79 @@ -import { StrictMode } from "react"; -import { createRoot } from "react-dom/client"; -import Navbar from "../components/navbar/Navbar" -import './login.css'; -import LoginInputs from "./LoginInputs"; - - -createRoot(document.getElementById("root")!).render( - - - -) \ No newline at end of file +import { useCallback, useEffect, useState } from "react"; +import TextField from "../components/textfield/Textfield"; +import "./Login.css"; + +interface FormData { + value: string; + isValid: boolean; + error: string; +} + +function Login() { + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + + const login = useCallback(async () => { + try { + const response = await fetch("/api/auth/login", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ email: username, password: password }), + }); + if (!response.ok) { + alert("Invalid Username or Password"); + } else { + window.location.href = "/dashboard"; + } + } catch (error) { + console.error("Error: ", error); + } + }, [username, password]); + + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === "Enter") { + login(); + } + }; + document.addEventListener("keydown", handleKeyDown); + return () => { + document.removeEventListener("keydown", handleKeyDown); + }; + }, [login]); + + return ( +
+
+

Sign In

+
+ { + setUsername(data.value); + }} + /> + { + setPassword(data.value); + }} + /> +
+ + Forgot Password? + + +
+
+ ); +} + +export default Login; diff --git a/web/src/login/LoginInputs.tsx b/web/src/login/LoginInputs.tsx deleted file mode 100644 index 8796a2a..0000000 --- a/web/src/login/LoginInputs.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import {useEffect, useState } from "react"; -import TextField from "../components/textfield/Textfield"; - -interface FormData { - value: string; - isValid: boolean; - error: string; -} - -function LoginInputs() { - const [username, setUsername] = useState(""); - const [password, setPassword] = useState(""); - - const login = async () => { - - try { - const response = await fetch("/api/auth/login", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({"email": username, "password": password}) - }) - if (!response.ok) { - alert("Invalid Username or Password") - } - else { - window.location.href="/dashboard" - } - } catch (error) { - console.error("Error: ", error) - } - - } - - useEffect(() => { - const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === "Enter") { - login(); - } - }; - - document.addEventListener("keydown", handleKeyDown); - - return () => { - document.removeEventListener("keydown", handleKeyDown); - }; - }, [login]); - - - return
-
-

Sign In

-
- { - setUsername(data.value) - }}/> - { - setPassword(data.value) - }}/> -
- Forgot Password? - -
-
-} - -export default LoginInputs; \ No newline at end of file diff --git a/web/src/login/login.html b/web/src/login/login.html deleted file mode 100644 index 50f199b..0000000 --- a/web/src/login/login.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - UDCS Autograder - - -
- - - \ No newline at end of file diff --git a/web/src/main.tsx b/web/src/main.tsx new file mode 100644 index 0000000..6bc5be0 --- /dev/null +++ b/web/src/main.tsx @@ -0,0 +1,14 @@ +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import App from "./App"; +import { BrowserRouter, Routes, Route } from "react-router-dom"; + +createRoot(document.getElementById("root")!).render( + + + + }> + + + +); diff --git a/web/src/resetpassword/Resetpassword.tsx b/web/src/resetpassword/Resetpassword.tsx index 2c23d0a..1634b58 100644 --- a/web/src/resetpassword/Resetpassword.tsx +++ b/web/src/resetpassword/Resetpassword.tsx @@ -1,14 +1,12 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import Navbar from "../components/navbar/Navbar" -import './resetpassword.css' +import "./ResetPassword.css"; -createRoot(document.getElementById('root')!).render( - - -
-

Page under development

- Test page -
- , -) \ No newline at end of file +function ResetPassword() { + return ( + <> +

Page under development

+ Test page + + ); +} + +export default ResetPassword; diff --git a/web/src/resetpassword/resetpassword.html b/web/src/resetpassword/resetpassword.html deleted file mode 100644 index 3380d05..0000000 --- a/web/src/resetpassword/resetpassword.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - UDCS Autograder - - -
- - - \ No newline at end of file diff --git a/web/src/signup/Signup.tsx b/web/src/signup/Signup.tsx index fa267f8..416f9ea 100644 --- a/web/src/signup/Signup.tsx +++ b/web/src/signup/Signup.tsx @@ -1,14 +1,12 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; -import Navbar from "../components/navbar/Navbar" -import './signup.css'; +import Navbar from "../components/navbar/Navbar"; +import "./signup.css"; import SignupPanel from "./SignupPanel"; - - - createRoot(document.getElementById("root")!).render( - + -) \ No newline at end of file + +); diff --git a/web/src/signup/signup.html b/web/src/signup/signup.html deleted file mode 100644 index 0974b23..0000000 --- a/web/src/signup/signup.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - UDCS Autograder - - -
- - - \ No newline at end of file diff --git a/web/src/test/Test.tsx b/web/src/test/Test.tsx deleted file mode 100644 index 4d97f16..0000000 --- a/web/src/test/Test.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { StrictMode } from "react"; -import { createRoot } from 'react-dom/client' -import styled from "styled-components" -import Select from 'react-select' -import Navbar from "../components/navbar/Navbar" -import './test.css' - -const Button = styled.button` - background-color: black; - color: white; - font-size: 20px; - padding: 10px 60px; - border-radius: 5px; - margin: 10px 0px; - cursor: pointer; - - &:disabled { - color: grey; - opacity: 0.7; - cursor: default; - } -`; - -const roleOptions = [ - {value: "student", label: "Student"}, - {value: "assistant", label: "Assistant"}, - {value: "instructor", label: "Instructor"}, -]; - -const logout = async () => { - try { - const res = await fetch("/api/auth/logout", {method:"post"}); - if (!res.ok) { - console.log("Logout not successful") - } else { - console.log("logout successful") - } - } catch (e) { - console.log("Bruh"); - } -}; - -createRoot(document.getElementById('root')!).render( - - -
- - + {error && {error}} +
+ ); +}; + +export default EmailField; diff --git a/web/src/components/textfield/PasswordField.tsx b/web/src/components/textfield/PasswordField.tsx new file mode 100644 index 0000000..f0140bc --- /dev/null +++ b/web/src/components/textfield/PasswordField.tsx @@ -0,0 +1,57 @@ +import React, { useState, ChangeEvent, InputHTMLAttributes } from "react"; +import "./Textfield.css"; + +export type PasswordFieldInput = { + value: string; + isValid: boolean; + error: string; +}; + +type PasswordFieldProps = Omit< + InputHTMLAttributes, + "onChange" | "type" +> & { + initialValue?: string; + label?: string; + onChange?: (data: PasswordFieldInput) => void; +}; + +const PasswordField: React.FC = ({ + initialValue = "", + label = "", + onChange, + className = "", + ...props +}) => { + const [value, setValue] = useState(""); + + const handleChange = (e: ChangeEvent) => { + const newValue = e.target.value; + setValue(newValue); + + // Call onChange if it exists + if (onChange) { + onChange({ + value: newValue, + isValid: true, // Passwords don't have validation requirements here + error: "", + }); + } + }; + + return ( +
+ {label && } + +
+ ); +}; + +export default PasswordField; diff --git a/web/src/components/textfield/Textfield.tsx b/web/src/components/textfield/Textfield.tsx index 23dc320..56f666a 100644 --- a/web/src/components/textfield/Textfield.tsx +++ b/web/src/components/textfield/Textfield.tsx @@ -1,21 +1,27 @@ -import React, { useState, ChangeEvent, InputHTMLAttributes, useEffect} from 'react'; -import './Textfield.css'; +import React, { + useState, + ChangeEvent, + InputHTMLAttributes, + useEffect, +} from "react"; +import "./Textfield.css"; export type TextFieldInput = { value: string; - isValid: boolean; - error: string; -} +}; // Define props interface -type TextFieldProps = Omit, 'onChange'> & { +type TextFieldProps = Omit< + InputHTMLAttributes, + "onChange" +> & { initialValue?: string; label?: string; onChange?: (data: TextFieldInput) => void; -} +}; const TextField: React.FC = ({ - initialValue = '', - label = 'Input', + initialValue = "", + label = "Input", type, onChange, className, @@ -23,47 +29,23 @@ const TextField: React.FC = ({ ...props }) => { const [value, setValue] = useState(""); - const [error, setError] = useState(''); const [startedChange, setStartedChange] = useState(false); - // Email validation regex - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - - const validateInput = (newValue: string): string => { - if (type == "email") { - if (!newValue) { - return 'Email is required'; - } - if (!emailRegex.test(newValue)) { - return 'Please enter a valid email address'; - } - } - return ''; - }; - - var email = type === "email"; - var password = type === "password"; - const handleChange = (e: ChangeEvent) => { - var newValue = e.target.value; - if (maxLength && newValue.length > maxLength) newValue = newValue.substring(0, maxLength); + let newValue = e.target.value; + if (maxLength && newValue.length > maxLength) + newValue = newValue.substring(0, maxLength); setValue(newValue); - - // Validate input if email checking is enabled - const validationError = validateInput(newValue); - setError(validationError); if (!startedChange) { setStartedChange(true); } - + // Only call onChange if it exists if (onChange) { onChange({ value: newValue, - isValid: !validationError, - error: validationError, }); } //Add a check to see if a possword if being entered, and thus make the characters dots instead of the entered characters @@ -71,9 +53,9 @@ const TextField: React.FC = ({ useEffect(() => { if (!startedChange) { - setValue(props.value && value == '' ? props.value.toString() : value); + setValue(props.value && value == "" ? props.value.toString() : value); } - }) + }, [startedChange, props.value, value]); return (
@@ -82,13 +64,11 @@ const TextField: React.FC = ({ type={type} value={value} onChange={handleChange} - className={`textfield-input ${error ? 'error' : ''} ${className}`} - placeholder={initialValue ? initialValue : email ? "Email" : password ? "Password" : "Enter Text Here"} + className={`textfield-input ${className}`} + placeholder={initialValue ?? "Enter Text Here"} /> - {error && {error}}
); }; - -export default TextField; \ No newline at end of file +export default TextField; diff --git a/web/src/global.css b/web/src/global.css deleted file mode 100644 index c6e53d9..0000000 --- a/web/src/global.css +++ /dev/null @@ -1,27 +0,0 @@ -.drop-shadow { - box-shadow: 0 0 15px 2.5px #2f2f2f; - -moz-box-shadow: 0 0 15px 2.5px #2f2f2f; - -webkit-box-shadow: 0 0 15px 2.5px #2f2f2f; -} - - -/* For dynamically drop-shadowed navbar */ -@keyframes fadeInDown { - 0% { - opacity: 0; - transform: translateY(-20px); - } - 100% { - opacity: 1; - transform: translateY(0); - } - } - - .sticky { - position: fixed; - top: 0; - width: 100%; - animation-duration: 0.5s; - animation-name: fadeInDown; - animation-timing-function: ease-out; - } \ No newline at end of file diff --git a/web/src/index.css b/web/src/index.css index 0cd5aa5..1387d43 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -7,7 +7,6 @@ body { font-family: "Azeret Mono"; margin: 0; - overflow: hidden; } #welcome-text { diff --git a/web/src/login/Login.tsx b/web/src/login/Login.tsx index c9cd912..e10aaf3 100644 --- a/web/src/login/Login.tsx +++ b/web/src/login/Login.tsx @@ -1,5 +1,6 @@ import { useCallback, useEffect, useState } from "react"; -import TextField from "../components/textfield/Textfield"; +import EmailField from "../components/textfield/EmailField"; +import PasswordField from "../components/textfield/PasswordField"; import "./Login.css"; import { Link } from "react-router"; @@ -49,18 +50,12 @@ function Login() {

Sign In

- { setUsername(data.value); }} /> - { setPassword(data.value); }} diff --git a/web/src/login/login.css b/web/src/login/login.css index 5821e90..4d57f4f 100644 --- a/web/src/login/login.css +++ b/web/src/login/login.css @@ -16,7 +16,7 @@ background: white; box-shadow: 33px 35px 13.9px -6px rgba(0, 0, 0, 0.25); border-radius: 25px; - overflow: visible; + overflow: hidden; border: 4px solid #1E212B; } @@ -39,11 +39,33 @@ margin-top: 2.5%; } -.input-container input{ +.input-container .textfield-container { + margin: 0; + margin-top: 5%; +} + +.input-container .textfield-input { font-size: 24px; border-color: #000000; border-width: 1.5px; - margin-top: 5%; + border-style: solid; + border-radius: 5px; + padding: 0.5rem; + width: 100%; + box-sizing: border-box; +} + +.input-container .textfield-input::placeholder { + color: #999; + opacity: 1; +} + +.input-container .textfield-input.error { + border-color: #000000; /* Keep black border even on error */ +} + +.input-container .error-message { + display: none; /* Hide validation errors on login page */ } .forgot-pw { diff --git a/web/src/main.tsx b/web/src/main.tsx index bab830c..8e97c56 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -3,7 +3,6 @@ import { createRoot } from "react-dom/client"; import App from "./App"; import { BrowserRouter, Routes, Route } from "react-router"; import "./index.css"; -import "./Global.css"; import "./Colors.css"; createRoot(document.getElementById("root")!).render( diff --git a/web/src/signup/Signup.tsx b/web/src/signup/Signup.tsx index c26b117..be175fa 100644 --- a/web/src/signup/Signup.tsx +++ b/web/src/signup/Signup.tsx @@ -1,47 +1,18 @@ import TextField from "../components/textfield/Textfield"; +import PasswordField from "../components/textfield/PasswordField"; import "./Signup.css"; import { Link } from "react-router"; -interface FormData { - value: string; - isValid: boolean; - error: string; -} - -const handleTextChange = (data: FormData) => { - console.log("Value:", data.value); - console.log("Is Valid:", data.isValid); - console.log("Error:", data.error); -}; - function Signup() { return (

Sign Up

- - - - + + + +
Why am I here? From 83f55904affc2593ec6db6faf8e122082b54dd12 Mon Sep 17 00:00:00 2001 From: Tanish Garg Date: Sun, 19 Oct 2025 02:35:28 -0500 Subject: [PATCH 08/11] fix: removing shadows --- web/src/account/account.css | 1 - web/src/components/assignment/AssignmentPanel.css | 2 -- web/src/components/classroom-widget/classroomwidget.css | 2 -- web/src/components/popup/Popup.css | 1 - web/src/components/question/QuestionPanel.css | 1 - web/src/components/titlebanner/TitleBanner.css | 1 - web/src/dashboard/dashboard.css | 2 -- web/src/login/login.css | 1 - web/src/manageclassroom/css/AssignmentEditor.css | 1 - web/src/manageclassroom/css/QuestionEditor.css | 1 - web/src/manageclassroom/manageclassroom.css | 1 - web/src/signup/signup.css | 4 +--- 12 files changed, 1 insertion(+), 17 deletions(-) diff --git a/web/src/account/account.css b/web/src/account/account.css index b6a6fc6..4b349e1 100644 --- a/web/src/account/account.css +++ b/web/src/account/account.css @@ -29,7 +29,6 @@ body { padding-right: 4%; padding-bottom: 2%; background: #fff; - box-shadow: 33px 35px 13.9px -6px rgba(0, 0, 0, 0.25); } .blueButton { diff --git a/web/src/components/assignment/AssignmentPanel.css b/web/src/components/assignment/AssignmentPanel.css index f52ddf9..d79e656 100644 --- a/web/src/components/assignment/AssignmentPanel.css +++ b/web/src/components/assignment/AssignmentPanel.css @@ -7,14 +7,12 @@ border-radius: 20px; width: 75%; padding: 2%; - box-shadow: 25px 25px 13.9px -6px rgba(0, 0, 0, 0.25); } .assignmentTitle { font-family: "Azeret Mono"; font-size: 225%; font-weight: bold; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); } .assignmentDescription { diff --git a/web/src/components/classroom-widget/classroomwidget.css b/web/src/components/classroom-widget/classroomwidget.css index a25566a..92433a1 100644 --- a/web/src/components/classroom-widget/classroomwidget.css +++ b/web/src/components/classroom-widget/classroomwidget.css @@ -9,7 +9,6 @@ margin: 0 auto; background: white; border-radius: 0.625rem; - box-shadow: 0 0.3125rem 0.625rem 0.3125rem rgba(0, 0, 0, 0.25); overflow: hidden; outline: 0.15625rem solid black; } @@ -23,7 +22,6 @@ object-fit: cover; left: -27.16%; top: -3.5%; - box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25); } .course-card-overlay { diff --git a/web/src/components/popup/Popup.css b/web/src/components/popup/Popup.css index cd674e6..4951ece 100644 --- a/web/src/components/popup/Popup.css +++ b/web/src/components/popup/Popup.css @@ -16,5 +16,4 @@ padding: 2rem; border-radius: 8px; z-index: 1001; - box-shadow: 0px 10px 13.9px -6px rgba(0, 0, 0, 0.25); } diff --git a/web/src/components/question/QuestionPanel.css b/web/src/components/question/QuestionPanel.css index 99e7653..eeb5c6c 100644 --- a/web/src/components/question/QuestionPanel.css +++ b/web/src/components/question/QuestionPanel.css @@ -1,6 +1,5 @@ .questionPanel { border-radius: 20px; - box-shadow: 0 0 13.9px -6px rgba(0, 0, 0, 0.25); background: white; padding: 2%; width: 100%; diff --git a/web/src/components/titlebanner/TitleBanner.css b/web/src/components/titlebanner/TitleBanner.css index b19fd8b..a6f7ecc 100644 --- a/web/src/components/titlebanner/TitleBanner.css +++ b/web/src/components/titlebanner/TitleBanner.css @@ -12,7 +12,6 @@ .title { position: absolute; color: white; - text-shadow: -2px -2px 0 #00000077, 2px -2px 0 #00000077, -2px 2px 0 #00000077, 2px 2px 0 #00000077; top:50%; left: 20%; transform: translate(0, -50%); diff --git a/web/src/dashboard/dashboard.css b/web/src/dashboard/dashboard.css index 55c2e97..d45e701 100644 --- a/web/src/dashboard/dashboard.css +++ b/web/src/dashboard/dashboard.css @@ -14,7 +14,6 @@ body { margin-bottom: 1%; margin-left: 2%; font-weight: bold; - text-shadow: 2px 2px 0px rgba(255, 255, 255, 1); } .section { margin-top: 1%; @@ -42,7 +41,6 @@ body { padding: 2%; border: 2px solid black; border-radius: 25px; - box-shadow: 25px 25px 13.9px -6px rgba(0, 0, 0, 0.25); color: red; min-height: 30vh; } \ No newline at end of file diff --git a/web/src/login/login.css b/web/src/login/login.css index 4d57f4f..79551c5 100644 --- a/web/src/login/login.css +++ b/web/src/login/login.css @@ -14,7 +14,6 @@ width: max(40%, 300px); height: 57.5%; background: white; - box-shadow: 33px 35px 13.9px -6px rgba(0, 0, 0, 0.25); border-radius: 25px; overflow: hidden; border: 4px solid #1E212B; diff --git a/web/src/manageclassroom/css/AssignmentEditor.css b/web/src/manageclassroom/css/AssignmentEditor.css index a8056df..ae45c18 100644 --- a/web/src/manageclassroom/css/AssignmentEditor.css +++ b/web/src/manageclassroom/css/AssignmentEditor.css @@ -6,7 +6,6 @@ flex-direction: column; background: white; border-radius: 20px; - box-shadow: 0 10px 15px 0px rgba(0, 0, 0, 0.25); box-sizing: border-box; } .da-tabs-parent { diff --git a/web/src/manageclassroom/css/QuestionEditor.css b/web/src/manageclassroom/css/QuestionEditor.css index 8a4165c..be7c681 100644 --- a/web/src/manageclassroom/css/QuestionEditor.css +++ b/web/src/manageclassroom/css/QuestionEditor.css @@ -7,7 +7,6 @@ background: white; border-radius: 20px; padding: 2%; - box-shadow: 0 10px 15px 0px rgba(0, 0, 0, 0.25); } .question-body { display: flex; diff --git a/web/src/manageclassroom/manageclassroom.css b/web/src/manageclassroom/manageclassroom.css index a7b56e8..c0447ff 100644 --- a/web/src/manageclassroom/manageclassroom.css +++ b/web/src/manageclassroom/manageclassroom.css @@ -42,7 +42,6 @@ padding: 2%; border: 2px solid black; border-radius: 25px; - box-shadow: 25px 25px 13.9px -6px rgba(0, 0, 0, 0.25); color: red; min-height: 30vh; } diff --git a/web/src/signup/signup.css b/web/src/signup/signup.css index 47c5bf5..cc4eb69 100644 --- a/web/src/signup/signup.css +++ b/web/src/signup/signup.css @@ -20,9 +20,8 @@ .signup-card { width: max(40%, 300px); - height: 85%; + height: 70%; background: white; - box-shadow: 33px 35px 13.9px -6px rgba(0, 0, 0, 0.25); border-radius: 25px; overflow: hidden; border: 4px solid #1E212B; @@ -102,7 +101,6 @@ padding: 2%; border: 2px solid black; border-radius: 25px; - box-shadow: 25px 25px 13.9px -6px rgba(0, 0, 0, 0.25); color: red; min-height: 30vh; } \ No newline at end of file From 508ddb36b5ffae9745793ac3d562cd026c4df8a8 Mon Sep 17 00:00:00 2001 From: Tanish Garg Date: Sun, 19 Oct 2025 02:44:52 -0500 Subject: [PATCH 09/11] fix: removing gradient and centralizing color scheme --- web/src/account/account.css | 13 ++++----- web/src/assignment/assignment.css | 8 +++--- web/src/colors.css | 25 ++++++++++++++++- .../assignment/AssignmentDropdown.css | 14 +++++----- web/src/components/buttons/ColorButton.css | 2 +- .../classroom-widget/classroomwidget.css | 8 +++--- .../components/homework/HomeworkSidebar.css | 10 +++---- web/src/components/navbar/Navbar.css | 7 ++--- web/src/components/popup/NewTestCasePopup.css | 2 +- web/src/components/popup/Popup.css | 2 +- web/src/components/question/QuestionPanel.css | 4 +-- web/src/components/question/QuestionScore.css | 6 ++-- web/src/components/textfield/Textfield.css | 8 +++--- web/src/dashboard/dashboard.css | 8 +++--- web/src/login/login.css | 26 ++++++++--------- web/src/manageclassroom/css/FileTabs.css | 20 ++++++------- .../manageclassroom/css/PointsProgress.css | 12 ++++---- web/src/manageclassroom/css/TestCasesTabs.css | 4 +-- web/src/manageclassroom/manageclassroom.css | 14 +++++----- web/src/signup/signup.css | 28 +++++++++---------- 20 files changed, 119 insertions(+), 102 deletions(-) diff --git a/web/src/account/account.css b/web/src/account/account.css index 4b349e1..2e718e0 100644 --- a/web/src/account/account.css +++ b/web/src/account/account.css @@ -1,16 +1,13 @@ body { - background: linear-gradient(90deg, #0CAADC -20%, #ffffff 120%); + background: var(--color-process-cyan); } .header { font-family: 'Monomaniac One'; font-size: 4em; text-transform: uppercase; - background: linear-gradient(to right, var(--color-raisin-black) 0%, var(--color-process-cyan) 50%); + color: var(--color-raisin-black); text-decoration: none; - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; } #accountRoot { @@ -22,13 +19,13 @@ body { margin-bottom: 1%; margin-top: 3%; margin-left: 5%; - border: 4px solid black; + border: 4px solid var(--color-black); border-radius: 25px; padding-top: 4%; padding-left: 4%; padding-right: 4%; padding-bottom: 2%; - background: #fff; + background: var(--color-white); } .blueButton { @@ -102,6 +99,6 @@ tr { font-family: 'Azeret Mono'; font-size: 90%; width: 100%; - color: red; + color: var(--color-red); text-align: center; } \ No newline at end of file diff --git a/web/src/assignment/assignment.css b/web/src/assignment/assignment.css index 81c785b..ded06a5 100644 --- a/web/src/assignment/assignment.css +++ b/web/src/assignment/assignment.css @@ -1,5 +1,5 @@ body { - background: linear-gradient(90deg, #0CAADC -40%, #ffffff 120%); + background: var(--color-process-cyan); } .panelParent { display: flex; @@ -12,14 +12,14 @@ body { align-items: center; justify-content: center; text-align: center; - color: red; + color: var(--color-red); font-family: "Azeret Mono"; font-size: 150%; padding: 2%; width: 50%; - border: 2px solid black; + border: 2px solid var(--color-black); border-radius: 25px; - background: white; + background: var(--color-white); line-height: 1.5; min-height: 20vh; } \ No newline at end of file diff --git a/web/src/colors.css b/web/src/colors.css index db17d71..9f01e0c 100644 --- a/web/src/colors.css +++ b/web/src/colors.css @@ -1,7 +1,30 @@ :root { + /* Primary Colors */ --color-raisin-black: #1E212B; --color-NCS-blue: #1481ba; --color-aero-blue: #11b5e4; --color-process-cyan: #0caadc; --color-white: #ffffff; -} \ No newline at end of file + --color-black: #000000; + + /* Grays */ + --color-gray-light: #eee; + --color-gray-medium: #ccc; + --color-gray-dark: #999; + --color-gray-darker: #595959; + --color-gray-darkest: #333; + --color-gray-text: #222; + + /* Status Colors */ + --color-success: #1DFF38; + --color-warning: #FFD902; + --color-error: #FF1D21; + --color-danger: #dc3545; + --color-red: #e00; + + /* Backgrounds */ + --color-bg-light: #f5f5f5; + --color-bg-sidebar: #cacaca; + --color-bg-dropdown: #d9d9d9; + --color-bg-dropdown-dark: #9a9a9a; +} diff --git a/web/src/components/assignment/AssignmentDropdown.css b/web/src/components/assignment/AssignmentDropdown.css index 02ad3a4..2d321a8 100644 --- a/web/src/components/assignment/AssignmentDropdown.css +++ b/web/src/components/assignment/AssignmentDropdown.css @@ -1,6 +1,6 @@ .assignmentDropdown { width: 100%; - border: 1.5px solid black; + border: 1.5px solid var(--color-black); box-sizing: border-box; } @@ -10,8 +10,8 @@ align-items: center; box-sizing: border-box; width: 100%; - background-color: #9a9a9a; - color: white; + background-color: var(--color-bg-dropdown-dark); + color: var(--color-white); font-weight: bold; user-select: none; font-family: "Azeret Mono"; @@ -21,8 +21,8 @@ } .openAssignment { - background: #d9d9d9; - color: black; + background: var(--color-bg-dropdown); + color: var(--color-black); font-family: "Azeret Mono"; padding: .5%; font-size: 85%; @@ -33,7 +33,7 @@ display: flex; flex-direction: column; gap: 2rem; - background-color: #595959; - color: black; + background-color: var(--color-gray-darker); + color: var(--color-black); padding: 2.5%; } \ No newline at end of file diff --git a/web/src/components/buttons/ColorButton.css b/web/src/components/buttons/ColorButton.css index 7cff4e6..a35c6e6 100644 --- a/web/src/components/buttons/ColorButton.css +++ b/web/src/components/buttons/ColorButton.css @@ -1,5 +1,5 @@ .color-button { - background-color: var(--bg-color, #333); + background-color: var(--bg-color, var(--color-gray-darkest)); border: none; cursor: pointer; transition: background-color 0.2s ease; diff --git a/web/src/components/classroom-widget/classroomwidget.css b/web/src/components/classroom-widget/classroomwidget.css index 92433a1..3d2d7f3 100644 --- a/web/src/components/classroom-widget/classroomwidget.css +++ b/web/src/components/classroom-widget/classroomwidget.css @@ -7,10 +7,10 @@ max-height: 400px; min-height: 250px; margin: 0 auto; - background: white; + background: var(--color-white); border-radius: 0.625rem; overflow: hidden; - outline: 0.15625rem solid black; + outline: 0.15625rem solid var(--color-black); } .course-card-image { @@ -38,7 +38,7 @@ bottom: 7%; left: 5%; width: 90%; - color: white; + color: var(--color-white); line-height: 1.25; font-family: 'Azeret Mono', monospace; font-weight: 700; @@ -58,7 +58,7 @@ .course-card-date { width: 100%; - color: white; + color: var(--color-white); font-family: 'Azeret Mono', monospace; font-weight: 700; font-size: clamp(0.4rem, 0.8vw, 0.875rem); diff --git a/web/src/components/homework/HomeworkSidebar.css b/web/src/components/homework/HomeworkSidebar.css index 3c8beb8..bc4324a 100644 --- a/web/src/components/homework/HomeworkSidebar.css +++ b/web/src/components/homework/HomeworkSidebar.css @@ -1,14 +1,14 @@ .homeworkSidebar { border-radius: 15px; - border: 1.5px solid black; - background: #cacaca; - color: white; + border: 1.5px solid var(--color-black); + background: var(--color-bg-sidebar); + color: var(--color-white); min-height: 50vh; } .homeworkHeader { - color: white; - border-bottom: 2px solid black; + color: var(--color-white); + border-bottom: 2px solid var(--color-black); padding: 5%; font-family: "Azeret Mono"; font-size: 175%; diff --git a/web/src/components/navbar/Navbar.css b/web/src/components/navbar/Navbar.css index e1d7740..7c10725 100644 --- a/web/src/components/navbar/Navbar.css +++ b/web/src/components/navbar/Navbar.css @@ -4,7 +4,7 @@ align-items: center; padding-top: 1vh; padding-bottom: 1vh; - background: #fff; + background: var(--color-white); } .nav-left { @@ -27,9 +27,6 @@ font-family: 'Monomaniac One'; font-size: 2em; text-transform: uppercase; - background: linear-gradient(to right, var(--color-raisin-black) 0%, var(--color-process-cyan) 100%); + color: var(--color-raisin-black); text-decoration: none; - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; } \ No newline at end of file diff --git a/web/src/components/popup/NewTestCasePopup.css b/web/src/components/popup/NewTestCasePopup.css index 6ef9efe..74402b1 100644 --- a/web/src/components/popup/NewTestCasePopup.css +++ b/web/src/components/popup/NewTestCasePopup.css @@ -32,6 +32,6 @@ font-weight: 500; } .test-type { - border: 1px solid #ccc; + border: 1px solid var(--color-gray-medium); border-radius: 5px; } \ No newline at end of file diff --git a/web/src/components/popup/Popup.css b/web/src/components/popup/Popup.css index 4951ece..969fc6d 100644 --- a/web/src/components/popup/Popup.css +++ b/web/src/components/popup/Popup.css @@ -12,7 +12,7 @@ } .popup-content { - background-color: white; + background-color: var(--color-white); padding: 2rem; border-radius: 8px; z-index: 1001; diff --git a/web/src/components/question/QuestionPanel.css b/web/src/components/question/QuestionPanel.css index eeb5c6c..96ace42 100644 --- a/web/src/components/question/QuestionPanel.css +++ b/web/src/components/question/QuestionPanel.css @@ -1,6 +1,6 @@ .questionPanel { border-radius: 20px; - background: white; + background: var(--color-white); padding: 2%; width: 100%; box-sizing: border-box; @@ -26,7 +26,7 @@ font-size: 100%; padding: .75%; background: var(--color-NCS-blue); - color: white; + color: var(--color-white); border-radius: 20px; } .resetStarterCode:active { diff --git a/web/src/components/question/QuestionScore.css b/web/src/components/question/QuestionScore.css index ae5e6c3..f44bdf6 100644 --- a/web/src/components/question/QuestionScore.css +++ b/web/src/components/question/QuestionScore.css @@ -10,13 +10,13 @@ font-size: 125%; } .green { - color: #1DFF38; + color: var(--color-success); } .yellow { - color: #FFD902; + color: var(--color-warning); } .red { - color: #FF1D21; + color: var(--color-error); } .completionIndicator { width: 40px; diff --git a/web/src/components/textfield/Textfield.css b/web/src/components/textfield/Textfield.css index ca39881..49c8be7 100644 --- a/web/src/components/textfield/Textfield.css +++ b/web/src/components/textfield/Textfield.css @@ -14,22 +14,22 @@ .textfield-input { padding: 0.5rem; font-size: 1rem; - border: 1px solid #ccc; + border: 1px solid var(--color-gray-medium); border-radius: 5px; outline: none; transition: border-color 0.2s; } .textfield-input:focus { - border-color: #0CAADC; + border-color: var(--color-process-cyan); } .textfield-input.error { - border-color: #dc3545; + border-color: var(--color-danger); } .error-message { - color: #dc3545; + color: var(--color-danger); font-size: 0.875rem; margin-top: 0.25rem; } \ No newline at end of file diff --git a/web/src/dashboard/dashboard.css b/web/src/dashboard/dashboard.css index d45e701..31f0fac 100644 --- a/web/src/dashboard/dashboard.css +++ b/web/src/dashboard/dashboard.css @@ -1,5 +1,5 @@ body { - background: linear-gradient(90deg, #0CAADC -20%, #ffffff 120%); + background: var(--color-process-cyan); } .card-grid { @@ -31,7 +31,7 @@ body { width: 100%; } .error { - background: white; + background: var(--color-white); display: flex; align-items: center; justify-content: center; @@ -39,8 +39,8 @@ body { font-size: 150%; margin-top: 2%; padding: 2%; - border: 2px solid black; + border: 2px solid var(--color-black); border-radius: 25px; - color: red; + color: var(--color-red); min-height: 30vh; } \ No newline at end of file diff --git a/web/src/login/login.css b/web/src/login/login.css index 79551c5..14b8c2c 100644 --- a/web/src/login/login.css +++ b/web/src/login/login.css @@ -2,7 +2,7 @@ font-family: 'Azeret Mono', monospace; width: 100vw; height: 94.5vh; - background: linear-gradient(90deg, #0CAADC -20%, #ffffff 120%); + background: var(--color-process-cyan); display: flex; flex-direction: row; flex-wrap: wrap; @@ -13,10 +13,10 @@ .signin-card { width: max(40%, 300px); height: 57.5%; - background: white; + background: var(--color-white); border-radius: 25px; overflow: hidden; - border: 4px solid #1E212B; + border: 4px solid var(--color-raisin-black); } .signin-card > * { @@ -28,7 +28,7 @@ height: 12.5%; position: relative; margin-top: 5%; - color: black; + color: var(--color-black); font-size: 42px; font-weight: 700; word-wrap: break-word; @@ -45,7 +45,7 @@ .input-container .textfield-input { font-size: 24px; - border-color: #000000; + border-color: var(--color-black); border-width: 1.5px; border-style: solid; border-radius: 5px; @@ -55,12 +55,12 @@ } .input-container .textfield-input::placeholder { - color: #999; + color: var(--color-gray-dark); opacity: 1; } .input-container .textfield-input.error { - border-color: #000000; /* Keep black border even on error */ + border-color: var(--color-black); /* Keep black border even on error */ } .input-container .error-message { @@ -68,7 +68,7 @@ } .forgot-pw { - color: #1481BA; + color: var(--color-NCS-blue); font-size: 18px; } @@ -79,21 +79,21 @@ justify-content: flex-end; border-radius: 20px; font-size: 36px; - color: #ffffff; - background-color: #0CAADC; + color: var(--color-white); + background-color: var(--color-process-cyan); padding-top: 12.5px; padding-bottom: 12.5px; transition: background-color 0.2s; } .submit-button:hover { - background-color: #1481BA; + background-color: var(--color-NCS-blue); } .submit-button:active { - background-color: #1E212B; + background-color: var(--color-raisin-black); } .submit-button:focus { - background-color: #1E212B; + background-color: var(--color-raisin-black); } \ No newline at end of file diff --git a/web/src/manageclassroom/css/FileTabs.css b/web/src/manageclassroom/css/FileTabs.css index 3c21b09..ab6dbe3 100644 --- a/web/src/manageclassroom/css/FileTabs.css +++ b/web/src/manageclassroom/css/FileTabs.css @@ -1,7 +1,7 @@ .file-tabs { display: inline-block; - background-color: #eee; - border-bottom: 1px solid #333; + background-color: var(--color-gray-light); + border-bottom: 1px solid var(--color-gray-darkest); overflow-x: auto; white-space: nowrap; width: 100%; @@ -12,20 +12,20 @@ font-family: "Azeret Mono"; align-items: center; padding: .5%; - color: #222; + color: var(--color-gray-text); cursor: pointer; user-select: none; - border-left: 1px solid black; - border-right: 1px solid black; + border-left: 1px solid var(--color-black); + border-right: 1px solid var(--color-black); } .file-tab.active { - background-color: #fff; - color: black; + background-color: var(--color-white); + color: var(--color-black); } .file-tab:hover { - background-color: #ccc; + background-color: var(--color-gray-medium); } .tab-name { @@ -35,11 +35,11 @@ .close-btn { background: none; border: none; - color: black; + color: var(--color-black); cursor: pointer; font-size: 14px; } .close-btn:hover { - color: black; + color: var(--color-black); } diff --git a/web/src/manageclassroom/css/PointsProgress.css b/web/src/manageclassroom/css/PointsProgress.css index aaae6fb..c54d51c 100644 --- a/web/src/manageclassroom/css/PointsProgress.css +++ b/web/src/manageclassroom/css/PointsProgress.css @@ -10,18 +10,18 @@ .points-progress-bar { width: 100%; height: 10px; - background: red; + background: var(--color-red); } .points-progress-bar::-webkit-progress-bar { - background-color: red; + background-color: var(--color-red); } .points-progress-bar::-webkit-progress-value { - background-color: #0f0; + background-color: var(--color-success); } .points-progress-bar::-moz-progress-bar { - background-color: #0f0; + background-color: var(--color-success); } .progress-text { font-family: "Azeret Mono"; @@ -33,10 +33,10 @@ gap: 1rem; } .redtext { - color: red; + color: var(--color-red); } .greentext { - color: lime; + color: var(--color-success); } .total-points { flex: 1; diff --git a/web/src/manageclassroom/css/TestCasesTabs.css b/web/src/manageclassroom/css/TestCasesTabs.css index 819ac3b..3da5063 100644 --- a/web/src/manageclassroom/css/TestCasesTabs.css +++ b/web/src/manageclassroom/css/TestCasesTabs.css @@ -1,12 +1,12 @@ .testcases-tabs { width: 100%; box-sizing: border-box; - background: #eee; + background: var(--color-gray-light); } .tabs { display: flex; align-items: center; - border-bottom: 1px solid black; + border-bottom: 1px solid var(--color-black); width: 100%; box-sizing: border-box; } diff --git a/web/src/manageclassroom/manageclassroom.css b/web/src/manageclassroom/manageclassroom.css index c0447ff..4da4c88 100644 --- a/web/src/manageclassroom/manageclassroom.css +++ b/web/src/manageclassroom/manageclassroom.css @@ -32,7 +32,7 @@ width: 100%; } .error { - background: white; + background: var(--color-white); display: flex; align-items: center; justify-content: center; @@ -40,9 +40,9 @@ font-size: 150%; margin-top: 2%; padding: 2%; - border: 2px solid black; + border: 2px solid var(--color-black); border-radius: 25px; - color: red; + color: var(--color-red); min-height: 30vh; } .edit-buttons { @@ -62,7 +62,7 @@ .edit-button { width: 50%; font-family: 'Azeret Mono'; - color: white; + color: var(--color-white); border-radius: 20px; padding: 1.5%; font-size: 150%; @@ -82,15 +82,15 @@ button.save-button:active { } .delete-button { - background-color: red; + background-color: var(--color-red); } .delete-button:hover { - background-color: #e00; + background-color: var(--color-danger); } button.delete-button:active { - background-color: darkred; + background-color: var(--color-error); } .edit-button:disabled { diff --git a/web/src/signup/signup.css b/web/src/signup/signup.css index cc4eb69..def1557 100644 --- a/web/src/signup/signup.css +++ b/web/src/signup/signup.css @@ -10,7 +10,7 @@ font-family: 'Azeret Mono', monospace; width: 100vw; height: 94.5vh; - background: linear-gradient(90deg, #0CAADC -20%, #ffffff 120%); + background: var(--color-process-cyan); display: flex; flex-direction: row; flex-wrap: wrap; @@ -21,10 +21,10 @@ .signup-card { width: max(40%, 300px); height: 70%; - background: white; + background: var(--color-white); border-radius: 25px; overflow: hidden; - border: 4px solid #1E212B; + border: 4px solid var(--color-raisin-black); } .signup-card > * { @@ -36,7 +36,7 @@ height: 10%; position: relative; margin-top: 5%; - color: black; + color: var(--color-black); font-size: 42px; font-weight: 700; word-wrap: break-word; @@ -48,13 +48,13 @@ .input-container input{ font-size: 24px; - border-color: #000000; + border-color: var(--color-black); border-width: 1.5px; margin-top: 5%; } .why-am-i-here { - color: #1481BA; + color: var(--color-NCS-blue); font-size: 18px; } @@ -65,23 +65,23 @@ justify-content: flex-end; border-radius: 20px; font-size: 36px; - color: #ffffff; - background-color: #0CAADC; + color: var(--color-white); + background-color: var(--color-process-cyan); padding-top: 12.5px; padding-bottom: 12.5px; transition: background-color 0.2s; } .submit-button:hover { - background-color: #1481BA; + background-color: var(--color-NCS-blue); } .submit-button:active { - background-color: #1E212B; + background-color: var(--color-raisin-black); } .submit-button:focus { - background-color: #1E212B; + background-color: var(--color-raisin-black); } .errorParent { @@ -91,7 +91,7 @@ width: 100%; } .error { - background: white; + background: var(--color-white); display: flex; align-items: center; justify-content: center; @@ -99,8 +99,8 @@ font-size: 150%; margin-top: 2%; padding: 2%; - border: 2px solid black; + border: 2px solid var(--color-black); border-radius: 25px; - color: red; + color: var(--color-red); min-height: 30vh; } \ No newline at end of file From 64ba957f8682b77d28aab979eaa50754bec85429 Mon Sep 17 00:00:00 2001 From: Tanish Garg Date: Sun, 19 Oct 2025 02:56:30 -0500 Subject: [PATCH 10/11] fix: color scheme changes --- web/index.html | 2 +- web/src/account/account.css | 2 +- web/src/assignment/assignment.css | 2 +- web/src/colors.css | 3 + web/src/components/logo/Logo.css | 0 web/src/components/logo/Logo.tsx | 372 ++++++++++++++++++++------- web/src/components/navbar/Navbar.css | 4 +- web/src/dashboard/dashboard.css | 4 +- web/src/login/login.css | 2 +- web/src/signup/signup.css | 2 +- 10 files changed, 286 insertions(+), 107 deletions(-) delete mode 100644 web/src/components/logo/Logo.css diff --git a/web/index.html b/web/index.html index 09adab2..c42a334 100644 --- a/web/index.html +++ b/web/index.html @@ -6,7 +6,7 @@ - + Autograder diff --git a/web/src/account/account.css b/web/src/account/account.css index 2e718e0..f2f7a54 100644 --- a/web/src/account/account.css +++ b/web/src/account/account.css @@ -1,5 +1,5 @@ body { - background: var(--color-process-cyan); + background: var(--color-bg-primary); } .header { diff --git a/web/src/assignment/assignment.css b/web/src/assignment/assignment.css index ded06a5..8ab2854 100644 --- a/web/src/assignment/assignment.css +++ b/web/src/assignment/assignment.css @@ -1,5 +1,5 @@ body { - background: var(--color-process-cyan); + background: var(--color-bg-primary); } .panelParent { display: flex; diff --git a/web/src/colors.css b/web/src/colors.css index 9f01e0c..34b6050 100644 --- a/web/src/colors.css +++ b/web/src/colors.css @@ -4,6 +4,7 @@ --color-NCS-blue: #1481ba; --color-aero-blue: #11b5e4; --color-process-cyan: #0caadc; + --color-aqua-light: #b3e5fc; --color-white: #ffffff; --color-black: #000000; @@ -23,8 +24,10 @@ --color-red: #e00; /* Backgrounds */ + --color-bg-primary: #ffffff; --color-bg-light: #f5f5f5; --color-bg-sidebar: #cacaca; --color-bg-dropdown: #d9d9d9; --color-bg-dropdown-dark: #9a9a9a; + --color-bg-navbar: #b3e5fc; } diff --git a/web/src/components/logo/Logo.css b/web/src/components/logo/Logo.css deleted file mode 100644 index e69de29..0000000 diff --git a/web/src/components/logo/Logo.tsx b/web/src/components/logo/Logo.tsx index 863929c..a613540 100644 --- a/web/src/components/logo/Logo.tsx +++ b/web/src/components/logo/Logo.tsx @@ -1,99 +1,275 @@ -import './Logo.css' - const Logo = () => { - return ( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- ); - }; - - export default Logo; \ No newline at end of file + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +export default Logo; diff --git a/web/src/components/navbar/Navbar.css b/web/src/components/navbar/Navbar.css index 7c10725..788ced4 100644 --- a/web/src/components/navbar/Navbar.css +++ b/web/src/components/navbar/Navbar.css @@ -4,7 +4,7 @@ align-items: center; padding-top: 1vh; padding-bottom: 1vh; - background: var(--color-white); + background: var(--color-bg-navbar); } .nav-left { @@ -16,7 +16,7 @@ } .nav-item { - font-family: 'Azeret Mono'; + font-family: 'Azeret Mono', monospace; text-transform: uppercase; text-decoration: none; color: var(--color-NCS-blue); diff --git a/web/src/dashboard/dashboard.css b/web/src/dashboard/dashboard.css index 31f0fac..df23431 100644 --- a/web/src/dashboard/dashboard.css +++ b/web/src/dashboard/dashboard.css @@ -1,5 +1,5 @@ body { - background: var(--color-process-cyan); + background: var(--color-bg-primary); } .card-grid { @@ -9,7 +9,7 @@ body { align-items: stretch; /* Makes all cards equal height */ } .section-title { - font-family: 'Azeret Mono'; + font-family: 'Azeret Mono', monospace; font-size: 200%; margin-bottom: 1%; margin-left: 2%; diff --git a/web/src/login/login.css b/web/src/login/login.css index 14b8c2c..4addf09 100644 --- a/web/src/login/login.css +++ b/web/src/login/login.css @@ -2,7 +2,7 @@ font-family: 'Azeret Mono', monospace; width: 100vw; height: 94.5vh; - background: var(--color-process-cyan); + background: var(--color-bg-primary); display: flex; flex-direction: row; flex-wrap: wrap; diff --git a/web/src/signup/signup.css b/web/src/signup/signup.css index def1557..2770816 100644 --- a/web/src/signup/signup.css +++ b/web/src/signup/signup.css @@ -10,7 +10,7 @@ font-family: 'Azeret Mono', monospace; width: 100vw; height: 94.5vh; - background: var(--color-process-cyan); + background: var(--color-bg-primary); display: flex; flex-direction: row; flex-wrap: wrap; From 9f9aec16effb76f852cf0c729226638e3dc183fe Mon Sep 17 00:00:00 2001 From: Tanish Garg Date: Sun, 19 Oct 2025 03:00:13 -0500 Subject: [PATCH 11/11] fix: changing font --- web/src/account/account.css | 8 ++++---- web/src/assignment/assignment.css | 2 +- web/src/classroom/classroom.css | 2 +- .../components/assignment/AssignmentDropdown.css | 4 ++-- web/src/components/assignment/AssignmentPanel.css | 4 ++-- web/src/components/assignment/ConsoleOutput.css | 2 +- web/src/components/buttons/BlueButton.css | 2 +- .../components/calendar-input/CalendarInput.css | 2 +- .../classroom-widget/classroomwidget.css | 4 ++-- .../components/font-size-input/FontSizeInput.css | 4 ++-- web/src/components/homework/HomeworkAssignment.css | 2 +- web/src/components/homework/HomeworkSidebar.css | 2 +- web/src/components/navbar/Navbar.css | 2 +- web/src/components/popup/NewFilePopup.css | 10 +++++----- web/src/components/popup/NewTestCasePopup.css | 8 ++++---- .../components/question/QuestionBulletPoint.css | 2 +- web/src/components/question/QuestionPanel.css | 6 +++--- web/src/components/question/QuestionScore.css | 2 +- .../components/select-dropdown/SelectDropdown.css | 2 +- web/src/components/textarea/TextArea.css | 2 +- web/src/components/title-input/TitleInput.css | 2 +- web/src/dashboard/dashboard.css | 4 ++-- web/src/index.css | 2 +- web/src/login/login.css | 2 +- web/src/manageclassroom/css/AssignmentEditor.css | 4 ++-- web/src/manageclassroom/css/AssignmentsSubpage.css | 2 +- web/src/manageclassroom/css/BashTestCasePanel.css | 2 +- web/src/manageclassroom/css/ClassroomSidebar.css | 2 +- web/src/manageclassroom/css/DetailsSubpage.css | 14 +++++++------- web/src/manageclassroom/css/FileTabs.css | 2 +- web/src/manageclassroom/css/PointsProgress.css | 4 ++-- web/src/manageclassroom/css/TestCaseButton.css | 4 ++-- web/src/manageclassroom/css/TestCaseExpand.css | 2 +- web/src/manageclassroom/css/TestCasesEditor.css | 2 +- web/src/manageclassroom/css/TestCasesTabs.css | 2 +- web/src/manageclassroom/css/TextTestCase.css | 6 +++--- web/src/manageclassroom/css/TextTestCasePanel.css | 6 +++--- web/src/manageclassroom/manageclassroom.css | 4 ++-- web/src/signup/signup.css | 4 ++-- 39 files changed, 71 insertions(+), 71 deletions(-) diff --git a/web/src/account/account.css b/web/src/account/account.css index f2f7a54..4bba429 100644 --- a/web/src/account/account.css +++ b/web/src/account/account.css @@ -48,18 +48,18 @@ tr { } .input { - font-family: 'Azeret Mono'; + font-family: 'Roboto'; font-size: 125%; width: 95%; } .label { - font-family: 'Azeret Mono'; + font-family: 'Roboto'; font-size: 150%; } .lastUpdated { - font-family: 'Azeret Mono'; + font-family: 'Roboto'; font-weight: lighter; font-size: 150%; } @@ -96,7 +96,7 @@ tr { } #linkSent { - font-family: 'Azeret Mono'; + font-family: 'Roboto'; font-size: 90%; width: 100%; color: var(--color-red); diff --git a/web/src/assignment/assignment.css b/web/src/assignment/assignment.css index 8ab2854..21318bf 100644 --- a/web/src/assignment/assignment.css +++ b/web/src/assignment/assignment.css @@ -13,7 +13,7 @@ body { justify-content: center; text-align: center; color: var(--color-red); - font-family: "Azeret Mono"; + font-family: "Roboto"; font-size: 150%; padding: 2%; width: 50%; diff --git a/web/src/classroom/classroom.css b/web/src/classroom/classroom.css index e00effd..cc80b4b 100644 --- a/web/src/classroom/classroom.css +++ b/web/src/classroom/classroom.css @@ -30,6 +30,6 @@ margin-top: 3%; font-size: 200%; color: red; - font-family: "Azeret Mono"; + font-family: "Roboto"; text-align: center; } \ No newline at end of file diff --git a/web/src/components/assignment/AssignmentDropdown.css b/web/src/components/assignment/AssignmentDropdown.css index 2d321a8..a969941 100644 --- a/web/src/components/assignment/AssignmentDropdown.css +++ b/web/src/components/assignment/AssignmentDropdown.css @@ -14,7 +14,7 @@ color: var(--color-white); font-weight: bold; user-select: none; - font-family: "Azeret Mono"; + font-family: "Roboto"; text-align: left; font-size: 150%; padding: 1%; @@ -23,7 +23,7 @@ .openAssignment { background: var(--color-bg-dropdown); color: var(--color-black); - font-family: "Azeret Mono"; + font-family: "Roboto"; padding: .5%; font-size: 85%; border-radius: 15px; diff --git a/web/src/components/assignment/AssignmentPanel.css b/web/src/components/assignment/AssignmentPanel.css index d79e656..34bef45 100644 --- a/web/src/components/assignment/AssignmentPanel.css +++ b/web/src/components/assignment/AssignmentPanel.css @@ -10,13 +10,13 @@ } .assignmentTitle { - font-family: "Azeret Mono"; + font-family: "Roboto"; font-size: 225%; font-weight: bold; } .assignmentDescription { - font-family: "Azeret Mono"; + font-family: "Roboto"; font-weight: lighter; font-size: 125%; } \ No newline at end of file diff --git a/web/src/components/assignment/ConsoleOutput.css b/web/src/components/assignment/ConsoleOutput.css index 92bba10..3658160 100644 --- a/web/src/components/assignment/ConsoleOutput.css +++ b/web/src/components/assignment/ConsoleOutput.css @@ -3,7 +3,7 @@ flex-direction: row; background: black; color: white; - font-family: "Azeret Mono"; + font-family: "Roboto"; word-break: break-all; padding: 1%; box-sizing: border-box; diff --git a/web/src/components/buttons/BlueButton.css b/web/src/components/buttons/BlueButton.css index 2932e92..92d5633 100644 --- a/web/src/components/buttons/BlueButton.css +++ b/web/src/components/buttons/BlueButton.css @@ -1,5 +1,5 @@ .blueButton { - font-family: 'Azeret Mono'; + font-family: 'Roboto'; color: white; border-radius: 20px; background-color: var(--color-process-cyan); diff --git a/web/src/components/calendar-input/CalendarInput.css b/web/src/components/calendar-input/CalendarInput.css index 73f9ecd..f20a24f 100644 --- a/web/src/components/calendar-input/CalendarInput.css +++ b/web/src/components/calendar-input/CalendarInput.css @@ -1,6 +1,6 @@ .calendar-input { font-size: 100%; - font-family: "Azeret Mono"; + font-family: "Roboto"; padding: .75%; border: 2px solid black; border-radius: 10px; diff --git a/web/src/components/classroom-widget/classroomwidget.css b/web/src/components/classroom-widget/classroomwidget.css index 3d2d7f3..2120187 100644 --- a/web/src/components/classroom-widget/classroomwidget.css +++ b/web/src/components/classroom-widget/classroomwidget.css @@ -40,7 +40,7 @@ width: 90%; color: var(--color-white); line-height: 1.25; - font-family: 'Azeret Mono', monospace; + font-family: 'Roboto', sans-serif; font-weight: 700; } @@ -59,7 +59,7 @@ .course-card-date { width: 100%; color: var(--color-white); - font-family: 'Azeret Mono', monospace; + font-family: 'Roboto', sans-serif; font-weight: 700; font-size: clamp(0.4rem, 0.8vw, 0.875rem); text-align: right; diff --git a/web/src/components/font-size-input/FontSizeInput.css b/web/src/components/font-size-input/FontSizeInput.css index 9633ffa..4dd5c82 100644 --- a/web/src/components/font-size-input/FontSizeInput.css +++ b/web/src/components/font-size-input/FontSizeInput.css @@ -5,13 +5,13 @@ align-items: center; justify-content: center; flex-direction: column; - font-family: "Azeret Mono"; + font-family: "Roboto"; font-size: 80%; } .fontsize-number { width: 50%; text-align: center; font-size: 120%; - font-family: "Azeret Mono"; + font-family: "Roboto"; font-weight: bold; } \ No newline at end of file diff --git a/web/src/components/homework/HomeworkAssignment.css b/web/src/components/homework/HomeworkAssignment.css index 683a650..701fc0f 100644 --- a/web/src/components/homework/HomeworkAssignment.css +++ b/web/src/components/homework/HomeworkAssignment.css @@ -6,7 +6,7 @@ border-top: 2px solid black; padding: 2%; box-sizing: border-box; - font-family: "Azeret Mono"; + font-family: "Roboto"; word-break: break-all; overflow-wrap: break-word; line-height: 30px; diff --git a/web/src/components/homework/HomeworkSidebar.css b/web/src/components/homework/HomeworkSidebar.css index bc4324a..9dc0761 100644 --- a/web/src/components/homework/HomeworkSidebar.css +++ b/web/src/components/homework/HomeworkSidebar.css @@ -10,7 +10,7 @@ color: var(--color-white); border-bottom: 2px solid var(--color-black); padding: 5%; - font-family: "Azeret Mono"; + font-family: "Roboto"; font-size: 175%; word-break: break-all; } \ No newline at end of file diff --git a/web/src/components/navbar/Navbar.css b/web/src/components/navbar/Navbar.css index 788ced4..1cab2e5 100644 --- a/web/src/components/navbar/Navbar.css +++ b/web/src/components/navbar/Navbar.css @@ -16,7 +16,7 @@ } .nav-item { - font-family: 'Azeret Mono', monospace; + font-family: 'Roboto', sans-serif; text-transform: uppercase; text-decoration: none; color: var(--color-NCS-blue); diff --git a/web/src/components/popup/NewFilePopup.css b/web/src/components/popup/NewFilePopup.css index 034e7b9..5d62e59 100644 --- a/web/src/components/popup/NewFilePopup.css +++ b/web/src/components/popup/NewFilePopup.css @@ -7,11 +7,11 @@ } .popup-title { font-size: 150%; - font-family: "Azeret Mono"; + font-family: "Roboto"; word-wrap: break-word; } .popup-textfield { - font-family: "Azeret Mono"; + font-family: "Roboto"; font-size: 100%; margin: 0; } @@ -30,7 +30,7 @@ font-size: 125%; width: 75%; padding: 1.5%; - font-family: "Azeret Mono"; + font-family: "Roboto"; color: white; border-radius: 15px; } @@ -38,12 +38,12 @@ font-size: 125%; width: 75%; padding: 1.5%; - font-family: "Azeret Mono"; + font-family: "Roboto"; color: white; border-radius: 15px; } .popup-error { - font-family: "Azeret Mono"; + font-family: "Roboto"; font-size: 85%; color: red; } \ No newline at end of file diff --git a/web/src/components/popup/NewTestCasePopup.css b/web/src/components/popup/NewTestCasePopup.css index 74402b1..ed5fe80 100644 --- a/web/src/components/popup/NewTestCasePopup.css +++ b/web/src/components/popup/NewTestCasePopup.css @@ -7,15 +7,15 @@ } .popup-title { font-size: 150%; - font-family: "Azeret Mono"; + font-family: "Roboto"; } .popup-textfield { - font-family: "Azeret Mono"; + font-family: "Roboto"; font-size: 100%; margin: 0; } .create-button { - font-family: "Azeret Mono"; + font-family: "Roboto"; color: white; padding: 1%; font-size: 125%; @@ -26,7 +26,7 @@ flex-direction: column; } .test-type-label { - font-family: "Azeret Mono"; + font-family: "Roboto"; margin-bottom: 0.5rem; font-size: 1rem; font-weight: 500; diff --git a/web/src/components/question/QuestionBulletPoint.css b/web/src/components/question/QuestionBulletPoint.css index 6dc4dcd..bebbb65 100644 --- a/web/src/components/question/QuestionBulletPoint.css +++ b/web/src/components/question/QuestionBulletPoint.css @@ -1,7 +1,7 @@ .assignmentQuestion { display: flex; align-items: center; - font-family: "Azeret Mono"; + font-family: "Roboto"; color: white; font-size: 150%; text-decoration: underline; diff --git a/web/src/components/question/QuestionPanel.css b/web/src/components/question/QuestionPanel.css index 96ace42..3f1bc41 100644 --- a/web/src/components/question/QuestionPanel.css +++ b/web/src/components/question/QuestionPanel.css @@ -6,13 +6,13 @@ box-sizing: border-box; } .questionTitle { - font-family: 'Azeret Mono'; + font-family: 'Roboto'; font-size: 150%; margin-bottom: 4%; } .questionDescription { font-size: 100%; - font-family: 'Azeret Mono'; + font-family: 'Roboto'; } .resetStarterCodeParent { display: flex; @@ -22,7 +22,7 @@ width: 100%; } .resetStarterCode { - font-family: "Azeret Mono"; + font-family: "Roboto"; font-size: 100%; padding: .75%; background: var(--color-NCS-blue); diff --git a/web/src/components/question/QuestionScore.css b/web/src/components/question/QuestionScore.css index f44bdf6..74eab9d 100644 --- a/web/src/components/question/QuestionScore.css +++ b/web/src/components/question/QuestionScore.css @@ -6,7 +6,7 @@ gap: 1rem; } .score { - font-family: 'Azeret Mono'; + font-family: 'Roboto'; font-size: 125%; } .green { diff --git a/web/src/components/select-dropdown/SelectDropdown.css b/web/src/components/select-dropdown/SelectDropdown.css index 9bb21c8..a7e614f 100644 --- a/web/src/components/select-dropdown/SelectDropdown.css +++ b/web/src/components/select-dropdown/SelectDropdown.css @@ -1,6 +1,6 @@ .select-dropdown { font-size: 100%; - font-family: "Azeret Mono"; + font-family: "Roboto"; padding: 1%; border-radius: 10px; border: 2px solid black; diff --git a/web/src/components/textarea/TextArea.css b/web/src/components/textarea/TextArea.css index b8f898e..04e8a91 100644 --- a/web/src/components/textarea/TextArea.css +++ b/web/src/components/textarea/TextArea.css @@ -1,7 +1,7 @@ .textarea { border: 2px solid black; padding: 0.5%; - font-family: "Azeret Mono"; + font-family: "Roboto"; font-size: 100%; border-radius: 10px; resize: none; diff --git a/web/src/components/title-input/TitleInput.css b/web/src/components/title-input/TitleInput.css index 4872883..493ab85 100644 --- a/web/src/components/title-input/TitleInput.css +++ b/web/src/components/title-input/TitleInput.css @@ -1,5 +1,5 @@ .title-input { - font-family: 'Azeret Mono'; + font-family: 'Roboto'; font-size: 100%; width: 100%; border: none; diff --git a/web/src/dashboard/dashboard.css b/web/src/dashboard/dashboard.css index df23431..e27dda9 100644 --- a/web/src/dashboard/dashboard.css +++ b/web/src/dashboard/dashboard.css @@ -9,7 +9,7 @@ body { align-items: stretch; /* Makes all cards equal height */ } .section-title { - font-family: 'Azeret Mono', monospace; + font-family: 'Roboto', sans-serif; font-size: 200%; margin-bottom: 1%; margin-left: 2%; @@ -35,7 +35,7 @@ body { display: flex; align-items: center; justify-content: center; - font-family: 'Azeret Mono'; + font-family: 'Roboto'; font-size: 150%; margin-top: 2%; padding: 2%; diff --git a/web/src/index.css b/web/src/index.css index 1387d43..4d360d9 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -5,7 +5,7 @@ } body { - font-family: "Azeret Mono"; + font-family: "Roboto"; margin: 0; } diff --git a/web/src/login/login.css b/web/src/login/login.css index 4addf09..9918ff3 100644 --- a/web/src/login/login.css +++ b/web/src/login/login.css @@ -1,5 +1,5 @@ .signin-page { - font-family: 'Azeret Mono', monospace; + font-family: 'Roboto', sans-serif; width: 100vw; height: 94.5vh; background: var(--color-bg-primary); diff --git a/web/src/manageclassroom/css/AssignmentEditor.css b/web/src/manageclassroom/css/AssignmentEditor.css index ae45c18..cba3d40 100644 --- a/web/src/manageclassroom/css/AssignmentEditor.css +++ b/web/src/manageclassroom/css/AssignmentEditor.css @@ -66,7 +66,7 @@ gap: 2rem; } .label { - font-family: "Azeret Mono"; + font-family: "Roboto"; font-size: 100%; } .description { @@ -82,7 +82,7 @@ } .create-new-question { font-size: 150%; - font-family: "Azeret Mono"; + font-family: "Roboto"; color: white; padding: 1%; width: 100%; diff --git a/web/src/manageclassroom/css/AssignmentsSubpage.css b/web/src/manageclassroom/css/AssignmentsSubpage.css index 960b469..65df190 100644 --- a/web/src/manageclassroom/css/AssignmentsSubpage.css +++ b/web/src/manageclassroom/css/AssignmentsSubpage.css @@ -7,7 +7,7 @@ .new-assignment-button { width: 100%; padding: 1%; - font-family: "Azeret Mono"; + font-family: "Roboto"; color: white; font-size: 150%; border-radius: 25px; diff --git a/web/src/manageclassroom/css/BashTestCasePanel.css b/web/src/manageclassroom/css/BashTestCasePanel.css index 60d8bc8..f8b4596 100644 --- a/web/src/manageclassroom/css/BashTestCasePanel.css +++ b/web/src/manageclassroom/css/BashTestCasePanel.css @@ -36,5 +36,5 @@ } .testcase-label { font-size: 100%; - font-family: "Azeret Mono"; + font-family: "Roboto"; } \ No newline at end of file diff --git a/web/src/manageclassroom/css/ClassroomSidebar.css b/web/src/manageclassroom/css/ClassroomSidebar.css index 89f9eb0..c24bc75 100644 --- a/web/src/manageclassroom/css/ClassroomSidebar.css +++ b/web/src/manageclassroom/css/ClassroomSidebar.css @@ -11,7 +11,7 @@ } .sidebarItem { padding: 2.5rem; - font-family: "Azeret Mono"; + font-family: "Roboto"; font-size: 125%; color: black; cursor: pointer; diff --git a/web/src/manageclassroom/css/DetailsSubpage.css b/web/src/manageclassroom/css/DetailsSubpage.css index fb56cc6..b2762c0 100644 --- a/web/src/manageclassroom/css/DetailsSubpage.css +++ b/web/src/manageclassroom/css/DetailsSubpage.css @@ -1,5 +1,5 @@ #classroom-name-text { - font-family: "Azeret Mono"; + font-family: "Roboto"; font-weight: 700; font-size: 125%; word-wrap: none; @@ -43,13 +43,13 @@ } .details-title-fonts { - font-family: "Azeret Mono"; + font-family: "Roboto"; font-weight: 700; font-size: 125%; } .popup-style { - font-family: "Azeret Mono"; + font-family: "Roboto"; text-align: center; } @@ -62,7 +62,7 @@ } .classroom-name-field { - font-family: "Azeret Mono"; + font-family: "Roboto"; flex: 8; } @@ -74,7 +74,7 @@ .classroom-code-field { flex: 4; - font-family: "Azeret Mono"; + font-family: "Roboto"; } .classroom-code-sub-parent{ @@ -91,7 +91,7 @@ } .date-set-parent { - font-family: "Azeret Mono"; + font-family: "Roboto"; display: flex; padding-top: 2%; width: 100%; @@ -99,7 +99,7 @@ } .course-description-parent { - font-family: "Azeret Mono"; + font-family: "Roboto"; display: flex; padding-top: 2%; width: 100; diff --git a/web/src/manageclassroom/css/FileTabs.css b/web/src/manageclassroom/css/FileTabs.css index ab6dbe3..76179ab 100644 --- a/web/src/manageclassroom/css/FileTabs.css +++ b/web/src/manageclassroom/css/FileTabs.css @@ -9,7 +9,7 @@ .file-tab { display: inline-block; - font-family: "Azeret Mono"; + font-family: "Roboto"; align-items: center; padding: .5%; color: var(--color-gray-text); diff --git a/web/src/manageclassroom/css/PointsProgress.css b/web/src/manageclassroom/css/PointsProgress.css index c54d51c..fc1056c 100644 --- a/web/src/manageclassroom/css/PointsProgress.css +++ b/web/src/manageclassroom/css/PointsProgress.css @@ -5,7 +5,7 @@ width: 100%; padding: 1%; gap: 1rem; - font-family: "Azeret Mono"; + font-family: "Roboto"; } .points-progress-bar { width: 100%; @@ -24,7 +24,7 @@ background-color: var(--color-success); } .progress-text { - font-family: "Azeret Mono"; + font-family: "Roboto"; font-size: 100%; } .progress-text-parent { diff --git a/web/src/manageclassroom/css/TestCaseButton.css b/web/src/manageclassroom/css/TestCaseButton.css index b5df322..06fe424 100644 --- a/web/src/manageclassroom/css/TestCaseButton.css +++ b/web/src/manageclassroom/css/TestCaseButton.css @@ -20,7 +20,7 @@ justify-content: center; align-items: center; padding: 3%; - font-family: 'Azeret Mono'; + font-family: 'Roboto'; color: white; white-space: normal; word-wrap: break-word; @@ -32,7 +32,7 @@ justify-content: center; align-items: center; padding: 6%; - font-family: 'Azeret Mono'; + font-family: 'Roboto'; background-color: white; white-space: normal; word-wrap: break-word; diff --git a/web/src/manageclassroom/css/TestCaseExpand.css b/web/src/manageclassroom/css/TestCaseExpand.css index 464229c..04efd00 100644 --- a/web/src/manageclassroom/css/TestCaseExpand.css +++ b/web/src/manageclassroom/css/TestCaseExpand.css @@ -12,7 +12,7 @@ width: 100%; } .testcase-expand-label { - font-family: "Azeret Mono"; + font-family: "Roboto"; font-size: 125%; } .testcase-expand-points { diff --git a/web/src/manageclassroom/css/TestCasesEditor.css b/web/src/manageclassroom/css/TestCasesEditor.css index 8dd1fdf..553fb00 100644 --- a/web/src/manageclassroom/css/TestCasesEditor.css +++ b/web/src/manageclassroom/css/TestCasesEditor.css @@ -22,7 +22,7 @@ font-size: 100%; box-sizing: border-box; color: white; - font-family: "Azeret Mono"; + font-family: "Roboto"; margin-bottom: 2vh; } .hidden { diff --git a/web/src/manageclassroom/css/TestCasesTabs.css b/web/src/manageclassroom/css/TestCasesTabs.css index 3da5063..828ae36 100644 --- a/web/src/manageclassroom/css/TestCasesTabs.css +++ b/web/src/manageclassroom/css/TestCasesTabs.css @@ -31,7 +31,7 @@ .tab { padding: 1.5%; height: 100%; - font-family: "Azeret Mono"; + font-family: "Roboto"; user-select: none; font-size: 100%; } diff --git a/web/src/manageclassroom/css/TextTestCase.css b/web/src/manageclassroom/css/TextTestCase.css index 19f4d42..2ef7091 100644 --- a/web/src/manageclassroom/css/TextTestCase.css +++ b/web/src/manageclassroom/css/TextTestCase.css @@ -12,7 +12,7 @@ gap: 1rem; } .textarea-label { - font-family: "Azeret Mono"; + font-family: "Roboto"; font-size: 100%; } .textarea-half { @@ -35,7 +35,7 @@ justify-content: center; align-items: center; gap: .5rem; - font-family: "Azeret Mono"; + font-family: "Roboto"; color: white; font-size: 125%; border-radius: 20px; @@ -50,7 +50,7 @@ display: flex; justify-content: start; flex: 1; - font-family: "Azeret Mono"; + font-family: "Roboto"; font-size: 125%; } .delete-visibility { diff --git a/web/src/manageclassroom/css/TextTestCasePanel.css b/web/src/manageclassroom/css/TextTestCasePanel.css index c326c79..a858cc6 100644 --- a/web/src/manageclassroom/css/TextTestCasePanel.css +++ b/web/src/manageclassroom/css/TextTestCasePanel.css @@ -31,7 +31,7 @@ font-family: "Monomaniac One"; } .run-test-button { - font-family: "Azeret Mono"; + font-family: "Roboto"; padding: 6%; box-sizing: border-box; font-size: 100%; @@ -43,7 +43,7 @@ gap: 1rem; } .test-case-textfield { - font-family: "Azeret Mono" + font-family: "Roboto" } .text-testcases { display: flex; @@ -54,7 +54,7 @@ } .testcases-title { font-size: 150%; - font-family: "Azeret Mono"; + font-family: "Roboto"; } .new-text-test-case { font-size: 175%; diff --git a/web/src/manageclassroom/manageclassroom.css b/web/src/manageclassroom/manageclassroom.css index 4da4c88..33e4167 100644 --- a/web/src/manageclassroom/manageclassroom.css +++ b/web/src/manageclassroom/manageclassroom.css @@ -36,7 +36,7 @@ display: flex; align-items: center; justify-content: center; - font-family: 'Azeret Mono'; + font-family: 'Roboto'; font-size: 150%; margin-top: 2%; padding: 2%; @@ -61,7 +61,7 @@ } .edit-button { width: 50%; - font-family: 'Azeret Mono'; + font-family: 'Roboto'; color: var(--color-white); border-radius: 20px; padding: 1.5%; diff --git a/web/src/signup/signup.css b/web/src/signup/signup.css index 2770816..eea202a 100644 --- a/web/src/signup/signup.css +++ b/web/src/signup/signup.css @@ -7,7 +7,7 @@ } .signup-page { - font-family: 'Azeret Mono', monospace; + font-family: 'Roboto', sans-serif; width: 100vw; height: 94.5vh; background: var(--color-bg-primary); @@ -95,7 +95,7 @@ display: flex; align-items: center; justify-content: center; - font-family: 'Azeret Mono'; + font-family: 'Roboto'; font-size: 150%; margin-top: 2%; padding: 2%;