Add switch and styling for perpetuity rings

components/CharacterModal/index.scss

@@ -15,6 +15,16 @@
       flex-direction: column;
       gap: $unit-half;
 
+      &.inline {
+        align-items: center;
+        flex-direction: row;
+        justify-content: space-between;
+
+        h3 {
+          margin: 0;
+        }
+      }
+
       h3 {
         color: $grey-55;
         font-size: $font-small;

components/CharacterModal/index.tsx

@@ -16,6 +16,7 @@ import Button from '~components/Button'
 import SelectWithInput from '~components/SelectWithInput'
 import AwakeningSelect from '~components/AwakeningSelect'
 import RingSelect from '~components/RingSelect'
+import Switch from '~components/Switch'
 
 // Utilities
 import api from '~utils/api'
@@ -233,7 +234,7 @@ const CharacterModal = ({
   const awakeningSelect = () => {
     return (
       <section>
-        <h3>{t('modals.weapon.subtitles.awakening')}</h3>
+        <h3>{t('modals.characters.subtitles.awakening')}</h3>
         <AwakeningSelect
           object="character"
           awakeningType={gridCharacter.awakening?.type}
@@ -245,6 +246,15 @@ const CharacterModal = ({
     )
   }
 
+  const perpetuitySwitch = () => {
+    return (
+      <section className="inline">
+        <h3>{t('modals.characters.subtitles.permanent')}</h3>
+        <Switch />
+      </section>
+    )
+  }
+
   return (
     <Dialog open={open} onOpenChange={openChange}>
       <DialogTrigger asChild>{children}</DialogTrigger>
@@ -275,6 +285,7 @@ const CharacterModal = ({
         </div>
 
         <div className="mods">
+          {perpetuitySwitch()}
           {ringSelect()}
           {earringSelect()}
           {awakeningSelect()}

public/locales/en/common.json

@@ -142,6 +142,7 @@
       "subtitles": {
         "ring": "Over Mastery",
         "earring": "Aetherial Mastery",
+        "permanent": "Permanent Mastery",
         "awakening": "Awakening"
       },
       "messages": {

public/locales/ja/common.json

@@ -142,6 +142,7 @@
       "subtitles": {
         "ring": "EXリミットボーナス",
         "earring": "エーテリアルプラス",
+        "permanent": "マスタリーボーナス",
         "awakening": "覚醒"
       },
       "messages": {