From 29f20ec33c5afe46d7ab9145d9333d5ce997f597 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 28 Feb 2022 18:24:54 -0800
Subject: [PATCH] Update CharacterResult

same shit
---
 components/CharacterResult/index.scss | 89 ++++++++++++++++-----------
 components/CharacterResult/index.tsx  | 16 +++--
 2 files changed, 63 insertions(+), 42 deletions(-)

diff --git a/components/CharacterResult/index.scss b/components/CharacterResult/index.scss
index ba900877..e7540ad0 100644
--- a/components/CharacterResult/index.scss
+++ b/components/CharacterResult/index.scss
@@ -1,48 +1,63 @@
 .CharacterResult {
-    -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;
 
-.CharacterResult img {
-    background: #e9e9e9;
-    border-radius: 6px;
-    display: inline-block;
-    height: 72px;
-    width: 120px;
-}
+    &:hover {
+        background: $grey-90;
+        cursor: pointer;
+    }
 
-.CharacterResult 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: 72px;
+        width: 120px;
+    }
 
-.CharacterResult .WeaponLabelIcon {
-    margin-right: 4px;
-}
+    .Info {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        gap: $unit / 2;
 
-.CharacterResult .stars {
-    display: inline-block;
-    color: #FFA15E;
-    font-size: $font-xlarge;
-}
+        h5 {
+            color: #555;
+            display: inline-block;
+            font-size: $font-medium;
+            font-weight: $medium;
+        }
 
-.CharacterResult .stars > span {
-    color: #65DAFF;
-}
+        .UncapIndicator {
+            justify-content: left;
+            pointer-events: none;
+        }
 
-.CharacterResult:hover {
-    background: #e9e9e9;
-    cursor: pointer;
-}
+        .stars {
+            display: inline-block;
+            color: #FFA15E;
+            font-size: $font-xlarge;
 
-.CharacterResult: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);
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/components/CharacterResult/index.tsx b/components/CharacterResult/index.tsx
index df78a20e..183ebe55 100644
--- a/components/CharacterResult/index.tsx
+++ b/components/CharacterResult/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 CharacterResult extends React.Component<Props> {
         return (
             <li className="CharacterResult" onClick={this.props.onClick}>
                 <img alt={character.name.en} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${character.granblue_id}_01.jpg`} />
-                <div>
-                    <div>
-                        <h5>{character.name.en}</h5>
-                        <div className="stars">{(character.rarity == 2) ? '⭑⭑⭑' : '⭑⭑⭑⭑'}{(character.uncap.flb) ? <span>⭑</span> : ''}</div>
+                <div className="Info">
+                    <h5>{character.name.en}</h5>
+                    <UncapIndicator 
+                        type="character"
+                        flb={character.uncap.flb}
+                        ulb={character.uncap.ulb}
+                        special={character.special}
+                    />
+                    <div className="tags">
+                        <WeaponLabelIcon labelType={Element[character.element]} />
                     </div>
-                    <WeaponLabelIcon labelType={Element[character.element]} />
                 </div>
             </li>
         )