Fix summons and extra summons

components/ExtraSummons/index.scss

@@ -1,18 +1,20 @@
-#ExtraSummons {
+.ExtraGrid.Summons {
   background: var(--subaura-orange-bg);
-  border-radius: 8px;
+  border-radius: $input-corner;
   box-sizing: border-box;
-  display: flex;
+  display: grid;
+  grid-template-columns: 2.32fr 2fr;
   justify-content: center;
   margin: 20px auto;
-  max-width: 727px;
+  max-width: calc($grid-width + 20px);
-  padding: 16px 16px 16px 0;
+  padding: $unit-3x $unit-3x $unit-3x 0;
   position: relative;
   left: 9px;
 
-  @include breakpoint(phone) {
+  @include breakpoint(tablet) {
     left: auto;
-    max-width: auto;
+    max-width: $grid-width;
+    padding: $unit-2x;
     width: 100%;
   }
 
@@ -23,17 +25,21 @@
     justify-content: center;
     line-height: 1.2;
     font-weight: 500;
-    margin-right: 16px;
     text-align: center;
-    width: 387px;
   }
 
-  #grid_summons {
+  #ExtraSummons {
     display: grid;
-    grid-template-columns: auto auto;
+    gap: $unit-3x;
-    grid-column-gap: $unit * 2;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
-    grid-template-rows: 1fr;
+
-    grid-row-gap: $unit * 3;
+    @include breakpoint(tablet) {
+      gap: $unit-2x;
+    }
+
+    @include breakpoint(phone) {
+      gap: $unit;
+    }
 
     & > li {
       list-style: none;

components/ExtraSummons/index.tsx

@@ -21,9 +21,9 @@ const ExtraSummons = (props: Props) => {
   const { t } = useTranslation('common')
 
   return (
-    <div id="ExtraSummons">
+    <div className="ExtraGrid Summons">
       <span>{t('summons.subaura')}</span>
-      <ul id="grid_summons">
+      <ul id="ExtraSummons">
         {Array.from(Array(numSummons)).map((x, i) => {
           return (
             <li key={`grid_unit_${i}`}>

components/ExtraWeapons/index.scss

@@ -1,4 +1,4 @@
-#ExtraGrid {
+.ExtraGrid.Weapons {
   background: var(--extra-purple-bg);
   border-radius: $card-corner;
   box-sizing: border-box;

components/ExtraWeapons/index.tsx

@@ -21,7 +21,7 @@ const ExtraWeapons = (props: Props) => {
   const { t } = useTranslation('common')
 
   return (
-    <div id="ExtraGrid">
+    <div className="ExtraGrid Weapons">
       <span>{t('extra_weapons')}</span>
       <ul id="ExtraWeapons">
         {Array.from(Array(numWeapons)).map((x, i) => {

components/SummonGrid/index.scss

@@ -1,8 +1,18 @@
 #SummonGrid {
   display: grid;
-  grid-template-columns: auto auto auto;
+  grid-template-columns: repeat(2, minmax(0, 1fr)) 2fr;
-  grid-column-gap: $unit * 2;
+  gap: $unit-3x;
   justify-content: center;
+  margin: 0 auto;
+  max-width: $grid-width;
+
+  @include breakpoint(tablet) {
+    gap: $unit-2x;
+  }
+
+  @include breakpoint(phone) {
+    gap: $unit;
+  }
 
   & .Label {
     color: $grey-55;
@@ -21,12 +31,19 @@
     }
   }
 
-  #grid_summons {
+  #Summons {
     display: grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
-    grid-column-gap: $unit * 2;
+    grid-template-rows: repeat(2, minmax(0, 1fr));
-    grid-template-rows: 1fr;
+    gap: $unit-3x;
-    grid-row-gap: $unit * 3;
+
+    @include breakpoint(tablet) {
+      gap: $unit-2x;
+    }
+
+    @include breakpoint(phone) {
+      gap: $unit;
+    }
 
     & > li {
       list-style: none;

components/SummonGrid/index.tsx

@@ -248,7 +248,7 @@ const SummonGrid = (props: Props) => {
   const summonGridElement = (
     <div id="LabeledGrid">
       <div className="Label">{t('summons.summons')}</div>
-      <ul id="grid_summons">
+      <ul id="Summons">
         {Array.from(Array(numSummons)).map((x, i) => {
           return (
             <li key={`grid_unit_${i}`}>

components/SummonUnit/index.scss

@@ -3,35 +3,18 @@
   flex-direction: column;
   gap: 4px;
 
-  &.main .SummonImage,
-  &.friend .SummonImage {
-    aspect-ratio: 182 / 315;
-    width: 182px;
-    height: auto;
-
-    @include breakpoint(tablet) {
-      width: 20.3vw;
-    }
-  }
-
   &.grid {
     // max-width: 148px;
     // min-height: 141px;
     min-height: 180px;
 
     @include breakpoint(tablet) {
-      min-height: 16.5vw;
+      min-height: 15.9vw;
     }
 
     .SummonImage {
-      aspect-ratio: 148 / 111;
       list-style-type: none;
-      width: 148px;
+      width: 100%;
-      height: auto;
-
-      @include breakpoint(tablet) {
-        width: 20vw;
-      }
     }
   }
 
@@ -77,6 +60,12 @@
     }
   }
 
+  .SummonName {
+    @include breakpoint(phone) {
+      font-size: $font-tiny;
+    }
+  }
+
   &.filled h3 {
     display: block;
   }
@@ -103,5 +92,9 @@
     position: relative;
     width: 100%;
     z-index: 2;
+
+    &.Placeholder {
+      opacity: 0;
+    }
   }
 }

components/SummonUnit/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
-import classnames from 'classnames'
+import classNames from 'classnames'
 
 import SearchModal from '~components/SearchModal'
 import SummonHovercard from '~components/SummonHovercard'
@@ -30,7 +30,7 @@ const SummonUnit = (props: Props) => {
   const locale =
     router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
 
-  const classes = classnames({
+  const classes = classNames({
     SummonUnit: true,
     main: props.unitType == 0,
     grid: props.unitType == 1,
@@ -85,6 +85,12 @@ const SummonUnit = (props: Props) => {
     setImageUrl(imgSrc)
   }
 
+  function placeholderImageUrl() {
+    return props.unitType == 0 || props.unitType == 2
+      ? '/images/placeholders/placeholder-summon-main.png'
+      : '/images/placeholders/placeholder-summon-grid.png'
+  }
+
   function passUncapData(uncap: number) {
     if (props.gridSummon)
       props.updateUncap(props.gridSummon.id, props.position, uncap)
@@ -92,7 +98,14 @@ const SummonUnit = (props: Props) => {
 
   const image = (
     <div className="SummonImage">
-      <img alt={summon?.name.en} className="grid_image" src={imageUrl} />
+      <img
+        alt={summon?.name.en}
+        className={classNames({
+          GridImage: true,
+          Placeholder: imageUrl === '',
+        })}
+        src={imageUrl !== '' ? imageUrl : placeholderImageUrl()}
+      />
       {props.editable ? (
         <span className="icon">
           <PlusIcon />