nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Switch to compound-design-tokens for platform icons (#31543)

Browse Source 
* Switch to compound-design-tokens for platform icons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Revert app-store badge usage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-12-15 16:37:24 +00:00
committed by GitHub
parent 0cfaeaa3a7
commit 9d9782f62b
7 changed files with 119 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/async-components/structures/ErrorView.tsx
View File

@@ -9,12 +9,10 @@ import React, { type JSX, type ReactNode } from "react";
import { Text, Heading, Button, Separator } from "@vector-im/compound-web";
import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
import { Flex } from "@element-hq/web-shared-components";
import { LinuxIcon, MacIcon, WindowsIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import SdkConfig from "../../SdkConfig";
import { _t } from "../../languageHandler";
import { Icon as AppleIcon } from "../../../res/img/element-icons/brands/apple.svg";
import { Icon as MicrosoftIcon } from "../../../res/img/element-icons/brands/microsoft.svg";
import { Icon as LinuxIcon } from "../../../res/img/element-icons/brands/linux.svg";
// directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk
// PostCSS variables will be accessible.
@@ -86,17 +84,17 @@ const DesktopAppLinks: React.FC<{
return (
<Flex gap="var(--cpd-space-4x)" className="mx_ErrorView_flexContainer">
{macOsUrl && (
<Button as="a" href={macOsUrl} kind="secondary" Icon={AppleIcon}>
<Button as="a" href={macOsUrl} kind="secondary" Icon={MacIcon}>
{_t("incompatible_browser|macos")}
</Button>
)}
{win64Url && (
<Button as="a" href={win64Url} kind="secondary" Icon={MicrosoftIcon}>
<Button as="a" href={win64Url} kind="secondary" Icon={WindowsIcon}>
{_t("incompatible_browser|windows_64bit")}
</Button>
)}
{win64ArmUrl && (
<Button as="a" href={win64ArmUrl} kind="secondary" Icon={MicrosoftIcon}>
<Button as="a" href={win64ArmUrl} kind="secondary" Icon={WindowsIcon}>
{_t("incompatible_browser|windows_arm_64bit")}
</Button>
)}

2
src/components/views/elements/SSOButtons.tsx
View File

@@ -35,7 +35,7 @@ const getIcon = (brand: IdentityProviderBrand | string): string | null => {
switch (brand) {
/* eslint-disable @typescript-eslint/no-require-imports */
case IdentityProviderBrand.Apple:
return require(`../../../../res/img/element-icons/brands/apple.svg`).default;
return require("@vector-im/compound-design-tokens/icons/mac.svg").default;
case IdentityProviderBrand.Facebook:
return require(`../../../../res/img/element-icons/brands/facebook.svg`).default;
case IdentityProviderBrand.Github: