feat(frontend): visual improvements for content

2025-05-07 23:01:33 +01:00
parent 3604e0a889
commit 0167d324b0
8 changed files with 11348 additions and 94 deletions
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -21,6 +21,34 @@
  --difficulty-medium-bg: #fef9c3;
  --difficulty-hard: #dc2626;
  --difficulty-hard-bg: #fee2e2;
+
+  /* Callout colors - Warning (orange/red) */
+  --callout-warning-bg: #fff7ed;
+  --callout-warning-border: #f97316;
+  --callout-warning-fg: #9a3412;
+
+  /* Callout colors - Success (green) */
+  --callout-success-bg: #f0fdf4;
+  --callout-success-border: #22c55e;
+  --callout-success-fg: #166534;
+
+  /* Callout colors - Info (blue) */
+  --callout-info-bg: #eff6ff;
+  --callout-info-border: #3b82f6;
+  --callout-info-fg: #1e40af;
+
+  /* Callout colors - Insight (purple) */
+  --callout-insight-bg: #faf5ff;
+  --callout-insight-border: #a855f7;
+  --callout-insight-fg: #6b21a8;
+
+  /* Approach boxes */
+  --approach-wrong-bg: #fef2f2;
+  --approach-wrong-border: #fecaca;
+  --approach-wrong-fg: #dc2626;
+  --approach-correct-bg: #f0fdf4;
+  --approach-correct-border: #bbf7d0;
+  --approach-correct-fg: #16a34a;
 }

@media (prefers-color-scheme: dark) {
@@ -45,12 +73,45 @@
    --difficulty-medium-bg: rgba(234, 179, 8, 0.2);
    --difficulty-hard: #f87171;
    --difficulty-hard-bg: rgba(239, 68, 68, 0.2);
+
+    /* Callout colors - Warning (dark mode) */
+    --callout-warning-bg: rgba(249, 115, 22, 0.15);
+    --callout-warning-border: #f97316;
+    --callout-warning-fg: #fdba74;
+
+    /* Callout colors - Success (dark mode) */
+    --callout-success-bg: rgba(34, 197, 94, 0.15);
+    --callout-success-border: #22c55e;
+    --callout-success-fg: #86efac;
+
+    /* Callout colors - Info (dark mode) */
+    --callout-info-bg: rgba(59, 130, 246, 0.15);
+    --callout-info-border: #3b82f6;
+    --callout-info-fg: #93c5fd;
+
+    /* Callout colors - Insight (dark mode) */
+    --callout-insight-bg: rgba(168, 85, 247, 0.15);
+    --callout-insight-border: #a855f7;
+    --callout-insight-fg: #d8b4fe;
+
+    /* Approach boxes (dark mode) */
+    --approach-wrong-bg: rgba(220, 38, 38, 0.15);
+    --approach-wrong-border: rgba(220, 38, 38, 0.4);
+    --approach-wrong-fg: #f87171;
+    --approach-correct-bg: rgba(22, 163, 74, 0.15);
+    --approach-correct-border: rgba(22, 163, 74, 0.4);
+    --approach-correct-fg: #4ade80;
  }
 }

 body {
  background: var(--background);
  color: var(--foreground);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif;
+  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+/* Improved line-height for prose content */
+.prose-content {
+  line-height: 1.7;
 }
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,5 +1,9 @@
 import type { Metadata } from "next";
 import Link from "next/link";
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+import "@fontsource/inter/600.css";
+import "@fontsource/inter/700.css";
 import { Providers } from "./providers";
 import "./globals.css";

@@ -18,8 +22,17 @@ export default function RootLayout({
    <html lang="en">
      <body className="min-h-screen antialiased">
        <Providers>
+          <a
+            href="#main-content"
+            className="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-[var(--primary)] focus:text-[var(--primary-foreground)]"
+          >
+            Skip to main content
+          </a>
          <header className="border-b border-[var(--border)] bg-[var(--card)]">
-            <nav className="container mx-auto px-4 py-4 flex items-center justify-between">
+            <nav
+              className="container mx-auto px-4 py-4 flex items-center justify-between"
+              aria-label="Main navigation"
+            >
              <Link
                href="/"
                className="text-xl font-bold text-[var(--primary)]"
@@ -48,7 +61,9 @@ export default function RootLayout({
              </div>
            </nav>
          </header>
-          <main className="container mx-auto px-4 py-8">{children}</main>
+          <main id="main-content" className="container mx-auto px-4 py-8">
+            {children}
+          </main>
          <footer className="border-t border-[var(--border)] mt-auto py-6 text-center text-[var(--muted-foreground)] text-sm">
            CodeTutor - Coding Interview Preparation
          </footer>
--- a/frontend/src/app/questions/[slug]/page.tsx
+++ b/frontend/src/app/questions/[slug]/page.tsx
@@ -2,7 +2,18 @@ import { getQuestion } from "@/lib/api";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { CodeBlock } from "@/components/ui/code-block";
-import { getDifficultyColor, capitalize } from "@/lib/utils";
+import { Markdown } from "@/components/ui/markdown";
+import { Callout, ApproachBox } from "@/components/ui/callout";
+import { Collapsible } from "@/components/ui/collapsible";
+import { getDifficultyColor, getDifficultyLabel, capitalize } from "@/lib/utils";
+import {
+  FileText,
+  AlertCircle,
+  BookOpen,
+  Code,
+  Clock,
+  HardDrive,
+} from "lucide-react";
 import Link from "next/link";
 import { notFound } from "next/navigation";

@@ -20,12 +31,18 @@ export default async function QuestionDetailPage({
    notFound();
  }

+  const optimalSolutions = question.solutions.filter((s) => s.is_optimal);
+  const otherSolutions = question.solutions.filter((s) => !s.is_optimal);
+
  return (
    <div className="max-w-4xl mx-auto space-y-8">
      <div>
        <div className="flex items-start justify-between gap-4 mb-4">
          <h1 className="text-3xl font-bold">{question.title}</h1>
-          <Badge className={getDifficultyColor(question.difficulty)}>
+          <Badge
+            className={getDifficultyColor(question.difficulty)}
+            aria-label={getDifficultyLabel(question.difficulty)}
+          >
            {capitalize(question.difficulty)}
          </Badge>
        </div>
@@ -48,6 +65,7 @@ export default async function QuestionDetailPage({
            href={question.leetcode_url}
            target="_blank"
            rel="noopener noreferrer"
+            aria-label={`View ${question.title} on LeetCode (opens in new tab)`}
            className="text-[var(--primary)] hover:underline text-sm"
          >
            View on LeetCode
@@ -57,22 +75,26 @@ export default async function QuestionDetailPage({

      <Card>
        <CardHeader>
-          <CardTitle>Problem</CardTitle>
+          <CardTitle className="flex items-center gap-2">
+            <FileText className="h-5 w-5" aria-hidden="true" />
+            Problem
+          </CardTitle>
        </CardHeader>
-        <CardContent className="prose dark:prose-invert max-w-none">
-          <div className="whitespace-pre-wrap">{question.description}</div>
+        <CardContent className="prose-content">
+          <Markdown>{question.description}</Markdown>
        </CardContent>
      </Card>

      {question.constraints && (
        <Card>
          <CardHeader>
-            <CardTitle>Constraints</CardTitle>
+            <CardTitle className="flex items-center gap-2">
+              <AlertCircle className="h-5 w-5" aria-hidden="true" />
+              Constraints
+            </CardTitle>
          </CardHeader>
          <CardContent>
-            <pre className="text-sm whitespace-pre-wrap">
-              {question.constraints}
-            </pre>
+            <Markdown>{question.constraints}</Markdown>
          </CardContent>
        </Card>
      )}
@@ -80,7 +102,10 @@ export default async function QuestionDetailPage({
      {question.examples && question.examples.length > 0 && (
        <Card>
          <CardHeader>
-            <CardTitle>Examples</CardTitle>
+            <CardTitle className="flex items-center gap-2">
+              <BookOpen className="h-5 w-5" aria-hidden="true" />
+              Examples
+            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {question.examples.map((example, i) => (
@@ -109,90 +134,94 @@ export default async function QuestionDetailPage({

      {question.explanation && (
        <>
-          <Card>
-            <CardHeader>
-              <CardTitle>Approach</CardTitle>
-            </CardHeader>
-            <CardContent className="whitespace-pre-wrap">
-              {question.explanation.approach}
-            </CardContent>
-          </Card>
+          <Callout variant="info" title="Approach">
+            <div className="prose-content">
+              <Markdown>{question.explanation.approach}</Markdown>
+            </div>
+          </Callout>
+
+          <Callout variant="insight" title="Intuition">
+            <div className="prose-content">
+              <Markdown>{question.explanation.intuition}</Markdown>
+            </div>
+          </Callout>

          <Card>
            <CardHeader>
-              <CardTitle>Intuition</CardTitle>
+              <CardTitle className="flex items-center gap-2">
+                <Clock className="h-5 w-5" aria-hidden="true" />
+                Complexity Analysis
+              </CardTitle>
            </CardHeader>
-            <CardContent className="whitespace-pre-wrap">
-              {question.explanation.intuition}
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Complexity Analysis</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-2">
-              <div>
-                <span className="font-medium">Time: </span>
-                {question.explanation.time_complexity}
-              </div>
-              <div>
-                <span className="font-medium">Space: </span>
-                {question.explanation.space_complexity}
-              </div>
-              {question.explanation.complexity_explanation && (
-                <div className="text-sm text-[var(--muted-foreground)] mt-2 whitespace-pre-wrap">
-                  {question.explanation.complexity_explanation}
+            <CardContent className="space-y-3">
+              <div className="flex items-start gap-2">
+                <Clock
+                  className="h-4 w-4 mt-1 text-[var(--muted-foreground)]"
+                  aria-hidden="true"
+                />
+                <div className="[&>div]:inline [&>div>p]:inline">
+                  <span className="font-medium">Time Complexity: </span>
+                  <Markdown>{question.explanation.time_complexity}</Markdown>
                </div>
-              )}
+              </div>
+              <div className="flex items-start gap-2">
+                <HardDrive
+                  className="h-4 w-4 mt-1 text-[var(--muted-foreground)]"
+                  aria-hidden="true"
+                />
+                <div className="[&>div]:inline [&>div>p]:inline">
+                  <span className="font-medium">Space Complexity: </span>
+                  <Markdown>{question.explanation.space_complexity}</Markdown>
+                </div>
+              </div>
            </CardContent>
          </Card>

          {question.explanation.common_pitfalls &&
            question.explanation.common_pitfalls.length > 0 && (
-              <Card>
-                <CardHeader>
-                  <CardTitle>Common Pitfalls</CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-4">
+              <Callout variant="warning" title="Common Pitfalls">
+                <div className="space-y-4">
                  {question.explanation.common_pitfalls.map((pitfall, i) => (
-                    <div key={i} className="p-4 rounded bg-[var(--secondary)]">
+                    <div key={i}>
                      <h4 className="font-medium mb-2">{pitfall.title}</h4>
-                      <p className="text-sm whitespace-pre-wrap">
-                        {pitfall.description}
-                      </p>
-                      {pitfall.wrong_approach && (
-                        <div className="mt-2 text-sm">
-                          <span className="text-red-500">Wrong: </span>
-                          <code>{pitfall.wrong_approach}</code>
-                        </div>
-                      )}
-                      {pitfall.correct_approach && (
-                        <div className="mt-1 text-sm">
-                          <span className="text-green-500">Correct: </span>
-                          <code>{pitfall.correct_approach}</code>
+                      <div className="text-sm prose-content mb-3">
+                        <Markdown>{pitfall.description}</Markdown>
+                      </div>
+                      {(pitfall.wrong_approach || pitfall.correct_approach) && (
+                        <div className="space-y-2">
+                          {pitfall.wrong_approach && (
+                            <ApproachBox variant="wrong">
+                              <code className="text-sm">
+                                {pitfall.wrong_approach}
+                              </code>
+                            </ApproachBox>
+                          )}
+                          {pitfall.correct_approach && (
+                            <ApproachBox variant="correct">
+                              <code className="text-sm">
+                                {pitfall.correct_approach}
+                              </code>
+                            </ApproachBox>
+                          )}
                        </div>
                      )}
                    </div>
                  ))}
-                </CardContent>
-              </Card>
+                </div>
+              </Callout>
            )}

          {question.explanation.key_takeaways &&
            question.explanation.key_takeaways.length > 0 && (
-              <Card>
-                <CardHeader>
-                  <CardTitle>Key Takeaways</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <ul className="list-disc list-inside space-y-1">
-                    {question.explanation.key_takeaways.map((takeaway, i) => (
-                      <li key={i}>{takeaway}</li>
-                    ))}
-                  </ul>
-                </CardContent>
-              </Card>
+              <Callout variant="success" title="Key Takeaways">
+                <ul className="list-disc list-inside space-y-2">
+                  {question.explanation.key_takeaways.map((takeaway, i) => (
+                    <li key={i} className="[&>div]:inline [&>div>p]:inline">
+                      <Markdown>{takeaway}</Markdown>
+                    </li>
+                  ))}
+                </ul>
+              </Callout>
            )}
        </>
      )}
@@ -200,27 +229,60 @@ export default async function QuestionDetailPage({
      {question.solutions.length > 0 && (
        <Card>
          <CardHeader>
-            <CardTitle>Solutions</CardTitle>
+            <CardTitle className="flex items-center gap-2">
+              <Code className="h-5 w-5" aria-hidden="true" />
+              Solutions
+            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
-            {question.solutions.map((solution) => (
+            {optimalSolutions.map((solution) => (
              <div key={solution.id}>
                <div className="flex items-center gap-2 mb-2">
                  <h4 className="font-medium">{solution.approach_name}</h4>
-                  {solution.is_optimal && (
-                    <Badge className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
-                      Optimal
-                    </Badge>
-                  )}
+                  <Badge className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
+                    Optimal
+                  </Badge>
                </div>
                {solution.explanation && (
-                  <p className="text-sm text-[var(--muted-foreground)] mb-3">
-                    {solution.explanation}
-                  </p>
+                  <div className="text-sm text-[var(--muted-foreground)] mb-3 prose-content">
+                    <Markdown>{solution.explanation}</Markdown>
+                  </div>
                )}
                <CodeBlock code={solution.code} language={solution.language} />
              </div>
            ))}
+
+            {otherSolutions.length > 0 && (
+              <div className="space-y-4">
+                {otherSolutions.map((solution) => (
+                  <Collapsible
+                    key={solution.id}
+                    title={
+                      <span className="flex items-center gap-2">
+                        {solution.approach_name}
+                        <Badge
+                          variant="outline"
+                          className="text-xs font-normal"
+                        >
+                          Alternative
+                        </Badge>
+                      </span>
+                    }
+                    defaultOpen={false}
+                  >
+                    {solution.explanation && (
+                      <div className="text-sm text-[var(--muted-foreground)] mb-3 prose-content">
+                        <Markdown>{solution.explanation}</Markdown>
+                      </div>
+                    )}
+                    <CodeBlock
+                      code={solution.code}
+                      language={solution.language}
+                    />
+                  </Collapsible>
+                ))}
+              </div>
+            )}
          </CardContent>
        </Card>
      )}