Add extra colors to WeaponUnit

components/weapon/WeaponUnit/index.module.scss

@@ -70,7 +70,7 @@
         bottom: 12%;
         left: -3.5%;
 
-        & > .Skill {
+        & > .skill {
           width: 20%;
           height: auto;
         }
@@ -78,6 +78,20 @@
     }
   }
 
+  &.extra {
+    &:hover .icon svg {
+      fill: var(--extra-purple-primary);
+    }
+
+    .image {
+      background: var(--extra-purple-card-bg);
+
+      .icon svg {
+        fill: var(--extra-purple-secondary);
+      }
+    }
+  }
+
   &.filled h3 {
     display: block;
   }
@@ -103,7 +117,7 @@
   .image {
     background: var(--card-bg);
     border: 1px solid rgba(0, 0, 0, 0);
-    border-radius: $unit;
+    border-radius: $item-corner;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -116,6 +130,10 @@
       fill: var(--icon-secondary-hover);
     }
 
+    @include breakpoint(phone) {
+      border-radius: $item-corner-small;
+    }
+
     .awakening {
       width: 100%;
       height: 100%;

components/weapon/WeaponUnit/index.tsx

@@ -62,6 +62,7 @@ const WeaponUnit = ({
   const classes = classNames({
     unit: true,
     [styles.unit]: true,
+    [styles.extra]: position >= 9,
     [styles.mainhand]: unitType == 0,
     [styles.weapon]: unitType == 1,
     [styles.editable]: editable,
@@ -506,8 +507,9 @@ const WeaponUnit = ({
       <img
         alt={weapon?.name[locale]}
         className={classNames({
-          GridImage: true,
-          Placeholder: imageUrl === '',
+          // TODO: Look into this gridImage class
+          [styles.gridImage]: true,
+          [styles.placeholder]: imageUrl === '',
         })}
         src={imageUrl !== '' ? imageUrl : placeholderImageUrl()}
       />