Phosphor icons, deafen button, and style adjustments

knip.ts

@@ -30,8 +30,6 @@ export default {
     // We obviously use this, but if the package has been linked with pnpm link,
     // then Knip will flag it as a false positive
     // https://github.com/webpro-nl/knip/issues/766
-    "@vector-im/compound-web",
-    "matrix-widget-api",
     // Used by oxlint
     "eslint-plugin-element-call",
     "eslint-plugin-storybook",

package.json

@@ -7,10 +7,10 @@
     "dev:full": "vite",
     "dev:embedded": "vite --config vite-embedded.config.js",
     "build": "pnpm build:full",
-    "build:full": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
+    "build:full": "vite build",
     "build:full:production": "pnpm build:full",
     "build:full:development": "pnpm build:full --mode development",
-    "build:embedded": "pnpm build:full --config vite-embedded.config.js",
+    "build:embedded": "pnpm build:full --config vite-embedded.config.ts",
     "build:embedded:production": "pnpm build:embedded",
     "build:embedded:development": "pnpm build:embedded --mode development",
     "build:sdk:development": "pnpm build:sdk --mode development",
@@ -145,6 +145,7 @@
   },
   "packageManager": "pnpm@11.6.0+sha512.9a36518224080c6fe5165afdcfe79bfa118c29be703f3f462b1e32efe1e98e47e8750b148e08286250aad4113cc7993ca413c4e2cd447752708c2ee5751bc95f",
   "dependencies": {
-    "@jitsi/rnnoise-wasm": "0.2.1"
+    "@jitsi/rnnoise-wasm": "0.2.1",
+    "@phosphor-icons/react": "^2.1.10"
   }
 }

src/AppBar.tsx

@@ -18,11 +18,7 @@ import {
 } from "react";
 import classNames from "classnames";
 import { Heading, IconButton, Text, Tooltip } from "@vector-im/compound-web";
-import {
-  ArrowLeftIcon,
-  ChevronLeftIcon,
-  CollapseIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ArrowLeft, CaretLeft, CornersIn } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/lib/logger";
 
@@ -81,7 +77,7 @@ export const AppBar: FC<Props> = ({ children }) => {
     ],
   );
 
-  const BackIcon = platform === "android" ? ArrowLeftIcon : ChevronLeftIcon;
+  const BackIcon = platform === "android" ? ArrowLeft : CaretLeft;
 
   return (
     <>
@@ -100,7 +96,7 @@ export const AppBar: FC<Props> = ({ children }) => {
               {primaryButtonIcon === "back" ? (
                 <BackIcon aria-hidden />
               ) : (
-                <CollapseIcon aria-hidden />
+                <CornersIn aria-hidden />
               )}
             </IconButton>
           </Tooltip>

src/FullScreenView.tsx

@@ -10,7 +10,7 @@ import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import * as Sentry from "@sentry/react";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Warning } from "@phosphor-icons/react";
 
 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
 import styles from "./FullScreenView.module.css";
@@ -67,7 +67,9 @@ export const ErrorPage = ({ error, widget }: ErrorPageProps): ReactElement => {
       ) : (
         <ErrorView
           widget={widget}
-          Icon={ErrorSolidIcon}
+          Icon={() => (
+            <Warning weight="fill" width={24} height={24} aria-hidden />
+          )}
           title={t("error.generic")}
           rageshake
           fatal

src/Header.tsx

@@ -10,7 +10,7 @@ import { type Ref, type FC, type HTMLAttributes, type ReactNode } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";
-import { UserProfileIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { User } from "@phosphor-icons/react";
 
 import styles from "./Header.module.css";
 import Logo from "./icons/Logo.svg?react";
@@ -166,7 +166,7 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
       </div>
       {(participantCount ?? 0) > 0 && (
         <div className={styles.participantsLine}>
-          <UserProfileIcon
+          <User
             width={20}
             height={20}
             aria-label={t("header_participants_label")}

src/Modal.module.css

@@ -116,14 +116,14 @@ body[data-platform="ios"] .drawer {
 }
 
 .dialog .body {
-  padding-inline: var(--cpd-space-10x);
-  padding-block: var(--cpd-space-10x) var(--cpd-space-12x);
+  padding-inline: var(--cpd-space-6x);
+  padding-block: var(--cpd-space-6x) var(--cpd-space-6x);
   overflow: auto;
 }
 
 .drawer .body {
   padding-inline: var(--cpd-space-4x);
-  padding-block: var(--cpd-space-9x) var(--cpd-space-10x);
+  padding-block: var(--cpd-space-4x) var(--cpd-space-4x);
 }
 
 .modal.tabbed .body {

src/Modal.tsx

@@ -17,7 +17,7 @@ import {
 } from "@radix-ui/react-dialog";
 import { Drawer } from "vaul";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { X } from "@phosphor-icons/react";
 import classNames from "classnames";
 import { Heading, Glass } from "@vector-im/compound-web";
 
@@ -147,7 +147,7 @@ export const Modal: FC<Props> = ({
             data-testid="modal_close"
             aria-label={t("action.close")}
           >
-            <CloseIcon width={20} height={20} />
+            <X aria-hidden width={20} height={20} />
           </DialogClose>
         )}
       </div>

src/RTCConnectionStats.tsx

@@ -7,10 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { useState, type FC } from "react";
 import { Button, Text } from "@vector-im/compound-web";
-import {
-  MicOnSolidIcon,
-  VideoCallSolidIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Microphone, VideoCamera } from "@phosphor-icons/react";
 import classNames from "classnames";
 
 import { Modal } from "./Modal";
@@ -89,7 +86,7 @@ export const RTCConnectionStats: FC<Props> = ({
             onClick={() => showFullModal("audio")}
             size="md"
             kind="tertiary"
-            Icon={MicOnSolidIcon}
+            Icon={(props) => <Microphone weight="fill" {...props} />}
           >
             {"jitter" in audio && typeof audio.jitter === "number" && (
               <Text as="span" size="xs" title="jitter">
@@ -105,7 +102,7 @@ export const RTCConnectionStats: FC<Props> = ({
             onClick={() => showFullModal("video")}
             size="md"
             kind="tertiary"
-            Icon={VideoCallSolidIcon}
+            Icon={(props) => <VideoCamera weight="fill" {...props} />}
           >
             {!!video?.framesPerSecond && (
               <Text as="span" size="xs" title="frame rate">

src/RichError.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { useTranslation } from "react-i18next";
-import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ArrowSquareOut } from "@phosphor-icons/react";
 
 import type { FC, ReactNode } from "react";
 import { ErrorView } from "./ErrorView";
@@ -34,7 +34,7 @@ const OpenElsewhere: FC = () => {
   return (
     <ErrorView
       widget={widget}
-      Icon={PopOutIcon}
+      Icon={ArrowSquareOut}
       title={t("error.open_elsewhere")}
     >
       <p>

src/__snapshots__/AppBar.test.tsx.snap

@@ -22,12 +22,12 @@ exports[`AppBar > renders 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="1em"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="1em"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
+              d="M152,96V48a8,8,0,0,1,16,0V88h40a8,8,0,0,1,0,16H160A8,8,0,0,1,152,96ZM96,152H48a8,8,0,0,0,0,16H88v40a8,8,0,0,0,16,0V160A8,8,0,0,0,96,152Zm112,0H160a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V168h40a8,8,0,0,0,0-16ZM96,40a8,8,0,0,0-8,8V88H48a8,8,0,0,0,0,16H96a8,8,0,0,0,8-8V48A8,8,0,0,0,96,40Z"
             />
           </svg>
         </div>
@@ -65,12 +65,12 @@ exports[`AppBar > renders with title and subtitle 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="1em"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="1em"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
+              d="M152,96V48a8,8,0,0,1,16,0V88h40a8,8,0,0,1,0,16H160A8,8,0,0,1,152,96ZM96,152H48a8,8,0,0,0,0,16H88v40a8,8,0,0,0,16,0V160A8,8,0,0,0,96,152Zm112,0H160a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V168h40a8,8,0,0,0,0-16ZM96,40a8,8,0,0,0-8,8V88H48a8,8,0,0,0,0,16H96a8,8,0,0,0,8-8V48A8,8,0,0,0,96,40Z"
             />
           </svg>
         </div>

src/button/Button.tsx

@@ -14,18 +14,20 @@ import {
   Tooltip,
 } from "@vector-im/compound-web";
 import {
-  MicOnSolidIcon,
-  MicOffSolidIcon,
-  SpinnerIcon,
-  VideoCallSolidIcon,
-  VideoCallOffSolidIcon,
-  EndCallIcon,
-  ShareScreenSolidIcon,
-  OverflowHorizontalIcon,
-  OverflowVerticalIcon,
-  VolumeOnSolidIcon,
-  VolumeOffSolidIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+  Microphone,
+  MicrophoneSlash,
+  Spinner,
+  VideoCamera,
+  VideoCameraSlash,
+  PhoneDisconnect,
+  MonitorArrowUp,
+} from "@phosphor-icons/react";
+import {
+  DotsThreeOutlineVertical,
+  DotsThreeOutline,
+  SpeakerHigh,
+  SpeakerSlash,
+} from "@phosphor-icons/react";
 
 import styles from "./Button.module.css";
 import callFooterStyles from "../components/CallFooter.module.css";
@@ -39,7 +41,11 @@ interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
 
 export const MicButton: FC<MicButtonProps> = ({ enabled, busy, ...props }) => {
   const { t } = useTranslation();
-  const Icon = busy ? SpinnerIcon : enabled ? MicOnSolidIcon : MicOffSolidIcon;
+  const Icon = busy
+    ? Spinner
+    : enabled
+      ? (p: any) => <Microphone {...p} />
+      : (p: any) => <MicrophoneSlash weight="fill" {...p} />;
   const label = enabled
     ? t("mute_microphone_button_label")
     : t("unmute_microphone_button_label");
@@ -76,10 +82,10 @@ export const VideoButton: FC<VideoButtonProps> = ({
 }) => {
   const { t } = useTranslation();
   const Icon = busy
-    ? SpinnerIcon
+    ? Spinner
     : enabled
-      ? VideoCallSolidIcon
-      : VideoCallOffSolidIcon;
+      ? (p: any) => <VideoCamera {...p} />
+      : (p: any) => <VideoCameraSlash weight="fill" {...p} />;
   const label = enabled
     ? t("stop_video_button_label")
     : t("start_video_button_label");
@@ -121,7 +127,7 @@ export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
     <Tooltip label={label}>
       <CpdButton
         iconOnly
-        Icon={ShareScreenSolidIcon}
+        Icon={MonitorArrowUp}
         kind={enabled ? "primary" : "secondary"}
         role="switch"
         aria-checked={enabled}
@@ -146,7 +152,7 @@ export const EndCallButton: FC<EndCallButtonProps> = ({
       <CpdButton
         className={classNames(className, styles.endCall)}
         iconOnly
-        Icon={EndCallIcon}
+        Icon={PhoneDisconnect}
         destructive
         {...props}
       />
@@ -171,7 +177,13 @@ export const LoudspeakerButton: FC<LoudspeakerButtonProps> = ({
     <Tooltip label={label}>
       <CpdButton
         iconOnly
-        Icon={loudspeakerModeEnabled ? VolumeOnSolidIcon : VolumeOffSolidIcon}
+        children={
+          loudspeakerModeEnabled ? (
+            <SpeakerHigh aria-hidden />
+          ) : (
+            <SpeakerSlash weight="fill" aria-hidden />
+          )
+        }
         {...props}
         kind={loudspeakerModeEnabled ? "secondary" : "primary"}
         aria-checked={loudspeakerModeEnabled}
@@ -201,15 +213,16 @@ export const SettingsIconButton: FC<SettingsIconButtonProps> = ({
   ...props
 }) => {
   const { t } = useTranslation();
-  const Icon =
-    platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon;
   return (
     <Tooltip label={t("common.settings")}>
       <IconButton
         className={classNamesForScreenWidth(className, showForScreenWidth)}
         {...props}
       >
-        <Icon aria-hidden />
+        <DotsThreeOutlineVertical
+          aria-hidden
+          style={{ transform: "scale(0.75)", transformOrigin: "center" }}
+        />
       </IconButton>
     </Tooltip>
   );
@@ -231,9 +244,18 @@ export const SettingsButton: FC<SettingsButtonProps> = ({
       <CpdButton
         className={classNamesForScreenWidth(className, showForScreenWidth)}
         iconOnly
-        Icon={
-          platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon
-        }
+        Icon={(p: any) => {
+          const IconComp =
+            platform === "android"
+              ? DotsThreeOutlineVertical
+              : DotsThreeOutline;
+          return (
+            <IconComp
+              {...p}
+              style={{ transform: "scale(0.75)", transformOrigin: "center" }}
+            />
+          );
+        }}
         kind={"secondary"}
         {...props}
       />