From 6991c26058c1f91b46351f2a1af71b4e159bbc34 Mon Sep 17 00:00:00 2001
From: Denis Ranneft <denis@ranneft.ru>
Date: Tue, 31 Mar 2026 12:01:34 +0300
Subject: [PATCH] minor ui fixes

---
 frontend/src/ui/BuffBar.tsx | 135 +++++++++++++++++++++---------------
 1 file changed, 78 insertions(+), 57 deletions(-)

diff --git a/frontend/src/ui/BuffBar.tsx b/frontend/src/ui/BuffBar.tsx
index 492a208..ab50fd3 100644
--- a/frontend/src/ui/BuffBar.tsx
+++ b/frontend/src/ui/BuffBar.tsx
@@ -38,6 +38,9 @@ interface BuffButtonProps {
 const LONG_PRESS_MS = 400;
 const TOOLTIP_AUTO_HIDE_MS = 2500;
 
+/** When false, the green refill CTA in the hover tooltip is hidden (purchase still reachable from tap flow if any). */
+const SHOW_BUFF_REFILL_BUTTON_IN_TOOLTIP = false;
+
 const tooltipStyle: CSSProperties = {
   position: 'absolute',
   bottom: '110%',
@@ -239,27 +242,42 @@ function BuffButton({ buff, meta, charge, maxCharges, onActivate, onRefill, nowM
     onActivate();
   };
 
-  const style: CSSProperties = {
-    ...buttonBase,
+  const dimmedFaceOpacity = isDisabled ? (isOutOfCharges && !isOnCooldown ? 0.3 : 0.55) : 1;
+
+  const hitStyle: CSSProperties = {
+    position: 'relative',
     width: 44,
     height: 50,
+    padding: 0,
+    border: 'none',
+    background: 'transparent',
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    transform: pressed ? 'scale(0.94)' : 'scale(1)',
+    transition: 'transform 80ms ease',
+  };
+
+  const activatorFaceStyle: CSSProperties = {
+    ...buttonBase,
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
     borderRadius: 10,
     borderColor: isActive ? meta.color : pressed ? '#fff' : 'rgba(255,255,255,0.2)',
-    opacity: isDisabled ? (isOutOfCharges && !isOnCooldown ? 0.3 : 0.55) : 1,
     boxShadow: isActive
       ? `0 0 12px ${meta.color}`
       : pressed
         ? `0 0 10px rgba(255,255,255,0.5), inset 0 0 12px ${meta.color}66`
         : 'none',
-    transform: pressed ? 'scale(0.94)' : 'scale(1)',
-    transition: 'transform 80ms ease, box-shadow 80ms ease, border-color 80ms ease, opacity 150ms ease',
-    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    opacity: dimmedFaceOpacity,
+    transition: 'opacity 150ms ease, box-shadow 80ms ease, border-color 80ms ease',
+    pointerEvents: 'none',
   };
 
   return (
     <button
       type="button"
-      style={style}
+      style={hitStyle}
       onClick={handleClick}
       onTouchStart={handleTouchStart}
       onTouchEnd={handleTouchEnd}
@@ -269,59 +287,62 @@ function BuffButton({ buff, meta, charge, maxCharges, onActivate, onRefill, nowM
       aria-disabled={isDisabled}
       aria-label={`${meta.label}: ${meta.desc}`}
     >
-      {/* Inner wrapper clips cooldown overlay to button bounds */}
-      <div
-        style={{
-          position: 'absolute',
-          inset: 0,
-          overflow: 'hidden',
-          borderRadius: 8,
-        }}
-      >
-        <RadialCooldown progress={cooldownProgress} />
-      </div>
-      <span style={{ fontSize: 18, lineHeight: 1, position: 'relative' }}>{meta.icon}</span>
-      <span style={{ fontSize: 8, color: '#ccc', marginTop: 1, position: 'relative' }}>{meta.label}</span>
-      {isActive && !isOnCooldown && (
-        <span
-          style={{
-            position: 'absolute',
-            bottom: 2,
-            fontSize: 9,
-            fontWeight: 700,
-            color: meta.color,
-            textShadow: '0 1px 2px rgba(0,0,0,0.9)',
-          }}
-        >
-          {Math.ceil(remainingEffectMs / 1000)}s
-        </span>
-      )}
-      {isOnCooldown && (
-        <span
+      {/* Dim only the activator (chrome + icon); tooltip is a sibling so it stays full opacity. */}
+      <div style={activatorFaceStyle}>
+        {/* Inner wrapper clips cooldown overlay to button bounds */}
+        <div
           style={{
             position: 'absolute',
-            fontSize: 11,
-            fontWeight: 700,
-            color: '#fff',
-            textShadow: '0 1px 2px rgba(0,0,0,0.8)',
-          }}
-        >
-          {Math.ceil(buff.cooldownRemainingMs / 1000)}s
-        </span>
-      )}
-
-      {/* Charge badge */}
-      {hasChargeData && (
-        <span
-          style={{
-            ...chargeBadgeBase,
-            backgroundColor: isOutOfCharges ? '#aa2222' : 'rgba(30, 90, 180, 0.9)',
-            color: isOutOfCharges ? '#ffaaaa' : '#fff',
+            inset: 0,
+            overflow: 'hidden',
+            borderRadius: 8,
           }}
         >
-          {remaining}
-        </span>
-      )}
+          <RadialCooldown progress={cooldownProgress} />
+        </div>
+        <span style={{ fontSize: 18, lineHeight: 1, position: 'relative' }}>{meta.icon}</span>
+        <span style={{ fontSize: 8, color: '#ccc', marginTop: 1, position: 'relative' }}>{meta.label}</span>
+        {isActive && !isOnCooldown && (
+          <span
+            style={{
+              position: 'absolute',
+              bottom: 2,
+              fontSize: 9,
+              fontWeight: 700,
+              color: meta.color,
+              textShadow: '0 1px 2px rgba(0,0,0,0.9)',
+            }}
+          >
+            {Math.ceil(remainingEffectMs / 1000)}s
+          </span>
+        )}
+        {isOnCooldown && (
+          <span
+            style={{
+              position: 'absolute',
+              fontSize: 11,
+              fontWeight: 700,
+              color: '#fff',
+              textShadow: '0 1px 2px rgba(0,0,0,0.8)',
+            }}
+          >
+            {Math.ceil(buff.cooldownRemainingMs / 1000)}s
+          </span>
+        )}
+
+        {/* Charge badge */}
+        {hasChargeData && (
+          <span
+            style={{
+              ...chargeBadgeBase,
+              backgroundColor: isOutOfCharges ? '#aa2222' : 'rgba(30, 90, 180, 0.9)',
+              color: isOutOfCharges ? '#ffaaaa' : '#fff',
+            }}
+          >
+            {remaining}
+          </span>
+        )}
+      </div>
 
       {showTooltip && (
         <div style={tooltipStyle}>
@@ -344,7 +365,7 @@ function BuffButton({ buff, meta, charge, maxCharges, onActivate, onRefill, nowM
               {tr.refillsAt} {formatTimeHHMM(charge.periodEnd)}
             </div>
           )}
-          {isOutOfCharges && onRefill && (
+          {SHOW_BUFF_REFILL_BUTTON_IN_TOOLTIP && isOutOfCharges && onRefill && (
             <button
               type="button"
               onClick={(e) => {