From d9a7703f2ce141dbef891c74f10dfe698f4bb72a Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 1 Sep 2023 08:43:29 -0700
Subject: [PATCH] Center uncap indicator in hovercard

---
 components/HovercardHeader/index.module.scss      |  9 +++------
 components/HovercardHeader/index.tsx              |  1 +
 components/uncap/UncapIndicator/index.module.scss |  5 +++++
 components/uncap/UncapIndicator/index.tsx         | 12 ++++++++++--
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/components/HovercardHeader/index.module.scss b/components/HovercardHeader/index.module.scss
index dcc1117a..f547451b 100644
--- a/components/HovercardHeader/index.module.scss
+++ b/components/HovercardHeader/index.module.scss
@@ -41,17 +41,14 @@
     align-items: center;
     display: flex;
     flex-direction: row;
-    gap: $unit * 2;
+    justify-content: space-between;
+    gap: $unit-2x;
 
     .icons {
       display: flex;
       flex-direction: row;
-      flex-grow: 1;
+      flex-grow: 0;
       gap: $unit;
     }
-
-    .UncapIndicator {
-      min-width: 100px;
-    }
   }
 }
diff --git a/components/HovercardHeader/index.tsx b/components/HovercardHeader/index.tsx
index 1acf04e8..105d52ed 100644
--- a/components/HovercardHeader/index.tsx
+++ b/components/HovercardHeader/index.tsx
@@ -132,6 +132,7 @@ const HovercardHeader = ({ gridObject, object, type, ...props }: Props) => {
             )}
         </div>
         <UncapIndicator
+          className="hovercard"
           type={type}
           ulb={object.uncap.ulb || false}
           flb={object.uncap.flb || false}
diff --git a/components/uncap/UncapIndicator/index.module.scss b/components/uncap/UncapIndicator/index.module.scss
index dca13379..8aa2be94 100644
--- a/components/uncap/UncapIndicator/index.module.scss
+++ b/components/uncap/UncapIndicator/index.module.scss
@@ -1,6 +1,11 @@
 .wrapper {
   display: flex;
 
+  &.hovercard {
+    min-width: 100px;
+    justify-content: center;
+  }
+
   .indicator {
     display: flex;
     flex-direction: row;
diff --git a/components/uncap/UncapIndicator/index.tsx b/components/uncap/UncapIndicator/index.tsx
index 1711c171..57221f7b 100644
--- a/components/uncap/UncapIndicator/index.tsx
+++ b/components/uncap/UncapIndicator/index.tsx
@@ -4,8 +4,9 @@ import TranscendencePopover from '~components/uncap/TranscendencePopover'
 import TranscendenceStar from '~components/uncap/TranscendenceStar'
 
 import styles from './index.module.scss'
+import classNames from 'classnames'
 
-interface Props {
+interface Props extends React.ComponentProps<'div'> {
   type: 'character' | 'weapon' | 'summon'
   rarity?: number
   uncapLevel?: number
@@ -25,6 +26,13 @@ const UncapIndicator = (props: Props) => {
 
   const [popoverOpen, setPopoverOpen] = useState(false)
 
+  const classes = classNames(
+    {
+      [styles.wrapper]: true,
+    },
+    props.className?.split(' ').map((className) => styles[className])
+  )
+
   function setNumStars() {
     let numStars
 
@@ -150,7 +158,7 @@ const UncapIndicator = (props: Props) => {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <div className={classes}>
       <ul className={styles.indicator}>
         {Array.from(Array(numStars)).map((x, i) => {
           if (props.type === 'character' && i > 4) {