From 98f45666d76271b7235afc79d873976845e10cf4 Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Fri, 21 Feb 2025 15:25:06 +0100 Subject: [PATCH] Update the compound design tokens, replace the error icon with error-solid --- frontend/package-lock.json | 10 +- frontend/package.json | 2 +- frontend/src/components/GenericError.tsx | 4 +- .../components/SessionDetail/SessionInfo.tsx | 8 +- frontend/src/routes/emails.$id.in-use.tsx | 4 +- .../routes/password.recovery.index.lazy.tsx | 6 +- .../src/routes/reset-cross-signing.index.tsx | 4 +- frontend/src/routes/reset-cross-signing.tsx | 4 +- templates/components/icon.html | 828 ++++++------------ templates/components/scope.html | 4 +- templates/pages/error.html | 2 +- templates/pages/policy_violation.html | 2 +- templates/pages/recovery/consumed.html | 2 +- templates/pages/recovery/expired.html | 2 +- .../pages/register/steps/email_in_use.html | 2 +- 15 files changed, 315 insertions(+), 569 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cd1f5ca90..9d3885595 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -14,7 +14,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", @@ -5924,10 +5924,10 @@ } }, "node_modules/@vector-im/compound-design-tokens": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@vector-im/compound-design-tokens/-/compound-design-tokens-3.0.1.tgz", - "integrity": "sha512-uwpMteMxfX1xRKM5xe6IcuHAGMWYFHAD/R0ANia6JYnP2Q2ytlqUDDFa/nqNqMLYdVytbZs3bJtOfuJxmUJfgg==", - "license": "Apache-2.0", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@vector-im/compound-design-tokens/-/compound-design-tokens-4.0.0.tgz", + "integrity": "sha512-hFfLSKrGc58rPRp9JH1mkgw3moFEgpL8RQzyDESHErq7P1lUmlIuwKFTVfK5SbdFM5GvHp7nQaFpVmxUQ3Xp+w==", + "license": "SEE LICENSE IN README.md", "peerDependencies": { "@types/react": "*", "react": "^17 || ^18 || ^19.0.0" diff --git a/frontend/package.json b/frontend/package.json index 1118f8ce7..312d0e855 100644 --- a/frontend/package.json +++ b/frontend/package.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", diff --git a/frontend/src/components/GenericError.tsx b/frontend/src/components/GenericError.tsx index 000a190d1..c54a5b049 100644 --- a/frontend/src/components/GenericError.tsx +++ b/frontend/src/components/GenericError.tsx @@ -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 }> = ({
{ const ScopeSynapseAdmin: React.FC = () => { const { t } = useTranslation(); return ( - + {t("mas.scope.synapse_admin")} ); @@ -77,7 +77,9 @@ const ScopeSynapseAdmin: React.FC = () => { const ScopeMasAdmin: React.FC = () => { const { t } = useTranslation(); return ( - {t("mas.scope.mas_admin")} + + {t("mas.scope.mas_admin")} + ); }; diff --git a/frontend/src/routes/emails.$id.in-use.tsx b/frontend/src/routes/emails.$id.in-use.tsx index a4ae1c752..5f6aa44db 100644 --- a/frontend/src/routes/emails.$id.in-use.tsx +++ b/frontend/src/routes/emails.$id.in-use.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 ( { return ( diff --git a/frontend/src/routes/reset-cross-signing.tsx b/frontend/src/routes/reset-cross-signing.tsx index 8a5a1c800..e17a1cf32 100644 --- a/frontend/src/routes/reset-cross-signing.tsx +++ b/frontend/src/routes/reset-cross-signing.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 ( diff --git a/templates/components/icon.html b/templates/components/icon.html index 6321fd8fa..7781b2f87 100644 --- a/templates/components/icon.html +++ b/templates/components/icon.html @@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details. {# Regenerate with the following shell script: -for i in frontend/node_modules/@vector-im/compound-design-tokens/assets/web/icons/*.svg; do +for i in frontend/node_modules/@vector-im/compound-design-tokens/icons/*.svg; do NAME=$(basename "$i" | sed 's/\.svg//' | tr '-' '_') CONTENT=$(cat "$i") cat < - - + {% endmacro %} {% macro arrow_down() %} - - - + {% endmacro %} {% macro arrow_left() %} - - - + {% endmacro %} {% macro arrow_right() %} - - - + {% endmacro %} {% macro arrow_up_right() %} - - - + {% endmacro %} {% macro arrow_up() %} - - - + +{% endmacro %} + +{% macro ask_to_join_solid() %} + +{% endmacro %} + +{% macro ask_to_join() %} + {% endmacro %} {% macro attachment() %} - - - + +{% endmacro %} + +{% macro audio() %} + {% endmacro %} {% macro block() %} - - - + {% endmacro %} {% macro bold() %} - - - + +{% endmacro %} + +{% macro calendar() %} + {% endmacro %} {% macro chart() %} - - - + {% endmacro %} {% macro chat_new() %} - - - - + {% endmacro %} {% macro chat_problem() %} - - - - + {% endmacro %} {% macro chat_solid() %} - - - + {% endmacro %} {% macro chat() %} - - - + {% endmacro %} {% macro check_circle_solid() %} - - - + {% endmacro %} {% macro check_circle() %} - - - + {% endmacro %} {% macro check() %} - - - + {% endmacro %} {% macro chevron_down() %} - - - + {% endmacro %} {% macro chevron_left() %} - - - + {% endmacro %} {% macro chevron_right() %} - - - + {% endmacro %} {% macro chevron_up_down() %} - - - + {% endmacro %} {% macro chevron_up() %} - - - + {% endmacro %} {% macro circle() %} - - - + {% endmacro %} {% macro close() %} - - - + {% endmacro %} {% macro cloud_solid() %} - - - + {% endmacro %} {% macro cloud() %} - - - + {% endmacro %} {% macro code() %} - - - + {% endmacro %} {% macro collapse() %} - - - + {% endmacro %} {% macro company() %} - - - + {% endmacro %} {% macro compose() %} - - - - - + {% endmacro %} {% macro computer() %} - - - + {% endmacro %} {% macro copy() %} - - - - + {% endmacro %} {% macro dark_mode() %} - - - + {% endmacro %} {% macro delete() %} - - - + {% endmacro %} {% macro devices() %} - - - + +{% endmacro %} + +{% macro dial_pad() %} + {% endmacro %} {% macro document() %} - - - + +{% endmacro %} + +{% macro download_ios() %} + {% endmacro %} {% macro download() %} - - - + {% endmacro %} {% macro drag_grid() %} - - - + {% endmacro %} {% macro drag_list() %} - - - + {% endmacro %} {% macro edit_solid() %} - - - - - - - + {% endmacro %} {% macro edit() %} - - - + {% endmacro %} {% macro email_solid() %} - - - + {% endmacro %} {% macro email() %} - - - + {% endmacro %} {% macro end_call() %} - - - + +{% endmacro %} + +{% macro error_solid() %} + {% endmacro %} {% macro error() %} - - - + {% endmacro %} {% macro expand() %} - - - + +{% endmacro %} + +{% macro explore() %} + {% endmacro %} {% macro export_archive() %} - - - + +{% endmacro %} + +{% macro extensions_solid() %} + {% endmacro %} {% macro extensions() %} - - - + {% endmacro %} {% macro favourite_solid() %} - - - + {% endmacro %} {% macro favourite() %} - - - + {% endmacro %} {% macro file_error() %} - - - - + {% endmacro %} {% macro files() %} - - - + {% endmacro %} {% macro filter() %} - - - + {% endmacro %} {% macro forward() %} - - - + {% endmacro %} {% macro grid() %} - - - + +{% endmacro %} + +{% macro group() %} + +{% endmacro %} + +{% macro headphones_off_solid() %} + +{% endmacro %} + +{% macro headphones_solid() %} + {% endmacro %} {% macro help_solid() %} - - - + {% endmacro %} {% macro help() %} - - - - + {% endmacro %} {% macro history() %} - - - - + {% endmacro %} {% macro home_solid() %} - - - + {% endmacro %} {% macro home() %} - - - + {% endmacro %} {% macro host() %} - - - - + {% endmacro %} {% macro image_error() %} - - - - + {% endmacro %} {% macro image() %} - - - - + {% endmacro %} {% macro indent_decrease() %} - - - + {% endmacro %} {% macro indent_increase() %} - - - + {% endmacro %} {% macro info_solid() %} - - - + {% endmacro %} {% macro info() %} - - - - + {% endmacro %} {% macro inline_code() %} - - - + {% endmacro %} {% macro italic() %} - - - + {% endmacro %} {% macro key_off_solid() %} - - - + {% endmacro %} {% macro key_off() %} - - - - + {% endmacro %} {% macro key_solid() %} - - - + {% endmacro %} {% macro key() %} - - - + {% endmacro %} {% macro keyboard() %} - - - - + {% endmacro %} {% macro labs() %} - - - - - + {% endmacro %} {% macro leave() %} - - - - + {% endmacro %} {% macro link() %} - - - + +{% endmacro %} + +{% macro linux() %} + {% endmacro %} {% macro list_bulleted() %} - - - + {% endmacro %} {% macro list_numbered() %} - - - + +{% endmacro %} + +{% macro list_view() %} + {% endmacro %} {% macro location_navigator_centred() %} - - - + {% endmacro %} {% macro location_navigator() %} - - - + {% endmacro %} {% macro location_pin_solid() %} - - - + {% endmacro %} {% macro location_pin() %} - - - + {% endmacro %} {% macro lock_off() %} - - - + {% endmacro %} {% macro lock_solid() %} - - - + {% endmacro %} {% macro lock() %} - - - + +{% endmacro %} + +{% macro mac() %} + +{% endmacro %} + +{% macro mark_as_read() %} + +{% endmacro %} + +{% macro mark_as_unread() %} + +{% endmacro %} + +{% macro mark_threads_as_read() %} + {% endmacro %} {% macro marker_read_receipts() %} - - - - + {% endmacro %} {% macro mention() %} - - - + {% endmacro %} {% macro menu() %} - - - + {% endmacro %} {% macro mic_off_solid() %} - - - + {% endmacro %} {% macro mic_off() %} - - - - + {% endmacro %} {% macro mic_on_solid() %} - - - - + {% endmacro %} {% macro mic_on() %} - - - - + +{% endmacro %} + +{% macro minus() %} + {% endmacro %} {% macro mobile() %} - - - + {% endmacro %} {% macro notifications_off_solid() %} - - - - + {% endmacro %} {% macro notifications_off() %} - - - - + {% endmacro %} {% macro notifications_solid() %} - - - + {% endmacro %} {% macro notifications() %} - - - + {% endmacro %} {% macro offline() %} - - - + {% endmacro %} {% macro overflow_horizontal() %} - - - + {% endmacro %} {% macro overflow_vertical() %} - - - + {% endmacro %} {% macro pause_solid() %} - - - + {% endmacro %} {% macro pause() %} - - - + {% endmacro %} {% macro pin_solid() %} - - - + {% endmacro %} {% macro pin() %} - - - + {% endmacro %} {% macro play_solid() %} - - - + {% endmacro %} {% macro play() %} - - - + {% endmacro %} {% macro plus() %} - - - + {% endmacro %} {% macro polls_end() %} - - - - + {% endmacro %} {% macro polls() %} - - - + {% endmacro %} {% macro pop_out() %} - - - - + {% endmacro %} {% macro preferences() %} - - - + +{% endmacro %} + +{% macro presence_outline_8x8() %} + +{% endmacro %} + +{% macro presence_solid_8x8() %} + +{% endmacro %} + +{% macro presence_strikethrough_8x8() %} + {% endmacro %} {% macro public() %} - - - + {% endmacro %} {% macro qr_code() %} - - - - - + {% endmacro %} {% macro quote() %} - - - + +{% endmacro %} + +{% macro raised_hand_solid() %} + {% endmacro %} {% macro reaction_add() %} - - - - + +{% endmacro %} + +{% macro reaction_solid() %} + {% endmacro %} {% macro reaction() %} - - - - + {% endmacro %} {% macro reply() %} - - - + {% endmacro %} {% macro restart() %} - - - + +{% endmacro %} + +{% macro room() %} + {% endmacro %} {% macro search() %} - - - + {% endmacro %} {% macro send_solid() %} - - - + {% endmacro %} {% macro send() %} - - - + {% endmacro %} {% macro settings_solid() %} - - - + {% endmacro %} {% macro settings() %} - - - - + {% endmacro %} {% macro share_android() %} - - - + {% endmacro %} {% macro share_ios() %} - - - - + {% endmacro %} {% macro share_screen_solid() %} - - - + {% endmacro %} {% macro share_screen() %} - - - - + {% endmacro %} {% macro share() %} - - - + {% endmacro %} {% macro sidebar() %} - - - + {% endmacro %} {% macro sign_out() %} - - - + {% endmacro %} {% macro spinner() %} - - - + +{% endmacro %} + +{% macro spotlight_view() %} + {% endmacro %} {% macro spotlight() %} - - - + {% endmacro %} {% macro strikethrough() %} - - - + {% endmacro %} {% macro switch_camera_solid() %} - - - - + +{% endmacro %} + +{% macro take_photo_solid() %} + {% endmacro %} {% macro take_photo() %} - - - + {% endmacro %} {% macro text_formatting() %} - - - + {% endmacro %} {% macro threads_solid() %} - - - + {% endmacro %} {% macro threads() %} - - - - + {% endmacro %} {% macro time() %} - - - - + {% endmacro %} {% macro underline() %} - - - + {% endmacro %} {% macro unknown_solid() %} - - - + {% endmacro %} {% macro unknown() %} - - - - + +{% endmacro %} + +{% macro unpin() %} + {% endmacro %} {% macro user_add_solid() %} - - - + {% endmacro %} {% macro user_add() %} - - - + {% endmacro %} {% macro user_profile_solid() %} - - - - + {% endmacro %} {% macro user_profile() %} - - - - - + {% endmacro %} {% macro user_solid() %} - - - + {% endmacro %} {% macro user() %} - - - + {% endmacro %} {% macro verified() %} - - - + {% endmacro %} {% macro video_call_declined_solid() %} - - - + {% endmacro %} {% macro video_call_missed_solid() %} - - - + {% endmacro %} {% macro video_call_off_solid() %} - - - + {% endmacro %} {% macro video_call_off() %} - - - + {% endmacro %} {% macro video_call_solid() %} - - - + {% endmacro %} {% macro video_call() %} - - - + {% endmacro %} {% macro visibility_off() %} - - - + {% endmacro %} {% macro visibility_on() %} - - - + +{% endmacro %} + +{% macro voice_call_solid() %} + {% endmacro %} {% macro voice_call() %} - - - + {% endmacro %} {% macro volume_off_solid() %} - - - + {% endmacro %} {% macro volume_off() %} - - - + {% endmacro %} {% macro volume_on_solid() %} - - - - + {% endmacro %} {% macro volume_on() %} - - - - + {% endmacro %} {% macro warning() %} - - - - + {% endmacro %} {% macro web_browser() %} - - - + +{% endmacro %} + +{% macro windows() %} + {% endmacro %} diff --git a/templates/components/scope.html b/templates/components/scope.html index 2b0e1606d..2f0ae107c 100644 --- a/templates/components/scope.html +++ b/templates/components/scope.html @@ -18,9 +18,9 @@ Please see LICENSE in the repository root for full details.
  • {{ icon.chat() }}

    {{ _("mas.scope.view_messages") }}

  • {{ icon.send() }}

    {{ _("mas.scope.send_messages") }}

    • {% elif scope == "urn:synapse:admin:*" %} -
  • {{ icon.error() }}

    {{ _("mas.scope.synapse_admin") }}

    • +
  • {{ icon.error_solid() }}

    {{ _("mas.scope.synapse_admin") }}

    • {% elif scope == "urn:mas:admin" %} -
  • {{ icon.error() }}

    {{ _("mas.scope.mas_admin") }}

    • +
  • {{ icon.error_solid() }}

    {{ _("mas.scope.mas_admin") }}

    • {% elif scope is startingwith("urn:matrix:org.matrix.msc2967.client:device:") %} {# We hide this scope #} {% else %} diff --git a/templates/pages/error.html b/templates/pages/error.html index bc9b1e1ca..d0785637a 100644 --- a/templates/pages/error.html +++ b/templates/pages/error.html @@ -15,7 +15,7 @@ Please see LICENSE in the repository root for full details.
    - {{ icon.error() }} + {{ icon.error_solid() }}
    diff --git a/templates/pages/policy_violation.html b/templates/pages/policy_violation.html index 5fb71ab5c..cca0365c4 100644 --- a/templates/pages/policy_violation.html +++ b/templates/pages/policy_violation.html @@ -11,7 +11,7 @@ Please see LICENSE in the repository root for full details. {% block content %}
    - {{ icon.error() }} + {{ icon.error_solid() }}
    diff --git a/templates/pages/recovery/consumed.html b/templates/pages/recovery/consumed.html index a6c516ff2..e289f3fed 100644 --- a/templates/pages/recovery/consumed.html +++ b/templates/pages/recovery/consumed.html @@ -11,7 +11,7 @@ Please see LICENSE in the repository root for full details. {% block content %}
    - {{ icon.error() }} + {{ icon.error_solid() }}
    diff --git a/templates/pages/recovery/expired.html b/templates/pages/recovery/expired.html index 07311ba3f..29004445a 100644 --- a/templates/pages/recovery/expired.html +++ b/templates/pages/recovery/expired.html @@ -11,7 +11,7 @@ Please see LICENSE in the repository root for full details. {% block content %}
    - {{ icon.error() }} + {{ icon.error_solid() }}
    diff --git a/templates/pages/register/steps/email_in_use.html b/templates/pages/register/steps/email_in_use.html index fd8bb784f..ce9a0bdb0 100644 --- a/templates/pages/register/steps/email_in_use.html +++ b/templates/pages/register/steps/email_in_use.html @@ -11,7 +11,7 @@ Please see LICENSE in the repository root for full details.
    - {{ icon.error() }} + {{ icon.error_solid() }}