Add styling for [question] page

Author: tzyian

peerprep/app/page.tsx

@@ -1,5 +1,6 @@
-import Link from "next/link";
+import { redirect } from "next/navigation";
 
 export default function Home() {
-  return <Link href="/questions">Questions</Link>;
+  redirect(`/questions`);
+  // return <Link href="/questions">Questions</Link>;
 }

peerprep/app/questions/[question]/question.tsx

@@ -1,14 +1,13 @@
 "use client";
 import React from "react";
-import { Question, Difficulty } from "@/api/structs";
+import { Difficulty, Question } from "@/api/structs";
 import Chip from "@/components/shared/Chip";
 import PeerprepButton from "@/components/shared/PeerprepButton";
 import styles from "@/style/question.module.css";
 import { useRouter } from "next/navigation";
 import { deleteQuestion } from "@/app/api/internal/questions/helper";
 import CollabEditor from "@/components/questionpage/CollabEditor";
-import DOMPurify from 'dompurify';
-
+import DOMPurify from "dompurify";
 
 interface Props {
   question: Question;
@@ -31,18 +30,16 @@ function DifficultyChip({ diff }: DifficultyChipProps) {
 function QuestionBlock({ question }: Props) {
   const router = useRouter();
 
-
-
   const handleDelete = async () => {
     if (
       confirm(
-        `Are you sure you want to delete ${question.title}? (ID: ${question.id}) `
+        `Are you sure you want to delete ${question.title}? (ID: ${question.id}) `,
       )
     ) {
       const status = await deleteQuestion(question.id);
       if (status.error) {
         alert(
-          `Failed to delete question. Code ${status.status}:  ${status.error}`
+          `Failed to delete question. Code ${status.status}:  ${status.error}`,
         );
         return;
       }
@@ -75,16 +72,25 @@ function QuestionBlock({ question }: Props) {
           {question.topicTags.length == 0 ? (
             <p>No topics listed.</p>
           ) : (
-            question.topicTags.map((elem, idx) => <p key={idx}>{elem}</p>)
+            question.topicTags.map((elem, idx) => (
+              <p key={idx} className={styles.label_shadow}>
+                {elem}
+              </p>
+            ))
           )}
         </div>
-        { <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(question.content)}} /> }
+        {
+          <div
+            className={styles.editorHTML}
+            dangerouslySetInnerHTML={{
+              __html: DOMPurify.sanitize(question.content),
+            }}
+          />
+        }
         <br />
       </div>
       <div className={styles.editor_container}>
-        <CollabEditor
-            question={question}
-        />
+        <CollabEditor question={question} />
       </div>
     </>
   );

peerprep/components/questionpage/CollabEditor.tsx

@@ -47,8 +47,8 @@ interface Props {
 }
 
 export default function CollabEditor({ question }: Props) {
-  const [theme, setTheme] = useState("twilight");
-  const [fontSize, setFontSize] = useState(16);
+  const [theme, setTheme] = useState("terminal");
+  const [fontSize, setFontSize] = useState(18);
   const [language, setLanguage] = useState("python");
 
   const handleOnChange = (newValue: string) => {

peerprep/components/shared/TitleBar.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styles from "@/style/layout.module.css";
+import Link from "next/link";
 
 function TitleBar() {
   return (
@@ -11,7 +12,9 @@ function TitleBar() {
     // so theoretically retrieval doesn't actually happen more than once or twice
     // in a lifetime
     <div className={styles.bar}>
-      <h1 className={styles.title}>PeerPrep</h1>
+      <Link href="/" className={"text-3xl font-bold text-black"}>
+        PeerPrep
+      </Link>
       <div className={styles.circle}>PH</div>
     </div>
   );

peerprep/style/layout.module.css

@@ -1,41 +1,41 @@
 .bar {
-  background-color: rgb(206, 229, 255);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1px 5px 1px 5px;
+    background-color: #f9a8d4;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 10px 10px 10px;
 }
 
 .main_container {
-  display: flex;
-  flex-direction: column;
-  min-width: 100%;
-  height: 90%;
-  overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+    min-width: 100%;
+    height: 90%;
+    overflow-y: scroll;
 }
 
 .title {
-  color: black;
+    color: black;
 }
 
 .circle {
-  background-color: rgb(66, 93, 66);
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
+    background-color: rgb(66, 93, 66);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
 }
 
 .chip {
-  font-size: small;
-  font-family: Helvetica, Arial, sans-serif;
-  font-weight: bolder;
-  padding: 1px;
-  border-radius: 25%;
-  /* Default Chip CSS*/
-  background-color: white;
-  border: 1px solid darkslategray;
-  color: black;
+    font-size: small;
+    font-family: Helvetica, Arial, sans-serif;
+    font-weight: bolder;
+    padding: 2px;
+    border-radius: 25%;
+    /* Default Chip CSS*/
+    background-color: white;
+    border: 1px solid darkslategray;
+    color: black;
 }