Display button on moddable weapons

components/WeaponUnit/index.scss

@@ -3,11 +3,16 @@
     flex-direction: column;
     gap: 4px;
     min-height: 139px;
+    position: relative;
 
     @media (max-width: $medium-screen) {
         min-height: auto;
     }
 
+    &:hover .Button {
+        display: block;
+    }
+
     &.editable .WeaponImage:hover {
         border: $hover-stroke;
         box-shadow: $hover-shadow;
@@ -66,6 +71,16 @@
         display: none;
     }
 
+    .Button {
+        background: white;
+        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.14);
+        display: none;
+        position: absolute;
+        left: $unit;
+        top: $unit;
+        z-index: 3;
+    }
+
     h3 {
         color: $grey-00;
         font-size: $font-button;

components/WeaponUnit/index.tsx

@@ -2,9 +2,13 @@ import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 
 import SearchModal from '~components/SearchModal'
+import WeaponModal from '~components/WeaponModal'
 import UncapIndicator from '~components/UncapIndicator'
-import PlusIcon from '~public/icons/Add.svg'
+import Button from '~components/Button'
 
+import { ButtonType } from '~utils/enums'
+
+import PlusIcon from '~public/icons/Add.svg'
 import './index.scss'
 
 interface Props {
@@ -53,6 +57,14 @@ const WeaponUnit = (props: Props) => {
             props.updateUncap(props.gridWeapon.id, props.position, uncap)
     }
 
+    function canBeModified(gridWeapon: GridWeapon) {
+        const weapon = gridWeapon.object
+
+        console.log(`${weapon.name.en}: ${weapon.series} ${weapon.ax > 0 || (weapon.series) && [2, 3, 8, 22, 25].includes(weapon.series)}`)
+        return weapon.ax > 0 || 
+            (weapon.series) && [2, 3, 8, 22, 25].includes(weapon.series)
+    }
+
     const image = (
         <div className="WeaponImage">
             <img alt={weapon?.name.en} className="grid_image" src={imageUrl} />
@@ -61,18 +73,27 @@ const WeaponUnit = (props: Props) => {
     )
 
     const editableImage = (
-        <SearchModal 
+        <div className="WeaponImage">
-            placeholderText="Search for a weapon..." 
+            <SearchModal 
-            fromPosition={props.position} 
+                placeholderText="Search for a weapon..." 
-            object="weapons"
+                fromPosition={props.position} 
-            send={props.updateObject}>
+                object="weapons"
-                {image}
+                send={props.updateObject}>
-        </SearchModal>
+                    {image}
+            </SearchModal>
+        </div>
     )
+    console.log(gridWeapon?.object)
 
     return (
         <div>
             <div className={classes}>
+                { (props.editable && gridWeapon && canBeModified(gridWeapon)) ? 
+                    <WeaponModal gridWeapon={gridWeapon}>
+                        <div>
+                            <Button icon="settings" type={ButtonType.IconOnly}/> 
+                        </div>
+                    </WeaponModal>: '' }
                 { (props.editable) ? editableImage : image }
                 { (gridWeapon) ? 
                     <UncapIndicator