Fix HovercardHeader layout

This isn't 100% perfect but it's much more consistent now

components/HovercardHeader/index.module.scss

@@ -48,7 +48,12 @@
       display: flex;
       flex-direction: row;
       flex-grow: 0;
-      gap: $unit;
+      gap: $unit-half;
+
+      .proficiencies {
+        display: flex;
+        gap: $unit;
+      }
     }
   }
 }

components/HovercardHeader/index.tsx

@@ -4,6 +4,7 @@ import UncapIndicator from '~components/uncap/UncapIndicator'
 import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon'
 
 import styles from './index.module.scss'
+import classNames from 'classnames'
 
 interface Props {
   gridObject: GridCharacter | GridSummon | GridWeapon
@@ -107,6 +108,61 @@ const HovercardHeader = ({ gridObject, object, type, ...props }: Props) => {
     }
   }
 
+  const summonProficiency = (
+    <div className={styles.icons}>
+      <WeaponLabelIcon labelType={Element[object.element]} size="small" />
+    </div>
+  )
+
+  const weaponProficiency = (
+    <div className={styles.icons}>
+      <WeaponLabelIcon labelType={Element[object.element]} size="small" />
+      {'proficiency' in object && !Array.isArray(object.proficiency) && (
+        <WeaponLabelIcon
+          labelType={Proficiency[object.proficiency]}
+          size="small"
+        />
+      )}
+    </div>
+  )
+
+  const characterProficiency = (
+    <div
+      className={classNames({
+        [styles.icons]: true,
+      })}
+    >
+      <WeaponLabelIcon labelType={Element[object.element]} size="small" />
+
+      {'proficiency' in object && Array.isArray(object.proficiency) && (
+        <WeaponLabelIcon
+          labelType={Proficiency[object.proficiency[0]]}
+          size="small"
+        />
+      )}
+
+      {'proficiency' in object &&
+        Array.isArray(object.proficiency) &&
+        object.proficiency.length > 1 && (
+          <WeaponLabelIcon
+            labelType={Proficiency[object.proficiency[1]]}
+            size="small"
+          />
+        )}
+    </div>
+  )
+
+  function proficiency() {
+    switch (type) {
+      case 'character':
+        return characterProficiency
+      case 'summon':
+        return summonProficiency
+      case 'weapon':
+        return weaponProficiency
+    }
+  }
+
   return (
     <header className={styles.root}>
       <div className={styles.title}>
@@ -117,20 +173,7 @@ const HovercardHeader = ({ gridObject, object, type, ...props }: Props) => {
         </div>
       </div>
       <div className={styles.subInfo}>
-        <div className={styles.icons}>
-          <WeaponLabelIcon labelType={Element[object.element]} />
-          {'proficiency' in object && Array.isArray(object.proficiency) && (
-            <WeaponLabelIcon labelType={Proficiency[object.proficiency[0]]} />
-          )}
-          {'proficiency' in object && !Array.isArray(object.proficiency) && (
-            <WeaponLabelIcon labelType={Proficiency[object.proficiency]} />
-          )}
-          {'proficiency' in object &&
-            Array.isArray(object.proficiency) &&
-            object.proficiency.length > 1 && (
-              <WeaponLabelIcon labelType={Proficiency[object.proficiency[1]]} />
-            )}
-        </div>
+        {proficiency()}
         <UncapIndicator
           className="hovercard"
           type={type}

components/weapon/WeaponLabelIcon/index.module.scss

@@ -4,6 +4,12 @@
   height: 25px;
   width: 60px;
 
+  &.small {
+    background-size: 50px 20px;
+    height: 20px;
+    width: 50px;
+  }
+
   /* Elements */
 
   &.fire.en {

components/weapon/WeaponLabelIcon/index.tsx

@@ -6,6 +6,7 @@ import styles from './index.module.scss'
 
 interface Props {
   labelType: string
+  size: 'small' | 'normal'
 }
 
 const WeaponLabelIcon = (props: Props) => {
@@ -13,6 +14,7 @@ const WeaponLabelIcon = (props: Props) => {
 
   const classes = classNames({
     [styles.icon]: true,
+    [styles.small]: props.size === 'small',
     [styles[props.labelType]]: true,
     [styles.en]: router.locale === 'en',
     [styles.ja]: router.locale === 'ja',
@@ -21,4 +23,8 @@ const WeaponLabelIcon = (props: Props) => {
   return <i className={classes} />
 }
 
+WeaponLabelIcon.defaultProps = {
+  size: 'normal',
+}
+
 export default WeaponLabelIcon