Fix alignment of Skills in the PlayerCard.

GitOrigin-RevId: fb6e76f9380c79ae7fdfee5f2c372e44404f579e
nkzw-tech · Nov 11, 2024 · a5b40fe · a5b40fe
1 parent 2d10fb7
commit a5b40fe
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/hera/ui/PlayerCard.tsx b/hera/ui/PlayerCard.tsx
@@ -409,7 +409,13 @@ export default memo(function PlayerCard({
             )}
           </Stack>
           {player.skills.size || invasions ? (
-            <Stack className={skillStyle} nowrap>
+            <Stack
+              className={cx(
+                skillBoxStyle,
+                charge > 0 && skillBoxWithChargeStyle,
+              )}
+              nowrap
+            >
               {[...new Set([...player.activeSkills, ...player.skills])].map(
                 (skill) => {
                   const { charges, requiresCrystal } = getSkillConfig(skill);
@@ -642,11 +648,15 @@ const winConditionIconStyle = css`
   margin: 3px 6px 0 0;
 `;
 
-const skillStyle = css`
-  padding: 13px 0 0 8px;
+const skillBoxStyle = css`
+  padding: 9px 0 0 8px;
   gap: 12px;
 `;
 
+const skillBoxWithChargeStyle = css`
+  padding-top: 13px;
+`;
+
 const fundStyle = css`
   margin-top: -1px;
   flex-shrink: 0;

diff --git a/ui/ExpandableMenuButton.tsx b/ui/ExpandableMenuButton.tsx
@@ -98,7 +98,7 @@ const expandedInnerStyle = css`
   padding-bottom: 8px;
 `;
 
-const size = 30;
+const size = 28;
 const iconStyle = css`
   ${clipBorder(2)}
 
@@ -107,8 +107,8 @@ const iconStyle = css`
   opacity: 0;
   pointer-events: none;
   position: absolute;
-  right: 0;
-  top: 13px;
+  right: 2px;
+  top: 10px;
   transform: scale(0);
   transition:
     opacity ${duration}ms ease-in-out,