typography applied across the application

apps/frontend/src/components/cluster-topology/cluster-node.tsx

@@ -6,6 +6,7 @@ import { TooltipProvider } from "@radix-ui/react-tooltip"
 import { Badge } from "../ui/badge"
 import { CustomTooltip } from "../ui/tooltip"
 import { Button } from "../ui/button"
+import { Typography } from "../ui/typography"
 import type { RootState } from "@/store.ts"
 import type { PrimaryNode, ParsedNodeInfo } from "@/state/valkey-features/cluster/clusterSlice"
 import { connectPending, type ConnectionDetails } from "@/state/valkey-features/connection/connectionSlice.ts"
@@ -62,11 +63,11 @@ export function ClusterNode({
     <div className="flex items-center gap-2 text-xs">
       <div className="flex items-center gap-1">
         <MemoryStick className="text-primary" size={14} />
-        <span>{nodeData?.used_memory_human ?? "N/A"}</span>
+        <Typography variant="bodyXs">{nodeData?.used_memory_human ?? "N/A"}</Typography>
       </div>
       <div className="flex items-center gap-1">
         <Users className="text-primary" size={14} />
-        <span>{nodeData?.connected_clients ?? "N/A"}</span>
+        <Typography variant="bodyXs">{nodeData?.connected_clients ?? "N/A"}</Typography>
       </div>
     </div>
   )
@@ -81,12 +82,12 @@ export function ClusterNode({
               <Server className="text-tw-primary shrink-0" size={18} />
               <div className="flex flex-col gap-1 min-w-0">
                 <div className="flex items-center gap-2 flex-wrap">
-                  <span className="font-semibold text-sm">{primaryData?.server_name || primaryKey}</span>
+                  <Typography variant={"label"}>{primaryData?.server_name || primaryKey}</Typography>
                   <Badge className="text-xs px-2 py-0" variant={isConnected ? "success" : "secondary"}>
                     PRIMARY
                   </Badge>
                 </div>
-                <span className="text-xs text-tw-dark-border">{`${primary.host}:${primary.port}`}</span>
+                <Typography variant="bodyXs">{`${primary.host}:${primary.port}`}</Typography>
                 <NodeDetails nodeData={primaryData} />
               </div>
             </div>
@@ -107,7 +108,7 @@ export function ClusterNode({
                   return (
                     <div className="flex items-center mb-2 gap-1" key={replicaKey}>
                       <Server className="text-tw-primary shrink-0" size={16} />
-                      <span className="text-xs text-tw-dark-border underline">{replicaKey}</span>
+                      <Typography className="underline" variant="bodyXs">{replicaKey}</Typography>
                     </div>
                   )
                 })}

apps/frontend/src/components/connection/ConnectionEntry.tsx

@@ -119,7 +119,7 @@ export const ConnectionEntry = ({
               </Button>
             </Typography>
             {connection.connectionDetails.alias && (
-              <Typography className="ml-1 text-tw-dark-border dark:text-white/50 truncate" title={label} variant="bodyXs">
+              <Typography className="ml-1 truncate" title={label} variant="code">
                 ({label})
               </Typography>)}
             <div className="flex items-center gap-3">

apps/frontend/src/components/connection/__tests__/text-truncation.test.tsx

@@ -100,10 +100,10 @@ describe("Text Truncation Improvements", () => {
         </TestWrapper>,
       )
 
-      // Check for alias in Typography component with truncate and title
-      const aliasElements = container.querySelectorAll("p.truncate[title]")
-      const hasAliasElement = Array.from(aliasElements).some((p) =>
-        p.textContent?.includes("(") && p.textContent?.includes(")"),
+      // Check for alias in Typography component with code variant (renders as <code> element) with title
+      const aliasElements = container.querySelectorAll("code[title]")
+      const hasAliasElement = Array.from(aliasElements).some((code) =>
+        code.textContent?.includes("(") && code.textContent?.includes(")"),
       )
       expect(hasAliasElement).toBe(true)
     })

apps/frontend/src/components/key-browser/key-details/key-details-json.tsx

@@ -98,11 +98,11 @@ export default function KeyDetailsJson(
           {!jsonModuleAvailable && (
             <tr>
               <td className="px-4 pt-3" colSpan={2}>
-                <div className="flex items-center gap-2 px-3 py-2 rounded text-sm bg-tw-primary/20 text-red-400">
+                <div className="flex items-center gap-2 px-3 py-2 rounded bg-tw-primary/20">
                   <TriangleAlert size={14} />
-                  <span>
+                  <Typography variant="bodyXs">
                     JSON module is not loaded on this Valkey instance. Editing is disabled.
-                  </span>
+                  </Typography>
                 </div>
               </td>
             </tr>

apps/frontend/src/components/key-browser/key-types.tsx

@@ -3,6 +3,7 @@ import { Button } from "../ui/button"
 import { Input } from "../ui/input"
 import { Label } from "../ui/label"
 import { Textarea } from "../ui/textarea"
+import { Typography } from "../ui/typography"
 
 interface StringFieldsProps {
   value: string
@@ -309,17 +310,17 @@ export function JsonFields({ value, setValue, jsonModuleAvailable = false }: Jso
         <Label htmlFor="json-value">JSON Value *</Label>
 
         {/* JSON Module Indicator */}
-        <div className={`flex items-center gap-2 px-3 py-2 rounded text-sm ${
+        <div className={`flex gap-2 px-3 py-2 rounded bg-tw-primary/20 ${
           jsonModuleAvailable
-            ? "bg-tw-primary/20 text-teal-500"
-            : "bg-tw-primary/20 text-red-400"
+            ? "text-teal-500"
+            : "text-red-400"
         }`}>
-          <span className="font-semibold">{jsonModuleAvailable ? <Check size={14} /> : <TriangleAlert size={14} />}</span>
-          <span>
+          {jsonModuleAvailable ? <Check size={14} /> : <TriangleAlert size={14} />}
+          <Typography variant="bodyXs">
             {jsonModuleAvailable
               ? "JSON module is available"
               : "JSON module is not loaded on this Valkey instance"}
-          </span>
+          </Typography>
         </div>
 
         <Textarea
@@ -330,7 +331,7 @@ export function JsonFields({ value, setValue, jsonModuleAvailable = false }: Jso
           required
           value={value}
         />
-        <p className="text-xs text-muted-foreground">Enter valid JSON data</p>
+        <Typography variant="bodyXs">Enter valid JSON data</Typography>
       </div>
     </div>
   )

apps/frontend/src/components/monitoring/Monitoring.tsx

@@ -12,7 +12,6 @@ import { CommandLogTable } from "./command-log-table"
 import KeyDetails from "../key-browser/key-details/key-details"
 import RouteContainer from "../ui/route-container"
 import { Button } from "../ui/button"
-import { Panel } from "../ui/panel"
 import type { RootState } from "@/store"
 import { commandLogsRequested, selectCommandLogs } from "@/state/valkey-features/commandlogs/commandLogsSlice"
 import { useAppDispatch } from "@/hooks/hooks"
@@ -151,34 +150,36 @@ export const Monitoring = () => {
 
       {/* Tab Content */}
       {activeTab === "hot-keys" ? (
-        <div className="flex flex-1">
+        <div className="flex flex-1 h-full overflow-hidden gap-2">
           {/* Hot Keys List */}
-          <div className={selectedKey ? "w-2/3 pr-2" : "w-full"}>
-            <Panel >
+          <div className={selectedKey ? "w-2/3 h-full" : "w-full h-full"}>
+            <div className="flex-1 h-full border border-input rounded-md shadow-xs">
               <HotKeys
                 data={hotKeysData}
                 errorMessage={hotKeysErrorMessage as string | null}
                 onKeyClick={handleKeyClick}
                 selectedKey={selectedKey}
                 status={hotKeysStatus}
               />
-            </Panel>
+            </div>
           </div>
           {/* Key Details Panel */}
           {selectedKey && (
-            <KeyDetails
-              connectionId={id!}
-              readOnly={true}
-              selectedKey={selectedKey}
-              selectedKeyInfo={selectedKeyInfo}
-              setSelectedKey={setSelectedKey}
-            />
+            <div className="w-1/3 h-full">
+              <KeyDetails
+                connectionId={id!}
+                readOnly={true}
+                selectedKey={selectedKey}
+                selectedKeyInfo={selectedKeyInfo}
+                setSelectedKey={setSelectedKey}
+              />
+            </div>
           )}
         </div>
       ) : (
-        <Panel>
+        <div className="flex-1 h-full border border-input rounded-md shadow-xs">
           <CommandLogTable data={getCurrentCommandLogData()} logType={commandLogSubTab} />
-        </Panel>
+        </div>
       )}
     </RouteContainer>
 

apps/frontend/src/components/monitoring/command-log-table.tsx

@@ -5,6 +5,7 @@ import { SORT_ORDER, SORT_FIELD } from "@common/src/constants"
 import { EmptyState } from "../ui/empty-state"
 import { TableContainer } from "../ui/table-container"
 import { SortableTableHeader, StaticTableHeader } from "../ui/sortable-table-header"
+import { Typography } from "../ui/typography"
 
 type SortOrder = typeof SORT_ORDER.ASC | typeof SORT_ORDER.DESC
 type SortField = typeof SORT_FIELD.TIMESTAMP | typeof SORT_FIELD.METRIC
@@ -131,30 +132,30 @@ export function CommandLogTable({ data, logType }: CommandLogTableProps) {
           >
             {/* command */}
             <td className="px-4 py-2 flex-1">
-              <code className="text-sm font-mono text-tw-primary bg-tw-primary/20 px-3 py-1 rounded-full">
+              <Typography className="bg-primary/30 py-1 px-2 rounded-full"  variant="code">
                 {entry.argv.join(" ")}
-              </code>
+              </Typography>
             </td>
 
             {/* metric (duration or size) */}
             <td className="px-4 py-2 w-1/6 text-center">
-              <span className="inline-flex font-mono items-center text-sm bg-tw-primary/30 px-2 text-tw-primary rounded-full">
+              <Typography className="" variant="bodySm">
                 {config.metricFormat(metricValue)}
-              </span>
+              </Typography>
             </td>
 
             {/* timestamp */}
             <td className="px-4 py-2 w-1/4 text-center">
-              <span className="text-sm">
+              <Typography variant="bodySm">
                 {new Date(entry.ts).toLocaleString()}
-              </span>
+              </Typography>
             </td>
 
             {/* client address */}
             <td className="px-4 py-2 w-1/5 text-center">
-              <span className="text-sm font-mono">
+              <Typography variant="code">
                 {entry.addr}
-              </span>
+              </Typography>
             </td>
           </tr>
         )

apps/frontend/src/components/monitoring/hot-keys.tsx

@@ -8,6 +8,7 @@ import { LoadingState } from "../ui/loading-state"
 import { EmptyState } from "../ui/empty-state"
 import { TableContainer } from "../ui/table-container"
 import { SortableTableHeader, StaticTableHeader, type SortOrder } from "../ui/sortable-table-header"
+import { Typography } from "../ui/typography"
 import { copyToClipboard } from "@/lib/utils"
 
 interface HotKeysProps {
@@ -51,6 +52,7 @@ export function HotKeys({ data, errorMessage, status, onKeyClick, selectedKey }:
           />
           <SortableTableHeader
             active={true}
+            className="text-center"
             label="Access Count"
             onClick={toggleSortOrder}
             sortOrder={sortOrder}
@@ -78,14 +80,12 @@ export function HotKeys({ data, errorMessage, status, onKeyClick, selectedKey }:
             {/* key name */}
             <td className="px-4 py-3 w-2/5">
               <div className="flex items-center gap-2">
-                <span className={`text-sm font-medium truncate
+                <Typography className={`truncate
                             ${isDeleted
-            ? "line-through opacity-75"
-            : selectedKey === keyName
-                    && "text-tw-primary font-light"
-          }`}>
+            ? "line-through opacity-75" : ""
+          }`} variant={"code"}>
                   {keyName}
-                </span>
+                </Typography>
                 {isDeleted && (
                   <span className="inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full
                              bg-red-200 dark:bg-red-400">
@@ -105,28 +105,24 @@ export function HotKeys({ data, errorMessage, status, onKeyClick, selectedKey }:
             </td>
 
             {/* access count */}
-            <td className="px-4 py-3 w-1/5">
-              <span className={`inline-flex items-center text-sm px-3 py-1 rounded-full
-                          ${isDeleted
-            ? "bg-tw-dark-border/20 dark:bg-gray-700"
-            : "bg-tw-primary/20 text-tw-primary"
-          }`}>
+            <td className="px-4 py-3 w-1/5 text-center">
+              <Typography variant={"bodySm"}>
                 {count.toLocaleString()}
-              </span>
+              </Typography>
             </td>
 
             {/* size */}
             <td className="px-4 py-3 w-1/5 text-center">
-              <span className="font-mono text-sm">
+              <Typography variant={"bodySm"}>
                 {isDeleted ? "—" : formatBytes(size!)}
-              </span>
+              </Typography>
             </td>
 
             {/* ttl */}
             <td className="px-4 py-3 w-1/5 text-center">
-              <span className="font-mono text-sm">
+              <Typography variant={"bodySm"}>
                 {isDeleted ? "—" : convertTTL(ttl)}
-              </span>
+              </Typography>
             </td>
           </tr>
         )
@@ -138,10 +134,10 @@ export function HotKeys({ data, errorMessage, status, onKeyClick, selectedKey }:
         errorMessage && (
           <div className="mt-2 p-3 bg-red-50 dark:bg-red-900/20 rounded-md">
             <div className="flex items-start gap-2">
-              <AlertCircle className="w-4 h-4 text-red-500 mt-0.5 flex-shrink-0" />
-              <p className="text-sm text-red-700 dark:text-red-400 text-left">
+              <AlertCircle className="w-4 h-4 text-red-500 mt-0.5 shrink-0" />
+              <Typography variant="bodySm">
                 {errorMessage}
-              </p>
+              </Typography>
             </div>
           </div>
         )