Update session details styles to closer match latest Figma

[t3chguy]

For #2147

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	17225dd
Status:	✅  Deploy successful!
Preview URL:	https://be3e0bd1.matrix-authentication-service-docs.pages.dev
Branch Preview URL:	https://t3chguy-fix-2147.matrix-authentication-service-docs.pages.dev

View logs

[sandhose]

The generic session details component still feels messy, but I'm fine with refactoring that later.

Left a few comments but other than that LGTM

[t3chguy]

The generic session details component still feels messy, but I'm fine with refactoring that later.

That component gets deleted by the end of the PR, no? Or do you mean the details prop behaviour?

[sandhose]

That component gets deleted by the end of the PR, no? Or do you mean the details prop behaviour?

I meant that this component has a lot of logic in it. Sure, it avoids repeating stuff across the three sessions, but I prefer the approach of composing different components like on the session card:

matrix-authentication-service/frontend/src/components/BrowserSession.tsx

Lines 119 to 163 in 6eb6209

	return (
	<Card.Root>
	<Card.LinkBody
	to="/sessions/$id"
	params={{ id: data.id }}
	disabled={!!data.finishedAt}
	>
	<Card.Header type={deviceType}>
	<Card.Name name={deviceName} />
	{clientName && <Card.Client name={clientName} />}
	</Card.Header>
	<Card.Metadata>
	{lastActiveAt && !isCurrent && (
	<Card.Info label={t("frontend.session.last_active_label")}>
	<LastActive lastActive={lastActiveAt} />
	</Card.Info>
	)}
	<Card.Info label={t("frontend.session.signed_in_label")}>
	<DateTime datetime={createdAt} />
	</Card.Info>
	{isCurrent && (
	<Badge kind="success" className="self-center">
	{t("frontend.session.current")}
	</Badge>
	)}
	</Card.Metadata>
	</Card.LinkBody>
	{!data.finishedAt && (
	<Card.Action>
	<EndSessionButton endSession={onSessionEnd}>
	<Card.Body compact>
	<Card.Header type={deviceType}>
	<Card.Name name={deviceName} />
	{clientName && <Card.Client name={clientName} />}
	</Card.Header>
	</Card.Body>
	</EndSessionButton>
	</Card.Action>
	)}
	</Card.Root>
	);

[t3chguy]

it avoids repeating stuff across the three sessions

I think this is key to a consistent coherent design, otherwise you have to manually sync the 3 session components for copy and order to keep them consistent with each other. Personally not a fan, but at the end of the day this is your project

[sandhose]

I'm fine with leaving it like that for now 👍