build(deps): bump @vector-im/compound-web from 7.6.2 to 7.6.3 in /frontend (#4083)

Author: sandhose

frontend/package-lock.json

@@ -24,8 +24,8 @@
     "@radix-ui/react-dialog": "^1.1.6",
     "@tanstack/react-query": "^5.66.9",
     "@tanstack/react-router": "^1.109.2",
-    "@vector-im/compound-design-tokens": "3.0.1",
-    "@vector-im/compound-web": "^7.6.2",
+    "@vector-im/compound-design-tokens": "4.0.0",
+    "@vector-im/compound-web": "^7.6.3",
     "@zxcvbn-ts/core": "^3.0.4",
     "@zxcvbn-ts/language-common": "^3.0.4",
     "classnames": "^2.5.1",

frontend/package.json

@@ -9,7 +9,7 @@ exports[`<OAuth2ClientDetail> > renders client details 1`] = `
       class="flex flex-row gap-2 justify-start items-center"
     >
       <h3
-        class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+        class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
       >
         Test Client
       </h3>
@@ -18,11 +18,11 @@ exports[`<OAuth2ClientDetail> > renders client details 1`] = `
       class="flex flex-col gap-6"
     >
       <h4
-        class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
       >
         Client info
         <div
-          class="_separator_144s5_17"
+          class="_separator_7ckbw_8"
           data-kind="section"
           data-orientation="horizontal"
           role="separator"
@@ -35,12 +35,12 @@ exports[`<OAuth2ClientDetail> > renders client details 1`] = `
           class="flex flex-col min-w-0"
         >
           <h5
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 text-secondary"
+            class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 text-secondary"
           >
             Name
           </h5>
           <p
-            class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 text-ellipsis overflow-hidden"
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 text-ellipsis overflow-hidden"
           >
             Test Client
           </p>
@@ -49,15 +49,15 @@ exports[`<OAuth2ClientDetail> > renders client details 1`] = `
           class="flex flex-col min-w-0"
         >
           <h5
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 text-secondary"
+            class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 text-secondary"
           >
             Terms of service
           </h5>
           <p
-            class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 text-ellipsis overflow-hidden"
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 text-ellipsis overflow-hidden"
           >
             <a
-              class="_link_ue21z_17 _externalLink_a97355"
+              class="_link_1v5rz_8 _externalLink_a97355"
               data-kind="primary"
               data-size="medium"
               href="https://client.org/tos"
@@ -72,15 +72,15 @@ exports[`<OAuth2ClientDetail> > renders client details 1`] = `
           class="flex flex-col min-w-0"
         >
           <h5
-            class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 text-secondary"
+            class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 text-secondary"
           >
             Policy
           </h5>
           <p
-            class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 text-ellipsis overflow-hidden"
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 text-ellipsis overflow-hidden"
           >
             <a
-              class="_link_ue21z_17 _externalLink_a97355"
+              class="_link_1v5rz_8 _externalLink_a97355"
               data-kind="primary"
               data-size="medium"
               href="https://client.org/policy"

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

@@ -4,7 +4,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 // Please see LICENSE in the repository root for full details.
 
-import IconError from "@vector-im/compound-design-tokens/assets/web/icons/error";
+import IconErrorSolid from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 import { Button } from "@vector-im/compound-web";
 import { useState } from "react";
 import { Translation } from "react-i18next";
@@ -22,7 +22,7 @@ const GenericError: React.FC<{ error: unknown; dontSuspend?: boolean }> = ({
         <div className="flex flex-col gap-6">
           <PageHeading
             invalid
-            Icon={IconError}
+            Icon={IconErrorSolid}
             title={t("frontend.error.title", {
               defaultValue: "Something went wrong",
             })}

frontend/src/components/GenericError.tsx

@@ -12,7 +12,7 @@ exports[`<DeviceTypeIcon /> > renders mobile device type 1`] = `
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M7 23c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 21V3c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 7 1h10c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v18c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 23H7Zm0-5h10V6H7v12Z"
+      d="M7 23q-.824 0-1.412-.587A1.93 1.93 0 0 1 5 21V3q0-.824.588-1.412A1.93 1.93 0 0 1 7 1h10q.824 0 1.413.587Q19 2.176 19 3v18q0 .824-.587 1.413A1.93 1.93 0 0 1 17 23zm0-5h10V6H7z"
     />
   </svg>
 </div>
@@ -30,7 +30,7 @@ exports[`<DeviceTypeIcon /> > renders pc device type 1`] = `
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M4 18c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 16V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 3h16c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v11c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 18H4Zm0-2h16V5H4v11Zm-2 5a.967.967 0 0 1-.712-.288A.968.968 0 0 1 1 20c0-.283.096-.52.288-.712A.967.967 0 0 1 2 19h20c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 22 21H2Z"
+      d="M4 18q-.824 0-1.412-.587A1.93 1.93 0 0 1 2 16V5q0-.824.587-1.412A1.93 1.93 0 0 1 4 3h16q.824 0 1.413.587Q22 4.176 22 5v11q0 .824-.587 1.413A1.93 1.93 0 0 1 20 18zm0-2h16V5H4zm-2 5a.97.97 0 0 1-.712-.288A.97.97 0 0 1 1 20q0-.424.288-.712A.97.97 0 0 1 2 19h20q.424 0 .712.288.288.287.288.712 0 .424-.288.712A.97.97 0 0 1 22 21z"
     />
   </svg>
 </div>
@@ -48,7 +48,7 @@ exports[`<DeviceTypeIcon /> > renders tablet device type 1`] = `
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M4 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 4h16c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 20H4Zm0-2h16V8H4v10Z"
+      d="M4 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 2 18V6q0-.824.587-1.412A1.93 1.93 0 0 1 4 4h16q.824 0 1.413.588Q22 5.175 22 6v12q0 .824-.587 1.413A1.93 1.93 0 0 1 20 20zm0-2h16V8H4z"
     />
   </svg>
 </div>
@@ -66,10 +66,10 @@ exports[`<DeviceTypeIcon /> > renders unknown device type 1`] = `
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
+      d="M5 21q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19V5q0-.824.587-1.412A1.93 1.93 0 0 1 5 3h14q.824 0 1.413.587Q21 4.176 21 5v14q0 .824-.587 1.413A1.93 1.93 0 0 1 19 21zm0-2h14V5H5z"
     />
     <path
-      d="M11 10a1 1 0 1 1 1.479.878c-.31.17-.659.413-.94.741-.286.334-.539.8-.539 1.381a1 1 0 0 0 2 .006.3.3 0 0 1 .057-.085 1.39 1.39 0 0 1 .382-.288A3 3 0 1 0 9 10a1 1 0 1 0 2 0Zm1.999 3.011v-.004.005ZM12 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+      d="M11 10a1 1 0 1 1 1.479.878c-.31.17-.659.413-.94.741-.286.334-.539.8-.539 1.381a1 1 0 0 0 2 .006.3.3 0 0 1 .057-.085 1.4 1.4 0 0 1 .382-.288A3 3 0 1 0 9 10a1 1 0 1 0 2 0m1.999 3.012v-.005zM12 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
     />
   </svg>
 </div>

frontend/src/components/Session/__snapshots__/DeviceTypeIcon.test.tsx.snap

@@ -5,7 +5,7 @@
 
 import IconChat from "@vector-im/compound-design-tokens/assets/web/icons/chat";
 import IconComputer from "@vector-im/compound-design-tokens/assets/web/icons/computer";
-import IconError from "@vector-im/compound-design-tokens/assets/web/icons/error";
+import IconErrorSolid from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 import IconInfo from "@vector-im/compound-design-tokens/assets/web/icons/info";
 import IconSend from "@vector-im/compound-design-tokens/assets/web/icons/send";
 import IconUserProfile from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
@@ -68,7 +68,7 @@ export const ScopeSendMessages: React.FC = () => {
 const ScopeSynapseAdmin: React.FC = () => {
   const { t } = useTranslation();
   return (
-    <VisualListItem Icon={IconError}>
+    <VisualListItem Icon={IconErrorSolid}>
       {t("mas.scope.synapse_admin")}
     </VisualListItem>
   );
@@ -77,7 +77,9 @@ const ScopeSynapseAdmin: React.FC = () => {
 const ScopeMasAdmin: React.FC = () => {
   const { t } = useTranslation();
   return (
-    <VisualListItem Icon={IconError}>{t("mas.scope.mas_admin")}</VisualListItem>
+    <VisualListItem Icon={IconErrorSolid}>
+      {t("mas.scope.mas_admin")}
+    </VisualListItem>
   );
 };