From ef6f57e710a6590599e7088a9a6437b3259a4722 Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Mon, 6 Apr 2026 12:16:11 +0530
Subject: [PATCH] fix(*): update the typography and UI updates

---
 app/(main)/speech-to-text/page.tsx                |  8 ++++----
 app/components/DetailedResultsTable.tsx           |  2 +-
 app/components/prompt-editor/ConfigEditorPane.tsx |  2 --
 app/globals.css                                   |  6 +++---
 app/layout.tsx                                    | 14 ++++++++------
 app/lib/models.ts                                 |  3 ---
 6 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/app/(main)/speech-to-text/page.tsx b/app/(main)/speech-to-text/page.tsx
index 7b76edf..c49e4a1 100644
--- a/app/(main)/speech-to-text/page.tsx
+++ b/app/(main)/speech-to-text/page.tsx
@@ -22,6 +22,7 @@ import { APIKey } from "@/app/lib/types/credentials";
 import WaveformVisualizer from "@/app/components/speech-to-text/WaveformVisualizer";
 import { computeWordDiff } from "@/app/components/speech-to-text/TranscriptionDiffViewer";
 import ErrorModal from "@/app/components/ErrorModal";
+import { getStatusColor } from "@/app/components/utils";
 
 type Tab = "datasets" | "evaluations";
 
@@ -3169,14 +3170,13 @@ function EvaluationsTab({
                     {filteredRuns.map((run) => {
                       const isCompleted =
                         run.status.toLowerCase() === "completed";
+                      const statusColor = getStatusColor(run.status);
                       return (
                         <div
                           key={run.id}
-                          className="rounded-lg overflow-hidden"
+                          className="rounded-lg overflow-hidden bg-bg-primary shadow-sm border-l-3"
                           style={{
-                            backgroundColor: colors.bg.primary,
-                            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.06)",
-                            borderLeft: "3px solid #DCCFC3",
+                            borderLeftColor: statusColor.border,
                           }}
                         >
                           <div className="px-5 py-4">
diff --git a/app/components/DetailedResultsTable.tsx b/app/components/DetailedResultsTable.tsx
index 38bc652..c4b9de0 100644
--- a/app/components/DetailedResultsTable.tsx
+++ b/app/components/DetailedResultsTable.tsx
@@ -387,7 +387,7 @@ function GroupedResultsTable({ traces }: { traces: GroupedTraceItem[] }) {
       {/* Table Container - overflow-x-auto enables horizontal scroll when table exceeds viewport */}
       <div className="overflow-x-auto">
         <table
-          className="w-full border-collapse"
+          className="w-full border-collapse table-fixed"
           style={{ minWidth: `${tableMinWidth}px` }}
         >
           {/* Table Header - matching row format styling */}
diff --git a/app/components/prompt-editor/ConfigEditorPane.tsx b/app/components/prompt-editor/ConfigEditorPane.tsx
index 63502cc..773b16c 100644
--- a/app/components/prompt-editor/ConfigEditorPane.tsx
+++ b/app/components/prompt-editor/ConfigEditorPane.tsx
@@ -366,7 +366,6 @@ export default function ConfigEditorPane({
                 />
               </button>
 
-              {/* Dropdown Menu */}
               {isDropdownOpen && (
                 <div
                   className="absolute z-50 w-full mt-1 rounded-md shadow-lg max-h-64 overflow-auto"
@@ -642,7 +641,6 @@ export default function ConfigEditorPane({
               </p>
             </div>
 
-            {/* Model */}
             <div>
               <label
                 className="block text-xs font-semibold mb-2"
diff --git a/app/globals.css b/app/globals.css
index 51b7b69..92c8a4c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -15,8 +15,8 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
 }
 
 /* Background colors */
@@ -62,7 +62,7 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-sans), system-ui, sans-serif;
 }
 
 @keyframes fadeIn {
diff --git a/app/layout.tsx b/app/layout.tsx
index 48db982..498a4a1 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,18 +1,20 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Plus_Jakarta_Sans, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 import { ToastProvider } from "@/app/components/Toast";
 import { AuthProvider } from "@/app/lib/context/AuthContext";
 import { AppProvider } from "@/app/lib/context/AppContext";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const jakarta = Plus_Jakarta_Sans({
+  variable: "--font-sans",
   subsets: ["latin"],
+  display: "swap",
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const jetbrainsMono = JetBrains_Mono({
+  variable: "--font-mono",
   subsets: ["latin"],
+  display: "swap",
 });
 
 export const metadata: Metadata = {
@@ -28,7 +30,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${jakarta.variable} ${jetbrainsMono.variable} antialiased`}
       >
         <ToastProvider>
           <AuthProvider>
diff --git a/app/lib/models.ts b/app/lib/models.ts
index 21dbfc9..17cd0d3 100644
--- a/app/lib/models.ts
+++ b/app/lib/models.ts
@@ -17,9 +17,6 @@ export const MODEL_OPTIONS: Record<string, ModelOption[]> = {
     { value: "gpt-4.1", label: "GPT-4.1" },
     { value: "gpt-4o", label: "GPT-4o" },
     { value: "gpt-4o-mini", label: "GPT-4o Mini" },
-    { value: "gpt-4-turbo", label: "GPT-4 Turbo" },
-    { value: "gpt-4", label: "GPT-4" },
-    { value: "gpt-3.5-turbo", label: "GPT-3.5 Turbo" },
   ],
   // anthropic: [
   //   { value: 'claude-3-5-sonnet-20241022', label: 'Claude 3.5 Sonnet' },