Enhance Sessions page UI with improved setup instructions and consistent font application (#1695)

.changeset/sessions-page-ui-improvements.md

@@ -0,0 +1,8 @@
+---
+"@hyperdx/app": patch
+---
+
+UI improvements for ClickStack/HyperDX:
+
+- Improve Sessions page empty state with enhanced Card and Stepper component for setup instructions
+- Apply consistent IBM Plex Mono font family to log tables, JSON viewer, and multi-series table charts

packages/app/src/HDXMultiSeriesTableChart.tsx

@@ -219,7 +219,11 @@ export const Table = ({
     <div className="overflow-auto h-100 fs-8" ref={tableContainerRef}>
       <table
         className="w-100"
-        style={{ tableLayout: 'fixed', borderCollapse: 'collapse' }}
+        style={{
+          tableLayout: 'fixed',
+          borderCollapse: 'collapse',
+          fontFamily: 'var(--font-ibm-plex-mono)',
+        }}
       >
         <thead
           style={{

packages/app/src/SessionsPage.tsx

@@ -13,13 +13,19 @@ import {
 } from '@hyperdx/common-utils/dist/types';
 import {
   Alert,
+  Anchor,
   Box,
   Button,
-  Center,
+  Card,
+  Code,
+  Divider,
   Flex,
   Group,
   Stack,
+  Stepper,
   Text,
+  ThemeIcon,
+  Title,
 } from '@mantine/core';
 import {
   IconDeviceLaptop,
@@ -526,44 +532,68 @@ SessionsPage.getLayout = withAppNav;
 function SessionSetupInstructions() {
   return (
     <>
-      <Stack w={500} mx="auto" mt="xl" gap="xxs">
-        <IconDeviceLaptop size={32} className="text-muted" />
-        <Text c="gray" fw={500} size="xs">
-          Instructions
-        </Text>
-        <Text c="gray">
-          You can set up Session Replays when the HyperDX Otel Collector is
-          used.
-        </Text>
-        <Text c="gray" fw={500} mt="sm">
-          1. Create a new source with <strong>Session</strong> type
-        </Text>
-        <Text c="dimmed" size="xs">
-          Go to Team Settings, click <strong>Add Source</strong> under Sources
-          section, and select <strong>Session</strong> as the source type.
-        </Text>
-        <Text c="gray" fw={500} mt="sm">
-          2. Choose the <strong>hyperdx_sessions</strong> table
-        </Text>
-        <Text c="dimmed" size="xs">
-          Select the <strong>hyperdx_sessions</strong> table from the dropdown,
-          and select the corresponding trace source.
-        </Text>
-
-        <Text c="gray" fw={500} mt="sm">
-          3. Start recording sessions
-        </Text>
-        <Text c="dimmed" size="xs">
-          Install the{' '}
-          <a
-            href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/browser"
-            target="_blank"
-          >
-            HyperDX Browser Integration
-          </a>{' '}
-          to start recording sessions.
-        </Text>
-      </Stack>
+      <Card w={500} mx="auto" mt="xl" p="xl" withBorder>
+        <Stack gap="lg">
+          <Stack align="center" gap="xs">
+            <ThemeIcon size={56} radius="xl" variant="light" color="gray">
+              <IconDeviceLaptop size={32} />
+            </ThemeIcon>
+            <Title order={3} fw={600}>
+              Set up session replays
+            </Title>
+            <Text size="sm" c="dimmed" ta="center">
+              Follow these steps to start recording and viewing session replays
+              with the HyperDX Otel Collector.
+            </Text>
+          </Stack>
+          <Divider />
+          <Stepper active={-1} orientation="vertical" size="md">
+            <Stepper.Step
+              label={
+                <>
+                  Create a new source with <Code>Session</Code> type
+                </>
+              }
+              description={
+                <>
+                  Go to Team Settings, click <Code>Add Source</Code> under
+                  Sources section, and select <Code>Session</Code> as the source
+                  type.
+                </>
+              }
+            />
+            <Stepper.Step
+              label={
+                <>
+                  Choose the <Code>hyperdx_sessions</Code> table
+                </>
+              }
+              description={
+                <>
+                  Select the <Code>hyperdx_sessions</Code> table from the
+                  dropdown, and select the corresponding trace source.
+                </>
+              }
+            />
+            <Stepper.Step
+              label="Start recording sessions"
+              description={
+                <>
+                  Install the{' '}
+                  <Anchor
+                    href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/browser"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    HyperDX Browser Integration
+                  </Anchor>{' '}
+                  to start recording sessions.
+                </>
+              }
+            />
+          </Stepper>
+        </Stack>
+      </Card>
     </>
   );
 }

packages/app/src/components/HyperJson.module.scss

@@ -5,6 +5,7 @@
   flex-direction: column;
   padding: var(--mantine-spacing-xs);
   font-size: 12px;
+  font-family: var(--font-ibm-plex-mono);
 }
 
 .withTabulate {

packages/app/styles/LogTable.module.scss

@@ -16,6 +16,7 @@ $button-height: 18px;
   border-spacing: 0;
   border-collapse: separate;
   background: var(--log-table-bg);
+  font-family: var(--font-ibm-plex-mono);
 }
 
 .tableHead {