Add styling and sync with new question struct

Moved styling to css files
Set up tailwind.config.ts to define global colour palette
Fixed some behaviour when screen size changes
Synced up with new question struct
Resolves #9, #6

Author: alvinlim277

peerprep/app/globals.css

@@ -13,5 +13,5 @@ body,
 p,
 h1,
 h2 {
-  @apply text-gray-100;
+  @apply text-text-2;
 }

peerprep/components/questionpage/Matchmaking.tsx

@@ -1,7 +1,17 @@
+"use client";
 import React from "react";
+import { useRouter } from "next/navigation";
+import PeerprepButton from "../shared/PeerprepButton";
 
 const Matchmaking = () => {
-  return <div>Matchmaking</div>;
+  const router = useRouter();
+  return (
+    <div className="p-4">
+      <PeerprepButton onClick={() => router.push(`questions/new`)}>
+        Add Question
+      </PeerprepButton>
+    </div>
+  );
 };
 
 export default Matchmaking;

peerprep/components/questionpage/QuestionCard.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { Question, Difficulty } from "@/api/structs";
 import PeerprepButton from "../shared/PeerprepButton";
 import { useRouter } from "next/navigation";
+import styles from "@/style/questionCard.module.css";
 
 type QuestionCardProps = {
   question: Question;
@@ -14,47 +15,48 @@ const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
   const getDifficultyColor = (difficulty: Difficulty) => {
     switch (difficulty) {
       case Difficulty.Easy:
-        return "text-green-500"; // Green for easy
+        return "text-difficulty-easy"; // Green for easy
       case Difficulty.Medium:
-        return "text-yellow-500"; // Yellow for medium
+        return "text-difficulty-med"; // Yellow for medium
       case Difficulty.Hard:
-        return "text-red-500"; // Red for hard
+        return "text-difficulty-hard"; // Red for hard
       default:
-        return "text-gray-100"; // Default color
+        return "text-secondary-text"; // Default color
     }
   };
 
   return (
-    <div className="flex flex-col sm:flex-row items-center w-full h-auto p-4 bg-gray-700 shadow-md rounded-lg mb-4">
-      <div className="flex-none w-full sm:w-1/3 overflow-hidden">
-        <h2 className="text-lg font-bold">{question.title}</h2>
-        <p className="text-sm">
+    <div className={styles.container}>
+      <div className="flex-none w-full sm:w-1/3">
+        <h2 className={styles.title}>{question.title}</h2>
+        <p className={styles.bodytext}>
           Difficulty:{" "}
           <span
-            className={`capitalize ${getDifficultyColor(question.difficulty)}`}
+            className={`capitalize font-bold ${getDifficultyColor(
+              question.difficulty
+            )}`}
           >
             {Difficulty[question.difficulty]}
           </span>
         </p>
-        <p className="text-sm">
+        <p className={styles.bodytext}>
           Categories:{" "}
           <span>
             {question.categories ? question.categories.join(", ") : "None"}
           </span>
         </p>
       </div>
 
-      <div className="flex-none w-full sm:w-1/2 max-h-16 overflow-hidden">
-        <p className="text-sm text-wrap truncate text-left">
-          {question.description}
-        </p>
+      <div className="flex-none w-full sm:w-1/2 max-h-16">
+        <p className={styles.bodytext}>{question.description}</p>
       </div>
 
-      <div className="flex flex-col sm:flex-row ml-0 sm:ml-10 mr-0 sm:mr-10 w-full sm:w-1/6 items-center space-x-0 sm:space-x-2 space-y-2 sm:space-y-0">
+      <div className={styles.buttonContainer}>
         <PeerprepButton onClick={() => router.push(`questions/${question.id}`)}>
           View
         </PeerprepButton>
         <PeerprepButton
+          // no functionality here yet
           onClick={() => console.log(`Deleting question ${question.id}`)}
         >
           Delete

peerprep/components/questionpage/QuestionList.tsx

@@ -17,8 +17,6 @@ const QuestionList: React.FC = () => {
   const [categories, setCategories] = useState<string[]>(["all"]);
 
   useEffect(() => {
-    // uhhhhh this should be changed to fetch on filter/search change
-    // make use of gateway.ts later
     const fetchQuestions = async () => {
       try {
         const response = await fetch(

peerprep/components/shared/PeerprepButton.tsx

@@ -1,5 +1,6 @@
 "use client";
 import React from "react";
+import styles from "@/style/elements.module.css";
 
 type PeerprepButtonProps = {
   onClick: () => void;
@@ -13,10 +14,7 @@ const PeerprepButton: React.FC<PeerprepButtonProps> = ({
   className,
 }) => {
   return (
-    <button
-      onClick={onClick}
-      className={`px-4 py-2 text-white bg-gray-600 rounded hover:bg-gray-500 focus:outline-none focus:ring focus:ring-gray-400 ${className}`}
-    >
+    <button onClick={onClick} className={`${styles.button} ${className}`}>
       {children}
     </button>
   );

peerprep/components/shared/PeerprepDropdown.tsx

@@ -1,5 +1,6 @@
 "use client";
 import React from "react";
+import styles from "@/style/elements.module.css";
 type PeerprepDropdownProps<T> = {
   label: string;
   value: T;
@@ -21,7 +22,7 @@ const PeerprepDropdown = <T extends string | number>({
       <select
         value={value}
         onChange={onChange}
-        className={`text-black border rounded p-2 focus:outline-none focus:ring-2 focus:ring-gray-300 ${className}`}
+        className={`${styles.select} ${className}`}
       >
         {options
           .filter((option) => option)

peerprep/components/shared/PeerprepSearchBar.tsx

@@ -1,5 +1,6 @@
 // PeerprepSearchBar.tsx
 import React from "react";
+import styles from "@/style/elements.module.css";
 
 interface PeerprepSearchBarProps {
   value: string;
@@ -19,7 +20,7 @@ const PeerprepSearchBar: React.FC<PeerprepSearchBarProps> = ({
         placeholder={label}
         value={value}
         onChange={onChange}
-        className="border border-gray-300 rounded-md p-2 w-full text-black"
+        className={styles.input}
       />
     </div>
   );

peerprep/style/elements.module.css

@@ -0,0 +1,14 @@
+/*dropdown*/
+.select {
+  @apply text-text-2 bg-gray-1  rounded p-2 focus:outline-none focus:ring-2 focus:ring-highlight focus:fill-highlight;
+}
+
+/*button*/
+.button {
+  @apply px-4 py-2 text-text-1 bg-gray-2 rounded hover:bg-gray-3 focus:outline-none focus:ring focus:ring-highlight;
+}
+
+/*search*/
+.input {
+  @apply bg-gray-1 rounded-md p-2 w-full text-text-2;
+}

peerprep/style/questionCard.module.css

@@ -0,0 +1,21 @@
+/*flex vert if screen is too small*/
+.container {
+  @apply flex flex-col sm:flex-row space-y-4 sm:space-y-0 space-x-0 sm:space-x-4 items-center w-full h-auto p-4 bg-gray-1 shadow-md rounded-lg mb-4;
+}
+
+.title {
+  @apply text-lg font-bold text-text-1;
+}
+
+.bodytext {
+  @apply text-sm text-text-2;
+}
+
+.description {
+  @apply text-sm text-wrap truncate text-left max-h-16 overflow-ellipsis;
+}
+
+/*turbo scuff must rewrite!!!!*/
+.buttonContainer {
+  @apply flex flex-col lg:flex-row ml-0 lg:ml-10 mr-0 lg:mr-10 w-full items-center space-x-0 lg:space-x-2 space-y-2 lg:space-y-0 lg:overflow-hidden;
+}

peerprep/tailwind.config.ts

@@ -1,20 +1,32 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from "tailwindcss";
 
 const config: Config = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+      /*global theme colors*/
+      colors: {
+        "gray-1": "#1e293b",
+        "gray-2": "#334155",
+        "gray-3": "#475569",
+        highlight: "#f8fafc",
+        "text-1": "#f8fafc",
+        "text-2": "#e2e8f0",
+        "difficulty-easy": "#34d399",
+        "difficulty-med": "#f59e0b",
+        "difficulty-hard": "#f43f5e",
       },
     },
   },
   plugins: [],
-}
-export default config
+};
+export default config;