From ebcf697eeedbb799b22b63cf3b1ebdb16cbfb200 Mon Sep 17 00:00:00 2001
From: WBHarry <williambjrklund@gmail.com>
Date: Fri, 6 Feb 2026 15:16:30 +0100
Subject: [PATCH] Improved the Reaction toggle in dice rolls

---
 .../less/dialog/dice-roll/roll-selection.less | 27 ++++++++++++++++++-
 templates/dialogs/dice-roll/header.hbs        | 19 +++++--------
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/styles/less/dialog/dice-roll/roll-selection.less b/styles/less/dialog/dice-roll/roll-selection.less
index 0f082460..7fdae77a 100644
--- a/styles/less/dialog/dice-roll/roll-selection.less
+++ b/styles/less/dialog/dice-roll/roll-selection.less
@@ -17,7 +17,9 @@
 
         .dialog-header-inner {
             display: flex;
-            justify-content: center;
+            flex-direction: column;
+            align-items: center;
+            gap: 2px;
         }
 
         h1 {
@@ -45,6 +47,29 @@
             }
         }
 
+        .reaction-chip {
+            display: flex;
+            align-items: center;
+            border-radius: 5px;
+            width: fit-content;
+            gap: 5px;
+            cursor: pointer;
+            padding: 5px;
+            background: light-dark(@dark-blue-10, @golden-10);
+            color: light-dark(@dark-blue, @golden);
+
+            .label {
+                font-style: normal;
+                font-weight: 400;
+                font-size: var(--font-size-14);
+                line-height: 17px;
+            }
+
+            &.selected {
+                background: light-dark(@dark-blue-40, @golden-40);
+            }
+        }
+
         .tag-team-controller {
             display: flex;
             align-items: center;
diff --git a/templates/dialogs/dice-roll/header.hbs b/templates/dialogs/dice-roll/header.hbs
index 21967655..0cb58a01 100644
--- a/templates/dialogs/dice-roll/header.hbs
+++ b/templates/dialogs/dice-roll/header.hbs
@@ -1,17 +1,12 @@
 <header class="dialog-header">
     <div class="dialog-header-inner">
-        <h1>
-            {{#if reactionOverride}}
-                {{localize "DAGGERHEART.CONFIG.FeatureForm.reaction"}}
-            {{else}}
-                {{ifThen rollConfig.headerTitle rollConfig.headerTitle rollConfig.title}}
-            {{/if}}
-            {{#if showReaction}}
-                <button class="reaction-roll-controller {{#if reactionOverride}}active{{/if}}" data-action="toggleReaction" data-tooltip-text="{{localize "DAGGERHEART.GENERAL.reactionRoll"}}">
-                    <i class="fa-solid fa-reply"></i>
-                </button>
-            {{/if}}
-        </h1>
+        <h1>{{ifThen rollConfig.headerTitle rollConfig.headerTitle rollConfig.title}}</h1>
+        {{#if showReaction}}
+            <div class="reaction-chip {{#if reactionOverride}}selected{{/if}}" data-action="toggleReaction">
+                <span><i class="{{ifThen reactionOverride "fa-solid" "fa-regular"}} fa-circle"></i></span>
+                <span class="label">{{localize "DAGGERHEART.GENERAL.reactionRoll"}}</span>
+            </div>
+        {{/if}}
     </div>
     {{#if (and @root.hasRoll @root.activeTagTeamRoll)}}
         <div class="tag-team-controller {{#if @root.tagTeamSelected}}selected{{/if}}" data-action="toggleTagTeamRoll">