style: Update text sizes in chat components and globals.css (#338)

- Added new text size classes (.text-xs, .text-sm, .text-md, .text-xl) in globals.css for better typography control. - Adjusted text sizes in the DataSection and Blob components to use the new text size classes. - Updated TemplateMessage component to use smaller text size for consistency. These changes enhance the overall readability and visual hierarchy of the chat interface.
inferablehq · Dec 19, 2024 · ffe7c91 · ffe7c91
1 parent ba8008e
commit ffe7c91
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 11 deletions.
diff --git a/app/app/globals.css b/app/app/globals.css
@@ -135,3 +135,24 @@ input[cmdk-input]:focus-visible {
   outline: none;
   border: 0 !important;
 }
+
+.text-sm {
+  font-size: 12px !important;
+  line-height: 1.1rem;
+}
+
+.text-md {
+  font-size: 12px !important;
+  line-height: 1.25rem;
+}
+
+.text-xs {
+  font-size: 11px !important;
+  line-height: 1rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
diff --git a/app/components/chat/ai-message.tsx b/app/components/chat/ai-message.tsx
@@ -24,9 +24,9 @@ interface DataSectionProps {
 
 const DataSection = ({ title, icon: Icon, content }: DataSectionProps) => (
   <div className="mb-4 last:mb-0">
-    <div className="flex items-center gap-2 text-muted-foreground text-sm font-medium mb-2">
+    <div className="flex items-center gap-2 text-muted-foreground text-xs font-medium mb-2">
       <Icon size={16} className="text-primary/70" />
-      <span>{title}</span>
+      <span className="text-sm">{title}</span>
     </div>
     <div className="ml-6">{content}</div>
   </div>

diff --git a/app/components/chat/blob.tsx b/app/components/chat/blob.tsx
@@ -4,7 +4,13 @@ import { useAuth } from "@clerk/nextjs";
 import { useCallback, useEffect, useState } from "react";
 import { ReadOnlyJSON } from "../read-only-json";
 import { Button } from "../ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
 import { formatRelative } from "date-fns";
 import { FileWarningIcon } from "lucide-react";
 
@@ -58,7 +64,6 @@ export function Blob({
     a.click();
 
     document.body.removeChild(a);
-
   }, [data, blob.name, blob.type]);
 
   useEffect(() => {
@@ -72,7 +77,7 @@ export function Blob({
   return (
     <Card className="ml-4 mb-4 mr-4">
       <CardHeader>
-        <CardTitle className="flex items-center font-semibold text-md">
+        <CardTitle className="flex items-center font-semibold text-sm">
           <div className="flex flex-row space-x-2">
             <p>Blob</p>
             <p className="text-muted-foreground font-normal">
@@ -82,7 +87,15 @@ export function Blob({
         </CardTitle>
         <CardDescription>
           <p>
-            This result was returned as a <a href="https://docs.inferable.ai/pages/blobs" className="underline">Blob</a>. The model did not recieve this data and can not make inferences about it.
+            This result was returned as a{" "}
+            <a
+              href="https://docs.inferable.ai/pages/blobs"
+              className="underline"
+            >
+              Blob
+            </a>
+            . The model did not recieve this data and can not make inferences
+            about it.
           </p>
         </CardDescription>
       </CardHeader>
@@ -100,7 +113,7 @@ export function Blob({
               json={JSON.stringify(
                 JSON.parse(Buffer.from(data, "base64").toString()),
                 null,
-                2,
+                2
               )}
             />
           </div>
@@ -120,7 +133,7 @@ export function Blob({
             downloadBlob();
           }}
         >
-          Download { blob.name } ({blob.type})
+          Download {blob.name} ({blob.type})
         </Button>
       )}
     </Card>

diff --git a/app/components/chat/template-mesage.tsx b/app/components/chat/template-mesage.tsx
@@ -40,7 +40,7 @@ export function TemplateMessage({
   const handleRetry = async () => {
     if (
       window.confirm(
-        "Are you sure you want to retry? This will delete the current result.",
+        "Are you sure you want to retry? This will delete the current result."
       )
     ) {
       setIsRetrying(true);
@@ -69,7 +69,7 @@ export function TemplateMessage({
   return (
     <Card className="w-full rounded-none border-none shadow-md">
       <CardHeader>
-        <CardTitle className="flex items-center text-md font-semibold">
+        <CardTitle className="flex items-center text-sm font-semibold">
           <Workflow className="w-5 h-5 mr-2" />
           <div className="flex flex-row space-x-2">
             {templateId && templateName ? (
@@ -132,7 +132,7 @@ export function TemplateMessage({
               </>
             )}
           </CardContent>
-        ),
+        )
       )}
     </Card>
   );