From 1808a16ed39b1eaf8d082bfb0e414118658df4fc Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 15 Dec 2025 17:17:58 +0000
Subject: [PATCH] Fix badly rendered icon in RoomPreviewCard

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/rooms/_RoomPreviewCard.pcss     | 39 +++++++------------
 .../views/rooms/RoomPreviewCard.tsx           |  6 ++-
 2 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/res/css/views/rooms/_RoomPreviewCard.pcss b/res/css/views/rooms/_RoomPreviewCard.pcss
index 61afe0d92b..7ad0f20e79 100644
--- a/res/css/views/rooms/_RoomPreviewCard.pcss
+++ b/res/css/views/rooms/_RoomPreviewCard.pcss
@@ -22,20 +22,13 @@ Please see LICENSE files in the repository root for full details.
         line-height: $font-24px;
         color: $primary-content;
         margin-top: $spacing-24;
-        position: relative;
-        padding-left: calc(20px + $spacing-8);
 
-        &::before {
-            content: "";
-            position: absolute;
-            height: $font-24px;
-            width: 20px;
-            left: 0;
-            mask-repeat: no-repeat;
-            mask-position: center;
-            mask-size: contain;
-            mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
-            background-color: $secondary-content;
+        svg {
+            height: 1em;
+            width: 1em;
+            margin-right: $spacing-8;
+            color: $secondary-content;
+            vertical-align: -2px;
         }
     }
 
@@ -63,25 +56,19 @@ Please see LICENSE files in the repository root for full details.
         align-items: center;
 
         .mx_RoomPreviewCard_video {
-            width: 50px;
-            height: 50px;
+            width: 22px;
+            height: 22px;
+            padding: 14px;
             border-radius: calc((50px + 2 * 3px) / 2);
             background-color: $accent;
             border: 3px solid $system;
 
-            position: relative;
             left: calc(-50px / 4 - 3px);
 
-            &::before {
-                content: "";
-                background-color: $button-primary-fg-color;
-                position: absolute;
-                width: 50px;
-                height: 50px;
-                mask-size: 22px;
-                mask-position: center;
-                mask-repeat: no-repeat;
-                mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
+            svg {
+                width: inherit;
+                height: inherit;
+                color: $button-primary-fg-color;
             }
         }
 
diff --git a/src/components/views/rooms/RoomPreviewCard.tsx b/src/components/views/rooms/RoomPreviewCard.tsx
index 21f6e09a6d..5ddce5264b 100644
--- a/src/components/views/rooms/RoomPreviewCard.tsx
+++ b/src/components/views/rooms/RoomPreviewCard.tsx
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, type FC, useContext, useState } from "react";
 import { type Room, JoinRule } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { InfoSolidIcon, VideoCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
@@ -152,7 +153,9 @@ const RoomPreviewCard: FC<IProps> = ({ room, onJoinButtonClicked, onRejectButton
         avatarRow = (
             <>
                 <RoomAvatar room={room} size="50px" viewAvatarOnClick />
-                <div className="mx_RoomPreviewCard_video" />
+                <div className="mx_RoomPreviewCard_video">
+                    <VideoCallSolidIcon />
+                </div>
                 <BetaPill onClick={viewLabs} tooltipTitle={_t("labs|video_rooms_beta")} />
             </>
         );
@@ -174,6 +177,7 @@ const RoomPreviewCard: FC<IProps> = ({ room, onJoinButtonClicked, onRejectButton
             {room.getJoinRule() === "public" && <RoomFacePile room={room} />}
             {cannotJoin ? (
                 <div className="mx_RoomPreviewCard_notice">
+                    <InfoSolidIcon />
                     {_t("room|join_failed_needs_invite", { roomName: room.name })}
                 </div>
             ) : null}