mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-01-07 09:31:10 +01:00
Code Issues Projects Releases Wiki Activity

Fix badly rendered icon in RoomPreviewCard

Browse Source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2025-12-15 17:17:58 +00:00
parent bff234749f
commit 1808a16ed3
No known key found for this signature in database
GPG Key ID: A2B008A5F49F5D0D
2 changed files with 18 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
res/css/views/rooms/_RoomPreviewCard.pcss
View File

@ -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;
}
}

6
src/components/views/rooms/RoomPreviewCard.tsx
View File

@ -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}