Update the typography and UI Improvements

[Ayush8923]

Issue: #107

Summary:

• Update Typography for font stack for branding.
• Remove the GPT-4, GPT-4-Turbo, GPT-3.5-turbo models from the prompt-editor.
• Fixed the Evals tables UI in Group by Question tab.
• Add the border color in STT flow based on their evals status.

Summary by CodeRabbit

• Style

  • Updated font styling with new typefaces (Plus Jakarta Sans and JetBrains Mono).
  • Enhanced visual distinction for evaluation run status with dynamic color coding.
  • Improved table layout formatting for results display.

• Removed Features

  • Removed OpenAI model options: gpt-4-turbo, gpt-4, and gpt-3.5-turbo.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 84dd874c-6031-476e-99b2-9d52d7b5c734

📥 Commits

Reviewing files that changed from the base of the PR and between 5eb3566 and ef6f57e.

📒 Files selected for processing (6)

• app/(main)/speech-to-text/page.tsx
• app/components/DetailedResultsTable.tsx
• app/components/prompt-editor/ConfigEditorPane.tsx
• app/globals.css
• app/layout.tsx
• app/lib/models.ts

💤 Files with no reviewable changes (2)

• app/lib/models.ts
• app/components/prompt-editor/ConfigEditorPane.tsx

---

📝 Walkthrough

Walkthrough

The pull request applies status-based styling to evaluation run cards, refines table layout with fixed-width rendering, removes documentation comments, updates font system variables from Geist to Plus Jakarta Sans and JetBrains Mono, and removes three OpenAI model options from the available model list.

Changes

Cohort / File(s)	Summary
Status Styling for Runs app/(main)/speech-to-text/page.tsx	Integrated getStatusColor utility to dynamically compute border colors for evaluation run cards, replacing hardcoded color values with status-driven styling.
Table Layout Enhancement app/components/DetailedResultsTable.tsx	Added table-fixed layout mode to the grouped results table for improved column width handling.
Code Cleanup app/components/prompt-editor/ConfigEditorPane.tsx	Removed inline JSX comments (/* Dropdown Menu */ and /* Model */) without functional changes.
Font System Migration app/globals.css, app/layout.tsx	Replaced Geist font stack with Plus Jakarta Sans (sans-serif) and JetBrains Mono (monospace); updated CSS variable references and font-family fallbacks; added display: "swap" to new font declarations.
Model Configuration app/lib/models.ts	Removed three OpenAI model options (gpt-4-turbo, gpt-4, gpt-3.5-turbo) from the available models list.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• Feat(evaluation): Improve UI usability issues #80: Introduces EvalRunCard component that also uses getStatusColor for status-based styling in run cards.
• Evals UI: fixing score and config display #56: Modifies app/components/DetailedResultsTable.tsx with table structure and import logic changes affecting the same rendering component.
• Support new Open AI model configuration #87: Changes MODEL_OPTIONS in app/lib/models.ts to add and reorganize model configurations alongside this PR's model removal updates.

Suggested labels

enhancement

Suggested reviewers

• Prajna1999
• vprashrex
• AkhileshNegi

Poem

🐰 The fonts now dance in Jakarta's grace,
While JetBrains colors light the space,
Status hues paint runs with pride,
Tables stand fixed, side by side,
Old models fade, new paths collide! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title 'Update the typography and UI Improvements' broadly covers multiple distinct changes (typography, model removals, table UI fixes, status colors) but lacks specificity about the main change.	Consider a more specific title like 'Update typography and fix UI improvements across tables and status indicators' to better reflect the scope of changes.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/ui-improvements-updates

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}