Add image to character modal

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')}

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 {