[OPIK-394]: adjust the UI to Figma; (#609)

Co-authored-by: Sasha <[email protected]>
comet-ml · Nov 12, 2024 · 55fc824 · 55fc824
1 parent fb9cccf
commit 55fc824
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/apps/opik-frontend/src/components/pages/PromptPage/PromptTab/CommitHistory.tsx b/apps/opik-frontend/src/components/pages/PromptPage/PromptTab/CommitHistory.tsx
@@ -32,15 +32,15 @@ const CommitHistory = ({
   };
 
   return (
-    <ul className="max-h-[500px] overflow-y-auto  rounded border bg-white p-1">
+    <ul className="max-h-[500px] overflow-y-auto rounded border bg-white p-1">
       {versions?.map((version) => {
         return (
           <li
             key={version.id}
             className={cn(
-              "cursor-pointer hover:bg-muted rounded-sm px-4 py-2.5 flex flex-col",
+              "cursor-pointer hover:bg-muted/50 rounded-sm px-4 py-2.5 flex flex-col",
               {
-                "bg-muted": activeVersionId === version.id,
+                "bg-muted/50": activeVersionId === version.id,
               },
             )}
             onMouseEnter={() => setHoveredVersionId(version.id)}
@@ -49,7 +49,13 @@ const CommitHistory = ({
           >
             <div className="flex items-center gap-2">
               <GitCommitVertical className="mt-auto size-4 shrink-0 text-muted-slate" />
-              <span className="comet-body-s truncate">{version.commit}</span>
+              <span
+                className={cn("comet-body-s truncate", {
+                  "comet-body-s-accented": activeVersionId === version.id,
+                })}
+              >
+                {version.commit}
+              </span>
               {hoveredVersionId == version.id && (
                 <TooltipWrapper content="Copy code">
                   <Button

diff --git a/apps/opik-frontend/src/components/pages/PromptPage/PromptTab/PromptTab.tsx b/apps/opik-frontend/src/components/pages/PromptPage/PromptTab/PromptTab.tsx
@@ -89,14 +89,14 @@ const PromptTab = ({ prompt }: PromptTabInterface) => {
           </Button>
         </div>
 
-        <div className="mt-6 flex items-stretch gap-2 rounded-md border bg-white p-6">
+        <div className="mt-6 flex gap-2 rounded-md border bg-white p-6">
           <div className="flex grow flex-col">
             <p className="comet-body-s-accented text-foreground">Prompt</p>
-            <code className="comet-code mt-2 flex size-full whitespace-pre-wrap break-all rounded-md bg-[#FBFCFD] p-3">
+            <code className="comet-code mt-2 flex w-full whitespace-pre-wrap break-all rounded-md bg-primary-foreground p-3">
               {activeVersion?.template}
             </code>
           </div>
-          <div className="w-[320px]">
+          <div className="min-w-[320px]">
             <p className="comet-body-s-accented mb-2 text-foreground">
               Commit history
             </p>