Update session details styles to closer match latest Figma (#2439)

Co-authored-by: Quentin Gliech <quenting@element.io>

frontend/locales/en.json

@@ -50,8 +50,7 @@
       }
     },
     "browser_session_details": {
-      "current_badge": "Current",
-      "session_details_title": "Session"
+      "current_badge": "Current"
     },
     "browser_sessions_overview": {
       "body:one": "{{count}} active session",
@@ -60,7 +59,7 @@
       "view_all_button": "View all"
     },
     "compat_session_detail": {
-      "client_details_title": "Client",
+      "client_details_title": "Client info",
       "name": "Name",
       "session_details_title": "Session"
     },
@@ -92,16 +91,14 @@
     "not_found_alert_title": "Not found.",
     "not_logged_in_alert": "You're not logged in.",
     "oauth2_client_detail": {
-      "details_title": "Client",
-      "id": "Client ID",
+      "details_title": "Client info",
       "name": "Name",
       "policy": "Policy",
       "terms": "Terms of service"
     },
     "oauth2_session_detail": {
       "client_details_name": "Name",
-      "client_title": "Client",
-      "session_details_title": "Session"
+      "client_title": "Client info"
     },
     "pagination_controls": {
       "total": "Total: {{totalCount}}"
@@ -120,21 +117,19 @@
       }
     },
     "session": {
+      "client_id_label": "Client ID",
       "current": "Current",
       "device_id_label": "Device ID",
       "finished_label": "Finished",
-      "id_label": "ID",
       "ip_label": "IP Address",
       "last_active_label": "Last Active",
-      "last_auth_label": "Last Authentication",
       "name_for_platform": "{{name}} for {{platform}}",
       "scopes_label": "Scopes",
       "signed_in_label": "Signed in",
+      "title": "Device details",
       "unknown_browser": "Unknown browser",
       "unknown_device": "Unknown device",
-      "uri_label": "Uri",
-      "user_id_label": "User ID",
-      "username_label": "User name"
+      "uri_label": "Uri"
     },
     "session_detail": {
       "alert": {
@@ -186,5 +181,16 @@
       },
       "resend_code": "Resend code"
     }
+  },
+  "mas": {
+    "scope": {
+      "edit_profile": "Edit your profile and contact details",
+      "manage_sessions": "Manage your devices and sessions",
+      "mas_admin": "Administer any user on the matrix-authentication-service",
+      "send_messages": "Send new messages on your behalf",
+      "synapse_admin": "Administer the Synapse homeserver",
+      "view_messages": "View your existing messages and data",
+      "view_profile": "See your profile info and contact details"
+    }
   }
 }

frontend/src/components/Block/Block.module.css

@@ -17,9 +17,17 @@
     width: 100%;
     color: var(--cpd-color-text-primary);
     padding-bottom: var(--cpd-space-5x);
-    border-bottom: 1px solid var(--cpd-color-border-interactive-secondary);
 
     &:last-child {
         border-bottom: none;
     }
-}
+}
+
+.title {
+  padding-bottom: var(--cpd-space-2x);
+  border-bottom: var(--cpd-border-width-2) solid var(--cpd-color-gray-400);
+
+  /* Workaround compound design tokens heading style being broken */
+  font-weight: var(--cpd-font-weight-semibold) !important;
+  font-size: var(--cpd-font-size-heading-sm) !important;
+}

frontend/src/components/Block/Block.test.tsx

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+// @vitest-environment happy-dom
+
 import { create } from "react-test-renderer";
 import { describe, expect, it } from "vitest";
 

frontend/src/components/Block/Block.tsx

@@ -12,18 +12,27 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { Heading } from "@vector-im/compound-web";
 import cx from "classnames";
+import { ReactNode } from "react";
 
 import styles from "./Block.module.css";
 
 type Props = React.PropsWithChildren<{
+  title?: ReactNode;
   className?: string;
   highlight?: boolean;
 }>;
 
-const Block: React.FC<Props> = ({ children, className, highlight }) => {
+const Block: React.FC<Props> = ({ children, className, highlight, title }) => {
   return (
     <div className={cx(styles.block, className)} data-active={highlight}>
+      {title && (
+        <Heading as="h4" size="sm" weight="semibold" className={styles.title}>
+          {title}
+        </Heading>
+      )}
+
       {children}
     </div>
   );

frontend/src/components/BlockList/BlockList.module.css

@@ -17,5 +17,5 @@
     display: flex;
     flex-direction: column;
     align-content: flex-start;
-    gap: var(--cpd-space-5x);
-}
+    gap: var(--cpd-space-8x);
+}

frontend/src/components/BlockList/BlockList.test.tsx

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+// @vitest-environment happy-dom
+
 import { create } from "react-test-renderer";
 import { describe, expect, it } from "vitest";
 

frontend/src/components/Client/OAuth2ClientDetail.tsx

@@ -57,10 +57,6 @@ const OAuth2ClientDetail: React.FC<Props> = ({ client }) => {
 
   const details = [
     { label: t("frontend.oauth2_client_detail.name"), value: data.clientName },
-    {
-      label: t("frontend.oauth2_client_detail.id"),
-      value: <code>{data.clientId}</code>,
-    },
     {
       label: t("frontend.oauth2_client_detail.terms"),
       value: data.tosUri && <FriendlyExternalLink uri={data.tosUri} />,

frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap

@@ -17,89 +17,65 @@ exports[`<OAuth2ClientDetail> > renders client details 1`] = `
     <div
       class="_block_17898c"
     >
-      <h6
-        class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64"
+      <h4
+        class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 _title_17898c"
       >
-        Client
-      </h6>
-      <ul
-        class="_list_040867"
+        Client info
+      </h4>
+      <div
+        class="_wrapper_040867"
       >
-        <li
-          class="_detailRow_040867"
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Name
-          </p>
+          </h5>
           <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+            class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 _datumValue_040867"
           >
             Test Client
           </p>
-        </li>
-        <li
-          class="_detailRow_040867"
+        </div>
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            Client ID
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <code>
-              client-id
-            </code>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Terms of service
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <a
+            class="_link_1mzip_17 _externalLink_a97355"
+            data-kind="primary"
+            href="https://client.org/tos"
+            rel="noreferrer noopener"
+            target="_blank"
           >
-            <a
-              class="_link_1mzip_17 _externalLink_a97355"
-              data-kind="primary"
-              href="https://client.org/tos"
-              rel="noreferrer noopener"
-              target="_blank"
-            >
-              client.org/tos
-            </a>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
+            client.org/tos
+          </a>
+        </div>
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Policy
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <a
+            class="_link_1mzip_17 _externalLink_a97355"
+            data-kind="primary"
+            href="https://client.org/policy"
+            rel="noreferrer noopener"
+            target="_blank"
           >
-            <a
-              class="_link_1mzip_17 _externalLink_a97355"
-              data-kind="primary"
-              href="https://client.org/policy"
-              rel="noreferrer noopener"
-              target="_blank"
-            >
-              client.org/policy
-            </a>
-          </p>
-        </li>
-      </ul>
+            client.org/policy
+          </a>
+        </div>
+      </div>
     </div>
   </div>
 </div>

frontend/src/components/Session/LastActive.tsx

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import cx from "classnames";
 import { differenceInSeconds, parseISO } from "date-fns";
 import { useTranslation } from "react-i18next";
 
@@ -27,7 +28,8 @@ const INACTIVE_MIN_AGE = 60 * 60 * 24 * 90;
 const LastActive: React.FC<{
   lastActive: Date | string;
   now?: Date | string;
-}> = ({ lastActive: lastActiveProps, now: nowProps }) => {
+  className?: string;
+}> = ({ lastActive: lastActiveProps, now: nowProps, className }) => {
   const { t } = useTranslation();
 
   const lastActive =
@@ -44,21 +46,21 @@ const LastActive: React.FC<{
   const formattedDate = formatDate(lastActive);
   if (differenceInSeconds(now, lastActive) <= ACTIVE_NOW_MAX_AGE) {
     return (
-      <span title={formattedDate} className={styles.active}>
+      <span title={formattedDate} className={cx(styles.active, className)}>
         {t("frontend.last_active.active_now")}
       </span>
     );
   }
   if (differenceInSeconds(now, lastActive) > INACTIVE_MIN_AGE) {
     return (
-      <span title={formattedDate}>
+      <span title={formattedDate} className={className}>
         {t("frontend.last_active.inactive_90_days")}
       </span>
     );
   }
   const relativeDate = formatReadableDate(lastActive, now);
   return (
-    <span title={formattedDate}>
+    <span title={formattedDate} className={className}>
       {t("frontend.last_active.active_date", { relativeDate })}
     </span>
   );

frontend/src/components/SessionDetail/BrowserSessionDetail.tsx

@@ -21,7 +21,6 @@ import BlockList from "../BlockList/BlockList";
 import { useEndBrowserSession } from "../BrowserSession";
 import DateTime from "../DateTime";
 import EndSessionButton from "../Session/EndSessionButton";
-import LastActive from "../Session/LastActive";
 
 import styles from "./BrowserSessionDetail.module.css";
 import SessionDetails from "./SessionDetails";
@@ -81,54 +80,7 @@ const BrowserSessionDetail: React.FC<Props> = ({ session, isCurrent }) => {
       ]
     : [];
 
-  const lastActiveIp = data.lastActiveIp
-    ? [
-        {
-          label: t("frontend.session.ip_label"),
-          value: <code>{data.lastActiveIp}</code>,
-        },
-      ]
-    : [];
-
-  const lastActiveAt = data.lastActiveAt
-    ? [
-        {
-          label: t("frontend.session.last_active_label"),
-          value: <LastActive lastActive={parseISO(data.lastActiveAt)} />,
-        },
-      ]
-    : [];
-
-  const lastAuthentication = data.lastAuthentication
-    ? [
-        {
-          label: t("frontend.session.last_auth_label"),
-          value: (
-            <DateTime datetime={parseISO(data.lastAuthentication.createdAt)} />
-          ),
-        },
-      ]
-    : [];
-
-  const sessionDetails = [
-    { label: t("frontend.session.id_label"), value: <code>{data.id}</code> },
-    {
-      label: t("frontend.session.user_id_label"),
-      value: <code>{data.user.id}</code>,
-    },
-    {
-      label: t("frontend.session.username_label"),
-      value: <code>{data.user.username}</code>,
-    },
-    {
-      label: t("frontend.session.signed_in_label"),
-      value: <DateTime datetime={data.createdAt} />,
-    },
-    ...finishedAt,
-    ...lastActiveAt,
-    ...lastActiveIp,
-    ...lastAuthentication,
-  ];
+  const sessionDetails = [...finishedAt];
 
   return (
     <BlockList>
@@ -139,7 +91,14 @@ const BrowserSessionDetail: React.FC<Props> = ({ session, isCurrent }) => {
       )}
       <SessionHeader to="/sessions/browsers">{sessionName}</SessionHeader>
       <SessionDetails
-        title={t("frontend.browser_session_details.session_details_title")}
+        title={t("frontend.session.title")}
+        lastActive={data.lastActiveAt ? parseISO(data.lastActiveAt) : undefined}
+        signedIn={
+          data.lastAuthentication
+            ? parseISO(data.lastAuthentication.createdAt)
+            : undefined
+        }
+        ipAddress={data.lastActiveIp ?? undefined}
         details={sessionDetails}
       />
       {!data.finishedAt && <EndSessionButton endSession={onSessionEnd} />}

frontend/src/components/SessionDetail/CompatSessionDetail.tsx

@@ -22,7 +22,6 @@ import { END_SESSION_MUTATION, simplifyUrl } from "../CompatSession";
 import DateTime from "../DateTime";
 import ExternalLink from "../ExternalLink/ExternalLink";
 import EndSessionButton from "../Session/EndSessionButton";
-import LastActive from "../Session/LastActive";
 
 import SessionDetails from "./SessionDetails";
 import SessionHeader from "./SessionHeader";
@@ -69,38 +68,7 @@ const CompatSessionDetail: React.FC<Props> = ({ session }) => {
       ]
     : [];
 
-  const lastActiveIp = data.lastActiveIp
-    ? [
-        {
-          label: t("frontend.session.ip_label"),
-          value: <code>{data.lastActiveIp}</code>,
-        },
-      ]
-    : [];
-
-  const lastActiveAt = data.lastActiveAt
-    ? [
-        {
-          label: t("frontend.session.last_active_label"),
-          value: <LastActive lastActive={parseISO(data.lastActiveAt)} />,
-        },
-      ]
-    : [];
-
-  const sessionDetails = [
-    { label: t("frontend.session.id_label"), value: <code>{data.id}</code> },
-    {
-      label: t("frontend.session.device_id_label"),
-      value: <code>{data.deviceId}</code>,
-    },
-    {
-      label: t("frontend.session.signed_in_label"),
-      value: <DateTime datetime={parseISO(data.createdAt)} />,
-    },
-    ...finishedAt,
-    ...lastActiveAt,
-    ...lastActiveIp,
-  ];
+  const sessionDetails = [...finishedAt];
 
   const clientDetails: { label: string; value: string | JSX.Element }[] = [];
 
@@ -124,6 +92,10 @@ const CompatSessionDetail: React.FC<Props> = ({ session }) => {
       <SessionHeader to="/sessions">{data.deviceId || data.id}</SessionHeader>
       <SessionDetails
         title={t("frontend.compat_session_detail.session_details_title")}
+        deviceId={data.deviceId}
+        signedIn={parseISO(data.createdAt)}
+        lastActive={data.lastActiveAt ? parseISO(data.lastActiveAt) : undefined}
+        ipAddress={data.lastActiveIp ?? undefined}
         details={sessionDetails}
       />
       {clientDetails.length > 0 ? (

frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx

@@ -24,7 +24,6 @@ import { Link } from "../Link";
 import { END_SESSION_MUTATION } from "../OAuth2Session";
 import ClientAvatar from "../Session/ClientAvatar";
 import EndSessionButton from "../Session/EndSessionButton";
-import LastActive from "../Session/LastActive";
 
 import SessionDetails from "./SessionDetails";
 import SessionHeader from "./SessionHeader";
@@ -62,8 +61,6 @@ const OAuth2SessionDetail: React.FC<Props> = ({ session }) => {
 
   const deviceId = getDeviceIdFromScope(data.scope);
 
-  const scopes = data.scope.split(" ");
-
   const finishedAt = data.finishedAt
     ? [
         {
@@ -73,48 +70,7 @@ const OAuth2SessionDetail: React.FC<Props> = ({ session }) => {
       ]
     : [];
 
-  const lastActiveIp = data.lastActiveIp
-    ? [
-        {
-          label: t("frontend.session.ip_label"),
-          value: <code>{data.lastActiveIp}</code>,
-        },
-      ]
-    : [];
-
-  const lastActiveAt = data.lastActiveAt
-    ? [
-        {
-          label: t("frontend.session.last_active_label"),
-          value: <LastActive lastActive={parseISO(data.lastActiveAt)} />,
-        },
-      ]
-    : [];
-
-  const sessionDetails = [
-    { label: t("frontend.session.id_label"), value: <code>{data.id}</code> },
-    {
-      label: t("frontend.session.device_id_label"),
-      value: <code>{deviceId}</code>,
-    },
-    {
-      label: t("frontend.session.signed_in_label"),
-      value: <DateTime datetime={data.createdAt} />,
-    },
-    ...finishedAt,
-    ...lastActiveAt,
-    ...lastActiveIp,
-    {
-      label: t("frontend.session.scopes_label"),
-      value: (
-        <span>
-          {scopes.map((scope) => (
-            <code key={scope}>{scope}</code>
-          ))}
-        </span>
-      ),
-    },
-  ];
+  const sessionDetails = [...finishedAt];
 
   const clientTitle = (
     <Link to="/clients/$id" params={{ id: data.client.id }}>
@@ -136,7 +92,7 @@ const OAuth2SessionDetail: React.FC<Props> = ({ session }) => {
       ),
     },
     {
-      label: t("frontend.session.id_label"),
+      label: t("frontend.session.client_id_label"),
       value: <code>{data.client.clientId}</code>,
     },
     {
@@ -157,7 +113,12 @@ const OAuth2SessionDetail: React.FC<Props> = ({ session }) => {
     <BlockList>
       <SessionHeader to="/sessions">{deviceId || data.id}</SessionHeader>
       <SessionDetails
-        title={t("frontend.oauth2_session_detail.session_details_title")}
+        title={t("frontend.session.title")}
+        lastActive={data.lastActiveAt ? parseISO(data.lastActiveAt) : undefined}
+        signedIn={parseISO(data.createdAt)}
+        deviceId={deviceId}
+        ipAddress={data.lastActiveIp ?? undefined}
+        scopes={data.scope.split(" ")}
         details={sessionDetails}
       />
       <SessionDetails title={clientTitle} details={clientDetails} />

frontend/src/components/SessionDetail/SessionDetails.module.css

@@ -13,28 +13,51 @@
  * limitations under the License.
  */
 
-.list {
-    display: flex;
-    flex-direction: column;
-    margin-top: var(--cpd-space-1x);
-    gap: var(--cpd-space-1x);
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cpd-space-4x);
+  margin-bottom: var(--cpd-space-4x);
+  margin-top: var(--cpd-space-8x);
 }
 
-.detail-row {
-    display: flex;
-    flex-direction: row;
-    gap: var(--cpd-space-4x);
+.wrapper h5 {
+  color: var(--cpd-color-text-secondary);
 }
 
-.detail-label {
-    flex: 0 0 20%;
-    color: var(--cpd-color-text-secondary);
+.wrapper .datum {
+  width: max-content;
 }
 
-.detail-value {
-    overflow-wrap: anywhere;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--cpd-space-1x);
+.datum {
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+.datum-value {
+  font-size: var(--cpd-font-size-body-md);
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.scope-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cpd-space-scale);
+  border-radius: var(--cpd-space-5x);
+  overflow: hidden;
+}
+
+.scope {
+  background: var(--cpd-color-bg-subtle-secondary);
+  padding: var(--cpd-space-3x) var(--cpd-space-5x);
+  display: flex;
+  align-items: center;
+  gap: var(--cpd-space-3x);
+}
+
+.scope svg {
+  inline-size: var(--cpd-space-6x);
+  block-size: var(--cpd-space-6x);
+  color: var(--cpd-color-icon-tertiary);
 }

frontend/src/components/SessionDetail/SessionDetails.tsx

@@ -1,4 +1,4 @@
-// Copyright 2022 The Matrix.org Foundation C.I.C.
+// Copyright 2022-2024 The Matrix.org Foundation C.I.C.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -12,39 +12,155 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { H6, Body } from "@vector-im/compound-web";
+import IconChat from "@vector-im/compound-design-tokens/icons/chat.svg?react";
+import IconComputer from "@vector-im/compound-design-tokens/icons/computer.svg?react";
+import IconError from "@vector-im/compound-design-tokens/icons/error.svg?react";
+import IconInfo from "@vector-im/compound-design-tokens/icons/info.svg?react";
+import IconSend from "@vector-im/compound-design-tokens/icons/send.svg?react";
+import IconUserProfile from "@vector-im/compound-design-tokens/icons/user-profile.svg?react";
+import { Text } from "@vector-im/compound-web";
 import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
 
 import Block from "../Block/Block";
+import DateTime from "../DateTime";
+import LastActive from "../Session/LastActive";
 
 import styles from "./SessionDetails.module.css";
 
-type Detail = { label: string; value: string | ReactNode };
+export type Detail = { label: string; value: ReactNode };
 type Props = {
   title: string | ReactNode;
-  details: Detail[];
+  lastActive?: Date;
+  signedIn?: Date;
+  deviceId?: string;
+  ipAddress?: string;
+  scopes?: string[];
+  details?: Detail[];
 };
 
-const DetailRow: React.FC<Detail> = ({ label, value }) => (
-  <li className={styles.detailRow}>
-    <Body size="sm" weight="semibold" className={styles.detailLabel}>
-      {label}
-    </Body>
-    <Body className={styles.detailValue} size="sm">
-      {value}
-    </Body>
-  </li>
-);
+const Scope: React.FC<{ scope: string }> = ({ scope }) => {
+  const { t } = useTranslation();
+  // Filter out "urn:matrix:org.matrix.msc2967.client:device:"
+  if (scope.startsWith("urn:matrix:org.matrix.msc2967.client:device:")) {
+    return null;
+  }
+
+  // Needs to be manually kept in sync with /templates/components/scope.html
+  const scopeMap: Record<string, [typeof IconInfo, string][]> = {
+    openid: [[IconUserProfile, t("mas.scope.view_profile")]],
+    "urn:mas:graphql:*": [
+      [IconInfo, t("mas.scope.edit_profile")],
+      [IconComputer, t("mas.scope.manage_sessions")],
+    ],
+    "urn:matrix:org.matrix.msc2967.client:api:*": [
+      [IconChat, t("mas.scope.view_messages")],
+      [IconSend, t("mas.scope.send_messages")],
+    ],
+    "urn:synapse:admin:*": [[IconError, t("mas.scope.synapse_admin")]],
+    "urn:mas:admin": [[IconError, t("mas.scope.mas_admin")]],
+  };
+
+  const mappedScopes: [typeof IconInfo, string][] = scopeMap[scope] ?? [
+    [IconInfo, scope],
+  ];
 
-const SessionDetails: React.FC<Props> = ({ title, details }) => {
   return (
-    <Block>
-      <H6>{title}</H6>
-      <ul className={styles.list}>
-        {details.map(({ label, value }) => (
-          <DetailRow key={label} label={label} value={value} />
+    <>
+      {mappedScopes.map(([Icon, text], i) => (
+        <li className={styles.scope} key={i}>
+          <Icon />
+          <Text size="md" weight="medium">
+            {text}
+          </Text>
+        </li>
+      ))}
+    </>
+  );
+};
+
+const Datum: React.FC<{ label: string; value: ReactNode }> = ({
+  label,
+  value,
+}) => {
+  return (
+    <div className={styles.datum}>
+      <Text size="sm" weight="regular" as="h5">
+        {label}
+      </Text>
+      {typeof value === "string" ? (
+        <Text size="md" className={styles.datumValue}>
+          {value}
+        </Text>
+      ) : (
+        value
+      )}
+    </div>
+  );
+};
+
+const SessionDetails: React.FC<Props> = ({
+  title,
+  lastActive,
+  signedIn,
+  deviceId,
+  ipAddress,
+  details,
+  scopes,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Block title={title}>
+      <div className={styles.wrapper}>
+        {lastActive && (
+          <Datum
+            label={t("frontend.session.last_active_label")}
+            value={
+              <LastActive
+                className={styles.datumValue}
+                lastActive={lastActive}
+              />
+            }
+          />
+        )}
+        {signedIn && (
+          <Datum
+            label={t("frontend.session.signed_in_label")}
+            value={
+              <DateTime className={styles.datumValue} datetime={signedIn} />
+            }
+          />
+        )}
+        {deviceId && (
+          <Datum
+            label={t("frontend.session.device_id_label")}
+            value={deviceId}
+          />
+        )}
+        {ipAddress && (
+          <Datum
+            label={t("frontend.session.ip_label")}
+            value={<code className={styles.datumValue}>{ipAddress}</code>}
+          />
+        )}
+        {details?.map(({ label, value }) => (
+          <Datum key={label} label={label} value={value} />
         ))}
-      </ul>
+      </div>
+
+      {scopes?.length && (
+        <Datum
+          label={t("frontend.session.scopes_label")}
+          value={
+            <ul className={styles.scopeList}>
+              {scopes.map((scope) => (
+                <Scope key={scope} scope={scope} />
+              ))}
+            </ul>
+          }
+        />
+      )}
     </Block>
   );
 };

frontend/src/components/SessionDetail/SessionHeader.module.css

@@ -17,14 +17,14 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    gap: var(--cpd-space-2x);
+    gap: var(--cpd-space-4x);
     align-items: center;
 }
 
 .back-button {
     display: block;
-    inline-size: var(--cpd-space-8x);
-    block-size: var(--cpd-space-8x);
+    inline-size: var(--cpd-space-7x);
+    block-size: var(--cpd-space-7x);
 
     /* the icon is 0.75 the size of the button, so add padding to put it in the middle */
     padding: var(--cpd-space-1x);
@@ -35,13 +35,13 @@
     cursor: pointer;
     border-radius: 50%;
     position: relative;
-    background: transparent;
+    background-color: var(--cpd-color-bg-subtle-secondary);
     line-height: 0px;
 }
 
 .back-button svg {
-    inline-size: var(--cpd-space-6x);
-    block-size: var(--cpd-space-6x);
+    inline-size: var(--cpd-space-5x);
+    block-size: var(--cpd-space-5x);
 }
 
 .back-button[aria-disabled="true"] {

frontend/src/components/SessionDetail/SessionHeader.tsx

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { Link } from "@tanstack/react-router";
-import IconArrowLeft from "@vector-im/compound-design-tokens/icons/arrow-left.svg?react";
+import IconChevronLeft from "@vector-im/compound-design-tokens/icons/chevron-left.svg?react";
 import { H3 } from "@vector-im/compound-web";
 
 import styles from "./SessionHeader.module.css";
@@ -25,7 +25,7 @@ const SessionHeader: React.FC<React.ComponentProps<typeof Link>> = ({
   return (
     <header className={styles.header}>
       <Link className={styles.backButton} {...rest}>
-        <IconArrowLeft />
+        <IconChevronLeft />
       </Link>
       <H3>{children}</H3>
     </header>

frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0Z"
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.212-.325A1.107 1.107 0 0 1 8.425 12c0-.133.02-.258.063-.375A.877.877 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.949.949 0 0 1-.7-.275Z"
           />
         </svg>
       </a>
@@ -34,148 +34,118 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
     <div
       class="_block_17898c"
     >
-      <h6
-        class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64"
+      <h4
+        class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 _title_17898c"
       >
         Session
-      </h6>
-      <ul
-        class="_list_040867"
+      </h4>
+      <div
+        class="_wrapper_040867"
       >
-        <li
-          class="_detailRow_040867"
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            ID
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <code>
-              session-id
-            </code>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            Device ID
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <code>
-              abcd1234
-            </code>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            Signed in
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <time
-              datetime="2023-06-29T03:35:17Z"
-            >
-              Thu, 29 Jun 2023, 03:35
-            </time>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Last Active
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <span
+            class="_datumValue_040867"
+            title="Sat, 29 Jul 2023, 03:35"
           >
-            <span
-              title="Sat, 29 Jul 2023, 03:35"
-            >
-              Inactive for 90+ days
-            </span>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
+            Inactive for 90+ days
+          </span>
+        </div>
+        <div
+          class="_datum_040867"
         >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+          >
+            Signed in
+          </h5>
+          <time
+            class="_datumValue_040867"
+            datetime="2023-06-29T03:35:17Z"
+          >
+            Thu, 29 Jun 2023, 03:35
+          </time>
+        </div>
+        <div
+          class="_datum_040867"
+        >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+          >
+            Device ID
+          </h5>
           <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+            class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 _datumValue_040867"
+          >
+            abcd1234
+          </p>
+        </div>
+        <div
+          class="_datum_040867"
+        >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             IP Address
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <code
+            class="_datumValue_040867"
           >
-            <code>
-              1.2.3.4
-            </code>
-          </p>
-        </li>
-      </ul>
+            1.2.3.4
+          </code>
+        </div>
+      </div>
     </div>
     <div
       class="_block_17898c"
     >
-      <h6
-        class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64"
+      <h4
+        class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 _title_17898c"
       >
-        Client
-      </h6>
-      <ul
-        class="_list_040867"
+        Client info
+      </h4>
+      <div
+        class="_wrapper_040867"
       >
-        <li
-          class="_detailRow_040867"
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Name
-          </p>
+          </h5>
           <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+            class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 _datumValue_040867"
           >
             element.io
           </p>
-        </li>
-        <li
-          class="_detailRow_040867"
+        </div>
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Uri
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <a
+            class="_link_1mzip_17 _externalLink_a97355"
+            data-kind="primary"
+            href="https://element.io"
+            rel="noreferrer noopener"
+            target="_blank"
           >
-            <a
-              class="_link_1mzip_17 _externalLink_a97355"
-              data-kind="primary"
-              href="https://element.io"
-              rel="noreferrer noopener"
-              target="_blank"
-            >
-              https://element.io
-            </a>
-          </p>
-        </li>
-      </ul>
+            https://element.io
+          </a>
+        </div>
+      </div>
     </div>
     <button
       aria-controls="radix-:r0:"
@@ -228,7 +198,7 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0Z"
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.212-.325A1.107 1.107 0 0 1 8.425 12c0-.133.02-.258.063-.375A.877.877 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.949.949 0 0 1-.7-.275Z"
           />
         </svg>
       </a>
@@ -241,99 +211,73 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
     <div
       class="_block_17898c"
     >
-      <h6
-        class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64"
+      <h4
+        class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 _title_17898c"
       >
         Session
-      </h6>
-      <ul
-        class="_list_040867"
+      </h4>
+      <div
+        class="_wrapper_040867"
       >
-        <li
-          class="_detailRow_040867"
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            ID
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <code>
-              session-id
-            </code>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            Device ID
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <code>
-              abcd1234
-            </code>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            Signed in
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <time
-              datetime="2023-06-29T03:35:17Z"
-            >
-              Thu, 29 Jun 2023, 03:35
-            </time>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Last Active
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <span
+            class="_datumValue_040867"
+            title="Sat, 29 Jul 2023, 03:35"
           >
-            <span
-              title="Sat, 29 Jul 2023, 03:35"
-            >
-              Inactive for 90+ days
-            </span>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
+            Inactive for 90+ days
+          </span>
+        </div>
+        <div
+          class="_datum_040867"
         >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+          >
+            Signed in
+          </h5>
+          <time
+            class="_datumValue_040867"
+            datetime="2023-06-29T03:35:17Z"
+          >
+            Thu, 29 Jun 2023, 03:35
+          </time>
+        </div>
+        <div
+          class="_datum_040867"
+        >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+          >
+            Device ID
+          </h5>
           <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+            class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 _datumValue_040867"
+          >
+            abcd1234
+          </p>
+        </div>
+        <div
+          class="_datum_040867"
+        >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             IP Address
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <code
+            class="_datumValue_040867"
           >
-            <code>
-              1.2.3.4
-            </code>
-          </p>
-        </li>
-      </ul>
+            1.2.3.4
+          </code>
+        </div>
+      </div>
     </div>
     <button
       aria-controls="radix-:r3:"
@@ -386,7 +330,7 @@ exports[`<CompatSessionDetail> > renders a finished compatability session detail
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0Z"
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.212-.325A1.107 1.107 0 0 1 8.425 12c0-.133.02-.258.063-.375A.877.877 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.949.949 0 0 1-.7-.275Z"
           />
         </svg>
       </a>
@@ -399,166 +343,132 @@ exports[`<CompatSessionDetail> > renders a finished compatability session detail
     <div
       class="_block_17898c"
     >
-      <h6
-        class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64"
+      <h4
+        class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 _title_17898c"
       >
         Session
-      </h6>
-      <ul
-        class="_list_040867"
+      </h4>
+      <div
+        class="_wrapper_040867"
       >
-        <li
-          class="_detailRow_040867"
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            ID
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <code>
-              session-id
-            </code>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            Device ID
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <code>
-              abcd1234
-            </code>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            Signed in
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <time
-              datetime="2023-06-29T03:35:17Z"
-            >
-              Thu, 29 Jun 2023, 03:35
-            </time>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            Finished
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <time
-              datetime="2023-07-29T03:35:17Z"
-            >
-              Sat, 29 Jul 2023, 03:35
-            </time>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Last Active
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <span
+            class="_datumValue_040867"
+            title="Sat, 29 Jul 2023, 03:35"
           >
-            <span
-              title="Sat, 29 Jul 2023, 03:35"
-            >
-              Inactive for 90+ days
-            </span>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
+            Inactive for 90+ days
+          </span>
+        </div>
+        <div
+          class="_datum_040867"
         >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+          >
+            Signed in
+          </h5>
+          <time
+            class="_datumValue_040867"
+            datetime="2023-06-29T03:35:17Z"
+          >
+            Thu, 29 Jun 2023, 03:35
+          </time>
+        </div>
+        <div
+          class="_datum_040867"
+        >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+          >
+            Device ID
+          </h5>
           <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+            class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 _datumValue_040867"
+          >
+            abcd1234
+          </p>
+        </div>
+        <div
+          class="_datum_040867"
+        >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             IP Address
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <code
+            class="_datumValue_040867"
           >
-            <code>
-              1.2.3.4
-            </code>
-          </p>
-        </li>
-      </ul>
+            1.2.3.4
+          </code>
+        </div>
+        <div
+          class="_datum_040867"
+        >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+          >
+            Finished
+          </h5>
+          <time
+            datetime="2023-07-29T03:35:17Z"
+          >
+            Sat, 29 Jul 2023, 03:35
+          </time>
+        </div>
+      </div>
     </div>
     <div
       class="_block_17898c"
     >
-      <h6
-        class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64"
+      <h4
+        class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 _title_17898c"
       >
-        Client
-      </h6>
-      <ul
-        class="_list_040867"
+        Client info
+      </h4>
+      <div
+        class="_wrapper_040867"
       >
-        <li
-          class="_detailRow_040867"
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Name
-          </p>
+          </h5>
           <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+            class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 _datumValue_040867"
           >
             element.io
           </p>
-        </li>
-        <li
-          class="_detailRow_040867"
+        </div>
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Uri
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <a
+            class="_link_1mzip_17 _externalLink_a97355"
+            data-kind="primary"
+            href="https://element.io"
+            rel="noreferrer noopener"
+            target="_blank"
           >
-            <a
-              class="_link_1mzip_17 _externalLink_a97355"
-              data-kind="primary"
-              href="https://element.io"
-              rel="noreferrer noopener"
-              target="_blank"
-            >
-              https://element.io
-            </a>
-          </p>
-        </li>
-      </ul>
+            https://element.io
+          </a>
+        </div>
+      </div>
     </div>
   </div>
 </div>

frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`<OAuth2SessionDetail> > renders a finished session details 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0Z"
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.212-.325A1.107 1.107 0 0 1 8.425 12c0-.133.02-.258.063-.375A.877.877 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.949.949 0 0 1-.7-.275Z"
           />
         </svg>
       </a>
@@ -34,147 +34,177 @@ exports[`<OAuth2SessionDetail> > renders a finished session details 1`] = `
     <div
       class="_block_17898c"
     >
-      <h6
-        class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64"
+      <h4
+        class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 _title_17898c"
       >
-        Session
-      </h6>
-      <ul
-        class="_list_040867"
+        Device details
+      </h4>
+      <div
+        class="_wrapper_040867"
       >
-        <li
-          class="_detailRow_040867"
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            ID
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <code>
-              session-id
-            </code>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            Device ID
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <code>
-              abcd1234
-            </code>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            Signed in
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <time
-              datetime="2023-06-29T03:35:17Z"
-            >
-              Thu, 29 Jun 2023, 03:35
-            </time>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            Finished
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <time
-              datetime="2023-07-29T03:35:17Z"
-            >
-              Sat, 29 Jul 2023, 03:35
-            </time>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Last Active
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <span
+            class="_datumValue_040867"
+            title="Sat, 29 Jul 2023, 03:35"
           >
-            <span
-              title="Sat, 29 Jul 2023, 03:35"
-            >
-              Inactive for 90+ days
-            </span>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
+            Inactive for 90+ days
+          </span>
+        </div>
+        <div
+          class="_datum_040867"
         >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+          >
+            Signed in
+          </h5>
+          <time
+            class="_datumValue_040867"
+            datetime="2023-06-29T03:35:17Z"
+          >
+            Thu, 29 Jun 2023, 03:35
+          </time>
+        </div>
+        <div
+          class="_datum_040867"
+        >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+          >
+            Device ID
+          </h5>
           <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+            class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 _datumValue_040867"
+          >
+            abcd1234
+          </p>
+        </div>
+        <div
+          class="_datum_040867"
+        >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             IP Address
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <code
+            class="_datumValue_040867"
           >
-            <code>
-              1.2.3.4
-            </code>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
+            1.2.3.4
+          </code>
+        </div>
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
-            Scopes
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+            Finished
+          </h5>
+          <time
+            datetime="2023-07-29T03:35:17Z"
           >
-            <span>
-              <code>
-                openid
-              </code>
-              <code>
-                urn:matrix:org.matrix.msc2967.client:api:*
-              </code>
-              <code>
-                urn:matrix:org.matrix.msc2967.client:device:abcd1234
-              </code>
-            </span>
-          </p>
-        </li>
-      </ul>
+            Sat, 29 Jul 2023, 03:35
+          </time>
+        </div>
+      </div>
+      <div
+        class="_datum_040867"
+      >
+        <h5
+          class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+        >
+          Scopes
+        </h5>
+        <ul
+          class="_scopeList_040867"
+        >
+          <li
+            class="_scope_040867"
+          >
+            <svg
+              class="cpd-icon"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.175 13.825C9.958 14.608 10.9 15 12 15s2.042-.392 2.825-1.175C15.608 13.042 16 12.1 16 11s-.392-2.042-1.175-2.825C14.042 7.392 13.1 7 12 7s-2.042.392-2.825 1.175C8.392 8.958 8 9.9 8 11s.392 2.042 1.175 2.825Zm4.237-1.412A1.926 1.926 0 0 1 12 13c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 11c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 9c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412Z"
+              />
+              <path
+                d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+              />
+              <path
+                d="M16.23 18.792a12.47 12.47 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0c-.487.12-.972.271-1.455.455a8.04 8.04 0 0 1-1.729-1.454c.89-.412 1.794-.729 2.709-.95A13.76 13.76 0 0 1 12 16c1.1 0 2.183.13 3.25.387a14.78 14.78 0 0 1 2.709.95 8.042 8.042 0 0 1-1.73 1.455Z"
+              />
+            </svg>
+            <p
+              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+            >
+              See your profile info and contact details
+            </p>
+          </li>
+          <li
+            class="_scope_040867"
+          >
+            <svg
+              class="cpd-icon"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m1.5 21.25 1.45-4.95a10.232 10.232 0 0 1-.712-2.1A10.167 10.167 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.737 9.737 0 0 1 12 22c-.75 0-1.483-.08-2.2-.238a10.23 10.23 0 0 1-2.1-.712L2.75 22.5a.936.936 0 0 1-1-.25.936.936 0 0 1-.25-1Zm2.45-1.2 3.2-.95a.949.949 0 0 1 .275-.063c.1-.008.192-.012.275-.012.15 0 .296.013.438.038.141.024.279.07.412.137a7.434 7.434 0 0 0 1.675.6c.583.133 1.175.2 1.775.2 2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 .6.067 1.192.2 1.775s.333 1.142.6 1.675c.117.217.18.446.188.688a2.29 2.29 0 0 1-.088.712l-.95 3.2Z"
+              />
+            </svg>
+            <p
+              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+            >
+              View your existing messages and data
+            </p>
+          </li>
+          <li
+            class="_scope_040867"
+          >
+            <svg
+              class="cpd-icon"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="m5.07 20.965 16.141-8.07a1 1 0 0 0 0-1.79l-16.14-8.07c-.785-.392-1.658.342-1.406 1.182l2.249 7.496a1 1 0 0 1 0 .574l-2.249 7.496c-.252.84.621 1.574 1.405 1.182ZM6.246 5.859 18.528 12 6.246 18.141 7.788 13h4.462a1 1 0 1 0 0-2H7.788L6.246 5.859Z"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <p
+              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+            >
+              Send new messages on your behalf
+            </p>
+          </li>
+        </ul>
+      </div>
     </div>
     <div
       class="_block_17898c"
     >
-      <h6
-        class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64"
+      <h4
+        class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 _title_17898c"
       >
         <a
           class="_link_1mzip_17"
@@ -182,63 +212,51 @@ exports[`<OAuth2SessionDetail> > renders a finished session details 1`] = `
           href="/clients/test-id"
           rel="noreferrer noopener"
         >
-          Client
+          Client info
         </a>
-      </h6>
-      <ul
-        class="_list_040867"
+      </h4>
+      <div
+        class="_wrapper_040867"
       >
-        <li
-          class="_detailRow_040867"
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Name
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            Element
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
+          </h5>
+          Element
+        </div>
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
-            ID
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <code>
-              test-client-id
-            </code>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
+            Client ID
+          </h5>
+          <code>
+            test-client-id
+          </code>
+        </div>
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Uri
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <a
+            href="https://element.io"
+            rel="noreferrer"
+            target="_blank"
           >
-            <a
-              href="https://element.io"
-              rel="noreferrer"
-              target="_blank"
-            >
-              https://element.io
-            </a>
-          </p>
-        </li>
-      </ul>
+            https://element.io
+          </a>
+        </div>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -265,7 +283,7 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0Z"
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.212-.325A1.107 1.107 0 0 1 8.425 12c0-.133.02-.258.063-.375A.877.877 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.949.949 0 0 1-.7-.275Z"
           />
         </svg>
       </a>
@@ -278,129 +296,163 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
     <div
       class="_block_17898c"
     >
-      <h6
-        class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64"
+      <h4
+        class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 _title_17898c"
       >
-        Session
-      </h6>
-      <ul
-        class="_list_040867"
+        Device details
+      </h4>
+      <div
+        class="_wrapper_040867"
       >
-        <li
-          class="_detailRow_040867"
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            ID
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <code>
-              session-id
-            </code>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            Device ID
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <code>
-              abcd1234
-            </code>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
-          >
-            Signed in
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <time
-              datetime="2023-06-29T03:35:17Z"
-            >
-              Thu, 29 Jun 2023, 03:35
-            </time>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
-        >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Last Active
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <span
+            class="_datumValue_040867"
+            title="Sat, 29 Jul 2023, 03:35"
           >
-            <span
-              title="Sat, 29 Jul 2023, 03:35"
-            >
-              Inactive for 90+ days
-            </span>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
+            Inactive for 90+ days
+          </span>
+        </div>
+        <div
+          class="_datum_040867"
         >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+          >
+            Signed in
+          </h5>
+          <time
+            class="_datumValue_040867"
+            datetime="2023-06-29T03:35:17Z"
+          >
+            Thu, 29 Jun 2023, 03:35
+          </time>
+        </div>
+        <div
+          class="_datum_040867"
+        >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+          >
+            Device ID
+          </h5>
           <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+            class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 _datumValue_040867"
+          >
+            abcd1234
+          </p>
+        </div>
+        <div
+          class="_datum_040867"
+        >
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             IP Address
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <code
+            class="_datumValue_040867"
           >
-            <code>
-              1.2.3.4
-            </code>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
+            1.2.3.4
+          </code>
+        </div>
+      </div>
+      <div
+        class="_datum_040867"
+      >
+        <h5
+          class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          Scopes
+        </h5>
+        <ul
+          class="_scopeList_040867"
+        >
+          <li
+            class="_scope_040867"
           >
-            Scopes
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+            <svg
+              class="cpd-icon"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.175 13.825C9.958 14.608 10.9 15 12 15s2.042-.392 2.825-1.175C15.608 13.042 16 12.1 16 11s-.392-2.042-1.175-2.825C14.042 7.392 13.1 7 12 7s-2.042.392-2.825 1.175C8.392 8.958 8 9.9 8 11s.392 2.042 1.175 2.825Zm4.237-1.412A1.926 1.926 0 0 1 12 13c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 11c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 9c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412Z"
+              />
+              <path
+                d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+              />
+              <path
+                d="M16.23 18.792a12.47 12.47 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0c-.487.12-.972.271-1.455.455a8.04 8.04 0 0 1-1.729-1.454c.89-.412 1.794-.729 2.709-.95A13.76 13.76 0 0 1 12 16c1.1 0 2.183.13 3.25.387a14.78 14.78 0 0 1 2.709.95 8.042 8.042 0 0 1-1.73 1.455Z"
+              />
+            </svg>
+            <p
+              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+            >
+              See your profile info and contact details
+            </p>
+          </li>
+          <li
+            class="_scope_040867"
           >
-            <span>
-              <code>
-                openid
-              </code>
-              <code>
-                urn:matrix:org.matrix.msc2967.client:api:*
-              </code>
-              <code>
-                urn:matrix:org.matrix.msc2967.client:device:abcd1234
-              </code>
-            </span>
-          </p>
-        </li>
-      </ul>
+            <svg
+              class="cpd-icon"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m1.5 21.25 1.45-4.95a10.232 10.232 0 0 1-.712-2.1A10.167 10.167 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.737 9.737 0 0 1 12 22c-.75 0-1.483-.08-2.2-.238a10.23 10.23 0 0 1-2.1-.712L2.75 22.5a.936.936 0 0 1-1-.25.936.936 0 0 1-.25-1Zm2.45-1.2 3.2-.95a.949.949 0 0 1 .275-.063c.1-.008.192-.012.275-.012.15 0 .296.013.438.038.141.024.279.07.412.137a7.434 7.434 0 0 0 1.675.6c.583.133 1.175.2 1.775.2 2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 .6.067 1.192.2 1.775s.333 1.142.6 1.675c.117.217.18.446.188.688a2.29 2.29 0 0 1-.088.712l-.95 3.2Z"
+              />
+            </svg>
+            <p
+              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+            >
+              View your existing messages and data
+            </p>
+          </li>
+          <li
+            class="_scope_040867"
+          >
+            <svg
+              class="cpd-icon"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="m5.07 20.965 16.141-8.07a1 1 0 0 0 0-1.79l-16.14-8.07c-.785-.392-1.658.342-1.406 1.182l2.249 7.496a1 1 0 0 1 0 .574l-2.249 7.496c-.252.84.621 1.574 1.405 1.182ZM6.246 5.859 18.528 12 6.246 18.141 7.788 13h4.462a1 1 0 1 0 0-2H7.788L6.246 5.859Z"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <p
+              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+            >
+              Send new messages on your behalf
+            </p>
+          </li>
+        </ul>
+      </div>
     </div>
     <div
       class="_block_17898c"
     >
-      <h6
-        class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64"
+      <h4
+        class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 _title_17898c"
       >
         <a
           class="_link_1mzip_17"
@@ -408,63 +460,51 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
           href="/clients/test-id"
           rel="noreferrer noopener"
         >
-          Client
+          Client info
         </a>
-      </h6>
-      <ul
-        class="_list_040867"
+      </h4>
+      <div
+        class="_wrapper_040867"
       >
-        <li
-          class="_detailRow_040867"
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Name
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            Element
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
+          </h5>
+          Element
+        </div>
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
-            ID
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
-          >
-            <code>
-              test-client-id
-            </code>
-          </p>
-        </li>
-        <li
-          class="_detailRow_040867"
+            Client ID
+          </h5>
+          <code>
+            test-client-id
+          </code>
+        </div>
+        <div
+          class="_datum_040867"
         >
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
+          <h5
+            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
           >
             Uri
-          </p>
-          <p
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
+          </h5>
+          <a
+            href="https://element.io"
+            rel="noreferrer"
+            target="_blank"
           >
-            <a
-              href="https://element.io"
-              rel="noreferrer"
-              target="_blank"
-            >
-              https://element.io
-            </a>
-          </p>
-        </li>
-      </ul>
+            https://element.io
+          </a>
+        </div>
+      </div>
     </div>
     <button
       aria-controls="radix-:r0:"

frontend/src/components/SessionDetail/__snapshots__/SessionHeader.test.tsx.snap

@@ -19,7 +19,7 @@ exports[`<SessionHeader /> > renders a session header 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0Z"
+          d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.212-.325A1.107 1.107 0 0 1 8.425 12c0-.133.02-.258.063-.375A.877.877 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.949.949 0 0 1-.7-.275Z"
         />
       </svg>
     </a>

templates/components/scope.html

@@ -24,7 +24,7 @@ limitations under the License.
         <li>{{ icon.computer() }}<p>{{ _("mas.scope.manage_sessions") }}</p></li>
       {% elif scope == "urn:matrix:org.matrix.msc2967.client:api:*" %}
         <li>{{ icon.chat() }}<p>{{ _("mas.scope.view_messages") }}</p></li>
-        <li>{{ icon.check_circle() }}<p>{{ _("mas.scope.send_messages") }}</p></li>
+        <li>{{ icon.send() }}<p>{{ _("mas.scope.send_messages") }}</p></li>
       {% elif scope == "urn:synapse:admin:*" %}
         <li>{{ icon.error() }}<p>{{ _("mas.scope.synapse_admin") }}</p></li>
       {% elif scope == "urn:mas:admin" %}

translations/en.json

@@ -313,7 +313,7 @@
       },
       "send_messages": "Send new messages on your behalf",
       "@send_messages": {
-        "context": "components/scope.html:27:43-71"
+        "context": "components/scope.html:27:35-63"
       },
       "synapse_admin": "Administer the Synapse homeserver",
       "@synapse_admin": {