From 0678856b4306bc8ff11a4d82dcc060927d68fb54 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 21 Jan 2023 07:56:25 -0800
Subject: [PATCH] Fix Conflict modals and make scrollable

---
 components/CharacterConflictModal/index.tsx | 69 ++++++++++++---------
 components/DialogContent/index.scss         | 36 ++++++++---
 components/DialogContent/index.tsx          |  2 +-
 components/WeaponConflictModal/index.tsx    | 65 +++++++++++--------
 4 files changed, 109 insertions(+), 63 deletions(-)

diff --git a/components/CharacterConflictModal/index.tsx b/components/CharacterConflictModal/index.tsx
index 285260a5..535d6305 100644
--- a/components/CharacterConflictModal/index.tsx
+++ b/components/CharacterConflictModal/index.tsx
@@ -30,6 +30,9 @@ const CharacterConflictModal = (props: Props) => {
   // States
   const [open, setOpen] = useState(false)
 
+  // Refs
+  const footerRef = React.createRef<HTMLDivElement>()
+
   useEffect(() => {
     setOpen(props.open)
   }, [setOpen, props.open])
@@ -73,42 +76,52 @@ const CharacterConflictModal = (props: Props) => {
     <Dialog open={open} onOpenChange={openChange}>
       <DialogContent
         className="Conflict"
+        footerref={footerRef}
         onOpenAutoFocus={(event) => event.preventDefault()}
         onEscapeKeyDown={close}
       >
-        <p>
-          <Trans i18nKey="modals.conflict.character"></Trans>
-        </p>
-        <div className="CharacterDiagram Diagram">
-          <ul>
-            {props.conflictingCharacters?.map((character, i) => (
-              <li className="character" key={`conflict-${i}`}>
+        <div className="Content">
+          <p>
+            <Trans i18nKey="modals.conflict.character"></Trans>
+          </p>
+          <div className="CharacterDiagram Diagram">
+            <ul>
+              {props.conflictingCharacters?.map((character, i) => (
+                <li className="character" key={`conflict-${i}`}>
+                  <img
+                    alt={character.object.name[locale]}
+                    src={imageUrl(character.object, character.uncap_level)}
+                  />
+                  <span>{character.object.name[locale]}</span>
+                </li>
+              ))}
+            </ul>
+            <span className="arrow">&rarr;</span>
+            <div className="wrapper">
+              <div className="character">
                 <img
-                  alt={character.object.name[locale]}
-                  src={imageUrl(character.object, character.uncap_level)}
+                  alt={props.incomingCharacter?.name[locale]}
+                  src={imageUrl(props.incomingCharacter)}
                 />
-                <span>{character.object.name[locale]}</span>
-              </li>
-            ))}
-          </ul>
-          <span className="arrow">&rarr;</span>
-          <div className="wrapper">
-            <div className="character">
-              <img
-                alt={props.incomingCharacter?.name[locale]}
-                src={imageUrl(props.incomingCharacter)}
-              />
-              <span>{props.incomingCharacter?.name[locale]}</span>
+                <span>{props.incomingCharacter?.name[locale]}</span>
+              </div>
             </div>
           </div>
         </div>
-        <footer>
-          <Button onClick={close} text={t('buttons.cancel')} />
-          <Button
-            onClick={props.resolveConflict}
-            text={t('modals.conflict.buttons.confirm')}
-          />
-        </footer>
+        <div className="DialogFooter" ref={footerRef}>
+          <div className="Buttons Span">
+            <Button
+              contained={true}
+              onClick={close}
+              text={t('buttons.cancel')}
+            />
+            <Button
+              contained={true}
+              onClick={props.resolveConflict}
+              text={t('modals.conflict.buttons.confirm')}
+            />
+          </div>
+        </div>
       </DialogContent>
       <Overlay open={open} visible={true} />
     </Dialog>
diff --git a/components/DialogContent/index.scss b/components/DialogContent/index.scss
index f40bb59b..78d89ee6 100644
--- a/components/DialogContent/index.scss
+++ b/components/DialogContent/index.scss
@@ -149,6 +149,19 @@
       flex-direction: column;
       padding: ($unit * 1.5) ($unit * $multiplier) $unit-3x;
       position: sticky;
+
+      .Buttons {
+        display: flex;
+        gap: $unit;
+
+        &.Span {
+          width: 100%;
+
+          .Button {
+            width: 100%;
+          }
+        }
+      }
     }
 
     .actions {
@@ -160,16 +173,23 @@
     &.Conflict {
       $weapon-diameter: 14rem;
 
-      & > p {
-        line-height: 1.2;
-        max-width: 400px;
+      .Content {
+        display: flex;
+        flex-direction: column;
+        gap: $unit-4x;
+        padding: $unit-4x $unit-4x $unit-2x $unit-4x;
 
-        strong {
-          font-weight: $bold;
-        }
-
-        &:lang(ja) {
+        & > p {
+          font-size: $font-regular;
           line-height: 1.4;
+
+          strong {
+            font-weight: $bold;
+          }
+
+          &:lang(ja) {
+            line-height: 1.4;
+          }
         }
       }
 
diff --git a/components/DialogContent/index.tsx b/components/DialogContent/index.tsx
index d2aabd2c..cc8a9b5e 100644
--- a/components/DialogContent/index.tsx
+++ b/components/DialogContent/index.tsx
@@ -11,7 +11,7 @@ interface Props
     React.DialogHTMLAttributes<HTMLDivElement>,
     HTMLDivElement
   > {
-  headerref: React.RefObject<HTMLDivElement>
+  headerref?: React.RefObject<HTMLDivElement>
   footerref?: React.RefObject<HTMLDivElement>
   onEscapeKeyDown: (event: KeyboardEvent) => void
   onOpenAutoFocus: (event: Event) => void
diff --git a/components/WeaponConflictModal/index.tsx b/components/WeaponConflictModal/index.tsx
index d1a9a3c7..a93f4345 100644
--- a/components/WeaponConflictModal/index.tsx
+++ b/components/WeaponConflictModal/index.tsx
@@ -30,6 +30,9 @@ const WeaponConflictModal = (props: Props) => {
   // States
   const [open, setOpen] = useState(false)
 
+  // Refs
+  const footerRef = React.createRef<HTMLDivElement>()
+
   useEffect(() => {
     setOpen(props.open)
   }, [setOpen, props.open])
@@ -67,40 +70,50 @@ const WeaponConflictModal = (props: Props) => {
     <Dialog open={open} onOpenChange={openChange}>
       <DialogContent
         className="Conflict"
+        footerref={footerRef}
         onOpenAutoFocus={(event) => event.preventDefault()}
         onEscapeKeyDown={close}
       >
-        <p>{infoString()}</p>
-        <div className="WeaponDiagram Diagram">
-          <ul>
-            {props.conflictingWeapons?.map((weapon, i) => (
-              <li className="weapon" key={`conflict-${i}`}>
+        <div className="Content">
+          <p>{infoString()}</p>
+          <div className="WeaponDiagram Diagram">
+            <ul>
+              {props.conflictingWeapons?.map((weapon, i) => (
+                <li className="weapon" key={`conflict-${i}`}>
+                  <img
+                    alt={weapon.object.name[locale]}
+                    src={imageUrl(weapon.object)}
+                  />
+                  <span>{weapon.object.name[locale]}</span>
+                </li>
+              ))}
+            </ul>
+            <span className="arrow">&rarr;</span>
+            <div className="wrapper">
+              <div className="weapon">
                 <img
-                  alt={weapon.object.name[locale]}
-                  src={imageUrl(weapon.object)}
+                  alt={props.incomingWeapon?.name[locale]}
+                  src={imageUrl(props.incomingWeapon)}
                 />
-                <span>{weapon.object.name[locale]}</span>
-              </li>
-            ))}
-          </ul>
-          <span className="arrow">&rarr;</span>
-          <div className="wrapper">
-            <div className="weapon">
-              <img
-                alt={props.incomingWeapon?.name[locale]}
-                src={imageUrl(props.incomingWeapon)}
-              />
-              {props.incomingWeapon?.name[locale]}
+                {props.incomingWeapon?.name[locale]}
+              </div>
             </div>
           </div>
         </div>
-        <footer>
-          <Button onClick={close} text={t('buttons.cancel')} />
-          <Button
-            onClick={props.resolveConflict}
-            text={t('modals.conflict.buttons.confirm')}
-          />
-        </footer>
+        <div className="DialogFooter" ref={footerRef}>
+          <div className="Buttons Span">
+            <Button
+              contained={true}
+              onClick={close}
+              text={t('buttons.cancel')}
+            />
+            <Button
+              contained={true}
+              onClick={props.resolveConflict}
+              text={t('modals.conflict.buttons.confirm')}
+            />
+          </div>
+        </div>
       </DialogContent>
       <Overlay open={open} visible={true} />
     </Dialog>