Consistently show red box-shadow border for HP hover

cynicaloptimist · Mar 3, 2024 · 305f0aa · 305f0aa
1 parent 1279e3b
commit 305f0aa
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 30 deletions.
diff --git a/client/InitiativeList/CombatantRow.tsx b/client/InitiativeList/CombatantRow.tsx
@@ -137,28 +137,31 @@ export function CombatantRow(props: CombatantRowProps) {
         </button>
       </td>
 
-      <td
-        className="combatant__hp"
-        style={getHPStyle(props)}
-        onClick={event => {
-          commandContext.ApplyDamageToCombatant(props.combatantState.Id);
-          event.stopPropagation();
-        }}
-      >
-        <span
-          className="combatant__mobile-icon fas fa-heart"
-          aria-hidden="true"
-        />
-
-        {renderHPText(props)}
-        {DisplayHPBar && (
-          <span className="combatant__hp-bar">
+      <td className="combatant__hp">
+        <div
+          className="combatant__hp-outer"
+          onClick={event => {
+            commandContext.ApplyDamageToCombatant(props.combatantState.Id);
+            event.stopPropagation();
+          }}
+        >
+          <div className="combatant__hp-inner" style={getHPStyle(props)}>
             <span
-              className="combatant__hp-bar--filled"
-              style={renderHPBarStyle(props)}
+              className="combatant__mobile-icon fas fa-heart"
+              aria-hidden="true"
             />
-          </span>
-        )}
+
+            {renderHPText(props)}
+            {DisplayHPBar && (
+              <span className="combatant__hp-bar">
+                <span
+                  className="combatant__hp-bar--filled"
+                  style={renderHPBarStyle(props)}
+                />
+              </span>
+            )}
+          </div>
+        </div>
       </td>
 
       <td className="combatant__ac">

diff --git a/client/PlayerView/components/PlayerViewCombatant.tsx b/client/PlayerView/components/PlayerViewCombatant.tsx
@@ -53,12 +53,12 @@ export class PlayerViewCombatant extends React.Component<PlayerViewCombatantProp
         </div>
         <div
           className={
-            "combatant__hp" +
+            "combatant__hp combatant__hp-outer" +
             (this.props.areSuggestionsAllowed ? " show-hover" : "")
           }
         >
           <span
-            className="current-hp"
+            className="combatant__hp-inner"
             style={{ color: this.props.combatant.HPColor }}
             onClick={() => this.props.suggestDamage(this.props.combatant)}
             dangerouslySetInnerHTML={{ __html: this.props.combatant.HPDisplay }}

diff --git a/lesscss/base/colors.less b/lesscss/base/colors.less
@@ -91,7 +91,7 @@
 
   --modal-bg: rgba(0, 0, 0, 0.7);
 
-  .combatant__hp {
+  .combatant__hp-inner {
     filter: brightness(2.5);
   }
 }

diff --git a/lesscss/components/combatants.less b/lesscss/components/combatants.less
@@ -84,10 +84,10 @@
     }
   }
 
-  .combatant .combatant__hp {
-    transition: border @transition-hover;
+  .combatant .combatant__hp-outer {
+    transition: box-shadow @transition-hover;
     &:hover {
-      border-color: unset;
+      box-shadow: 0 0 0 2px var(--hover-hp-red);
     }
   }
 }
@@ -291,7 +291,6 @@
 .combatant__hp {
   width: 5rem;
   justify-content: center;
-  border: 1px dashed transparent;
   grid-area: hp;
 
   @media (max-width: @medium) {

diff --git a/lesscss/pages/player-view.less b/lesscss/pages/player-view.less
@@ -33,9 +33,14 @@
   .combatant__hp {
     flex-basis: 10%;
     align-items: center;
-    &.show-hover:hover {
-      background-color: var(--hover-hp-red);
-    }
+  }
+
+  .combatant__hp-outer {
+    transition: box-shadow @transition-hover;
+  }
+
+  .combatant__hp-outer.show-hover:hover {
+    box-shadow: 0 0 0 2px var(--hover-hp-red);
   }
 
   .combatant__portrait {