Fix SummonResult

Fix styles and add UncapIndicator

components/SummonResult/index.scss

@@ -1,48 +1,63 @@
 .SummonResult {
-    -webkit-font-smoothing: antialiased;
-
     border-radius: 6px;
     display: flex;
-    font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
-    gap: 8px;
-    padding: 12px;
-}
+    gap: $unit;
+    padding: $unit * 1.5;
 
-.SummonResult img {
-    background: #e9e9e9;
-    border-radius: 6px;
-    display: inline-block;
-    height: auto;
-    width: 120px;
-}
+    &:hover {
+        background: $grey-90;
+        cursor: pointer;
+    }
 
-.SummonResult h5 {
-    color: #555;
-    display: inline-block;
-    font-size: $font-large;
-    font-weight: 500;
-    margin: 2px 4px 4px 0;
-}
+    img {
+        background: $grey-80;
+        border-radius: 6px;
+        display: inline-block;
+        height: auto;
+        width: 120px;
+    }
 
-.SummonResult .WeaponLabelIcon {
-    margin-right: 4px;
-}
+    .Info {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        gap: $unit / 2;
 
-.SummonResult .stars {
-    display: inline-block;
-    color: #FFA15E;
-    font-size: $font-xlarge;
-}
+        h5 {
+            color: #555;
+            display: inline-block;
+            font-size: $font-medium;
+            font-weight: $medium;
+        }
 
-.SummonResult .stars > span {
-    color: #65DAFF;
-}
+        .UncapIndicator {
+            justify-content: left;
+            pointer-events: none;
+        }
 
-.SummonResult:hover {
-    background: #e9e9e9;
-    cursor: pointer;
-}
+        .stars {
+            display: inline-block;
+            color: #FFA15E;
+            font-size: $font-xlarge;
 
-.SummonResult: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/SummonResult/index.tsx

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