Update styles for conflict modals

* The actual styles for these were in DialogContent and had been deleted, so we fetched them from a previous commit
* Conflict modals get added to the exception that gives them a taller max height
* We can probably combine the meat of these into a ConflictDiagram component

components/character/CharacterConflictModal/index.module.scss

@@ -0,0 +1,69 @@
+.content {
+  $weapon-diameter: 14rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: $unit-4x;
+  padding: $unit-4x $unit-4x $unit-2x $unit-4x;
+
+  & > p {
+    font-size: $font-regular;
+    line-height: 1.4;
+
+    strong {
+      font-weight: $bold;
+    }
+
+    &:lang(ja) {
+      line-height: 1.4;
+    }
+  }
+
+  .diagram {
+    align-items: center;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+
+    ul {
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      gap: $unit-2x;
+    }
+
+    .character {
+      display: flex;
+      flex-direction: column;
+      gap: $unit;
+      text-align: center;
+      width: $weapon-diameter;
+      font-weight: $medium;
+
+      img {
+        border-radius: 1rem;
+        width: $weapon-diameter;
+        height: auto;
+      }
+
+      span {
+        line-height: 1.3;
+      }
+    }
+
+    .wrapper {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+    }
+
+    .arrow {
+      align-items: center;
+      color: $grey-55;
+      display: flex;
+      font-size: 4rem;
+      text-align: center;
+      height: $weapon-diameter;
+      justify-content: center;
+    }
+  }
+}

components/character/CharacterConflictModal/index.tsx

@@ -4,6 +4,7 @@ import { Trans, useTranslation } from 'next-i18next'
 
 import { Dialog } from '~components/common/Dialog'
 import DialogContent from '~components/common/DialogContent'
+import DialogFooter from '~components/common/DialogFooter'
 import Button from '~components/common/Button'
 import Overlay from '~components/common/Overlay'
 
@@ -75,19 +76,19 @@ const CharacterConflictModal = (props: Props) => {
   return (
     <Dialog open={open} onOpenChange={openChange}>
       <DialogContent
-        className="Conflict"
+        className="conflict"
         footerref={footerRef}
         onOpenAutoFocus={(event) => event.preventDefault()}
         onEscapeKeyDown={close}
       >
-        <div className="Content">
+        <div className={styles.content}>
           <p>
             <Trans i18nKey="modals.conflict.character"></Trans>
           </p>
-          <div className="CharacterDiagram Diagram">
+          <div className={styles.diagram}>
             <ul>
               {props.conflictingCharacters?.map((character, i) => (
-                <li className="character" key={`conflict-${i}`}>
+                <li className={styles.character} key={`conflict-${i}`}>
                   <img
                     alt={character.object.name[locale]}
                     src={imageUrl(character.object, character.uncap_level)}
@@ -96,9 +97,9 @@ const CharacterConflictModal = (props: Props) => {
                 </li>
               ))}
             </ul>
-            <span className="arrow">&rarr;</span>
+            <span className={styles.arrow}>&rarr;</span>
-            <div className="wrapper">
+            <div className={styles.wrapper}>
-              <div className="character">
+              <div className={styles.character}>
                 <img
                   alt={props.incomingCharacter?.name[locale]}
                   src={imageUrl(props.incomingCharacter)}
@@ -108,16 +109,16 @@ const CharacterConflictModal = (props: Props) => {
             </div>
           </div>
         </div>
-        <div className="DialogFooter" ref={footerRef}>
+        <DialogFooter
-          <div className="Buttons Span">
+          rightElements={[
-            <Button bound={true} onClick={close} text={t('buttons.cancel')} />
+            <Button bound={true} onClick={close} text={t('buttons.cancel')} />,
             <Button
               bound={true}
               onClick={props.resolveConflict}
               text={t('modals.conflict.buttons.confirm')}
-            />
+            />,
-          </div>
+          ]}
-        </div>
+        />
       </DialogContent>
       <Overlay open={open} visible={true} />
     </Dialog>

components/common/DialogContent/index.module.scss

@@ -80,7 +80,8 @@
       }
     }
 
-    &.editParty {
+    &.editParty,
+    &.conflict {
       min-height: 80vh;
 
       .container {

components/weapon/WeaponConflictModal/index.module.scss

@@ -0,0 +1,69 @@
+.content {
+  $weapon-diameter: 14rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: $unit-4x;
+  padding: $unit-4x $unit-4x $unit-2x $unit-4x;
+
+  & > p {
+    font-size: $font-regular;
+    line-height: 1.4;
+
+    strong {
+      font-weight: $bold;
+    }
+
+    &:lang(ja) {
+      line-height: 1.4;
+    }
+  }
+
+  .diagram {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: flex-start;
+
+    ul {
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      gap: $unit-2x;
+    }
+
+    .weapon {
+      display: flex;
+      flex-direction: column;
+      gap: $unit;
+      text-align: center;
+      width: $weapon-diameter;
+      font-weight: $medium;
+
+      img {
+        border-radius: 1rem;
+        width: $weapon-diameter;
+        height: auto;
+      }
+
+      span {
+        line-height: 1.3;
+      }
+    }
+
+    .wrapper {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+    }
+
+    .arrow {
+      align-items: center;
+      color: $grey-55;
+      display: flex;
+      font-size: 4rem;
+      text-align: center;
+      height: $weapon-diameter;
+      justify-content: center;
+    }
+  }
+}

components/weapon/WeaponConflictModal/index.tsx

@@ -4,6 +4,7 @@ import { Trans, useTranslation } from 'react-i18next'
 
 import { Dialog } from '~components/common/Dialog'
 import DialogContent from '~components/common/DialogContent'
+import DialogFooter from '~components/common/DialogFooter'
 import Button from '~components/common/Button'
 import Overlay from '~components/common/Overlay'
 
@@ -69,17 +70,17 @@ const WeaponConflictModal = (props: Props) => {
   return (
     <Dialog open={open} onOpenChange={openChange}>
       <DialogContent
-        className="Conflict"
+        className="conflict"
         footerref={footerRef}
         onOpenAutoFocus={(event) => event.preventDefault()}
         onEscapeKeyDown={close}
       >
-        <div className="Content">
+        <div className={styles.content}>
           <p>{infoString()}</p>
-          <div className="WeaponDiagram Diagram">
+          <div className={styles.diagram}>
             <ul>
               {props.conflictingWeapons?.map((weapon, i) => (
-                <li className="weapon" key={`conflict-${i}`}>
+                <li className={styles.weapon} key={`conflict-${i}`}>
                   <img
                     alt={weapon.object.name[locale]}
                     src={imageUrl(weapon.object)}
@@ -88,9 +89,9 @@ const WeaponConflictModal = (props: Props) => {
                 </li>
               ))}
             </ul>
-            <span className="arrow">&rarr;</span>
+            <span className={styles.arrow}>&rarr;</span>
-            <div className="wrapper">
+            <div className={styles.wrapper}>
-              <div className="weapon">
+              <div className={styles.weapon}>
                 <img
                   alt={props.incomingWeapon?.name[locale]}
                   src={imageUrl(props.incomingWeapon)}
@@ -100,16 +101,16 @@ const WeaponConflictModal = (props: Props) => {
             </div>
           </div>
         </div>
-        <div className="DialogFooter" ref={footerRef}>
+        <DialogFooter
-          <div className="Buttons Span">
+          rightElements={[
-            <Button bound={true} onClick={close} text={t('buttons.cancel')} />
+            <Button bound={true} onClick={close} text={t('buttons.cancel')} />,
             <Button
               bound={true}
               onClick={props.resolveConflict}
               text={t('modals.conflict.buttons.confirm')}
-            />
+            />,
-          </div>
+          ]}
-        </div>
+        />
       </DialogContent>
       <Overlay open={open} visible={true} />
     </Dialog>