Skip to content

Commit

Permalink
change the theme of the question list
Browse files Browse the repository at this point in the history
  • Loading branch information
@yitong241
yitong241 committed Sep 27, 2024
1 parent 529ba5c commit 6730e79
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 59 deletions.
73 changes: 37 additions & 36 deletions frontend/src/components/QuestionList/QuestionList.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,48 @@
.questiondeleteicon {
color: red !important;
}

.questionlinkicon {
width: 80% !important;
}

.questiontitle {
color: black !important;
text-decoration: underline !important;
}

.container {
width: 90%;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #1c1c1c;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 10px;
color: #f1f1f1;
font-family: 'Lexend', 'Roboto', 'Arial', sans-serif; /* Ensuring the font is coherent */
}

h1 {
text-align: center;
color: #333;
color: #caff33;
font-size: 28px;
margin-bottom: 20px;
}

.table {
width: 100%;
border-collapse: collapse;
background-color: white;
background-color: #282828;
border-radius: 8px;
overflow: hidden;
}

.table th,
.table td {
padding: 15px;
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid #333;
}

.table th {
background-color: #f4f4f4;
background-color: #333;
font-weight: bold;
color: #555;
color: #caff33;
position: relative;
}

.table th:nth-child(1) {
/* ID */
width: 10%;
}

.table th:nth-child(5) {
/* Complexity */
width: 15%;
}

Expand All @@ -66,7 +53,7 @@ h1 {
}

.clickable:hover {
background-color: #f0f0f0;
background-color: #3c3c3c;
}

.clickable::before,
Expand All @@ -82,24 +69,24 @@ h1 {

.clickable::before {
top: 40%;
border-bottom: 6px solid lightblue;
border-bottom: 6px solid #caff33;
}

.clickable::after {
top: 60%;
border-top: 6px solid lightblue;
border-top: 6px solid #caff33;
}

.asc::before {
border-bottom: 6px solid blue;
border-bottom: 6px solid #caff33;
}

.desc::after {
border-top: 6px solid blue;
border-top: 6px solid #caff33;
}

.table td {
color: #333;
color: #f1f1f1;
}

.tags {
Expand All @@ -108,7 +95,7 @@ h1 {
}

.tag {
background-color: #61dafb;
background-color: #61dafb;
color: white;
padding: 5px 10px;
border-radius: 5px;
Expand All @@ -117,24 +104,38 @@ h1 {
}

.tag:nth-child(2n) {
background-color: #ff6f61;
background-color: #ff6f61;
}

.tag:nth-child(3n) {
background-color: #8e44ad;
background-color: #8e44ad;
}

.tag:nth-child(4n) {
background-color: #2ecc71;
background-color: #2ecc71;
}

.complexity {
font-weight: bold;
color: #007bff;
color: #caff33;
}

.table tr:hover {
background-color: #f1f1f1;
background-color: #3a3a3a;
}

.questiondeleteicon {
color: red !important;
}

.questionlinkicon {
width: 80% !important;
color: #caff33 !important;
}

.questiontitle {
color: #f1f1f1 !important;
text-decoration: underline !important;
}

@media (max-width: 768px) {
Expand All @@ -143,4 +144,4 @@ h1 {
padding: 10px;
font-size: 14px;
}
}
}
72 changes: 49 additions & 23 deletions frontend/src/components/QuestionList/QuestionList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { ReactElement, useEffect, useState } from "react";
import { Button, IconButton, Typography } from "@mui/material";
import { DeleteForever, EditNote, OpenInNew } from "@mui/icons-material";
import { useMainDialog } from "../../contexts/MainDialogContext";
import styles from "./QuestionList.module.scss";
import { Question, QuestionComplexity } from "../../models/question.model";
import QuestionService from "../../services/question.service";
import { useMainDialog } from "../../contexts/MainDialogContext";
import { Button, IconButton } from "@mui/material";
import QuestionDialog from "../QuestionDialog/QuestionDialog";
import { DeleteForever, EditNote, OpenInNew } from "@mui/icons-material";
import QuestionService from "../../services/question.service";

const QuestionList = (): ReactElement => {
const [questions, setQuestions] = useState<Question[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<string | null>(null);

const [sortKey, setSortKey] = useState<keyof Question>("questionId");
Expand All @@ -19,7 +19,6 @@ const QuestionList = (): ReactElement => {

const { setTitle, setContent, openDialog } = useMainDialog();

// Shared states for adding or editing question
const [isAddNew, setIsAddNew] = useState<boolean>(true);
const [isQuestionDialogOpen, setIsQuestionDialogOpen] = useState<boolean>(false);
const [newQuestionId, setNewQuestionId] = useState<string>("");
Expand Down Expand Up @@ -47,27 +46,52 @@ const QuestionList = (): ReactElement => {
openDialog();
};

const fetchQuestions = async () => {
try {
const response = await QuestionService.getQuestions();
setQuestions(response);
setLoading(false);
} catch (error) {
setError("Failed to fetch questions");
setLoading(false);
}
};

useEffect(() => {
fetchQuestions();
const dummyQuestions: Question[] = [
{
questionId: "1",
title: "What is a Binary Search Tree?",
description: "A binary search tree is a data structure for fast lookup, addition, and removal of items.",
categories: ["Algorithms", "Data Structures"],
complexity: "Medium",
link: "#",
},
{
questionId: "2",
title: "Explain closures in JavaScript.",
description: "Closures allow functions to access variables from an outer scope.",
categories: ["JavaScript", "Functional Programming"],
complexity: "Hard",
link: "#",
},
{
questionId: "3",
title: "What is polymorphism in OOP?",
description: "Polymorphism allows different objects to respond in various ways to the same method call.",
categories: ["OOP"],
complexity: "Easy",
link: "#",
},
{
questionId: "4",
title: "Reverse a String",
description: "Write a function that reverses a string, given as an array of characters.",
categories: ["Strings", "Algorithms"],
complexity: "Easy",
link: "#",
},
];

setQuestions(dummyQuestions);
setLoading(false);
}, []);

if (loading) {
return <p>Loading questions...</p>;
return <Typography variant="h6">Loading questions...</Typography>;
}

if (error) {
return <p>{error}</p>;
return <Typography variant="h6" color="error">{error}</Typography>;
}

const handleSort = (key: keyof Question) => {
Expand Down Expand Up @@ -102,7 +126,9 @@ const QuestionList = (): ReactElement => {

return (
<div className={styles.container}>
<h1>Question Repository</h1>
<Typography variant="h4" align="center" gutterBottom>
Question Repository
</Typography>
<table className={styles.table}>
<thead>
<tr>
Expand Down Expand Up @@ -133,7 +159,7 @@ const QuestionList = (): ReactElement => {
<tr key={question.questionId}>
<td>{question.questionId}</td>
<td>
<Button className={`${styles.questiontitle}`} onClick={showQuestionDetails(question)}>
<Button className={styles.questiontitle} onClick={showQuestionDetails(question)}>
{question.title}
</Button>
<a href={question.link} target="_blank" rel="noreferrer">
Expand Down Expand Up @@ -188,4 +214,4 @@ const QuestionList = (): ReactElement => {
);
};

export default QuestionList;
export default QuestionList;

0 comments on commit 6730e79

Please sign in to comment.