applied typography to connection, keybrowser, learn more, send comman…

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

@@ -60,7 +60,7 @@ export function Connection() {
       {/* top header */}
       <div className="flex items-center justify-between h-10">
         <Typography className="flex items-center gap-2" variant="heading">
-          <HousePlug /> Connections
+          <HousePlug size={20}/> Connections
         </Typography>
         {hasConnectionsWithHistory && (
           <Button

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

@@ -21,6 +21,7 @@ import { StatCard } from "../ui/stat-card"
 import { SearchInput } from "../ui/search-input"
 import RouteContainer from "../ui/route-container"
 import { TooltipIcon } from "../ui/tooltip-icon"
+import { Typography } from "../ui/typography"
 import { SplitPanel } from "../ui/split-panel"
 import { Panel } from "../ui/panel"
 import { useAppDispatch } from "@/hooks/hooks"
@@ -141,7 +142,11 @@ export function KeyBrowser() {
     <RouteContainer title="Key Browser">
       <AppHeader icon={<KeyRound size={20} />} title="Key Browser" />
 
-      {error && <div className="ml-2">Error loading keys: {error}</div>}
+      {error && (
+        <Typography className="ml-2" variant="bodySm">
+          Error loading keys: {error}
+        </Typography>
+      )}
 
       {/* Total Keys and Key Stats */}
       <TooltipProvider>

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

@@ -14,6 +14,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Select } from "@/components/ui/select"
+import { Typography } from "@/components/ui/typography"
 
 interface AddNewKeyProps {
   onClose: () => void;
@@ -253,7 +254,9 @@ export default function AddNewKey({ onClose }: AddNewKeyProps) {
             <div className="w-1/2 h-3/4 p-6 bg-white dark:bg-tw-dark-primary dark:border-tw-dark-border rounded-lg shadow-lg 
             border flex flex-col">
               <div className="flex justify-between">
-                <Dialog.Title className="text-lg font-semibold">Add Key</Dialog.Title>
+                <Dialog.Title asChild>
+                  <Typography variant="subheading">Add Key</Typography>
+                </Dialog.Title>
                 <Dialog.Close asChild>
                   <Button className="hover:text-tw-primary h-auto p-0" variant="ghost">
                     <X size={20} />
@@ -309,9 +312,9 @@ export default function AddNewKey({ onClose }: AddNewKeyProps) {
                       />
                     </div>
                   </div>
-                  <div className="mt-6 text-sm font-semibold border-b border-tw-dark-border pb-2">
+                  <Typography className="mt-6 border-b border-tw-dark-border pb-2" variant="bodySm">
                     Key Elements
-                  </div>
+                  </Typography>
                 </div>
                 <div className="flex-1 overflow-y-auto min-h-0 px-1">
                   {keyType === KEY_TYPES.STRING ? (
@@ -355,14 +358,16 @@ export default function AddNewKey({ onClose }: AddNewKeyProps) {
                   ) : keyType === KEY_TYPES.JSON ? (
                     <JsonFields jsonModuleAvailable={jsonModuleAvailable} setValue={setValue} value={value} />
                   ) : (
-                    <div className="mt-2 text-sm font-light">Select a key type</div>
+                    <Typography className="mt-2 text-gray-500" variant="bodySm">
+                      Select a key type
+                    </Typography>
                   )}
                 </div>
                 <div className="flex-shrink-0">
                   {error && (
-                    <div className="mt-4 text-sm text-red-500 font-medium">
+                    <Typography className="mt-4" variant="bodySm">
                       {error}
-                    </div>
+                    </Typography>
                   )}
 
                   <div className="pt-2 text-sm flex space-x-1">

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

@@ -5,6 +5,7 @@ import { Button } from "../../ui/button"
 import { Input } from "../../ui/input"
 import { EditActionButtons } from "../../ui/edit-action-buttons"
 import DeleteModal from "../../ui/delete-modal"
+import { Typography } from "../../ui/typography"
 import { useAppDispatch } from "@/hooks/hooks"
 import { updateKeyRequested } from "@/state/valkey-features/keys/keyBrowserSlice"
 import { cn } from "@/lib/utils"
@@ -145,8 +146,8 @@ export default function KeyDetailsHash(
     <div className="flex items-center justify-center w-full p-4">
       <div className="w-full">
         <div className={cn("grid grid-cols-4 gap-4 items-center py-1 px-4", "bg-muted/60 text-foreground")}>
-          <div className="font-semibold text-left">Key</div>
-          <div className="col-span-2 font-semibold text-left">Value</div>
+          <Typography className="text-left" variant="label">Key</Typography>
+          <Typography className="col-span-2 text-left" variant="label">Value</Typography>
           <div className="flex justify-end gap-1">
             <EditActionButtons
               isEditable={isEditable}
@@ -159,8 +160,8 @@ export default function KeyDetailsHash(
         {selectedKeyInfo.elements
           .filter((element: ElementInfo) => !deletedHashFields.has(element.key))
           .map((element: ElementInfo, index: number) => (
-            <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border font-light text-foreground")} key={index}>
-              <div>{element.key}</div>
+            <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border text-foreground")} key={index}>
+              <Typography variant="code">{element.key}</Typography>
               <div className="col-span-3">
                 {isEditable ? (
                   <div className="flex gap-2 relative">
@@ -187,13 +188,13 @@ export default function KeyDetailsHash(
                     )}
                   </div>
                 ) : (
-                  element.value
+                  <Typography variant="code">{element.value}</Typography>
                 )}
               </div>
             </div>
           ))}
         {isEditable && newFields.map((newField) => (
-          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border font-light text-foreground")} key={newField.tempId}>
+          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border text-foreground")} key={newField.tempId}>
             <div>
               <Input
                 onChange={(e) => handleNewFieldKeyChange(newField.tempId, e.target.value)}

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

@@ -4,6 +4,7 @@ import { KEY_TYPES } from "@common/src/constants"
 import { useSelector } from "react-redux"
 import { EditActionButtons } from "../../ui/edit-action-buttons"
 import { Textarea } from "../../ui/textarea"
+import { Typography } from "../../ui/typography"
 import { useAppDispatch } from "@/hooks/hooks"
 import { updateKeyRequested } from "@/state/valkey-features/keys/keyBrowserSlice"
 import { selectJsonModuleAvailable } from "@/state/valkey-features/connection/connectionSelectors"
@@ -78,8 +79,8 @@ export default function KeyDetailsJson(
       <table className="table-auto w-full overflow-hidden">
         <thead className={cn("bg-muted/60 text-foreground")}>
           <tr>
-            <th className="w-full py-3 px-4 text-left font-semibold">
-              JSON Value
+            <th className="w-full py-3 px-4 text-left">
+              <Typography variant="label">JSON Value</Typography>
             </th>
             <th className="">
               <EditActionButtons
@@ -107,7 +108,7 @@ export default function KeyDetailsJson(
             </tr>
           )}
           <tr>
-            <td className={cn("py-3 px-4 font-light text-foreground")} colSpan={2}>
+            <td className={cn("py-3 px-4 text-foreground")} colSpan={2}>
               {isEditable ? (
                 <div>
                   <Textarea
@@ -123,9 +124,9 @@ export default function KeyDetailsJson(
                   )}
                 </div>
               ) : (
-                <pre className="font-mono text-sm overflow-x-auto whitespace-pre-wrap break-words">
+                <Typography className="overflow-x-auto whitespace-pre-wrap break-words" variant="code">
                   {formattedJson}
-                </pre>
+                </Typography>
               )}
             </td>
           </tr>

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

@@ -5,6 +5,7 @@ import { Button } from "../../ui/button"
 import { Input } from "../../ui/input"
 import { EditActionButtons } from "../../ui/edit-action-buttons"
 import DeleteModal from "../../ui/delete-modal"
+import { Typography } from "../../ui/typography"
 import { useAppDispatch } from "@/hooks/hooks"
 import { updateKeyRequested } from "@/state/valkey-features/keys/keyBrowserSlice"
 import { cn } from "@/lib/utils"
@@ -133,8 +134,8 @@ export default function KeyDetailsList(
     <div className="flex items-center justify-center w-full p-4">
       <div className="w-full">
         <div className={cn("grid grid-cols-4 gap-4 items-center py-1 px-4", "bg-muted/60 text-foreground")}>
-          <div className="font-semibold text-left">Index</div>
-          <div className="col-span-2 font-semibold text-left">Elements</div>
+          <Typography className="text-left" variant="label">Index</Typography>
+          <Typography className="col-span-2 text-left" variant="label">Elements</Typography>
           <div className="flex justify-end gap-1">
             <EditActionButtons
               isEditable={isEditable}
@@ -148,8 +149,8 @@ export default function KeyDetailsList(
           .map((element: string, index: number) => ({ element, index }))
           .filter(({ index }) => !deletedIndices.has(index))
           .map(({ element, index }) => (
-            <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border font-light text-foreground")} key={index}>
-              <div>{index}</div>
+            <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border text-foreground")} key={index}>
+              <Typography variant="bodySm">{index}</Typography>
               <div className="col-span-3">
                 {isEditable ? (
                   <div className="flex gap-2 relative">
@@ -176,14 +177,14 @@ export default function KeyDetailsList(
                     )}
                   </div>
                 ) : (
-                  String(element)
+                  <Typography variant="code">{String(element)}</Typography>
                 )}
               </div>
             </div>
           ))}
         {isEditable && newItems.map((newItem) => (
-          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border font-light text-foreground")} key={newItem.tempId}>
-            <div>New</div>
+          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border text-foreground")} key={newItem.tempId}>
+            <Typography variant="bodySm">New</Typography>
             <div className="col-span-3">
               <div className="flex gap-2">
                 <Input

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

@@ -5,6 +5,7 @@ import { Button } from "../../ui/button"
 import { Input } from "../../ui/input"
 import { EditActionButtons } from "../../ui/edit-action-buttons"
 import DeleteModal from "../../ui/delete-modal"
+import { Typography } from "../../ui/typography"
 import { useAppDispatch } from "@/hooks/hooks"
 import { updateKeyRequested } from "@/state/valkey-features/keys/keyBrowserSlice"
 import { cn } from "@/lib/utils"
@@ -130,8 +131,8 @@ export default function KeyDetailsSet(
     <div className="flex items-center justify-center w-full p-4">
       <div className="w-full">
         <div className={cn("grid grid-cols-4 gap-4 items-center py-1 px-4", "bg-muted/60 text-foreground")}>
-          <div className="font-semibold text-left">Index</div>
-          <div className="col-span-2 font-semibold text-left">Value</div>
+          <Typography className="text-left" variant="label">Index</Typography>
+          <Typography className="col-span-2 text-left" variant="label">Value</Typography>
           <div className="flex justify-end gap-1">
             <EditActionButtons
               isEditable={isEditable}
@@ -145,8 +146,8 @@ export default function KeyDetailsSet(
           .map((element: string, index: number) => ({ element, index }))
           .filter(({ element }) => !deletedValues.has(element))
           .map(({ element, index }) => (
-            <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border font-light text-foreground")} key={index}>
-              <div>{index}</div>
+            <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border text-foreground")} key={index}>
+              <Typography variant="bodySm">{index}</Typography>
               <div className="col-span-3">
                 {isEditable ? (
                   <div className="flex gap-2 relative">
@@ -173,14 +174,14 @@ export default function KeyDetailsSet(
                     )}
                   </div>
                 ) : (
-                  String(element)
+                  <Typography variant="code">{String(element)}</Typography>
                 )}
               </div>
             </div>
           ))}
         {isEditable && newItems.map((newItem) => (
-          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border font-light text-foreground")} key={newItem.tempId}>
-            <div>New</div>
+          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border text-foreground")} key={newItem.tempId}>
+            <Typography variant="bodySm">New</Typography>
             <div className="col-span-3">
               <div className="flex gap-2">
                 <Input

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

@@ -1,3 +1,4 @@
+import { Typography } from "../../ui/typography"
 import { cn } from "@/lib/utils"
 
 interface KeyDetailsStreamProps {
@@ -24,28 +25,29 @@ export default function KeyDetailsStream(
     <div className="flex flex-col w-full p-4 space-y-4">
       {selectedKeyInfo?.elements.map((entry, index: number) => (
         <div className="overflow-hidden" key={index}>
-          <div className={cn("bg-muted/60 text-foreground py-2 px-4 font-semibold")}>
-            Entry ID: {entry.key} <span className="text-xs font-light">({new Date(Number(entry.key.split("-")[0])).toLocaleString()})</span>
+          <div className={cn("bg-muted/60 text-foreground py-2 px-4")}>
+            <Typography variant="label">Entry ID: {entry.key}</Typography> 
+            <Typography variant="bodySm">({new Date(Number(entry.key.split("-")[0])).toLocaleString()})</Typography>
           </div>
           <table className="table-auto w-full">
             <thead className={cn("bg-muted/50 text-foreground")}>
               <tr>
-                <th className="w-1/2 py-3 px-4 text-left font-semibold">
-                  Field
+                <th className="w-1/2 py-3 px-4 text-left">
+                  <Typography variant="label">Field</Typography>
                 </th>
-                <th className="w-1/2 py-3 px-4 text-left font-semibold">
-                  Value
+                <th className="w-1/2 py-3 px-4 text-left">
+                  <Typography variant="label">Value</Typography>
                 </th>
               </tr>
             </thead>
             <tbody>
               {entry.value.map(([field, value], fieldIndex: number) => (
                 <tr key={fieldIndex}>
-                  <td className={cn("py-3 px-4 border-b border-border font-light text-foreground")}>
-                    {field}
+                  <td className={cn("py-3 px-4 border-b border-border text-foreground")}>
+                    <Typography variant="code">{field}</Typography>
                   </td>
-                  <td className={cn("py-3 px-4 border-b border-border font-light text-foreground")}>
-                    {value}
+                  <td className={cn("py-3 px-4 border-b border-border text-foreground")}>
+                    <Typography variant="code">{value}</Typography>
                   </td>
                 </tr>
               ))}

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

@@ -1,6 +1,7 @@
 import { useState } from "react"
 import { EditActionButtons } from "../../ui/edit-action-buttons"
 import { Textarea } from "../../ui/textarea"
+import { Typography } from "../../ui/typography"
 import { useAppDispatch } from "@/hooks/hooks"
 import { updateKeyRequested } from "@/state/valkey-features/keys/keyBrowserSlice"
 import { cn } from "@/lib/utils"
@@ -52,8 +53,8 @@ export default function KeyDetailsString(
       <table className="table-auto w-full overflow-hidden">
         <thead className={cn("bg-muted/60 text-foreground")}>
           <tr>
-            <th className="w-full py-3 px-4 text-left font-semibold">
-              Value
+            <th className="w-full py-3 px-4 text-left">
+              <Typography variant="label">Value</Typography>
             </th>
             <th className="">
               <EditActionButtons
@@ -67,7 +68,7 @@ export default function KeyDetailsString(
         </thead>
         <tbody>
           <tr>
-            <td className={cn("py-3 px-4 font-light text-foreground")} colSpan={2}>
+            <td className={cn("py-3 px-4 text-foreground")} colSpan={2}>
               {isEditable ? (
                 <Textarea
                   autoFocus
@@ -76,9 +77,9 @@ export default function KeyDetailsString(
                   value={editedValue}
                 />
               ) : (
-                <div className="whitespace-pre-wrap break-words">
+                <Typography className="whitespace-pre-wrap break-words" variant="code">
                   {selectedKeyInfo.elements}
-                </div>
+                </Typography>
               )}
             </td>
           </tr>

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

@@ -1,6 +1,7 @@
 import { useState } from "react"
 import { Input } from "../../ui/input"
 import { EditActionButtons } from "../../ui/edit-action-buttons"
+import { Typography } from "../../ui/typography"
 import { useAppDispatch } from "@/hooks/hooks"
 import { updateKeyRequested } from "@/state/valkey-features/keys/keyBrowserSlice"
 import { cn } from "@/lib/utils"
@@ -76,8 +77,8 @@ export default function KeyDetailsZSet(
     <div className="flex items-center justify-center w-full p-4">
       <div className="w-full">
         <div className={cn("grid grid-cols-4 gap-4 items-center py-1 px-4", "bg-muted/60 text-foreground")}>
-          <div className="font-semibold text-left">Key</div>
-          <div className="col-span-2 font-semibold text-left">Value</div>
+          <Typography className="text-left" variant="label">Key</Typography>
+          <Typography className="col-span-2 text-left" variant="label">Value</Typography>
           <div className="flex justify-end gap-1">
             <EditActionButtons
               isEditable={isEditable}
@@ -88,8 +89,8 @@ export default function KeyDetailsZSet(
           </div>
         </div>
         {selectedKeyInfo.elements.map((element: ZSetElement, index: number) => (
-          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border font-light text-foreground")} key={index}>
-            <div>{element.key}</div>
+          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border text-foreground")} key={index}>
+            <Typography variant="code">{element.key}</Typography>
             <div className="col-span-3">
               {isEditable ? (
                 <Input
@@ -99,7 +100,7 @@ export default function KeyDetailsZSet(
                   value={editedValues[index] !== undefined ? editedValues[index] : element.value}
                 />
               ) : (
-                element.value
+                <Typography variant="code">{element.value}</Typography>
               )}
             </div>
           </div>