Update the compound design tokens, replace the error icon with error-solid

Author: sandhose

frontend/package-lock.json

@@ -24,7 +24,7 @@
     "@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-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",

frontend/package.json

@@ -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

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

frontend/src/components/SessionDetail/SessionInfo.tsx

@@ -6,7 +6,7 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { createFileRoute, notFound, redirect } from "@tanstack/react-router";
 import IconArrowLeft from "@vector-im/compound-design-tokens/assets/web/icons/arrow-left";
-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 { useTranslation } from "react-i18next";
 import { ButtonLink } from "../components/ButtonLink";
 import Layout from "../components/Layout";
@@ -41,7 +41,7 @@ function EmailInUse(): React.ReactElement {
   return (
     <Layout>
       <PageHeading
-        Icon={IconError}
+        Icon={IconErrorSolid}
         invalid
         title={t("frontend.email_in_use.heading", {
           email: userEmailAuthentication.email,

frontend/src/routes/emails.$id.in-use.tsx

@@ -11,7 +11,7 @@ import {
   useNavigate,
   useSearch,
 } from "@tanstack/react-router";
-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 IconLockSolid from "@vector-im/compound-design-tokens/assets/web/icons/lock-solid";
 import { Alert, Button, Form } from "@vector-im/compound-web";
 import type { FormEvent } from "react";
@@ -63,7 +63,7 @@ const EmailConsumed: React.FC = () => {
   return (
     <Layout>
       <PageHeading
-        Icon={IconError}
+        Icon={IconErrorSolid}
         title={t("frontend.password_reset.consumed.title")}
         subtitle={t("frontend.password_reset.consumed.subtitle")}
         invalid
@@ -117,7 +117,7 @@ const EmailExpired: React.FC<{
   return (
     <Layout>
       <PageHeading
-        Icon={IconError}
+        Icon={IconErrorSolid}
         title={t("frontend.password_reset.expired.title")}
         subtitle={t("frontend.password_reset.expired.subtitle", {
           email: userRecoveryTicket.email,

frontend/src/routes/password.recovery.index.lazy.tsx

@@ -11,7 +11,7 @@ import {
 } from "@tanstack/react-query";
 import { createFileRoute, notFound } from "@tanstack/react-router";
 import IconCheck from "@vector-im/compound-design-tokens/assets/web/icons/check";
-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 {
   Button,
@@ -114,7 +114,7 @@ function ResetCrossSigning(): React.ReactNode {
   return (
     <>
       <PageHeading
-        Icon={IconError}
+        Icon={IconErrorSolid}
         title={t("frontend.reset_cross_signing.heading")}
         invalid
       />

frontend/src/routes/reset-cross-signing.index.tsx

@@ -8,7 +8,7 @@ import {
   Outlet,
   createFileRoute,
 } from "@tanstack/react-router";
-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, Text } from "@vector-im/compound-web";
 import * as v from "valibot";
 
@@ -37,7 +37,7 @@ function ResetCrossSigningError({
   return (
     <Layout>
       <PageHeading
-        Icon={IconError}
+        Icon={IconErrorSolid}
         title={t("frontend.reset_cross_signing.failure.heading")}
         invalid
       />