Add header changes to Weapon and Character modals

components/CharacterModal/index.scss

@@ -1,14 +1,41 @@
 .Character.DialogContent {
+  gap: $unit;
   min-width: 480px;
 
   @include breakpoint(phone) {
     min-width: inherit;
   }
 
+  .DialogHeader {
+    transition: 0.18s padding-top ease-in-out;
+    position: sticky;
+    top: 0;
+
+    &.Scrolled {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+      box-shadow: 0 1px 12px rgba(0, 0, 0, 0.34);
+      padding-top: $unit-2x;
+    }
+
+    img {
+      transition: 0.2s width ease-in-out;
+      width: $unit-6x !important;
+    }
+
+    .DialogTitle {
+      font-size: $font-large;
+    }
+
+    .SubTitle {
+      display: none;
+    }
+  }
+
   .mods {
     display: flex;
     flex-direction: column;
     gap: $unit-4x;
+    padding: 0 $unit-4x;
 
     section {
       display: flex;

components/CharacterModal/index.tsx

@@ -263,7 +263,7 @@ const CharacterModal = ({
         onOpenAutoFocus={(event) => event.preventDefault()}
         onEscapeKeyDown={() => {}}
       >
-        <div className="DialogHeader">
+        <div className={headerClasses}>
           <img
             alt={gridCharacter.object.name[locale]}
             className="DialogImage"
@@ -289,6 +289,8 @@ const CharacterModal = ({
           {ringSelect()}
           {earringSelect()}
           {awakeningSelect()}
+        </div>
+        <div className="DialogFooter">
           <Button
             contained={true}
             onClick={updateCharacter}

components/WeaponModal/index.scss

@@ -1,14 +1,41 @@
 .Weapon.DialogContent {
+  gap: $unit;
   min-width: 480px;
 
   @include breakpoint(phone) {
     min-width: inherit;
   }
 
+  .DialogHeader {
+    transition: 0.18s padding-top ease-in-out;
+    position: sticky;
+    top: 0;
+
+    &.Scrolled {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+      box-shadow: 0 1px 12px rgba(0, 0, 0, 0.34);
+      padding-top: $unit-2x;
+    }
+
+    img {
+      transition: 0.2s width ease-in-out;
+      width: $unit-6x !important;
+    }
+
+    .DialogTitle {
+      font-size: $font-large;
+    }
+
+    .SubTitle {
+      display: none;
+    }
+  }
+
   .mods {
     display: flex;
     flex-direction: column;
     gap: $unit * 4;
+    padding: 0 $unit-4x;
 
     section {
       display: flex;

components/WeaponModal/index.tsx

@@ -344,6 +344,11 @@ const WeaponModal = ({ gridWeapon, children }: Props) => {
         onEscapeKeyDown={onEscapeKeyDown}
       >
         <div className="DialogHeader">
+          <img
+            alt={gridWeapon.object.name[locale]}
+            className="DialogImage"
+            src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-square/${gridWeapon.object.granblue_id}.jpg`}
+          />
           <div className="DialogTop">
             <DialogTitle className="SubTitle">
               {t('modals.weapon.title')}