Update WeaponResult

Update styling, add UncapIndicator

components/WeaponResult/index.scss

@@ -6,43 +6,61 @@
     font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
     gap: 8px;
     padding: 12px;
-}
 
-.WeaponResult img {
-    background: #e9e9e9;
-    border-radius: 6px;
-    display: inline-block;
-    height: 72px;
-    width: 120px;
-}
+    &:hover {
+        background: $grey-90;
+        cursor: pointer;
+    }
 
-.WeaponResult h5 {
-    color: #555;
-    display: inline-block;
-    font-size: $font-large;
-    font-weight: 500;
-    margin: 2px 4px 4px 0;
-}
+    img {
+        background: #e9e9e9;
+        border-radius: 6px;
+        display: inline-block;
+        height: 72px;
+        width: 120px;
+    }
 
-.WeaponResult .WeaponLabelIcon {
-    margin-right: 4px;
-}
+    .Info {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        gap: $unit / 2;
 
-.WeaponResult .stars {
-    display: inline-block;
-    color: #FFA15E;
-    font-size: $font-xlarge;
-}
+        h5 {
+            color: #555;
+            display: inline-block;
+            font-size: $font-medium;
+            font-weight: $medium;
+        }
 
-.WeaponResult .stars > span {
-    color: #65DAFF;
-}
+        .UncapIndicator {
+            justify-content: left;
+            pointer-events: none;
+        }
 
-.WeaponResult:hover {
-    background: #e9e9e9;
-    cursor: pointer;
-}
+        .stars {
+            display: inline-block;
+            color: #FFA15E;
+            font-size: $font-xlarge;
 
-.WeaponResult:hover .image_placeholder {
-    background: #dadada;
+            & > span {
+                color: #65DAFF;
+            }            
+        }
+
+        .tags {
+            display: flex;
+            flex-direction: row;
+            gap: $unit / 2;
+
+            .WeaponLabelIcon {
+                $aspect-ratio: calc(25 / 60);
+                $height: 22px;
+                background-size: calc($height / $aspect-ratio) $height;
+                background-repeat: no-repeat;
+                height: $height;
+                width: calc($height/ $aspect-ratio);
+            }
+        }
+    }
 }

components/WeaponResult/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import UncapIndicator from '~components/UncapIndicator'
 import WeaponLabelIcon from '~components/WeaponLabelIcon'
 
 import './index.scss'
@@ -19,13 +20,18 @@ class WeaponResult extends React.Component<Props> {
         return (
             <li className="WeaponResult" onClick={this.props.onClick}>
                 <img alt={weapon.name.en} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`} />
-                <div>
-                    <div>
-                        <h5>{weapon.name.en}</h5>
-                        <div className="stars">⭑⭑⭑{(weapon.uncap.flb) ? <span>⭑</span> : ''}{(weapon.uncap.ulb) ? <span>⭑</span> : ''}</div>
+                <div className="Info">
+                    <h5>{weapon.name.en}</h5>
+                    <UncapIndicator 
+                        type="weapon"
+                        flb={weapon.uncap.flb}
+                        ulb={weapon.uncap.ulb}
+                        special={false}
+                    />
+                    <div className="tags">
+                        <WeaponLabelIcon labelType={Element[weapon.element]} />
+                        <WeaponLabelIcon labelType={Proficiency[weapon.proficiency]} />
                     </div>
-                    <WeaponLabelIcon labelType={Element[weapon.element]} />
-                    <WeaponLabelIcon labelType={Proficiency[weapon.proficiency]} />
                 </div>
             </li>
         )