Update session details styles to closer match latest Figma

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>
   );