From b839f6b5c63a0a5529b471b17e9390f32bf03f92 Mon Sep 17 00:00:00 2001 From: Andy Balaam Date: Wed, 17 Dec 2025 13:56:36 +0000 Subject: [PATCH 1/3] TEMPORARILY depend on my alternative spec package --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 0ba5892d1f0..f8c915654a9 100644 --- a/package.json +++ b/package.json @@ -89,7 +89,7 @@ "@matrix-org/analytics-events": "^0.30.0", "@matrix-org/emojibase-bindings": "^1.5.0", "@matrix-org/react-sdk-module-api": "^2.4.0", - "@matrix-org/spec": "^1.7.0", + "andybalaam-matrix-spec": "^0.0.1", "@sentry/browser": "^10.0.0", "@types/png-chunks-extract": "^1.0.2", "@vector-im/compound-design-tokens": "6.4.3", diff --git a/yarn.lock b/yarn.lock index 20ad046f5d1..252c4be6346 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2401,11 +2401,6 @@ dependencies: "@babel/runtime" "^7.17.9" -"@matrix-org/spec@^1.7.0": - version "1.16.0" - resolved "https://registry.yarnpkg.com/@matrix-org/spec/-/spec-1.16.0.tgz#c88f4ed521e4c0bd3a4c108bcaf13f25173a0fdc" - integrity sha512-xUKHkwGXXISMCfTrx6JW6uGEK5O8IeZVOjBm7FX1h/ihpK6l50nlSIMRYdtz4V6q3pvOVBOCft4hPYTJVeTZDA== - "@napi-rs/wasm-runtime@^0.2.11": version "0.2.12" resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz#3e78a8b96e6c33a6c517e1894efbd5385a7cb6f2" @@ -4543,6 +4538,11 @@ ajv@^8.0.0, ajv@^8.0.1, ajv@^8.9.0: json-schema-traverse "^1.0.0" require-from-string "^2.0.2" +andybalaam-matrix-spec@^0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/andybalaam-matrix-spec/-/andybalaam-matrix-spec-0.0.1.tgz#e770977ee574f968731af945d6147fb10a30b3b9" + integrity sha512-w5XkYTAkUCOzppgFuhwZPgEU2fBaR7Tajqn+XJeSLmt6of2dpYZeGVNwXB8xgQxz2xlnIIH5aNUTrLao3RiKQA== + another-json@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/another-json/-/another-json-0.2.0.tgz#b5f4019c973b6dd5c6506a2d93469cb6d32aeedc" From 2ac6f50a6df901e72c8966511a5509284231beea Mon Sep 17 00:00:00 2001 From: Andy Balaam Date: Wed, 17 Dec 2025 14:47:37 +0000 Subject: [PATCH 2/3] Use the images from the spec package --- .../verification/_VerificationShowSas.pcss | 6 +- .../verification/VerificationShowSas.tsx | 152 ++++++++++++++++-- 2 files changed, 145 insertions(+), 13 deletions(-) diff --git a/res/css/views/verification/_VerificationShowSas.pcss b/res/css/views/verification/_VerificationShowSas.pcss index 9e4d1f138b3..df3fc97d3a1 100644 --- a/res/css/views/verification/_VerificationShowSas.pcss +++ b/res/css/views/verification/_VerificationShowSas.pcss @@ -39,10 +39,8 @@ Please see LICENSE files in the repository root for full details. width: 60px; } -.mx_VerificationShowSas_emojiSas_emoji { - font-size: $font-32px; - /* Use the Twemoji font for consistency with other clients */ - font-family: Twemoji, var(--cpd-font-family-sans); +.mx_VerificationShowSas_emojiSas_emoji > svg { + height: 32px; } .mx_VerificationShowSas_emojiSas_label { diff --git a/src/components/views/verification/VerificationShowSas.tsx b/src/components/views/verification/VerificationShowSas.tsx index 0f6272a8850..d364d3ff8cd 100644 --- a/src/components/views/verification/VerificationShowSas.tsx +++ b/src/components/views/verification/VerificationShowSas.tsx @@ -6,15 +6,146 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React from "react"; +import React, { type FC } from "react"; import { type Device } from "matrix-js-sdk/src/matrix"; import { type GeneratedSas, type EmojiMapping } from "matrix-js-sdk/src/crypto-api"; -import SasEmoji from "@matrix-org/spec/sas-emoji.json"; +import SasEmoji from "andybalaam-matrix-spec/sas-emoji.json"; +import { Icon as Emoji00 } from "andybalaam-matrix-spec/sas-emoji/00.svg"; +import { Icon as Emoji01 } from "andybalaam-matrix-spec/sas-emoji/01.svg"; +import { Icon as Emoji02 } from "andybalaam-matrix-spec/sas-emoji/02.svg"; +import { Icon as Emoji03 } from "andybalaam-matrix-spec/sas-emoji/03.svg"; +import { Icon as Emoji04 } from "andybalaam-matrix-spec/sas-emoji/04.svg"; +import { Icon as Emoji05 } from "andybalaam-matrix-spec/sas-emoji/05.svg"; +import { Icon as Emoji06 } from "andybalaam-matrix-spec/sas-emoji/06.svg"; +import { Icon as Emoji07 } from "andybalaam-matrix-spec/sas-emoji/07.svg"; +import { Icon as Emoji08 } from "andybalaam-matrix-spec/sas-emoji/08.svg"; +import { Icon as Emoji09 } from "andybalaam-matrix-spec/sas-emoji/09.svg"; +import { Icon as Emoji10 } from "andybalaam-matrix-spec/sas-emoji/10.svg"; +import { Icon as Emoji11 } from "andybalaam-matrix-spec/sas-emoji/11.svg"; +import { Icon as Emoji12 } from "andybalaam-matrix-spec/sas-emoji/12.svg"; +import { Icon as Emoji13 } from "andybalaam-matrix-spec/sas-emoji/13.svg"; +import { Icon as Emoji14 } from "andybalaam-matrix-spec/sas-emoji/14.svg"; +import { Icon as Emoji15 } from "andybalaam-matrix-spec/sas-emoji/15.svg"; +import { Icon as Emoji16 } from "andybalaam-matrix-spec/sas-emoji/16.svg"; +import { Icon as Emoji17 } from "andybalaam-matrix-spec/sas-emoji/17.svg"; +import { Icon as Emoji18 } from "andybalaam-matrix-spec/sas-emoji/18.svg"; +import { Icon as Emoji19 } from "andybalaam-matrix-spec/sas-emoji/19.svg"; +import { Icon as Emoji20 } from "andybalaam-matrix-spec/sas-emoji/20.svg"; +import { Icon as Emoji21 } from "andybalaam-matrix-spec/sas-emoji/21.svg"; +import { Icon as Emoji22 } from "andybalaam-matrix-spec/sas-emoji/22.svg"; +import { Icon as Emoji23 } from "andybalaam-matrix-spec/sas-emoji/23.svg"; +import { Icon as Emoji24 } from "andybalaam-matrix-spec/sas-emoji/24.svg"; +import { Icon as Emoji25 } from "andybalaam-matrix-spec/sas-emoji/25.svg"; +import { Icon as Emoji26 } from "andybalaam-matrix-spec/sas-emoji/26.svg"; +import { Icon as Emoji27 } from "andybalaam-matrix-spec/sas-emoji/27.svg"; +import { Icon as Emoji28 } from "andybalaam-matrix-spec/sas-emoji/28.svg"; +import { Icon as Emoji29 } from "andybalaam-matrix-spec/sas-emoji/29.svg"; +import { Icon as Emoji30 } from "andybalaam-matrix-spec/sas-emoji/30.svg"; +import { Icon as Emoji31 } from "andybalaam-matrix-spec/sas-emoji/31.svg"; +import { Icon as Emoji32 } from "andybalaam-matrix-spec/sas-emoji/32.svg"; +import { Icon as Emoji33 } from "andybalaam-matrix-spec/sas-emoji/33.svg"; +import { Icon as Emoji34 } from "andybalaam-matrix-spec/sas-emoji/34.svg"; +import { Icon as Emoji35 } from "andybalaam-matrix-spec/sas-emoji/35.svg"; +import { Icon as Emoji36 } from "andybalaam-matrix-spec/sas-emoji/36.svg"; +import { Icon as Emoji37 } from "andybalaam-matrix-spec/sas-emoji/37.svg"; +import { Icon as Emoji38 } from "andybalaam-matrix-spec/sas-emoji/38.svg"; +import { Icon as Emoji39 } from "andybalaam-matrix-spec/sas-emoji/39.svg"; +import { Icon as Emoji40 } from "andybalaam-matrix-spec/sas-emoji/40.svg"; +import { Icon as Emoji41 } from "andybalaam-matrix-spec/sas-emoji/41.svg"; +import { Icon as Emoji42 } from "andybalaam-matrix-spec/sas-emoji/42.svg"; +import { Icon as Emoji43 } from "andybalaam-matrix-spec/sas-emoji/43.svg"; +import { Icon as Emoji44 } from "andybalaam-matrix-spec/sas-emoji/44.svg"; +import { Icon as Emoji45 } from "andybalaam-matrix-spec/sas-emoji/45.svg"; +import { Icon as Emoji46 } from "andybalaam-matrix-spec/sas-emoji/46.svg"; +import { Icon as Emoji47 } from "andybalaam-matrix-spec/sas-emoji/47.svg"; +import { Icon as Emoji48 } from "andybalaam-matrix-spec/sas-emoji/48.svg"; +import { Icon as Emoji49 } from "andybalaam-matrix-spec/sas-emoji/49.svg"; +import { Icon as Emoji50 } from "andybalaam-matrix-spec/sas-emoji/50.svg"; +import { Icon as Emoji51 } from "andybalaam-matrix-spec/sas-emoji/51.svg"; +import { Icon as Emoji52 } from "andybalaam-matrix-spec/sas-emoji/52.svg"; +import { Icon as Emoji53 } from "andybalaam-matrix-spec/sas-emoji/53.svg"; +import { Icon as Emoji54 } from "andybalaam-matrix-spec/sas-emoji/54.svg"; +import { Icon as Emoji55 } from "andybalaam-matrix-spec/sas-emoji/55.svg"; +import { Icon as Emoji56 } from "andybalaam-matrix-spec/sas-emoji/56.svg"; +import { Icon as Emoji57 } from "andybalaam-matrix-spec/sas-emoji/57.svg"; +import { Icon as Emoji58 } from "andybalaam-matrix-spec/sas-emoji/58.svg"; +import { Icon as Emoji59 } from "andybalaam-matrix-spec/sas-emoji/59.svg"; +import { Icon as Emoji60 } from "andybalaam-matrix-spec/sas-emoji/60.svg"; +import { Icon as Emoji61 } from "andybalaam-matrix-spec/sas-emoji/61.svg"; +import { Icon as Emoji62 } from "andybalaam-matrix-spec/sas-emoji/62.svg"; +import { Icon as Emoji63 } from "andybalaam-matrix-spec/sas-emoji/63.svg"; import { _t, getNormalizedLanguageKeys, getUserLanguage } from "../../../languageHandler"; import { PendingActionSpinner } from "../right_panel/EncryptionInfo"; import AccessibleButton from "../elements/AccessibleButton"; +const emojiImages: Record = { + "Dog": Emoji00, + "Cat": Emoji01, + "Lion": Emoji02, + "Horse": Emoji03, + "Unicorn": Emoji04, + "Pig": Emoji05, + "Elephant": Emoji06, + "Rabbit": Emoji07, + "Panda": Emoji08, + "Rooster": Emoji09, + "Penguin": Emoji10, + "Turtle": Emoji11, + "Fish": Emoji12, + "Octopus": Emoji13, + "Butterfly": Emoji14, + "Flower": Emoji15, + "Tree": Emoji16, + "Cactus": Emoji17, + "Mushroom": Emoji18, + "Globe": Emoji19, + "Moon": Emoji20, + "Cloud": Emoji21, + "Fire": Emoji22, + "Banana": Emoji23, + "Apple": Emoji24, + "Strawberry": Emoji25, + "Corn": Emoji26, + "Pizza": Emoji27, + "Cake": Emoji28, + "Heart": Emoji29, + "Smiley": Emoji30, + "Robot": Emoji31, + "Hat": Emoji32, + "Glasses": Emoji33, + "Spanner": Emoji34, + "Santa": Emoji35, + "Thumbs Up": Emoji36, + "Umbrella": Emoji37, + "Hourglass": Emoji38, + "Clock": Emoji39, + "Gift": Emoji40, + "Light Bulb": Emoji41, + "Book": Emoji42, + "Pencil": Emoji43, + "Paperclip": Emoji44, + "Scissors": Emoji45, + "Lock": Emoji46, + "Key": Emoji47, + "Hammer": Emoji48, + "Telephone": Emoji49, + "Flag": Emoji50, + "Train": Emoji51, + "Bicycle": Emoji52, + "Aeroplane": Emoji53, + "Rocket": Emoji54, + "Trophy": Emoji55, + "Ball": Emoji56, + "Guitar": Emoji57, + "Trumpet": Emoji58, + "Bell": Emoji59, + "Anchor": Emoji60, + "Headphones": Emoji61, + "Folder": Emoji62, + "Pin": Emoji63, +}; + interface IProps { pending?: boolean; displayName?: string; // required if pending is true @@ -105,14 +236,17 @@ export default class VerificationShowSas extends React.Component let sasDisplay; let sasCaption; if (this.props.sas.emoji) { - const emojiBlocks = this.props.sas.emoji.map((emoji, i) => ( -
-
- {emoji[0]} + const emojiBlocks = this.props.sas.emoji.map((emoji, i) => { + const EmojiImage = emojiImages[emoji[1]]; + return ( +
+
+ +
+
{tEmoji(emoji, locale)}
-
{tEmoji(emoji, locale)}
-
- )); + ); + }); sasDisplay = (
{emojiBlocks.slice(0, 4)} From 2bbfab40612e48eacc1d2ec390c9459492d1a533 Mon Sep 17 00:00:00 2001 From: Andy Balaam Date: Fri, 19 Dec 2025 11:32:30 +0000 Subject: [PATCH 3/3] Use large emoji images --- package.json | 2 +- res/css/views/verification/_VerificationShowSas.pcss | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index f8c915654a9..e319219cbd9 100644 --- a/package.json +++ b/package.json @@ -89,7 +89,7 @@ "@matrix-org/analytics-events": "^0.30.0", "@matrix-org/emojibase-bindings": "^1.5.0", "@matrix-org/react-sdk-module-api": "^2.4.0", - "andybalaam-matrix-spec": "^0.0.1", + "andybalaam-matrix-spec": "^0.0.2", "@sentry/browser": "^10.0.0", "@types/png-chunks-extract": "^1.0.2", "@vector-im/compound-design-tokens": "6.4.3", diff --git a/res/css/views/verification/_VerificationShowSas.pcss b/res/css/views/verification/_VerificationShowSas.pcss index df3fc97d3a1..9934a44ee06 100644 --- a/res/css/views/verification/_VerificationShowSas.pcss +++ b/res/css/views/verification/_VerificationShowSas.pcss @@ -40,7 +40,7 @@ Please see LICENSE files in the repository root for full details. } .mx_VerificationShowSas_emojiSas_emoji > svg { - height: 32px; + height: 48px; } .mx_VerificationShowSas_emojiSas_label { diff --git a/yarn.lock b/yarn.lock index 252c4be6346..534c7680ec8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4538,10 +4538,10 @@ ajv@^8.0.0, ajv@^8.0.1, ajv@^8.9.0: json-schema-traverse "^1.0.0" require-from-string "^2.0.2" -andybalaam-matrix-spec@^0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/andybalaam-matrix-spec/-/andybalaam-matrix-spec-0.0.1.tgz#e770977ee574f968731af945d6147fb10a30b3b9" - integrity sha512-w5XkYTAkUCOzppgFuhwZPgEU2fBaR7Tajqn+XJeSLmt6of2dpYZeGVNwXB8xgQxz2xlnIIH5aNUTrLao3RiKQA== +andybalaam-matrix-spec@^0.0.2: + version "0.0.2" + resolved "https://registry.yarnpkg.com/andybalaam-matrix-spec/-/andybalaam-matrix-spec-0.0.2.tgz#7e5cac3226b515ad7d4fbf18f5db925978efc08d" + integrity sha512-f5PwWcy2hUp8RtCpbPo0xAymZsJn1NtXBTTkKvmx8edK3zcCQhOHBdLmd6WxOyUYfQGCI2c0MYWOrFUhagMZHw== another-json@^0.2.0: version "0.2.0"