From 77a158974c3c70e148777a34c80af5b83d6354cc Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 24 Dec 2022 23:32:39 -0800
Subject: [PATCH] CSS updates

* Add conflict code to Dialog/index.scss for simplicity.
* A bit of cleanup on styles to make them more robust.
---
 components/CharacterConflictModal/index.scss | 63 -------------
 components/CharacterConflictModal/index.tsx  | 16 ++--
 components/Dialog/index.scss                 | 97 ++++++++++++++++++++
 components/WeaponConflictModal/index.scss    |  0
 4 files changed, 106 insertions(+), 70 deletions(-)
 create mode 100644 components/WeaponConflictModal/index.scss

diff --git a/components/CharacterConflictModal/index.scss b/components/CharacterConflictModal/index.scss
index 866ec8f7..e69de29b 100644
--- a/components/CharacterConflictModal/index.scss
+++ b/components/CharacterConflictModal/index.scss
@@ -1,63 +0,0 @@
-.Conflict.Dialog {
-  & > p {
-    line-height: 1.2;
-    max-width: 400px;
-  }
-  img {
-    border-radius: 1rem;
-  }
-
-  .arrow {
-    color: $grey-55;
-    font-size: 4rem;
-    text-align: center;
-  }
-
-  .character {
-    display: flex;
-    flex-direction: column;
-    gap: $unit;
-    text-align: center;
-    width: 12rem;
-    font-weight: $medium;
-  }
-
-  .diagram {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    align-items: center;
-
-    ul {
-      display: flex;
-      flex-direction: column;
-      gap: $unit * 2;
-    }
-  }
-
-  footer {
-    display: flex;
-    flex-direction: row;
-    gap: $unit;
-
-    .Button {
-      font-size: $font-regular;
-      padding: ($unit * 1.5) ($unit * 2);
-      width: 100%;
-
-      &.btn-disabled {
-        background: $grey-90;
-        color: $grey-70;
-        cursor: not-allowed;
-      }
-
-      &:not(.btn-disabled) {
-        background: $grey-90;
-        color: $grey-50;
-
-        &:hover {
-          background: $grey-80;
-        }
-      }
-    }
-  }
-}
diff --git a/components/CharacterConflictModal/index.tsx b/components/CharacterConflictModal/index.tsx
index 5faa7ebc..4480ef28 100644
--- a/components/CharacterConflictModal/index.tsx
+++ b/components/CharacterConflictModal/index.tsx
@@ -78,7 +78,7 @@ const CharacterConflictModal = (props: Props) => {
             Only one version of a character can be included in each party. Do
             you want to change your party members?
           </p>
-          <div className="diagram">
+          <div className="CharacterDiagram Diagram">
             <ul>
               {props.conflictingCharacters?.map((character, i) => (
                 <li className="character" key={`conflict-${i}`}>
@@ -91,12 +91,14 @@ const CharacterConflictModal = (props: Props) => {
               ))}
             </ul>
             <span className="arrow">&rarr;</span>
-            <div className="character">
-              <img
-                alt={props.incomingCharacter?.name.en}
-                src={imageUrl(props.incomingCharacter)}
-              />
-              {props.incomingCharacter?.name.en}
+            <div className="wrapper">
+              <div className="character">
+                <img
+                  alt={props.incomingCharacter?.name[locale]}
+                  src={imageUrl(props.incomingCharacter)}
+                />
+                <span>{props.incomingCharacter?.name[locale]}</span>
+              </div>
             </div>
           </div>
           <footer>
diff --git a/components/Dialog/index.scss b/components/Dialog/index.scss
index c1d9f0b0..df8f4d31 100644
--- a/components/Dialog/index.scss
+++ b/components/Dialog/index.scss
@@ -92,4 +92,101 @@
     justify-content: flex-end;
     width: 100%;
   }
+
+  &.Conflict.Dialog {
+    $weapon-diameter: 14rem;
+
+    & > p {
+      line-height: 1.2;
+      max-width: 400px;
+
+      strong {
+        font-weight: $bold;
+      }
+
+      &:lang(ja) {
+        line-height: 1.4;
+      }
+    }
+
+    .weapon,
+    .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;
+      }
+    }
+
+    .Diagram {
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+      align-items: flex-start;
+
+      &.CharacterDiagram {
+        align-items: center;
+      }
+
+      ul {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        gap: $unit * 2;
+      }
+
+      .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;
+      }
+    }
+
+    footer {
+      display: flex;
+      flex-direction: row;
+      gap: $unit;
+
+      .Button {
+        font-size: $font-regular;
+        padding: ($unit * 1.5) ($unit * 2);
+        width: 100%;
+
+        &.btn-disabled {
+          background: $grey-90;
+          color: $grey-70;
+          cursor: not-allowed;
+        }
+
+        &:not(.btn-disabled) {
+          background: $grey-90;
+          color: $grey-50;
+
+          &:hover {
+            background: $grey-80;
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/components/WeaponConflictModal/index.scss b/components/WeaponConflictModal/index.scss
new file mode 100644
index 00000000..e69de29b