diff --git a/frontend/src/components/Footer/Footer.scss b/frontend/src/components/Footer/Footer.scss index 7303ac89fe..aff43f1f51 100644 --- a/frontend/src/components/Footer/Footer.scss +++ b/frontend/src/components/Footer/Footer.scss @@ -27,7 +27,11 @@ } &-github { - background: #caff33 !important; + justify-self: start; + + &-icon { + background: #caff33 !important; + } } &-trademark { diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx index 38b7945981..30fd801faf 100644 --- a/frontend/src/components/Footer/Footer.tsx +++ b/frontend/src/components/Footer/Footer.tsx @@ -22,8 +22,8 @@ const Footer = (): ReactElement => { LuckyJinx - - + + diff --git a/frontend/src/components/QuestionList/QuestionList.module.scss b/frontend/src/components/QuestionList/QuestionList.module.scss index 29bf3108d0..d58b9ab694 100644 --- a/frontend/src/components/QuestionList/QuestionList.module.scss +++ b/frontend/src/components/QuestionList/QuestionList.module.scss @@ -146,6 +146,14 @@ h1 { text-decoration: underline !important; } +.questiontablebody { + padding-top: 10px; + min-height: 20vh; + display: flex; + flex-direction: column; + justify-content: center; +} + @media (max-width: 768px) { .table th, .table td { diff --git a/frontend/src/components/QuestionList/QuestionList.tsx b/frontend/src/components/QuestionList/QuestionList.tsx index f264017562..8b00f592da 100644 --- a/frontend/src/components/QuestionList/QuestionList.tsx +++ b/frontend/src/components/QuestionList/QuestionList.tsx @@ -84,18 +84,6 @@ const QuestionList = (): ReactElement => { fetchQuestions(); }, []); - if (loading) { - return Loading questions...; - } - - if (error) { - return ( - - {error} - - ); - } - const handleSort = (key: keyof Question) => { const order = sortKey === key && sortOrder === "asc" ? "desc" : "asc"; setSortKey(key); @@ -153,78 +141,91 @@ const QuestionList = (): ReactElement => { return (
- + Question Repository - - - - - - - - - - - - {questions.map((question) => ( - - - - - - - - ))} - -
handleSort("questionId")} - className={`${styles.clickable} ${sortKey === "questionId" ? styles[sortOrder] : ""}`} - > - ID - handleSort("title")} - className={`${styles.clickable} ${sortKey === "title" ? styles[sortOrder] : ""}`} +
+ {loading ? ( + Loading questions... + ) : error ? ( + + {error} + + ) : ( +
+ + + + + + + + + + + + {questions.map((question) => ( + + + + + + + + ))} + +
handleSort("questionId")} + className={`${styles.clickable} ${sortKey === "questionId" ? styles[sortOrder] : ""}`} + > + ID + handleSort("title")} + className={`${styles.clickable} ${sortKey === "title" ? styles[sortOrder] : ""}`} + > + Title + Categories handleSort("complexity")} + className={`${styles.clickable} ${sortKey === "complexity" ? styles[sortOrder] : ""}`} + > + Complexity + Actions
{question.questionId} + + + + + + + +
+ {question.categories.map((tag, index) => ( + + {tag} + + ))} +
+
{question.complexity} + openQuestionDialog(question)}> + + + + + +
+
Categories handleSort("complexity")} - className={`${styles.clickable} ${sortKey === "complexity" ? styles[sortOrder] : ""}`} - > - Complexity - Actions
{question.questionId} - - - - - - - -
- {question.categories.map((tag, index) => ( - - {tag} - - ))} -
-
{question.complexity} - openQuestionDialog(question)}> - - - - - -
- + Add question + +
+ )} + +