From 4eace4f15d0e6dd5f6a9aa0b94df01d35f85f3da Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Mon, 13 Jan 2025 01:05:17 +0530
Subject: [PATCH] Style face pile for toggle state

---
 res/css/views/rooms/_RoomHeader.pcss       |  7 +++++++
 src/components/views/elements/FacePile.tsx | 11 ++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
index 66b6bdde307..ac2e419e0d2 100644
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@@ -71,6 +71,7 @@ Please see LICENSE files in the repository root for full details.
     padding: var(--cpd-space-1-5x);
     cursor: pointer;
     user-select: none;
+    font: var(--cpd-font-body-sm-medium);
 
     /* RoomAvatar doesn't pass classes down to avatar
     So set style here
@@ -83,6 +84,12 @@ Please see LICENSE files in the repository root for full details.
         color: $primary-content;
         background: var(--cpd-color-bg-subtle-primary);
     }
+
+    &.mx_FacePile_toggled {
+        background: var(--cpd-color-bg-success-subtle);
+        color: var(--cpd-color-text-action-accent);
+        font: var(--cpd-font-body-sm-semibold);
+    }
 }
 
 .mx_RoomHeader .mx_BaseAvatar {
diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx
index 49416a8d381..52836a205e2 100644
--- a/src/components/views/elements/FacePile.tsx
+++ b/src/components/views/elements/FacePile.tsx
@@ -9,9 +9,12 @@ Please see LICENSE files in the repository root for full details.
 import React, { FC, HTMLAttributes, ReactNode } from "react";
 import { RoomMember } from "matrix-js-sdk/src/matrix";
 import { AvatarStack, Tooltip } from "@vector-im/compound-web";
+import classNames from "classnames";
 
 import MemberAvatar from "../avatars/MemberAvatar";
 import AccessibleButton, { ButtonEvent } from "./AccessibleButton";
+import { useToggled } from "../rooms/RoomHeader/highlight/useToggled";
+import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
 
 interface IProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     members: RoomMember[];
@@ -57,8 +60,14 @@ const FacePile: FC<IProps> = ({
         </>
     );
 
+    const toggled = useToggled(RightPanelPhases.MemberList);
+    const classes = classNames({
+        mx_FacePile: true,
+        mx_FacePile_toggled: toggled,
+    });
+
     const content = (
-        <AccessibleButton {...props} className="mx_FacePile" onClick={onClick ?? null}>
+        <AccessibleButton {...props} className={classes} onClick={onClick ?? null}>
             <AvatarStack>{pileContents}</AvatarStack>
             {children}
         </AccessibleButton>