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

@@ -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;
-        }
-      }
-    }
-  }
-}

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>

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;
+          }
+        }
+      }
+    }
+  }
 }