Update units for floating button display

components/character/CharacterUnit/index.tsx

@@ -72,16 +72,12 @@ const CharacterUnit = ({
 
   // Classes
   const classes = classNames({
+    unit: true,
     [styles.unit]: true,
     [styles.editable]: editable,
     [styles.filled]: gridCharacter !== undefined,
   })
 
-  const buttonClasses = classNames({
-    options: true,
-    clicked: contextMenuOpen,
-  })
-
   // Other
   const character = gridCharacter?.object
 
@@ -219,8 +215,10 @@ const CharacterUnit = ({
           <ContextMenu onOpenChange={handleContextMenuOpenChange}>
             <ContextMenuTrigger asChild>
               <Button
+                active={contextMenuOpen}
+                floating={true}
                 leftAccessoryIcon={<SettingsIcon />}
-                className={buttonClasses}
+                className="options"
                 onClick={handleButtonClicked}
               />
             </ContextMenuTrigger>

components/summon/SummonUnit/index.tsx

@@ -62,6 +62,7 @@ const SummonUnit = ({
 
   // Classes
   const classes = classNames({
+    unit: true,
     [styles.unit]: true,
     [styles.main]: unitType == 0,
     [styles.grid]: unitType == 1,
@@ -70,11 +71,6 @@ const SummonUnit = ({
     [styles.filled]: gridSummon !== undefined,
   })
 
-  const buttonClasses = classNames({
-    options: true,
-    clicked: contextMenuOpen,
-  })
-
   // Other
   const summon = gridSummon?.object
 
@@ -220,8 +216,10 @@ const SummonUnit = ({
           <ContextMenu onOpenChange={handleContextMenuOpenChange}>
             <ContextMenuTrigger asChild>
               <Button
+                active={contextMenuOpen}
+                floating={true}
+                className="options"
                 leftAccessoryIcon={<SettingsIcon />}
-                className={buttonClasses}
                 onClick={handleButtonClicked}
               />
             </ContextMenuTrigger>

components/weapon/WeaponUnit/index.module.scss

@@ -12,19 +12,7 @@
     min-height: auto;
   }
 
-  .Button {
-    pointer-events: none;
-    opacity: 0;
-    z-index: 10;
-  }
-
-  &:hover .Button,
-  .Button.Clicked {
-    pointer-events: initial;
-    opacity: 1;
-  }
-
-  &.editable .WeaponImage:hover {
+  &.editable .image:hover {
     border: $hover-stroke;
     box-shadow: $hover-shadow;
     cursor: pointer;

components/weapon/WeaponUnit/index.tsx

@@ -60,6 +60,7 @@ const WeaponUnit = ({
 
   // Classes
   const classes = classNames({
+    unit: true,
     [styles.unit]: true,
     [styles.mainhand]: unitType == 0,
     [styles.weapon]: unitType == 1,
@@ -68,11 +69,6 @@ const WeaponUnit = ({
     [styles.empty]: gridWeapon == undefined,
   })
 
-  const buttonClasses = classNames({
-    Options: true,
-    Clicked: contextMenuOpen,
-  })
-
   // Other
   const weapon = gridWeapon?.object
 
@@ -445,8 +441,10 @@ const WeaponUnit = ({
           <ContextMenu onOpenChange={handleContextMenuOpenChange}>
             <ContextMenuTrigger asChild>
               <Button
+                active={contextMenuOpen}
+                floating={true}
                 leftAccessoryIcon={<SettingsIcon />}
-                className={buttonClasses}
+                className="options"
                 onClick={handleButtonClicked}
               />
             </ContextMenuTrigger>