style: align the activity feed to the Figma frame

Measured against frame 4979-39243.

- Text style updates.
- Adds a `text-xxs` theme token (10px/16) for the step below Tailwind's
  built-in scale, matching Figma's own `text-xxs`.
- Wraps the feed in the single bordered panel the design shows, with a
  divider under the tab row, replacing the loose filters + ringed list.
- Drops the count from "All activity" and lets the remaining counts
  inherit their label colour rather than rendering muted.
- TabsTrigger has no display utility, so the `gap-*` between label and
  count was inert; set inline-flex here.

Signed-off-by: Anna Effort <anna.effort@ibm.com>

Author: a-effort

src/components/dashboard/ActivityFilters.tsx

@@ -47,9 +47,13 @@ export function ActivityFilters({
       <Tabs value={filter} onValueChange={(value) => onFilterChange(value as ActivityFilter)}>
         <TabsList>
           {ACTIVITY_FILTERS.map((id) => (
-            <TabsTrigger key={id} value={id} className="gap-1.5">
+            <TabsTrigger
+              key={id}
+              value={id}
+              className="inline-flex items-center gap-1.5 text-xs font-medium"
+            >
               {intl.formatMessage({ id: FILTER_LABEL[id] })}
-              <span className="text-xs text-muted-foreground">{counts[id]}</span>
+              {id !== "all" && <span>{counts[id]}</span>}
             </TabsTrigger>
           ))}
         </TabsList>

src/components/dashboard/ActivityRow.tsx

@@ -28,14 +28,14 @@ export function ActivityRow({ item }: { item: ActivityItem }) {
       <Icon className={cn("mt-0.5 size-4 shrink-0", className)} aria-hidden />
       <span className="sr-only">{intl.formatMessage({ id: labelId })}</span>
       <div className="min-w-0 flex-1">
-        <p className="text-sm font-medium text-foreground">{item.title}</p>
-        <p className="text-sm text-muted-foreground">{item.description}</p>
+        <p className="text-xs text-foreground">{item.title}</p>
+        <p className="text-xxs font-medium text-muted-foreground">{item.description}</p>
       </div>
       {relative && (
         <time
           dateTime={item.timestamp}
           title={item.timestamp}
-          className="shrink-0 pt-0.5 text-xs text-muted-foreground"
+          className="shrink-0 text-xxs font-medium text-muted-foreground"
         >
           {relative}
         </time>

src/components/dashboard/ActivityView.test.tsx

@@ -106,7 +106,7 @@ describe("ActivityView", () => {
     feed(ITEMS);
     renderWithProviders(<ActivityView />);
 
-    expect(within(screen.getByRole("tab", { name: /All activity/ })).getByText("5")).toBeVisible();
+    expect(screen.getByRole("tab", { name: "All activity" })).toBeInTheDocument();
     expect(within(screen.getByRole("tab", { name: /Errors/ })).getByText("2")).toBeVisible();
     expect(within(screen.getByRole("tab", { name: /Warnings/ })).getByText("1")).toBeVisible();
     expect(screen.queryByRole("tab", { name: /Info/ })).not.toBeInTheDocument();

src/components/dashboard/ActivityView.tsx

@@ -83,19 +83,23 @@ export function ActivityView() {
   }
 
   return (
-    <div className="flex flex-col gap-4">
-      <ActivityFilters
-        filter={filter}
-        onFilterChange={setFilter}
-        counts={counts}
-        search={search}
-        onSearchChange={setSearch}
-      />
+    <div className="rounded-lg border border-border bg-card">
+      <div className="px-4 py-3">
+        <ActivityFilters
+          filter={filter}
+          onFilterChange={setFilter}
+          counts={counts}
+          search={search}
+          onSearchChange={setSearch}
+        />
+      </div>
       {visible.length === 0 ? (
-        <EmptyStatePlaceholder messageId="dashboard.home.activity.noMatches" />
+        <div className="border-t border-border px-4 py-8 text-sm text-muted-foreground">
+          {intl.formatMessage({ id: "dashboard.home.activity.noMatches" })}
+        </div>
       ) : (
         <ul
-          className="divide-y divide-border rounded-lg ring-1 ring-foreground/10"
+          className="divide-y divide-border border-t border-border"
           aria-label={intl.formatMessage({ id: "dashboard.home.card.activity" })}
         >
           {visible.map((item) => (

src/index.css

@@ -50,6 +50,9 @@
   --radius-lg: var(--radius);
   --font-heading: var(--font-sans);
   --font-sans: "Inter Variable", sans-serif;
+  /* Figma's `text-xxs` step, below Tailwind's built-in scale. */
+  --text-xxs: 10px;
+  --text-xxs--line-height: 16px;
   --color-chart-5: var(--chart-5);
   --color-chart-4: var(--chart-4);
   --color-chart-3: var(--chart-3);