diff --git a/.editorconfig b/.editorconfig index 98ebc4dc8f1..331e3938087 100644 --- a/.editorconfig +++ b/.editorconfig @@ -24,3 +24,6 @@ trim_trailing_whitespace = true [*.{yml,yaml}] indent_size = 4 + +[*.tsx.snap] +trim_trailing_whitespace = false diff --git a/.github/workflows/static_analysis.yaml b/.github/workflows/static_analysis.yaml index c4bf0ef3be7..43c2e408b63 100644 --- a/.github/workflows/static_analysis.yaml +++ b/.github/workflows/static_analysis.yaml @@ -43,46 +43,6 @@ jobs: - name: Typecheck (release mode) run: "yarn run lint:types" - tsc-strict: - name: Typescript Strict Error Checker - if: github.event_name == 'pull_request' - runs-on: ubuntu-latest - permissions: - pull-requests: read - checks: write - steps: - - uses: actions/checkout@v3 - with: - ref: ${{ github.event.pull_request.head.sha }} - - - name: Install Deps - run: "scripts/ci/layered.sh" - - - name: Get diff lines - id: diff - uses: Equip-Collaboration/diff-line-numbers@e752977e2cb4207d671bb9e4dad18c07c1b73d52 # v1.1.0 - with: - include: '["\\.tsx?$"]' - - - name: Detecting files changed - id: files - uses: futuratrepadeira/changed-files@0239328a3a6268aad16af7c3e4efc78e32d6c0f0 # v4.0.1 - with: - repo-token: ${{ secrets.GITHUB_TOKEN }} - pattern: '^.*\.tsx?$' - - - uses: t3chguy/typescript-check-action@main - with: - repo-token: ${{ secrets.GITHUB_TOKEN }} - use-check: false - check-fail-mode: added - output-behaviour: annotate - ts-extra-args: "--strict --noImplicitAny" - files-changed: ${{ steps.files.outputs.files_updated }} - files-added: ${{ steps.files.outputs.files_created }} - files-deleted: ${{ steps.files.outputs.files_deleted }} - line-numbers: ${{ steps.diff.outputs.lineNumbers }} - i18n_lint: name: "i18n Check" uses: matrix-org/matrix-react-sdk/.github/workflows/i18n_check.yml@develop diff --git a/CHANGELOG.md b/CHANGELOG.md index afeec56d197..50348836724 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,50 @@ +Changes in [3.76.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.76.0) (2023-07-18) +===================================================================================================== + +## 🔒 Security + * Fixes for [CVE-2023-37259](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE-2023-37259) / [GHSA-c9vx-2g7w-rp65](https://github.com/matrix-org/matrix-react-sdk/security/advisories/GHSA-c9vx-2g7w-rp65) + +## ✨ Features + * GYU: Update banner ([\#11211](https://github.com/matrix-org/matrix-react-sdk/pull/11211)). Fixes vector-im/element-web#25530. Contributed by @justjanne. + * Linkify mxc:// URLs as links to your media repo ([\#11213](https://github.com/matrix-org/matrix-react-sdk/pull/11213)). Fixes vector-im/element-web#6942. + * OIDC: Log in ([\#11199](https://github.com/matrix-org/matrix-react-sdk/pull/11199)). Fixes vector-im/element-web#25657. Contributed by @kerryarchibald. + * Handle all permitted url schemes in linkify ([\#11215](https://github.com/matrix-org/matrix-react-sdk/pull/11215)). Fixes vector-im/element-web#4457 and vector-im/element-web#8720. + * Autoapprove Element Call oidc requests ([\#11209](https://github.com/matrix-org/matrix-react-sdk/pull/11209)). Contributed by @toger5. + * Allow creating knock rooms ([\#11182](https://github.com/matrix-org/matrix-react-sdk/pull/11182)). Contributed by @charlynguyen. + * feat(faq): remove keyboard shortcuts button ([\#9342](https://github.com/matrix-org/matrix-react-sdk/pull/9342)). Fixes vector-im/element-web#22625. Contributed by @gefgu. + * Expose and pre-populate thread ID in devtools dialog ([\#10953](https://github.com/matrix-org/matrix-react-sdk/pull/10953)). + * Hide URL preview if it will be empty ([\#9029](https://github.com/matrix-org/matrix-react-sdk/pull/9029)). + * Change wording from avatar to profile picture ([\#7015](https://github.com/matrix-org/matrix-react-sdk/pull/7015)). Fixes vector-im/element-meta#1331. Contributed by @aaronraimist. + * Quick and dirty devtool to explore state history ([\#11197](https://github.com/matrix-org/matrix-react-sdk/pull/11197)). + * Consider more user inputs when calculating zxcvbn score ([\#11180](https://github.com/matrix-org/matrix-react-sdk/pull/11180)). + * GYU: Account Notification Settings ([\#11008](https://github.com/matrix-org/matrix-react-sdk/pull/11008)). Fixes vector-im/element-web#24567. Contributed by @justjanne. + * Compound Typography pass ([\#11103](https://github.com/matrix-org/matrix-react-sdk/pull/11103)). Fixes vector-im/element-web#25548. + * OIDC: navigate to authorization endpoint ([\#11096](https://github.com/matrix-org/matrix-react-sdk/pull/11096)). Fixes vector-im/element-web#25574. Contributed by @kerryarchibald. + +## 🐛 Bug Fixes + * Fix missing metaspace notification badges ([\#11269](https://github.com/matrix-org/matrix-react-sdk/pull/11269)). Fixes vector-im/element-web#25679. + * Make checkboxes less rounded ([\#11224](https://github.com/matrix-org/matrix-react-sdk/pull/11224)). Contributed by @andybalaam. + * GYU: Fix issues with audible keywords without activated mentions ([\#11218](https://github.com/matrix-org/matrix-react-sdk/pull/11218)). Contributed by @justjanne. + * PosthogAnalytics unwatch settings on logout ([\#11207](https://github.com/matrix-org/matrix-react-sdk/pull/11207)). Fixes vector-im/element-web#25703. + * Avoid trying to set room account data for pinned events as guest ([\#11216](https://github.com/matrix-org/matrix-react-sdk/pull/11216)). Fixes vector-im/element-web#6300. + * GYU: Disable sound for DMs checkbox when DM notifications are disabled ([\#11210](https://github.com/matrix-org/matrix-react-sdk/pull/11210)). Contributed by @justjanne. + * force to allow calls without video and audio in embedded mode ([\#11131](https://github.com/matrix-org/matrix-react-sdk/pull/11131)). Contributed by @EnricoSchw. + * Fix room tile text clipping ([\#11196](https://github.com/matrix-org/matrix-react-sdk/pull/11196)). Fixes vector-im/element-web#25718. + * Handle newlines in user pills ([\#11166](https://github.com/matrix-org/matrix-react-sdk/pull/11166)). Fixes vector-im/element-web#10994. + * Limit width of user menu in space panel ([\#11192](https://github.com/matrix-org/matrix-react-sdk/pull/11192)). Fixes vector-im/element-web#22627. + * Add isLocation to ComposerEvent analytics events ([\#11187](https://github.com/matrix-org/matrix-react-sdk/pull/11187)). Contributed by @andybalaam. + * Fix: hide unsupported login elements ([\#11185](https://github.com/matrix-org/matrix-react-sdk/pull/11185)). Fixes vector-im/element-web#25711. Contributed by @kerryarchibald. + * Scope smaller font size to user info panel ([\#11178](https://github.com/matrix-org/matrix-react-sdk/pull/11178)). Fixes vector-im/element-web#25683. + * Apply i18n to strings in the html export ([\#11176](https://github.com/matrix-org/matrix-react-sdk/pull/11176)). + * Inhibit url previews on MXIDs containing slashes same as those without ([\#11160](https://github.com/matrix-org/matrix-react-sdk/pull/11160)). + * Make event info size consistent with state events ([\#11181](https://github.com/matrix-org/matrix-react-sdk/pull/11181)). + * Fix markdown content spacing ([\#11177](https://github.com/matrix-org/matrix-react-sdk/pull/11177)). Fixes vector-im/element-web#25685. + * Fix font-family definition for emojis ([\#11170](https://github.com/matrix-org/matrix-react-sdk/pull/11170)). Fixes vector-im/element-web#25686. + * Fix spurious error sending receipt in thread errors ([\#11157](https://github.com/matrix-org/matrix-react-sdk/pull/11157)). + * Consider the empty push rule actions array equiv to deprecated dont_notify ([\#11155](https://github.com/matrix-org/matrix-react-sdk/pull/11155)). Fixes vector-im/element-web#25674. + * Only trap escape key for cancel reply if there is a reply ([\#11140](https://github.com/matrix-org/matrix-react-sdk/pull/11140)). Fixes vector-im/element-web#25640. + * Update linkify to 4.1.1 ([\#11132](https://github.com/matrix-org/matrix-react-sdk/pull/11132)). Fixes vector-im/element-web#23806. + Changes in [3.75.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.75.0) (2023-07-04) ===================================================================================================== diff --git a/cypress/e2e/crypto/crypto.spec.ts b/cypress/e2e/crypto/crypto.spec.ts index 0d323dbcec8..718ef1f3e67 100644 --- a/cypress/e2e/crypto/crypto.spec.ts +++ b/cypress/e2e/crypto/crypto.spec.ts @@ -116,9 +116,9 @@ const verify = function (this: CryptoTestContext) { // this requires creating a DM, so can take a while. Give it a longer timeout. cy.findByRole("button", { name: "Verify by emoji", timeout: 30000 }).click(); - cy.wrap(bobsVerificationRequestPromise).then((request: VerificationRequest) => { + cy.wrap(bobsVerificationRequestPromise).then(async (request: VerificationRequest) => { // the bot user races with the Element user to hit the "verify by emoji" button - const verifier = request.beginKeyVerification("m.sas.v1"); + const verifier = await request.startVerification("m.sas.v1"); doTwoWaySasVerification(verifier); }); cy.findByRole("button", { name: "They match" }).click(); diff --git a/cypress/e2e/crypto/utils.ts b/cypress/e2e/crypto/utils.ts index 3d63fcb124d..5de56cde9d3 100644 --- a/cypress/e2e/crypto/utils.ts +++ b/cypress/e2e/crypto/utils.ts @@ -28,13 +28,11 @@ export type EmojiMapping = [emoji: string, name: string]; export function waitForVerificationRequest(cli: MatrixClient): Promise { return new Promise((resolve) => { const onVerificationRequestEvent = async (request: VerificationRequest) => { - // @ts-ignore CryptoEvent is not exported to window.matrixcs; using the string value here - cli.off("crypto.verification.request", onVerificationRequestEvent); await request.accept(); resolve(request); }; - // @ts-ignore - cli.on("crypto.verification.request", onVerificationRequestEvent); + // @ts-ignore CryptoEvent is not exported to window.matrixcs; using the string value here + cli.once("crypto.verificationRequestReceived", onVerificationRequestEvent); }); } @@ -59,7 +57,6 @@ export function handleSasVerification(verifier: Verifier): Promise { cy.get(".mx_VerificationShowSas_emojiSas_block").then((emojiBlocks) => { emojis.forEach((emoji: EmojiMapping, index: number) => { - expect(emojiBlocks[index].textContent.toLowerCase()).to.eq(emoji[0] + emoji[1]); + // VerificationShowSas munges the case of the emoji descriptions returned by the js-sdk before + // displaying them. Once we drop support for legacy crypto, that code can go away, and so can the + // case-munging here. + expect(emojiBlocks[index].textContent.toLowerCase()).to.eq(emoji[0] + emoji[1].toLowerCase()); }); }); }); diff --git a/cypress/e2e/crypto/verification.spec.ts b/cypress/e2e/crypto/verification.spec.ts index cf07159cb50..b6ec5f0fbb9 100644 --- a/cypress/e2e/crypto/verification.spec.ts +++ b/cypress/e2e/crypto/verification.spec.ts @@ -17,7 +17,7 @@ limitations under the License. import type { VerificationRequest, Verifier } from "matrix-js-sdk/src/crypto-api/verification"; import { CypressBot } from "../../support/bot"; import { HomeserverInstance } from "../../plugins/utils/homeserver"; -import { emitPromise, skipIfRustCrypto } from "../../support/util"; +import { emitPromise } from "../../support/util"; import { checkDeviceIsCrossSigned, doTwoWaySasVerification, logIntoElement, waitForVerificationRequest } from "./utils"; import { getToast } from "../../support/toasts"; @@ -26,7 +26,6 @@ describe("Device verification", () => { let homeserver: HomeserverInstance; beforeEach(() => { - skipIfRustCrypto(); cy.startHomeserver("default").then((data: HomeserverInstance) => { homeserver = data; @@ -37,7 +36,7 @@ describe("Device verification", () => { cy.window({ log: false }).should("have.property", "matrixcs"); // Create a new device for alice - cy.getBot(homeserver, { bootstrapCrossSigning: true }).then((bot) => { + cy.getBot(homeserver, { rustCrypto: true, bootstrapCrossSigning: true }).then((bot) => { aliceBotClient = bot; }); }); @@ -72,9 +71,9 @@ describe("Device verification", () => { // Handle emoji SAS verification cy.get(".mx_InfoDialog").within(() => { - cy.get("@verificationRequest").then((request: VerificationRequest) => { + cy.get("@verificationRequest").then(async (request: VerificationRequest) => { // the bot chooses to do an emoji verification - const verifier = request.beginKeyVerification("m.sas.v1"); + const verifier = await request.startVerification("m.sas.v1"); // Handle emoji request and check that emojis are matching doTwoWaySasVerification(verifier); diff --git a/cypress/e2e/login/login.spec.ts b/cypress/e2e/login/login.spec.ts index 9bc6dd3f1b2..2968f0946be 100644 --- a/cypress/e2e/login/login.spec.ts +++ b/cypress/e2e/login/login.spec.ts @@ -47,6 +47,30 @@ describe("Login", () => { // wait for the dialog to go away cy.get(".mx_ServerPickerDialog").should("not.exist"); + cy.get(".mx_Spinner").should("not.exist"); + cy.get(".mx_ServerPicker_server").should("have.text", homeserver.baseUrl); + + cy.findByRole("button", { name: "Edit" }).click(); + + // select the default server again + cy.get(".mx_StyledRadioButton").first().click(); + cy.findByRole("button", { name: "Continue" }).click(); + cy.get(".mx_ServerPickerDialog").should("not.exist"); + cy.get(".mx_Spinner").should("not.exist"); + // name of default server + cy.get(".mx_ServerPicker_server").should("have.text", "server.invalid"); + + // switch back to the custom homeserver + + cy.findByRole("button", { name: "Edit" }).click(); + cy.findByRole("textbox", { name: "Other homeserver" }).type(homeserver.baseUrl); + cy.findByRole("button", { name: "Continue" }).click(); + // wait for the dialog to go away + cy.get(".mx_ServerPickerDialog").should("not.exist"); + + cy.get(".mx_Spinner").should("not.exist"); + cy.get(".mx_ServerPicker_server").should("have.text", homeserver.baseUrl); + cy.findByRole("textbox", { name: "Username", timeout: 15000 }).should("be.visible"); // Disabled because flaky - see https://github.com/vector-im/element-web/issues/24688 //cy.percySnapshot("Login"); diff --git a/cypress/e2e/right-panel/file-panel.spec.ts b/cypress/e2e/right-panel/file-panel.spec.ts index b36edfb276f..fa436772bab 100644 --- a/cypress/e2e/right-panel/file-panel.spec.ts +++ b/cypress/e2e/right-panel/file-panel.spec.ts @@ -238,22 +238,6 @@ describe("FilePanel", () => { }); }); }); - - it("should not add inline padding to a tile when it is selected with right click", () => { - // Upload a file - uploadFile("cypress/fixtures/1sec.ogg"); - - cy.get(".mx_FilePanel .mx_RoomView_MessageList").within(() => { - // Wait until the spinner of the audio player vanishes - cy.get(".mx_InlineSpinner").should("not.exist"); - - // Right click the uploaded file to select the tile - cy.get(".mx_EventTile").rightclick(); - - // Assert that inline padding is not applied - cy.get(".mx_EventTile_selected .mx_EventTile_line").should("have.css", "padding-inline", "0px"); - }); - }); }); describe("download", () => { diff --git a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts index cb22d26b58b..e57f00a1396 100644 --- a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts +++ b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts @@ -122,9 +122,10 @@ describe("Appearance user settings tab", () => { // Click the left position of the slider cy.get("input").realClick({ position: "left" }); + const MIN_FONT_SIZE = 11; // Assert that the smallest font size is selected - cy.get("input[value='13']").should("exist"); - cy.get("output .mx_Slider_selection_label").findByText("13"); + cy.get(`input[value='${MIN_FONT_SIZE}']`).should("exist"); + cy.get("output .mx_Slider_selection_label").findByText(MIN_FONT_SIZE); }); cy.get(".mx_FontScalingPanel_fontSlider").percySnapshotElement("Font size slider - smallest (13)", { @@ -135,12 +136,13 @@ describe("Appearance user settings tab", () => { // Click the right position of the slider cy.get("input").realClick({ position: "right" }); + const MAX_FONT_SIZE = 21; // Assert that the largest font size is selected - cy.get("input[value='18']").should("exist"); - cy.get("output .mx_Slider_selection_label").findByText("18"); + cy.get(`input[value='${MAX_FONT_SIZE}']`).should("exist"); + cy.get("output .mx_Slider_selection_label").findByText(MAX_FONT_SIZE); }); - cy.get(".mx_FontScalingPanel_fontSlider").percySnapshotElement("Font size slider - largest (18)", { + cy.get(".mx_FontScalingPanel_fontSlider").percySnapshotElement("Font size slider - largest (21)", { widths: [486], }); }); diff --git a/cypress/e2e/settings/hidden-rr-migration.spec.ts b/cypress/e2e/settings/hidden-rr-migration.spec.ts deleted file mode 100644 index 729bf7ebd7b..00000000000 --- a/cypress/e2e/settings/hidden-rr-migration.spec.ts +++ /dev/null @@ -1,90 +0,0 @@ -/* -Copyright 2022 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -/// - -import { HomeserverInstance } from "../../plugins/utils/homeserver"; - -function seedLabs(homeserver: HomeserverInstance, labsVal: boolean | null): void { - cy.initTestUser(homeserver, "Sally", () => { - // seed labs flag - cy.window({ log: false }).then((win) => { - if (typeof labsVal === "boolean") { - // stringify boolean - win.localStorage.setItem("mx_labs_feature_feature_hidden_read_receipts", `${labsVal}`); - } - }); - }); -} - -function testForVal(settingVal: boolean | null): void { - const testRoomName = "READ RECEIPTS"; - cy.createRoom({ name: testRoomName }).as("roomId"); - cy.all([cy.get("@roomId")]).then(() => { - cy.viewRoomByName(testRoomName).then(() => { - // if we can see the room, then sync is working for us. It's time to see if the - // migration even ran. - - cy.getSettingValue("sendReadReceipts", null, true).should("satisfy", (val) => { - if (typeof settingVal === "boolean") { - return val === settingVal; - } else { - return !val; // falsy - we don't actually care if it's undefined, null, or a literal false - } - }); - }); - }); -} - -describe("Hidden Read Receipts Setting Migration", () => { - // We run this as a full-blown end-to-end test to ensure it works in an integration - // sense. If we unit tested it, we'd be testing that the code works but not that the - // migration actually runs. - // - // Here, we get to test that not only the code works but also that it gets run. Most - // of our interactions are with the JS console as we're honestly just checking that - // things got set correctly. - // - // For a security-sensitive feature like hidden read receipts, it's absolutely vital - // that we migrate the setting appropriately. - - let homeserver: HomeserverInstance; - - beforeEach(() => { - cy.startHomeserver("default").then((data) => { - homeserver = data; - }); - }); - - afterEach(() => { - cy.stopHomeserver(homeserver); - }); - - it("should not migrate the lack of a labs flag", () => { - seedLabs(homeserver, null); - testForVal(null); - }); - - it("should migrate labsHiddenRR=false as sendRR=true", () => { - seedLabs(homeserver, false); - testForVal(true); - }); - - it("should migrate labsHiddenRR=true as sendRR=false", () => { - seedLabs(homeserver, true); - testForVal(false); - }); -}); diff --git a/cypress/e2e/settings/security-user-settings-tab.spec.ts b/cypress/e2e/settings/security-user-settings-tab.spec.ts index aed3eeb6893..341624dee30 100644 --- a/cypress/e2e/settings/security-user-settings-tab.spec.ts +++ b/cypress/e2e/settings/security-user-settings-tab.spec.ts @@ -25,7 +25,7 @@ describe("Security user settings tab", () => { cy.stopHomeserver(homeserver); }); - describe.skip("with posthog enabled", () => { + describe("with posthog enabled", () => { beforeEach(() => { // Enable posthog cy.intercept("/config.json?cachebuster=*", (req) => { diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 10650d14f4e..6acf8a19b2f 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -204,13 +204,6 @@ describe("Timeline", () => { cy.findByRole("button", { name: "collapse" }).should("exist"); }); - // Check the height of expanded GELS line - cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_GenericEventListSummary_spacer").should( - "have.css", - "line-height", - "18px", // var(--irc-line-height): $font-18px (See: _IRCLayout.pcss) - ); - cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on IRC layout", { percyCSS }); }); @@ -238,13 +231,6 @@ describe("Timeline", () => { cy.findByRole("button", { name: "collapse" }).should("exist"); }); - // Check the height of expanded GELS line - cy.get(".mx_GenericEventListSummary[data-layout=group] .mx_GenericEventListSummary_spacer").should( - "have.css", - "line-height", - "22px", // $font-22px (See: _GenericEventListSummary.pcss) - ); - cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on modern layout", { percyCSS }); }); diff --git a/cypress/e2e/toasts/analytics-toast.spec.ts b/cypress/e2e/toasts/analytics-toast.spec.ts index c1c6edc9020..4cc8baa838e 100644 --- a/cypress/e2e/toasts/analytics-toast.spec.ts +++ b/cypress/e2e/toasts/analytics-toast.spec.ts @@ -39,7 +39,7 @@ function rejectToast(expectedTitle: string): void { }); } -describe.skip("Analytics Toast", () => { +describe("Analytics Toast", () => { let homeserver: HomeserverInstance; afterEach(() => { diff --git a/cypress/support/bot.ts b/cypress/support/bot.ts index 6d16a110a40..5806bab7ef4 100644 --- a/cypress/support/bot.ts +++ b/cypress/support/bot.ts @@ -43,6 +43,10 @@ interface CreateBotOpts { * Whether or not to generate cross-signing keys */ bootstrapCrossSigning?: boolean; + /** + * Whether to use the rust crypto impl. Defaults to false (for now!) + */ + rustCrypto?: boolean; } const defaultCreateBotOptions = { @@ -125,66 +129,72 @@ function setupBotClient( opts: CreateBotOpts, ): Chainable { opts = Object.assign({}, defaultCreateBotOptions, opts); - return cy.window({ log: false }).then((win) => { - const keys = {}; + return cy.window({ log: false }).then( + // extra timeout, as this sometimes takes a while + { timeout: 30_000 }, + async (win): Promise => { + const keys = {}; - const getCrossSigningKey = (type: string) => { - return keys[type]; - }; + const getCrossSigningKey = (type: string) => { + return keys[type]; + }; - const saveCrossSigningKeys = (k: Record) => { - Object.assign(keys, k); - }; - - const cli = new win.matrixcs.MatrixClient({ - baseUrl: homeserver.baseUrl, - userId: credentials.userId, - deviceId: credentials.deviceId, - accessToken: credentials.accessToken, - store: new win.matrixcs.MemoryStore(), - scheduler: new win.matrixcs.MatrixScheduler(), - cryptoStore: new win.matrixcs.MemoryCryptoStore(), - cryptoCallbacks: { getCrossSigningKey, saveCrossSigningKeys }, - }); + const saveCrossSigningKeys = (k: Record) => { + Object.assign(keys, k); + }; - if (opts.autoAcceptInvites) { - cli.on(win.matrixcs.RoomMemberEvent.Membership, (event, member) => { - if (member.membership === "invite" && member.userId === cli.getUserId()) { - cli.joinRoom(member.roomId); - } + const cli = new win.matrixcs.MatrixClient({ + baseUrl: homeserver.baseUrl, + userId: credentials.userId, + deviceId: credentials.deviceId, + accessToken: credentials.accessToken, + store: new win.matrixcs.MemoryStore(), + scheduler: new win.matrixcs.MatrixScheduler(), + cryptoStore: new win.matrixcs.MemoryCryptoStore(), + cryptoCallbacks: { getCrossSigningKey, saveCrossSigningKeys }, }); - } - if (!opts.startClient) { - return cy.wrap(cli); - } + if (opts.autoAcceptInvites) { + cli.on(win.matrixcs.RoomMemberEvent.Membership, (event, member) => { + if (member.membership === "invite" && member.userId === cli.getUserId()) { + cli.joinRoom(member.roomId); + } + }); + } - return cy.wrap( - cli - .initCrypto() - .then(() => cli.setGlobalErrorOnUnknownDevices(false)) - .then(() => cli.startClient()) - .then(async () => { - if (opts.bootstrapCrossSigning) { - await cli.bootstrapCrossSigning({ - authUploadDeviceSigningKeys: async (func) => { - await func({ - type: "m.login.password", - identifier: { - type: "m.id.user", - user: credentials.userId, - }, - password: credentials.password, - }); + if (!opts.startClient) { + return cli; + } + + if (opts.rustCrypto) { + await cli.initRustCrypto({ useIndexedDB: false }); + } else { + await cli.initCrypto(); + } + cli.setGlobalErrorOnUnknownDevices(false); + await cli.startClient(); + + if (opts.bootstrapCrossSigning) { + // XXX: workaround https://github.com/matrix-org/matrix-rust-sdk/issues/2193 + // wait for out device list to be available, as a proxy for the device keys having been uploaded. + await cli.getCrypto()!.getUserDeviceInfo([credentials.userId]); + + await cli.getCrypto()!.bootstrapCrossSigning({ + authUploadDeviceSigningKeys: async (func) => { + await func({ + type: "m.login.password", + identifier: { + type: "m.id.user", + user: credentials.userId, }, + password: credentials.password, }); - } - }) - .then(() => cli), - // extra timeout, as this sometimes takes a while - { timeout: 30_000 }, - ); - }); + }, + }); + } + return cli; + }, + ); } Cypress.Commands.add("getBot", (homeserver: HomeserverInstance, opts: CreateBotOpts): Chainable => { diff --git a/cypress/support/login.ts b/cypress/support/login.ts index b830c23f1ef..5a65da17617 100644 --- a/cypress/support/login.ts +++ b/cypress/support/login.ts @@ -137,7 +137,14 @@ Cypress.Commands.add( prelaunchFn?.(); return cy - .visit("/") + .visit("/", { + onBeforeLoad(win) { + // reset notification permissions so we have predictable behaviour + // of notifications toast + // @ts-ignore allow setting default + cy.stub(win.Notification, "permission", "default"); + }, + }) .then(() => { // wait for the app to load return cy.get(".mx_MatrixChat", { timeout: 30000 }); diff --git a/package.json b/package.json index c0ea05466e8..1deed201182 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "3.75.0", + "version": "3.76.0", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { @@ -62,7 +62,7 @@ "@babel/runtime": "^7.12.5", "@matrix-org/analytics-events": "^0.5.0", "@matrix-org/matrix-wysiwyg": "^2.3.0", - "@matrix-org/react-sdk-module-api": "^0.0.5", + "@matrix-org/react-sdk-module-api": "^0.0.6", "@sentry/browser": "^7.0.0", "@sentry/tracing": "^7.0.0", "@testing-library/react-hooks": "^8.0.1", @@ -89,15 +89,15 @@ "is-ip": "^3.1.0", "jszip": "^3.7.0", "katex": "^0.16.0", - "linkify-element": "4.0.0-beta.4", - "linkify-react": "4.0.0-beta.4", - "linkify-string": "4.0.0-beta.4", - "linkifyjs": "4.0.0-beta.4", + "linkify-element": "4.1.1", + "linkify-react": "4.1.1", + "linkify-string": "4.1.1", + "linkifyjs": "4.1.1", "lodash": "^4.17.20", "maplibre-gl": "^2.0.0", "matrix-encrypt-attachment": "^1.0.3", "matrix-events-sdk": "0.0.1", - "matrix-js-sdk": "26.2.0", + "matrix-js-sdk": "27.0.0", "matrix-widget-api": "^1.4.0", "memoize-one": "^6.0.0", "minimist": "^1.2.5", @@ -117,7 +117,7 @@ "react-transition-group": "^4.4.1", "rfc4648": "^1.4.0", "sanitize-filename": "^1.6.3", - "sanitize-html": "2.10.0", + "sanitize-html": "2.11.0", "tar-js": "^0.3.0", "ua-parser-js": "^1.0.2", "what-input": "^5.2.10", @@ -185,14 +185,14 @@ "cypress-each": "^1.13.3", "cypress-multi-reporters": "^1.6.1", "cypress-real-events": "^1.7.1", - "eslint": "8.42.0", + "eslint": "8.43.0", "eslint-config-google": "^0.14.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-deprecate": "^0.7.0", "eslint-plugin-import": "^2.25.4", "eslint-plugin-jest": "^27.2.1", "eslint-plugin-jsx-a11y": "^6.5.1", - "eslint-plugin-matrix-org": "1.1.0", + "eslint-plugin-matrix-org": "1.2.0", "eslint-plugin-react": "^7.28.0", "eslint-plugin-react-hooks": "^4.3.0", "eslint-plugin-unicorn": "^47.0.0", diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 1785667eccd..8138997261d 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -2,7 +2,7 @@ Copyright 2015, 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd Copyright 2017 - 2019 New Vector Ltd -Copyright 2019 - 2021 The Matrix.org Foundation C.I.C +Copyright 2019 - 2023 The Matrix.org Foundation C.I.C Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -19,7 +19,6 @@ limitations under the License. @import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css"); @import "./_font-sizes.pcss"; -@import "./_font-weights.pcss"; @import "./_border-radii.pcss"; @import "./_animations.pcss"; @import "./_spacing.pcss"; @@ -53,6 +52,20 @@ limitations under the License. --dialog-zIndex-standard: calc(var(--dialog-zIndex-standard-background) + 1); /* 4012 */ } +/** + * We need to increase the specificity of the selector to override the + * custom property set by the design tokens package + */ +[class^="cpd-theme"][class^="cpd-theme"] { + /** + * The design tokens package currently does not expose the fallback fonts + * We want to keep on re-using `$font-family` to not break custom themes + * and because we can to use `Twemoji` to display emoji rather than using + * system ones + */ + --cpd-font-family-sans: $font-family; +} + @media only percy { :root { --percy-color-avatar: $username-variant2-color; @@ -78,8 +91,9 @@ html { } body { - font-family: $font-family; - font-size: $font-15px; + font: var(--cpd-font-body-md-regular); + letter-spacing: var(--cpd-font-letter-spacing-body-md); + background-color: $background; color: $primary-content; border: 0px; @@ -120,8 +134,8 @@ b { h2 { color: $primary-content; - font-weight: 400; - font-size: $font-18px; + font: var(--cpd-font-heading-lg-regular); + letter-spacing: var(--cpd-font-letter-spacing-heading-lg); margin-top: 16px; margin-bottom: 16px; } @@ -135,10 +149,9 @@ a:visited { input[type="text"], input[type="search"], input[type="password"] { - font-family: inherit; padding: 9px; - font-size: $font-14px; - font-weight: var(--font-semi-bold); + font: var(--cpd-font-body-md-semibold); + font-weight: var(--cpd-font-weight-semibold); min-width: 0; } @@ -338,11 +351,12 @@ legend { /* Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants. */ .markdown-body { + font: var(--cpd-font-body-md-regular) !important; + letter-spacing: var(--cpd-font-letter-spacing-body-md); font-family: inherit !important; white-space: normal !important; line-height: inherit !important; color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */ - font-size: $font-14px; pre, code { @@ -499,7 +513,7 @@ legend { .mx_Dialog_content { margin: 24px 0 68px; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $primary-content; word-wrap: break-word; } @@ -536,8 +550,7 @@ legend { vertical-align: middle; border: 0px; border-radius: $border-radius-8px; - font-family: $font-family; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $button-fg-color; background-color: $accent; width: auto; @@ -571,7 +584,7 @@ legend { margin-bottom: 5px; /* flip colours for the secondary ones */ - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); border: 1px solid $accent; color: $accent; background-color: $button-secondary-bg-color; @@ -791,7 +804,7 @@ legend { @define-mixin LegacyCallButton { box-sizing: border-box; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); height: $font-24px; line-height: $font-24px; margin-right: 0; @@ -813,7 +826,7 @@ legend { @define-mixin ThreadRepliesAmount { color: $secondary-content; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); white-space: nowrap; position: relative; padding: 0 $spacing-12 0 $spacing-8; diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 145714fdd85..12d2457fc5d 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -2,7 +2,6 @@ @import "./_animations.pcss"; @import "./_common.pcss"; @import "./_font-sizes.pcss"; -@import "./_font-weights.pcss"; @import "./_spacing.pcss"; @import "./components/views/beacon/_BeaconListItem.pcss"; @import "./components/views/beacon/_BeaconStatus.pcss"; @@ -322,6 +321,8 @@ @import "./views/settings/_JoinRuleSettings.pcss"; @import "./views/settings/_KeyboardShortcut.pcss"; @import "./views/settings/_LayoutSwitcher.pcss"; +@import "./views/settings/_NotificationPusherSettings.pcss"; +@import "./views/settings/_NotificationSettings2.pcss"; @import "./views/settings/_Notifications.pcss"; @import "./views/settings/_PhoneNumbers.pcss"; @import "./views/settings/_ProfileSettings.pcss"; @@ -332,6 +333,8 @@ @import "./views/settings/_SpellCheckLanguages.pcss"; @import "./views/settings/_ThemeChoicePanel.pcss"; @import "./views/settings/_UpdateCheckButton.pcss"; +@import "./views/settings/tabs/_SettingsBanner.pcss"; +@import "./views/settings/tabs/_SettingsIndent.pcss"; @import "./views/settings/tabs/_SettingsSection.pcss"; @import "./views/settings/tabs/_SettingsTab.pcss"; @import "./views/settings/tabs/room/_NotificationSettingsTab.pcss"; diff --git a/res/css/_font-sizes.pcss b/res/css/_font-sizes.pcss index 5d83ff83df6..bb447ebfa0b 100644 --- a/res/css/_font-sizes.pcss +++ b/res/css/_font-sizes.pcss @@ -21,63 +21,33 @@ limitations under the License. * "Font size" setting). They exist to make the job of converting designs (which tend to be based in pixels) into CSS * easier. * - * That means that, slightly confusingly, `$font-10px` is only *actually* 10px at the default font size: at a base - * `font-size` of 15, it is actually 15px. */ -$font-1px: 0.1rem; -$font-1-5px: 0.15rem; -$font-2px: 0.2rem; -$font-3px: 0.3rem; -$font-4px: 0.4rem; -$font-5px: 0.5rem; -$font-6px: 0.6rem; -$font-7px: 0.7rem; -$font-8px: 0.8rem; -$font-9px: 0.9rem; -$font-10px: 1rem; -$font-10-4px: 1.04rem; -$font-11px: 1.1rem; -$font-12px: 1.2rem; -$font-13px: 1.3rem; -$font-14px: 1.4rem; -$font-15px: 1.5rem; -$font-16px: 1.6rem; -$font-17px: 1.7rem; -$font-18px: 1.8rem; -$font-19px: 1.9rem; -$font-20px: 2rem; -$font-21px: 2.1rem; -$font-22px: 2.2rem; -$font-23px: 2.3rem; -$font-24px: 2.4rem; -$font-25px: 2.5rem; -$font-26px: 2.6rem; -$font-27px: 2.7rem; -$font-28px: 2.8rem; -$font-29px: 2.9rem; -$font-30px: 3rem; -$font-31px: 3.1rem; -$font-32px: 3.2rem; -$font-33px: 3.3rem; -$font-34px: 3.4rem; -$font-35px: 3.5rem; -$font-36px: 3.6rem; -$font-37px: 3.7rem; -$font-38px: 3.8rem; -$font-39px: 3.9rem; -$font-40px: 4rem; -$font-41px: 4.1rem; -$font-42px: 4.2rem; -$font-43px: 4.3rem; -$font-44px: 4.4rem; -$font-45px: 4.5rem; -$font-46px: 4.6rem; -$font-47px: 4.7rem; -$font-48px: 4.8rem; -$font-49px: 4.9rem; -$font-50px: 5rem; -$font-51px: 5.1rem; -$font-52px: 5.2rem; -$font-78px: 7.8rem; -$font-88px: 8.8rem; -$font-400px: 40rem; +$font-1px: 0.0625rem; +$font-8px: 0.5rem; +$font-9px: 0.5625rem; +$font-10px: 0.625rem; +$font-10-4px: 0.6275rem; +$font-11px: 0.6875rem; +$font-12px: 0.75rem; +$font-13px: 0.8125rem; +$font-14px: 0.875rem; +$font-15px: 0.9375rem; +$font-16px: 1rem; +$font-17px: 1.0625rem; +$font-18px: 1.125rem; +$font-20px: 1.25rem; +$font-22px: 1.375rem; +$font-23px: 1.4375rem; +$font-24px: 1.5rem; +$font-25px: 1.5625rem; +$font-26px: 1.625rem; +$font-28px: 1.75rem; +$font-29px: 1.8125rem; +$font-30px: 1.875rem; +$font-32px: 2rem; +$font-34px: 2.125rem; +$font-35px: 2.1875rem; +$font-39px: 2.4375rem; +$font-42px: 2.625rem; +$font-44px: 2.75rem; +$font-48px: 3rem; diff --git a/res/css/components/views/beacon/_BeaconListItem.pcss b/res/css/components/views/beacon/_BeaconListItem.pcss index c9b39bbebf4..3389ccc3a2f 100644 --- a/res/css/components/views/beacon/_BeaconListItem.pcss +++ b/res/css/components/views/beacon/_BeaconListItem.pcss @@ -55,7 +55,7 @@ limitations under the License. margin-bottom: $spacing-8; .mx_BeaconStatus_label { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } } diff --git a/res/css/components/views/beacon/_DialogSidebar.pcss b/res/css/components/views/beacon/_DialogSidebar.pcss index c33f74e0366..31d3b7b16d5 100644 --- a/res/css/components/views/beacon/_DialogSidebar.pcss +++ b/res/css/components/views/beacon/_DialogSidebar.pcss @@ -57,6 +57,6 @@ limitations under the License. } .mx_DialogSidebar_noResults { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $secondary-content; } diff --git a/res/css/components/views/beacon/_OwnBeaconStatus.pcss b/res/css/components/views/beacon/_OwnBeaconStatus.pcss index dedf02da7a6..a0776b942aa 100644 --- a/res/css/components/views/beacon/_OwnBeaconStatus.pcss +++ b/res/css/components/views/beacon/_OwnBeaconStatus.pcss @@ -27,5 +27,5 @@ limitations under the License. .mx_OwnBeaconStatus_destructiveButton { /* override button link_inline styles */ color: $alert !important; - font-weight: var(--font-semi-bold) !important; + font-weight: var(--cpd-font-weight-semibold) !important; } diff --git a/res/css/components/views/elements/_AppPermission.pcss b/res/css/components/views/elements/_AppPermission.pcss index 71f282ebeee..4bbe0ac07a7 100644 --- a/res/css/components/views/elements/_AppPermission.pcss +++ b/res/css/components/views/elements/_AppPermission.pcss @@ -19,7 +19,9 @@ limitations under the License. font-size: $font-12px; width: 100%; /* make mx_AppPermission fill width of mx_AppTileBody so that scroll bar appears on the edge */ overflow-y: scroll; - + .mx_AppPermission_bolder { + font-weight: var(--cpd-font-weight-semibold); + } .mx_AppPermission_content { margin-block: auto; /* place at the center */ diff --git a/res/css/components/views/elements/_FilterDropdown.pcss b/res/css/components/views/elements/_FilterDropdown.pcss index a73a45c03ee..dc264ca9226 100644 --- a/res/css/components/views/elements/_FilterDropdown.pcss +++ b/res/css/components/views/elements/_FilterDropdown.pcss @@ -72,7 +72,7 @@ limitations under the License. } .mx_FilterDropdown_optionLabel { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); display: block; } diff --git a/res/css/components/views/elements/_FilterTabGroup.pcss b/res/css/components/views/elements/_FilterTabGroup.pcss index 05329cb7d00..946bd7f5431 100644 --- a/res/css/components/views/elements/_FilterTabGroup.pcss +++ b/res/css/components/views/elements/_FilterTabGroup.pcss @@ -38,7 +38,7 @@ limitations under the License. &:checked + span { color: $accent; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); // underline box-shadow: 0 1.5px 0 0 currentColor; } diff --git a/res/css/components/views/pips/_WidgetPip.pcss b/res/css/components/views/pips/_WidgetPip.pcss index cecc0e1365a..f6bf5a2a63e 100644 --- a/res/css/components/views/pips/_WidgetPip.pcss +++ b/res/css/components/views/pips/_WidgetPip.pcss @@ -42,7 +42,7 @@ limitations under the License. padding: $spacing-12; display: flex; font-size: $font-12px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); } diff --git a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss index c2a0d5bb780..e161c0b14aa 100644 --- a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss +++ b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss @@ -65,7 +65,7 @@ limitations under the License. } .mx_DeviceSecurityCard_description { margin: 0; - font-size: $font-12px; + font: var(--cpd-font-body-sm-regular); color: $secondary-content; } diff --git a/res/css/components/views/settings/shared/_SettingsSubsection.pcss b/res/css/components/views/settings/shared/_SettingsSubsection.pcss index 2d8894150f0..6ee9ac429c8 100644 --- a/res/css/components/views/settings/shared/_SettingsSubsection.pcss +++ b/res/css/components/views/settings/shared/_SettingsSubsection.pcss @@ -26,7 +26,6 @@ limitations under the License. .mx_SettingsSubsection_text { width: 100%; box-sizing: inherit; - font-size: $font-15px; color: $secondary-content; } diff --git a/res/css/components/views/spaces/_QuickThemeSwitcher.pcss b/res/css/components/views/spaces/_QuickThemeSwitcher.pcss index a729134c124..66a97313538 100644 --- a/res/css/components/views/spaces/_QuickThemeSwitcher.pcss +++ b/res/css/components/views/spaces/_QuickThemeSwitcher.pcss @@ -30,7 +30,7 @@ limitations under the License. } .mx_QuickThemeSwitcher_heading { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-12px; line-height: $font-15px; color: $secondary-content; diff --git a/res/css/components/views/typography/_Caption.pcss b/res/css/components/views/typography/_Caption.pcss index f51276d9f96..cad93f3881a 100644 --- a/res/css/components/views/typography/_Caption.pcss +++ b/res/css/components/views/typography/_Caption.pcss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_Caption { - font-size: $font-12px; + font: var(--cpd-font-body-sm-regular); color: $secondary-content; &.mx_Caption_error { diff --git a/res/css/structures/_ContextualMenu.pcss b/res/css/structures/_ContextualMenu.pcss index 0530c967ecf..9db1fc61492 100644 --- a/res/css/structures/_ContextualMenu.pcss +++ b/res/css/structures/_ContextualMenu.pcss @@ -35,7 +35,6 @@ limitations under the License. background-color: $menu-bg-color; color: $primary-content; position: absolute; - font-size: $font-14px; z-index: 5001; width: max-content; } diff --git a/res/css/structures/_FilePanel.pcss b/res/css/structures/_FilePanel.pcss index 99de3d32965..9a1ebda894e 100644 --- a/res/css/structures/_FilePanel.pcss +++ b/res/css/structures/_FilePanel.pcss @@ -70,11 +70,11 @@ limitations under the License. padding-top: $spacing-8; display: flex; justify-content: space-between; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $event-timestamp-color; .mx_MImageBody_size { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); text-align: right; white-space: nowrap; } @@ -100,7 +100,7 @@ limitations under the License. .mx_MessageTimestamp { text-align: right; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); } } } diff --git a/res/css/structures/_GenericDropdownMenu.pcss b/res/css/structures/_GenericDropdownMenu.pcss index c3740cc847d..1722c7fd2e1 100644 --- a/res/css/structures/_GenericDropdownMenu.pcss +++ b/res/css/structures/_GenericDropdownMenu.pcss @@ -92,7 +92,7 @@ limitations under the License. span:first-child { color: $primary-content; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } } diff --git a/res/css/structures/_HomePage.pcss b/res/css/structures/_HomePage.pcss index 24d17f42616..1dc672f0920 100644 --- a/res/css/structures/_HomePage.pcss +++ b/res/css/structures/_HomePage.pcss @@ -37,15 +37,15 @@ limitations under the License. } h1 { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-32px; - line-height: $font-44px; + line-height: 1.375; margin-bottom: 4px; } h2 { margin-top: 4px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-18px; line-height: $font-25px; color: $muted-fg-color; @@ -73,7 +73,7 @@ limitations under the License. word-break: break-word; box-sizing: border-box; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-15px; line-height: $font-20px; color: #fff; /* on all themes */ diff --git a/res/css/structures/_LargeLoader.pcss b/res/css/structures/_LargeLoader.pcss index 555eb4bee55..55f57b02942 100644 --- a/res/css/structures/_LargeLoader.pcss +++ b/res/css/structures/_LargeLoader.pcss @@ -29,7 +29,7 @@ limitations under the License. .mx_LargeLoader_text { font-size: 24px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); padding: 0 16px; position: relative; text-align: center; diff --git a/res/css/structures/_QuickSettingsButton.pcss b/res/css/structures/_QuickSettingsButton.pcss index 3f26e132504..631b098ad64 100644 --- a/res/css/structures/_QuickSettingsButton.pcss +++ b/res/css/structures/_QuickSettingsButton.pcss @@ -59,7 +59,7 @@ limitations under the License. contain: unset; /* let the dropdown paint beyond the context menu */ > div > h2 { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-15px; line-height: $font-24px; color: $primary-content; @@ -72,7 +72,7 @@ limitations under the License. } > div > h4 { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-12px; line-height: $font-15px; text-transform: uppercase; diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss index 3dd183aab5a..f3ed5fd6b66 100644 --- a/res/css/structures/_RightPanel.pcss +++ b/res/css/structures/_RightPanel.pcss @@ -83,7 +83,7 @@ limitations under the License. h2, p { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); } &::before { @@ -103,7 +103,7 @@ limitations under the License. .mx_RightPanel_scopeHeader { margin: 24px; text-align: center; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-18px; line-height: $font-22px; diff --git a/res/css/structures/_RoomSearch.pcss b/res/css/structures/_RoomSearch.pcss index bf05186d5aa..163dc45331f 100644 --- a/res/css/structures/_RoomSearch.pcss +++ b/res/css/structures/_RoomSearch.pcss @@ -43,15 +43,13 @@ limitations under the License. } .mx_RoomSearch_spotlightTriggerText { - font-size: $font-12px; - line-height: $font-16px; color: $tertiary-content; flex: 1; min-width: 0; /* the following rules are to match that of a real input field */ overflow: hidden; margin: 9px; - font-weight: var(--font-semi-bold); + font: var(--cpd-font-body-sm-semibold); } .mx_RoomSearch_shortcutPrompt { @@ -62,7 +60,7 @@ limitations under the License. font-size: $font-12px; line-height: $font-15px; font-family: inherit; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); color: $light-fg-color; margin-right: 6px; white-space: nowrap; diff --git a/res/css/structures/_RoomStatusBar.pcss b/res/css/structures/_RoomStatusBar.pcss index 51445c6a53f..63df8348f85 100644 --- a/res/css/structures/_RoomStatusBar.pcss +++ b/res/css/structures/_RoomStatusBar.pcss @@ -186,7 +186,7 @@ limitations under the License. .mx_RoomStatusBar_typingBar { height: 50px; - line-height: $font-50px; + line-height: 50px; color: $primary-content; opacity: 0.5; @@ -205,6 +205,6 @@ limitations under the License. .mx_RoomStatusBar_typingBar { height: 40px; - line-height: $font-40px; + line-height: 40px; } } diff --git a/res/css/structures/_SpaceHierarchy.pcss b/res/css/structures/_SpaceHierarchy.pcss index 663c4d680d8..535d6393bf5 100644 --- a/res/css/structures/_SpaceHierarchy.pcss +++ b/res/css/structures/_SpaceHierarchy.pcss @@ -46,7 +46,7 @@ limitations under the License. .mx_SpaceHierarchy_listHeader_header { grid-column-start: 1; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); margin: 0; } @@ -71,7 +71,7 @@ limitations under the License. .mx_SpaceHierarchy_error { position: relative; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); color: $alert; font-size: $font-15px; line-height: $font-18px; @@ -94,7 +94,7 @@ limitations under the License. .mx_SpaceHierarchy_roomCount { > h3 { display: inline; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-18px; line-height: $font-22px; color: $primary-content; @@ -167,7 +167,7 @@ limitations under the License. gap: 6px 12px; .mx_SpaceHierarchy_roomTile_item { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-15px; line-height: $font-18px; display: grid; @@ -233,7 +233,7 @@ limitations under the License. .mx_SpaceHierarchy_roomTile_info { grid-row: 2; grid-column: 2; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); font-weight: initial; line-height: $font-18px; color: $secondary-content; diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss index c73ab935e1c..57f533fe6d3 100644 --- a/res/css/structures/_SpacePanel.pcss +++ b/res/css/structures/_SpacePanel.pcss @@ -156,8 +156,7 @@ limitations under the License. display: block; text-overflow: ellipsis; overflow: hidden; - font-size: $font-14px; - line-height: $font-18px; + font: var(--cpd-font-body-md-regular); } .mx_SpaceButton_toggleCollapse { @@ -279,7 +278,7 @@ limitations under the License. border-radius: 8px; background-color: $panel-actions; font-size: $font-15px !important; /* override inline style */ - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); line-height: $font-18px; & + .mx_BaseAvatar_image { @@ -386,6 +385,7 @@ limitations under the License. padding: 0 2px 8px; border-bottom: 1px solid $quinary-content; margin: 12px 14px 4px 18px; + max-width: 226px; } } @@ -394,7 +394,7 @@ limitations under the License. .mx_SpacePanel_contextMenu_header { margin: 12px 16px 12px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-15px; line-height: $font-18px; overflow: hidden; @@ -446,7 +446,7 @@ limitations under the License. color: $tertiary-content; font-size: $font-10px; line-height: $font-12px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); //margin-left: 8px; } } diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss index a83fe420a71..f1bf0cf2141 100644 --- a/res/css/structures/_SpaceRoomView.pcss +++ b/res/css/structures/_SpaceRoomView.pcss @@ -22,7 +22,7 @@ limitations under the License. border-radius: 8px; border: 1px solid $input-border-color; font-size: $font-17px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); margin: 20px 0; > div { @@ -73,7 +73,7 @@ limitations under the License. h1 { margin: 0; font-size: $font-24px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); color: $primary-content; width: max-content; } @@ -120,7 +120,7 @@ limitations under the License. } .mx_SpaceRoomView_errorText { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-12px; line-height: $font-15px; color: $alert; diff --git a/res/css/structures/_ToastContainer.pcss b/res/css/structures/_ToastContainer.pcss index ce0357a3fc9..5d2e422b4fb 100644 --- a/res/css/structures/_ToastContainer.pcss +++ b/res/css/structures/_ToastContainer.pcss @@ -118,8 +118,8 @@ limitations under the License. h2 { margin: 0; - font-size: $font-15px; - font-weight: var(--font-semi-bold); + font: var(--cpd-font-heading-sm-medium); + font-weight: var(--cpd-font-weight-medium); display: inline; width: auto; } @@ -153,7 +153,7 @@ limitations under the License. overflow: hidden; text-overflow: ellipsis; margin: 4px 0 11px 0; - font-size: $font-12px; + font: var(--cpd-font-body-sm-regular); a { text-decoration: none; diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss index 1d47b2333e1..a905902ff6a 100644 --- a/res/css/structures/_UserMenu.pcss +++ b/res/css/structures/_UserMenu.pcss @@ -46,8 +46,15 @@ limitations under the License. } } + .mx_UserMenu_contextMenuButton { + width: 100%; + } + .mx_UserMenu_name { - font-weight: var(--font-semi-bold); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: var(--cpd-font-weight-semibold); font-size: $font-15px; line-height: $font-24px; margin-left: 10px; @@ -112,7 +119,7 @@ limitations under the License. .mx_UserMenu_contextMenu_displayName, .mx_UserMenu_contextMenu_userId { - font-size: $font-15px; + font: var(--cpd-font-heading-sm-regular); /* Automatically grow subelements to fit the container */ flex: 1; @@ -125,12 +132,7 @@ limitations under the License. } .mx_UserMenu_contextMenu_displayName { - font-weight: bold; - line-height: $font-20px; - } - - .mx_UserMenu_contextMenu_userId { - line-height: $font-24px; + font-weight: var(--cpd-font-weight-semibold); } } @@ -155,7 +157,7 @@ limitations under the License. display: inline-block; > span { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); display: block; & + span { diff --git a/res/css/structures/auth/_Login.pcss b/res/css/structures/auth/_Login.pcss index 2eba8cf3d14..aa4244bcfbd 100644 --- a/res/css/structures/auth/_Login.pcss +++ b/res/css/structures/auth/_Login.pcss @@ -18,7 +18,7 @@ limitations under the License. .mx_Login_submit { @mixin mx_DialogButton; font-size: 15px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); width: 100%; margin-top: 24px; margin-bottom: 24px; @@ -99,3 +99,8 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot { align-content: center; padding: 14px; } + +.mx_Login_fullWidthButton { + width: 100%; + margin-bottom: 16px; +} diff --git a/res/css/structures/auth/_Registration.pcss b/res/css/structures/auth/_Registration.pcss index b415e78f107..42ac7c0fb4e 100644 --- a/res/css/structures/auth/_Registration.pcss +++ b/res/css/structures/auth/_Registration.pcss @@ -21,7 +21,7 @@ limitations under the License. min-height: 270px; p { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $authpage-primary-color; &.secondary { diff --git a/res/css/views/auth/_AuthBody.pcss b/res/css/views/auth/_AuthBody.pcss index 14cef224e06..cd6fb00c534 100644 --- a/res/css/views/auth/_AuthBody.pcss +++ b/res/css/views/auth/_AuthBody.pcss @@ -25,7 +25,7 @@ limitations under the License. box-sizing: border-box; b { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } &.mx_AuthBody_flex { @@ -35,14 +35,13 @@ limitations under the License. h1 { font-size: $font-24px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); margin-top: $spacing-8; color: $authpage-primary-color; } h2 { - font-size: $font-14px; - font-weight: var(--font-semi-bold); + font: var(--cpd-font-body-md-semibold); color: $authpage-secondary-color; } @@ -141,7 +140,7 @@ limitations under the License. /* specialisation for password reset views */ .mx_AuthBody.mx_AuthBody_forgot-password { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $primary-content; padding: 50px 32px; min-height: 600px; @@ -156,7 +155,7 @@ limitations under the License. } .mx_Login_submit { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); margin: 0 0 $spacing-16; } @@ -169,7 +168,7 @@ limitations under the License. } .mx_AuthBody_sign-in-instead-button { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); padding: $spacing-4; } @@ -263,7 +262,7 @@ limitations under the License. text-align: center; > a { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } } diff --git a/res/css/views/auth/_AuthFooter.pcss b/res/css/views/auth/_AuthFooter.pcss index 0bc2743d544..36349594ecd 100644 --- a/res/css/views/auth/_AuthFooter.pcss +++ b/res/css/views/auth/_AuthFooter.pcss @@ -17,7 +17,7 @@ limitations under the License. .mx_AuthFooter { text-align: center; width: 100%; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); opacity: 0.72; padding: 20px 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); diff --git a/res/css/views/auth/_CompleteSecurityBody.pcss b/res/css/views/auth/_CompleteSecurityBody.pcss index f6ab111bf87..71c7209c1b8 100644 --- a/res/css/views/auth/_CompleteSecurityBody.pcss +++ b/res/css/views/auth/_CompleteSecurityBody.pcss @@ -25,13 +25,12 @@ limitations under the License. h2 { font-size: $font-24px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); margin-top: 0; } h3 { - font-size: $font-14px; - font-weight: var(--font-semi-bold); + font: var(--cpd-font-body-md-semibold); } a:link, diff --git a/res/css/views/auth/_LanguageSelector.pcss b/res/css/views/auth/_LanguageSelector.pcss index 8a762e0de3c..b2e179d000c 100644 --- a/res/css/views/auth/_LanguageSelector.pcss +++ b/res/css/views/auth/_LanguageSelector.pcss @@ -20,8 +20,7 @@ limitations under the License. .mx_AuthBody_language .mx_Dropdown_input { border: none; - font-size: $font-14px; - font-weight: var(--font-semi-bold); + font: var(--cpd-font-body-md-semibold); color: $authpage-lang-color; width: auto; } diff --git a/res/css/views/auth/_LoginWithQR.pcss b/res/css/views/auth/_LoginWithQR.pcss index 699d7b0f38e..665c351eb7b 100644 --- a/res/css/views/auth/_LoginWithQR.pcss +++ b/res/css/views/auth/_LoginWithQR.pcss @@ -57,7 +57,7 @@ limitations under the License. margin-left: $spacing-12; } - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); h1 { font-size: $font-24px; @@ -111,7 +111,7 @@ limitations under the License. .mx_LoginWithQR_confirmationDigits { text-align: center; margin: $spacing-48 auto; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-24px; color: $primary-content; } diff --git a/res/css/views/beta/_BetaCard.pcss b/res/css/views/beta/_BetaCard.pcss index 47ab7b005be..42dd3273474 100644 --- a/res/css/views/beta/_BetaCard.pcss +++ b/res/css/views/beta/_BetaCard.pcss @@ -31,7 +31,7 @@ limitations under the License. flex: 1; .mx_BetaCard_title { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-18px; line-height: $font-22px; color: $primary-content; @@ -73,8 +73,7 @@ limitations under the License. .mx_BetaCard_faq { margin-top: $spacing-20; - font-size: $font-12px; - line-height: $font-15px; + font: var(--cpd-font-body-xs-regular); > h4 { margin: $spacing-12 0 0; @@ -108,8 +107,7 @@ limitations under the License. .mx_SettingsFlag_microcopy { margin-top: $spacing-4; - font-size: $font-12px; - line-height: $font-15px; + font: var(--cpd-font-body-sm-regular); } } } @@ -121,7 +119,7 @@ limitations under the License. border-radius: 8px; text-transform: uppercase; font-size: $font-12px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); line-height: 15px; color: $button-primary-fg-color; display: inline-block; diff --git a/res/css/views/context_menus/_IconizedContextMenu.pcss b/res/css/views/context_menus/_IconizedContextMenu.pcss index de11fd41b33..2619c53c241 100644 --- a/res/css/views/context_menus/_IconizedContextMenu.pcss +++ b/res/css/views/context_menus/_IconizedContextMenu.pcss @@ -30,7 +30,7 @@ limitations under the License. .mx_IconizedContextMenu_optionList_label { font-size: $font-15px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } /* the notFirst class is for cases where the optionList might be under a header of sorts. */ @@ -79,8 +79,7 @@ limitations under the License. padding-bottom: 12px; text-decoration: none; color: $primary-content; - font-size: $font-15px; - line-height: $font-24px; + font: var(--cpd-font-body-md-regular); /* Create a flexbox to more easily define the list items */ display: flex; diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss index f71d43ba0b0..7866bac1c11 100644 --- a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss +++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss @@ -48,7 +48,7 @@ limitations under the License. margin: 0; color: $secondary-content; font-size: $font-12px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); line-height: $font-15px; } @@ -96,7 +96,7 @@ limitations under the License. } .mx_AddExistingToSpace_errorHeading { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-15px; line-height: $font-18px; color: $alert; @@ -171,7 +171,7 @@ limitations under the License. > div { > h1 { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-18px; line-height: $font-22px; margin: 0; diff --git a/res/css/views/dialogs/_CompoundDialog.pcss b/res/css/views/dialogs/_CompoundDialog.pcss index b9ddf7837a8..6777b4f81d4 100644 --- a/res/css/views/dialogs/_CompoundDialog.pcss +++ b/res/css/views/dialogs/_CompoundDialog.pcss @@ -37,7 +37,7 @@ limitations under the License. h1 { display: inline-block; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-24px; margin: 0; /* managed by header class */ } diff --git a/res/css/views/dialogs/_ConfirmUserActionDialog.pcss b/res/css/views/dialogs/_ConfirmUserActionDialog.pcss index cdcb2b45875..2d6fd430a47 100644 --- a/res/css/views/dialogs/_ConfirmUserActionDialog.pcss +++ b/res/css/views/dialogs/_ConfirmUserActionDialog.pcss @@ -34,7 +34,7 @@ limitations under the License. } .mx_ConfirmUserActionDialog_reasonField { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $primary-content; background-color: $background; } diff --git a/res/css/views/dialogs/_CreateRoomDialog.pcss b/res/css/views/dialogs/_CreateRoomDialog.pcss index 998b738cb45..d6b79e16386 100644 --- a/res/css/views/dialogs/_CreateRoomDialog.pcss +++ b/res/css/views/dialogs/_CreateRoomDialog.pcss @@ -19,7 +19,7 @@ limitations under the License. .mx_CreateRoomDialog_details_summary { list-style: none; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); cursor: pointer; color: $accent; @@ -96,7 +96,7 @@ limitations under the License. .mx_SettingsFlag_label { flex: 1 1 0; min-width: 0; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } .mx_ToggleSwitch { diff --git a/res/css/views/dialogs/_ExportDialog.pcss b/res/css/views/dialogs/_ExportDialog.pcss index 64599c669c7..ca972aaa723 100644 --- a/res/css/views/dialogs/_ExportDialog.pcss +++ b/res/css/views/dialogs/_ExportDialog.pcss @@ -19,7 +19,7 @@ limitations under the License. font-size: $font-16px; display: block; font-family: $font-family; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); color: $primary-content; margin-top: 18px; margin-bottom: 12px; diff --git a/res/css/views/dialogs/_FeedbackDialog.pcss b/res/css/views/dialogs/_FeedbackDialog.pcss index aa778e1776d..06c18ceddbe 100644 --- a/res/css/views/dialogs/_FeedbackDialog.pcss +++ b/res/css/views/dialogs/_FeedbackDialog.pcss @@ -41,7 +41,7 @@ limitations under the License. > h3 { margin-top: 0; margin-bottom: 8px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-18px; line-height: $font-22px; } diff --git a/res/css/views/dialogs/_ForwardDialog.pcss b/res/css/views/dialogs/_ForwardDialog.pcss index 4190c052e5b..e6c322a77c6 100644 --- a/res/css/views/dialogs/_ForwardDialog.pcss +++ b/res/css/views/dialogs/_ForwardDialog.pcss @@ -27,7 +27,7 @@ limitations under the License. margin: 0 0 6px; color: $secondary-content; font-size: $font-12px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); line-height: $font-15px; } diff --git a/res/css/views/dialogs/_GenericFeatureFeedbackDialog.pcss b/res/css/views/dialogs/_GenericFeatureFeedbackDialog.pcss index 83f93495143..3777a43bc51 100644 --- a/res/css/views/dialogs/_GenericFeatureFeedbackDialog.pcss +++ b/res/css/views/dialogs/_GenericFeatureFeedbackDialog.pcss @@ -17,7 +17,7 @@ limitations under the License. .mx_GenericFeatureFeedbackDialog { .mx_GenericFeatureFeedbackDialog_subheading { color: $primary-content; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); line-height: $font-20px; margin-bottom: 24px; } diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss index af7e7807758..f820eb24616 100644 --- a/res/css/views/dialogs/_InviteDialog.pcss +++ b/res/css/views/dialogs/_InviteDialog.pcss @@ -52,8 +52,8 @@ limitations under the License. > input[type="text"] { margin: 6px 0 !important; height: 24px; + font: var(--cpd-font-body-md-regular); line-height: $font-24px; - font-size: $font-14px; padding-inline-start: $spacing-12; border: 0 !important; outline: 0 !important; @@ -110,11 +110,11 @@ limitations under the License. .mx_InviteDialog_section_hidden_suggestions_disclaimer { padding: $spacing-8 0 $spacing-16 0; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); > span { color: $primary-content; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } > p { @@ -277,7 +277,7 @@ limitations under the License. input { font-size: 18px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); padding-top: 0; } @@ -429,7 +429,7 @@ limitations under the License. .mx_InviteDialog_tile_nameStack_name { font-size: $font-15px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); color: $primary-content; } diff --git a/res/css/views/dialogs/_JoinRuleDropdown.pcss b/res/css/views/dialogs/_JoinRuleDropdown.pcss index 83d73fcea28..6df937816e1 100644 --- a/res/css/views/dialogs/_JoinRuleDropdown.pcss +++ b/res/css/views/dialogs/_JoinRuleDropdown.pcss @@ -16,9 +16,7 @@ limitations under the License. .mx_JoinRuleDropdown { margin-bottom: 8px; - font-weight: normal; - font-family: $font-family; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $primary-content; .mx_Dropdown_input { @@ -26,7 +24,7 @@ limitations under the License. } .mx_Dropdown_option { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); line-height: $font-32px; height: 32px; min-height: 32px; @@ -46,6 +44,10 @@ limitations under the License. mask-position: center; background-color: $secondary-content; } + + &.mx_JoinRuleDropdown_knock::before { + content: normal; + } } } @@ -65,4 +67,11 @@ limitations under the License. mask-image: url("$(res)/img/element-icons/group-members.svg"); mask-size: contain; } + + .mx_JoinRuleDropdown_icon { + color: $secondary-content; + position: absolute; + left: 6px; + top: 8px; + } } diff --git a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss index 8a2d079399c..1082e500055 100644 --- a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss +++ b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss @@ -54,7 +54,7 @@ limitations under the License. margin: 0; color: $secondary-content; font-size: $font-12px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); line-height: $font-15px; } diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.pcss b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss index 69f854d50b9..03bf78e920d 100644 --- a/res/css/views/dialogs/_MessageEditHistoryDialog.pcss +++ b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss @@ -31,7 +31,7 @@ limitations under the License. .mx_MessageEditHistoryDialog_edits { list-style-type: none; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); padding: 0; color: $primary-content; diff --git a/res/css/views/dialogs/_PollCreateDialog.pcss b/res/css/views/dialogs/_PollCreateDialog.pcss index 0f9ba92cf14..dd5eb764eda 100644 --- a/res/css/views/dialogs/_PollCreateDialog.pcss +++ b/res/css/views/dialogs/_PollCreateDialog.pcss @@ -23,7 +23,7 @@ limitations under the License. } h2 { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-15px; line-height: $font-24px; margin-top: 0; diff --git a/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss b/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss index 746ba90b2db..274c0380de2 100644 --- a/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss +++ b/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss @@ -94,7 +94,7 @@ limitations under the License. .mx_RoomSettingsDialog_workspace_channel_details { color: $primary-content; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); .mx_RoomSettingsDialog_channel { margin-inline-start: 5px; diff --git a/res/css/views/dialogs/_ServerPickerDialog.pcss b/res/css/views/dialogs/_ServerPickerDialog.pcss index 440ddbf5f62..3089135824b 100644 --- a/res/css/views/dialogs/_ServerPickerDialog.pcss +++ b/res/css/views/dialogs/_ServerPickerDialog.pcss @@ -23,7 +23,8 @@ limitations under the License. > p { color: $secondary-content; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); + margin: 16px 0; &:first-of-type { @@ -37,7 +38,7 @@ limitations under the License. > h2 { font-size: $font-15px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); color: $secondary-content; margin: 16px 0 16px 8px; } diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.pcss b/res/css/views/dialogs/_SpaceSettingsDialog.pcss index 7b7c40e2689..ca224ba5c75 100644 --- a/res/css/views/dialogs/_SpaceSettingsDialog.pcss +++ b/res/css/views/dialogs/_SpaceSettingsDialog.pcss @@ -18,7 +18,7 @@ limitations under the License. color: $primary-content; .mx_SpaceSettings_errorText { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-12px; line-height: $font-15px; color: $alert; @@ -42,7 +42,7 @@ limitations under the License. margin-bottom: 4px; .mx_StyledRadioButton_content { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); line-height: $font-18px; color: $primary-content; } @@ -71,7 +71,7 @@ limitations under the License. .mx_AccessibleButton_hasKind { &.mx_AccessibleButton_kind_link { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); margin: 7px 18px; &.mx_SettingsTab_showAdvanced { diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss index 16b771f070e..7541bfe16f2 100644 --- a/res/css/views/dialogs/_SpotlightDialog.pcss +++ b/res/css/views/dialogs/_SpotlightDialog.pcss @@ -163,7 +163,7 @@ limitations under the License. .mx_SpotlightDialog_section { > h4, > .mx_SpotlightDialog_sectionHeader > h4 { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-12px; line-height: $font-15px; color: $secondary-content; diff --git a/res/css/views/dialogs/_VerifyEMailDialog.pcss b/res/css/views/dialogs/_VerifyEMailDialog.pcss index a8db4a3d0a6..c1430326f72 100644 --- a/res/css/views/dialogs/_VerifyEMailDialog.pcss +++ b/res/css/views/dialogs/_VerifyEMailDialog.pcss @@ -20,14 +20,14 @@ limitations under the License. .mx_Dialog { color: $primary-content; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); padding: $spacing-24 $spacing-24 $spacing-16; text-align: center; width: 485px; h1 { font-size: $font-24px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } .mx_VerifyEMailDialog_text-light { diff --git a/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss index e695992008e..1a4a3f9040d 100644 --- a/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss +++ b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss @@ -38,7 +38,7 @@ limitations under the License. .mx_SettingsFlag_label { flex: 1 1 0; min-width: 0; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } .mx_ToggleSwitch { @@ -103,7 +103,7 @@ limitations under the License. .mx_CreateSecretStorageDialog_optionTitle { color: $dialog-title-fg-color; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-18px; padding-bottom: 10px; } diff --git a/res/css/views/elements/_AccessibleButton.pcss b/res/css/views/elements/_AccessibleButton.pcss index 415d03bdb49..a63538427b3 100644 --- a/res/css/views/elements/_AccessibleButton.pcss +++ b/res/css/views/elements/_AccessibleButton.pcss @@ -40,7 +40,7 @@ limitations under the License. display: inline-flex; align-items: center; justify-content: center; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); border: none; /* override default