Fix styling

Author: LemonDrew

frontend/src/app/collab/page.tsx

@@ -9,7 +9,6 @@ export default function CollabPage() {
       <SessionHeader />
 
       <div className="flex flex-1 w-full bg-stone-800 ">
-        
         <div className="flex-1 p-5">
           <QuestionComponent />
         </div>

frontend/src/app/components/collab/ChatComponent.tsx

@@ -6,7 +6,7 @@ export default function ChatComponent() {
   const chatMessages = ["HELLO", "HOW ARE YOU?"];
 
   return (
-    <div className="flex flex-col h-full bg-stone-900 p-10">
+    <div className="flex flex-col h-full bg-stone-900 p-1">
       <div className="flex bg-stone-500 h-full mb-5 rounded-lg"></div>
 
       <div className="flex w-full mt-auto gap-2">

frontend/src/app/components/collab/QuestionComponent.tsx

@@ -1,19 +1,28 @@
+import { Badge } from "@/components/ui/badge";
+
 export default function QuestionComponent() {
-  return (
-  <div className="h-full flex flex-col">
+  const difficultyMapping = {
+    Difficult: "bg-",
+  };
 
-    {/* Question Description */}
-    <div className="flex-1">
+  return (
+    <div className="h-full flex flex-col bg-stone-900">
+      {/* Criteria */}
+      <div className="flex-1 pt-5 px-3">
+        <Badge variant="destructive">Difficult</Badge>
+        <Badge variant="destructive">Difficult</Badge>
+        <Badge variant="destructive">Difficult</Badge>
+        <Badge variant="destructive">Difficult</Badge>
+      </div>
 
-    </div>
+      {/* Question Description */}
+      <div className="flex-1"></div>
 
-    {/* Examples Section */}
-    <div className="flex-1 bg-stone-900">
+      {/* Examples Section */}
+      <div className="flex-1"></div>
 
+      {/* Constraints Section */}
+      <div className="flex-1"></div>
     </div>
-
-    {/* Constraints Section */}
-
-  </div>
   );
 }

frontend/src/components/ui/badge.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
@@ -22,8 +22,8 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 function Badge({
   className,
@@ -32,15 +32,15 @@ function Badge({
   ...props
 }: React.ComponentProps<"span"> &
   VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
+  const Comp = asChild ? Slot : "span";
 
   return (
     <Comp
       data-slot="badge"
       className={cn(badgeVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };