From 1d5822a0ab67678abe5fcabae04cac775fb615bc Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 19 Jan 2023 07:26:37 -0800
Subject: [PATCH] Add header changes to Weapon and Character modals

---
 components/CharacterModal/index.scss | 27 +++++++++++++++++++++++++++
 components/CharacterModal/index.tsx  |  4 +++-
 components/WeaponModal/index.scss    | 27 +++++++++++++++++++++++++++
 components/WeaponModal/index.tsx     |  5 +++++
 4 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/components/CharacterModal/index.scss b/components/CharacterModal/index.scss
index 6de35952..31b1e9aa 100644
--- a/components/CharacterModal/index.scss
+++ b/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;
diff --git a/components/CharacterModal/index.tsx b/components/CharacterModal/index.tsx
index e8855066..84f42f4e 100644
--- a/components/CharacterModal/index.tsx
+++ b/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}
diff --git a/components/WeaponModal/index.scss b/components/WeaponModal/index.scss
index 44ef260d..690a8864 100644
--- a/components/WeaponModal/index.scss
+++ b/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;
diff --git a/components/WeaponModal/index.tsx b/components/WeaponModal/index.tsx
index 1cf296b8..3fe3ad4e 100644
--- a/components/WeaponModal/index.tsx
+++ b/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')}