From 4f5c790d7d35c976ca75eee89fbcaf4fc245dfc0 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 14 Jan 2023 17:43:59 -0800
Subject: [PATCH] Add image to character modal

---
 components/CharacterModal/index.tsx | 5 +++++
 components/Dialog/index.scss        | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/CharacterModal/index.tsx b/components/CharacterModal/index.tsx
index 9009bfdf..e7e0ef0d 100644
--- a/components/CharacterModal/index.tsx
+++ b/components/CharacterModal/index.tsx
@@ -254,6 +254,11 @@ const CharacterModal = ({
         onEscapeKeyDown={() => {}}
       >
         <div className="DialogHeader">
+          <img
+            alt={gridCharacter.object.name[locale]}
+            className="DialogImage"
+            src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-square/${gridCharacter.object.granblue_id}_01.jpg`}
+          />
           <div className="DialogTop">
             <DialogTitle className="SubTitle">
               {t('modals.characters.title')}
diff --git a/components/Dialog/index.scss b/components/Dialog/index.scss
index b93fbc55..29e95084 100644
--- a/components/Dialog/index.scss
+++ b/components/Dialog/index.scss
@@ -40,7 +40,7 @@
   .DialogHeader {
     display: flex;
     align-items: center;
-    gap: $unit;
+    gap: $unit-2x;
     justify-content: space-between;
 
     .left {
@@ -54,6 +54,11 @@
         line-height: 1.25;
       }
     }
+
+    .DialogImage {
+      border-radius: $input-corner;
+      width: $unit-10x;
+    }
   }
 
   .DialogClose {