From 8b4bd1664735dfd54d4a30c270c85e7d747508a1 Mon Sep 17 00:00:00 2001
From: Will Hunt <will@half-shot.uk>
Date: Mon, 4 Nov 2024 15:41:44 +0000
Subject: [PATCH] Add new icon

---
 src/button/ReactionToggleButton.module.css |  6 ++++++
 src/button/ReactionToggleButton.tsx        | 10 ++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/button/ReactionToggleButton.module.css b/src/button/ReactionToggleButton.module.css
index af066d05..d86e27e9 100644
--- a/src/button/ReactionToggleButton.module.css
+++ b/src/button/ReactionToggleButton.module.css
@@ -1,3 +1,9 @@
+
+.raisedButton > svg {
+  color: var(--cpd-color-icon-on-solid-primary);
+}
+
+
 .reactionPopupMenu {
   padding: 1em;
   position: absolute;
diff --git a/src/button/ReactionToggleButton.tsx b/src/button/ReactionToggleButton.tsx
index 4b4d5c92..a6fa9ad5 100644
--- a/src/button/ReactionToggleButton.tsx
+++ b/src/button/ReactionToggleButton.tsx
@@ -14,8 +14,8 @@ import {
 } from "@vector-im/compound-web";
 import {
   SearchIcon,
-  ReactionIcon,
   CloseIcon,
+  HandRaisedIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import {
   ChangeEventHandler,
@@ -41,6 +41,7 @@ import {
   ReactionSet,
   ElementCallReactionEventType,
 } from "../reactions";
+import classNames from "classnames";
 
 interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {
   raised: boolean;
@@ -50,12 +51,13 @@ const InnerButton: FC<InnerButtonProps> = ({ raised, ...props }) => {
   const { t } = useTranslation();
 
   return (
-    <Tooltip label={t("action.send_reaction")}>
+    <Tooltip label={t("action.raise_hand_or_send_reaction")}>
       <CpdButton
-        iconOnly
+        className={classNames(raised && styles.raisedButton)}
         kind={raised ? "primary" : "secondary"}
+        iconOnly
+        Icon={HandRaisedIcon}
         {...props}
-        Icon={ReactionIcon}
       />
     </Tooltip>
   );