From e35879d03ccefcd94dcdff2f39bc6b7b05df4b6b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 30 Jun 2023 22:18:10 -0700
Subject: [PATCH] Add extra colors to WeaponUnit

---
 .../weapon/WeaponUnit/index.module.scss       | 22 +++++++++++++++++--
 components/weapon/WeaponUnit/index.tsx        |  6 +++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/components/weapon/WeaponUnit/index.module.scss b/components/weapon/WeaponUnit/index.module.scss
index 711c1218..e16551a1 100644
--- a/components/weapon/WeaponUnit/index.module.scss
+++ b/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%;
diff --git a/components/weapon/WeaponUnit/index.tsx b/components/weapon/WeaponUnit/index.tsx
index d07b632e..e9c199b7 100644
--- a/components/weapon/WeaponUnit/index.tsx
+++ b/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()}
       />