Fix Lyria in CharacterRep

This is 100% not going to scale to devices that are not my iPhone 14 Pro Max, but I can't get env variables working in CSS and something is better than nothing for right now.

components/about/AboutHead/index.tsx

@@ -26,7 +26,7 @@ const AboutHead = ({ page }: Props) => {
         name="description"
         content={t(`page.descriptions.${currentPage}`)}
       />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
       <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
 
       {/* OpenGraph */}

components/character/CharacterUnit/index.tsx

@@ -192,11 +192,11 @@ const CharacterUnit = ({
       else if (gridCharacter.uncap_level > 2) suffix = '02'
 
       // Special casing for Lyria (and Young Cat eventually)
-      if (gridCharacter.object.granblue_id === '3030182000') {
+      if (character.element === 0) {
         let element = 1
         if (grid.weapons.mainWeapon && grid.weapons.mainWeapon.element) {
           element = grid.weapons.mainWeapon.element
-        } else if (party.element != 0) {
+        } else if (party.element !== 0) {
           element = party.element
         }
 

components/common/DialogContent/index.module.scss

@@ -13,6 +13,14 @@
   color: inherit;
   z-index: 10;
 
+  @include breakpoint(phone) {
+    place-items: flex-end;
+    overflow-y: hidden;
+
+    &.filter {
+    }
+  }
+
   .dialogContent {
     $multiplier: 4;
 
@@ -51,11 +59,11 @@
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
       min-width: inherit;
-      min-height: 90vh;
+      min-height: inherit;
       transform: initial;
       left: 0;
       right: 0;
-      top: 5vh;
+      top: $unit-10x;
       height: auto;
       width: 100%;
     }
@@ -101,110 +109,6 @@
         overflow-y: auto;
       }
     }
-
-    &.Conflict {
-      $weapon-diameter: 14rem;
-
-      .Content {
-        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;
-          }
-        }
-      }
-
-      .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-2x;
-        }
-
-        .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;
-            }
-          }
-        }
-      }
-    }
   }
 
   @keyframes openModalDesktop {
@@ -221,11 +125,20 @@
 
   @keyframes slideUp {
     0% {
-      transform: translate(0%, 100%);
+      transform: translateY(400px);
+      animation-timing-function: ease-out;
+    }
+    60% {
+      transform: translateY(-30px);
+      animation-timing-function: ease-in;
+    }
+    80% {
+      transform: translateY(10px);
+      animation-timing-function: ease-out;
     }
-
     100% {
-      transform: translate(0, 0%);
+      transform: translateY(0px);
+      animation-timing-function: ease-in;
     }
   }
 }

components/common/DialogContent/index.tsx

@@ -11,6 +11,7 @@ interface Props
     React.DialogHTMLAttributes<HTMLDivElement>,
     HTMLDivElement
   > {
+  wrapperClassName?: string
   headerref?: React.RefObject<HTMLDivElement>
   footerref?: React.RefObject<HTMLDivElement>
   scrollable?: boolean
@@ -127,7 +128,16 @@ const DialogContent = React.forwardRef<HTMLDivElement, Props>(function Dialog(
 
   return (
     <DialogPrimitive.Portal>
-      <dialog className={styles.dialog}>
+      <dialog
+        className={classNames(
+          {
+            [styles.dialog]: true,
+          },
+          props.wrapperClassName
+            ?.split(' ')
+            .map((className) => styles[className])
+        )}
+      >
         <DialogPrimitive.Content
           {...props}
           className={classes}

components/common/DialogFooter/index.module.scss

@@ -16,4 +16,11 @@
     display: flex;
     gap: $unit;
   }
+
+  @include breakpoint(phone) {
+    position: fixed;
+    bottom: $unit-14x;
+    left: 0;
+    right: 0;
+  }
 }

components/common/Editor/index.module.scss

@@ -36,6 +36,14 @@
       outline: none;
     }
 
+    p.empty:first-child::before {
+      color: var(--text-tertiary);
+      content: attr(data-placeholder);
+      float: left;
+      height: 0;
+      pointer-events: none;
+    }
+
     &.bound {
       background-color: var(--input-bound-bg);
 
@@ -74,21 +82,21 @@
     h1 {
       font-size: $font-xlarge;
       font-weight: $medium;
-      margin: $unit 0;
+      margin: $unit-2x 0;
       text-align: left;
     }
 
     h2 {
       font-size: $font-large;
       font-weight: $medium;
-      margin: $unit 0;
+      margin: $unit-2x 0;
       text-align: left;
     }
 
     h3 {
       font-size: $font-regular;
       font-weight: $medium;
-      margin: $unit 0;
+      margin: $unit-2x 0;
       text-align: left;
     }
 
@@ -96,6 +104,7 @@
       border-radius: $item-corner-small;
       background: var(--highlight-bg);
       color: var(--highlight-text);
+      font-weight: $normal;
       padding: 1px $unit-fourth;
     }
 
@@ -116,15 +125,18 @@
     .mention {
       border-radius: $item-corner-small;
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
-        0 1px 0px rgba(0, 0, 0, 0.25);
-      background: var(--card-bg);
+        0 1px 0px var(--null-shadow);
+      background: var(--null-bg);
       color: var(--text-primary);
       font-weight: $medium;
       font-size: 15px;
       padding: 1px $unit-half;
+      transition: all 0.1s ease-out;
 
       &:hover {
-        background: var(--card-bg-hover);
+        background: var(--null-bg-hover);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
+          0 1px 0px var(--null-shadow-hover);
         text-decoration: none;
         cursor: pointer;
       }
@@ -136,6 +148,7 @@
         color: var(--fire-text);
 
         &:hover {
+          background: var(--fire-bg-hover);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--fire-shadow-hover);
           color: var(--fire-text-hover);
@@ -149,6 +162,7 @@
         color: var(--water-text);
 
         &:hover {
+          background: var(--water-bg-hover);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--water-shadow-hover);
           color: var(--water-text-hover);
@@ -162,6 +176,7 @@
         color: var(--earth-text);
 
         &:hover {
+          background: var(--earth-bg-hover);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--earth-shadow-hover);
           color: var(--earth-text-hover);
@@ -188,6 +203,7 @@
         color: var(--dark-text);
 
         &:hover {
+          background: var(--dark-bg-hover);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--dark-shadow-hover);
           color: var(--dark-text-hover);
@@ -201,6 +217,7 @@
         color: var(--light-text);
 
         &:hover {
+          background: var(--light-bg-hover);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--light-shadow-hover);
           color: var(--light-text-hover);

components/common/Editor/index.tsx

@@ -1,9 +1,12 @@
 import { ComponentProps, useCallback, useEffect } from 'react'
-import { useRouter } from 'next/router'
 import { useEditor, EditorContent } from '@tiptap/react'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
 import StarterKit from '@tiptap/starter-kit'
 import Link from '@tiptap/extension-link'
 import Highlight from '@tiptap/extension-highlight'
+import Placeholder from '@tiptap/extension-placeholder'
 import Typography from '@tiptap/extension-typography'
 import Youtube from '@tiptap/extension-youtube'
 import CustomMention from '~extensions/CustomMention'
@@ -18,7 +21,7 @@ import ItalicIcon from 'remixicon-react/ItalicIcon'
 import StrikethroughIcon from 'remixicon-react/StrikethroughIcon'
 import UnorderedListIcon from 'remixicon-react/ListUnorderedIcon'
 import OrderedListIcon from '~public/icons/remix/list-ordered-2.svg'
-import PaintbrushIcon from 'remixicon-react/PaintbrushLineIcon'
+import PaintbrushIcon from 'remixicon-react/PaintBrushLineIcon'
 import H1Icon from 'remixicon-react/H1Icon'
 import H2Icon from 'remixicon-react/H2Icon'
 import H3Icon from 'remixicon-react/H3Icon'
@@ -45,6 +48,8 @@ const Editor = ({
   const router = useRouter()
   const locale = router.locale || 'en'
 
+  const { t } = useTranslation('common')
+
   useEffect(() => {
     editor?.commands.setContent(formatContent(content))
   }, [content])
@@ -72,6 +77,10 @@ const Editor = ({
       }),
       Link,
       Highlight,
+      Placeholder.configure({
+        emptyEditorClass: styles.empty,
+        placeholder: t('modals.edit_team.placeholders.description'),
+      }),
       Typography,
       CustomMention.configure({
         renderLabel({ options, node }) {

components/common/Popover/index.module.scss

@@ -21,12 +21,6 @@
   &.flush {
     padding: 0;
   }
-
-  .Arrow {
-    fill: var(--dialog-bg);
-    filter: drop-shadow(0px 1px 1px rgb(0 0 0 / 0.18));
-    margin-top: -1px;
-  }
 }
 
 .trigger {

components/common/PopoverContent/index.module.scss

@@ -0,0 +1,5 @@
+.arrow {
+  fill: var(--dialog-bg);
+  filter: drop-shadow(0px 1px 1px rgb(0 0 0 / 0.18));
+  margin-top: -1px;
+}

components/common/Select/index.module.scss

@@ -63,6 +63,10 @@
 
   &.table {
     min-width: $unit * 30;
+
+    @include breakpoint(phone) {
+      width: 100%;
+    }
   }
 
   &.hidden {

components/common/Slider/index.module.scss

@@ -14,6 +14,10 @@
     border-radius: 9999px;
     height: 3px;
   }
+
+  &.table {
+    flex-grow: 1;
+  }
 }
 
 .range {

components/common/SliderTableField/index.tsx

@@ -54,6 +54,7 @@ const SliderTableField = (props: Props) => {
         max={props.max}
         step={props.step}
         value={[props.value ? props.value : 0]}
+        className="table"
         onValueChange={handleValueChange}
         onValueCommit={handleValueCommit}
       />

components/common/TableField/index.module.scss

@@ -36,6 +36,14 @@
     }
   }
 
+  &.switch {
+    @include breakpoint(phone) {
+      align-items: center;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+
   .left {
     align-items: center;
     display: flex;

components/common/ToolbarButton/index.tsx

@@ -24,7 +24,13 @@ const ToolbarIcon = ({ editor, action, level, icon, onClick }: Props) => {
   })
 
   return (
-    <Tooltip content={t(`toolbar.tooltips.${action}`)}>
+    <Tooltip
+      content={
+        level
+          ? t(`toolbar.tooltips.${action}`, { level: level })
+          : t(`toolbar.tooltips.${action}`)
+      }
+    >
       <button onClick={onClick} className={classes}>
         {icon}
       </button>

components/filters/FilterModal/index.module.scss

@@ -39,5 +39,6 @@
 
   @include breakpoint(phone) {
     gap: $unit-4x;
+    margin-bottom: $unit * 24;
   }
 }

components/filters/FilterModal/index.tsx

@@ -402,7 +402,8 @@ const FilterModal = (props: Props) => {
     <Dialog open={open} onOpenChange={openChange}>
       <DialogTrigger asChild>{props.children}</DialogTrigger>
       <DialogContent
-        className="Filter"
+        className="filter"
+        wrapperClassName="filter"
         headerref={headerRef}
         footerref={footerRef}
         onEscapeKeyDown={onEscapeKeyDown}

components/head/NewHead/index.tsx

@@ -11,7 +11,7 @@ const NewHead = () => {
       {/* HTML */}
       <title>{t('page.titles.new')}</title>
       <meta name="description" content={t('page.descriptions.new')} />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
       <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
 
       {/* OpenGraph */}

components/head/ProfileHead/index.tsx

@@ -20,7 +20,7 @@ const ProfileHead = ({ user }: Props) => {
           username: user.username,
         })}
       />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
       <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
 
       {/* OpenGraph */}

components/head/SavedHead/index.tsx

@@ -9,7 +9,7 @@ const SavedHead = () => {
   return (
     <Head>
       <title>{t('page.titles.saved')}</title>
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
       <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
 
       <meta property="og:title" content={t('page.titles.saved')} />

components/head/TeamsHead/index.tsx

@@ -11,7 +11,6 @@ const TeamsHead = () => {
       {/* HTML */}
       <title>{t('page.titles.discover')}</title>
       <meta name="description" content={t('page.descriptions.discover')} />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
 
       {/* OpenGraph */}

components/party/EditPartyModal/index.tsx

@@ -297,7 +297,8 @@ const EditPartyModal = ({
   // Methods: Modification checking
   function hasBeenModified() {
     const nameChanged =
-      name !== party.name && !(name === '' && party.name === undefined)
+      name !== party.name &&
+      !(name === '' && (party.name === undefined || party.name === null))
     const descriptionChanged =
       description !== party.description &&
       !(description === '' && party.description === undefined)
@@ -433,7 +434,7 @@ const EditPartyModal = ({
   const nameField = (
     <Input
       name="name"
-      placeholder="Name your team"
+      placeholder={t('modals.edit_team.placeholders.name')}
       autoFocus={true}
       value={name}
       maxLength={50}
@@ -476,15 +477,6 @@ const EditPartyModal = ({
     />
   )
 
-  const editorField = (
-    <Editor
-      bound={true}
-      content={description}
-      editable={true}
-      onUpdate={handleEditorUpdate}
-    />
-  )
-
   const chargeAttackField = (
     <SwitchTableField
       name="charge_attack"

components/party/PartyHead/index.tsx

@@ -32,7 +32,7 @@ const PartyHead = ({ party, meta }: Props) => {
           raidName: party.raid ? party.raid.name[locale] : '',
         })}
       />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
       <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
 
       {/* OpenGraph */}

components/reps/CharacterRep/index.tsx

@@ -17,10 +17,7 @@ const CHARACTERS_COUNT = 3
 
 const CharacterRep = (props: Props) => {
   // Localization for alt tags
-  const router = useRouter()
-  const { t } = useTranslation('common')
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+  const locale = useRouter().locale || 'en'
 
   // Component state
   const [characters, setCharacters] = useState<GridArray<Character>>({})
@@ -95,8 +92,15 @@ const CharacterRep = (props: Props) => {
       else if (gridCharacter.uncap_level >= 5) suffix = '03'
       else if (gridCharacter.uncap_level > 2) suffix = '02'
 
-      if (character.element == 0) {
-        url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/character-main/${character.granblue_id}_${props.element}.jpg`
+      let element = props.element
+      if (element === 0 && character.element !== 0) {
+        element = character.element
+      } else if (element === 0 && character.element === 0) {
+        element = 1
+      }
+
+      if (character.element === 0) {
+        url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/character-main/${character.granblue_id}_${suffix}_0${element}.jpg`
       } else {
         url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/character-main/${character.granblue_id}_${suffix}.jpg`
       }

components/summon/SummonGrid/index.tsx

@@ -261,9 +261,7 @@ const SummonGrid = (props: Props) => {
 
     try {
       if (stage != previousTranscendenceStages[position])
-        await api.endpoints.grid_summons
-          .update(id, payload)
-          .then((response) => {
+        await api.updateTranscendence('summon', id, stage).then((response) => {
           storeGridSummon(response.data.grid_summon)
         })
     } catch (error) {

components/uncap/TranscendenceFragment/index.module.scss

@@ -1,4 +1,4 @@
-.Fragment {
+.fragment {
   $degrees: 72deg;
 
   $origWidth: 29px;
@@ -28,11 +28,11 @@
     cursor: pointer;
   }
 
-  &.Visible {
+  &.visible {
     opacity: 1;
   }
 
-  &.Stage1 {
+  &.stage1 {
     top: 3px;
     left: 18px;
 
@@ -41,7 +41,7 @@
     // }
   }
 
-  &.Stage2 {
+  &.stage2 {
     top: 10px;
     left: 27px;
     transform: rotate($degrees);
@@ -51,7 +51,7 @@
     // }
   }
 
-  &.Stage3 {
+  &.stage3 {
     top: 21px;
     left: 24px;
     transform: rotate($degrees * 2);
@@ -61,7 +61,7 @@
     // }
   }
 
-  &.Stage4 {
+  &.stage4 {
     top: 21px;
     left: 12px;
     transform: rotate($degrees * 3);
@@ -71,7 +71,7 @@
     // }
   }
 
-  &.Stage5 {
+  &.stage5 {
     top: 10px;
     left: 8px;
     transform: rotate($degrees * 4);

components/uncap/TranscendenceFragment/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import classnames from 'classnames'
+import classNames from 'classnames'
 
 import styles from './index.module.scss'
 
@@ -18,14 +18,14 @@ const TranscendenceFragment = ({
   onClick,
   onHover,
 }: Props) => {
-  const classes = classnames({
-    Fragment: true,
-    Visible: visible,
-    Stage1: stage === 1,
-    Stage2: stage === 2,
-    Stage3: stage === 3,
-    Stage4: stage === 4,
-    Stage5: stage === 5,
+  const classes = classNames({
+    [styles.fragment]: true,
+    [styles.visible]: visible,
+    [styles.stage1]: stage === 1,
+    [styles.stage2]: stage === 2,
+    [styles.stage3]: stage === 3,
+    [styles.stage4]: stage === 4,
+    [styles.stage5]: stage === 5,
   })
 
   function handleClick() {

components/uncap/TranscendencePopover/index.module.scss

@@ -1,11 +1,20 @@
-.Transcendence.Popover {
-  align-items: center;
+.transcendence {
+  display: flex;
   flex-direction: column;
   gap: $unit-half;
-  display: flex;
+  align-items: center;
+  justify-content: center;
   width: $unit-10x;
   height: $unit-10x;
-  justify-content: center;
+
+  animation: scaleIn $duration-zoom ease-out;
+  background: var(--dialog-bg);
+  border-radius: $card-corner;
+  border: 0.5px solid rgba(0, 0, 0, 0.18);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
+  outline: none;
+  padding: $unit;
+  transform-origin: var(--radix-popover-content-transform-origin);
   z-index: 32;
 
   &.open {
@@ -18,7 +27,50 @@
     font-weight: $medium;
   }
 
-  .Pending {
+  .pending {
     color: $yellow;
   }
 }
+
+@keyframes scaleIn {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  20% {
+    opacity: 0.2;
+    transform: scale(0.4);
+  }
+  40% {
+    opacity: 0.4;
+    transform: scale(0.8);
+  }
+  60% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  65% {
+    opacity: 0.65;
+    transform: scale(1.1);
+  }
+  70% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
+  75% {
+    opacity: 0.75;
+    transform: scale(0.98);
+  }
+  80% {
+    opacity: 0.8;
+    transform: scale(1.02);
+  }
+  90% {
+    opacity: 0.9;
+    transform: scale(0.96);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

components/uncap/TranscendencePopover/index.tsx

@@ -2,8 +2,8 @@ import React, { PropsWithChildren, useEffect, useState } from 'react'
 import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
 
+import { Popover } from '@radix-ui/react-popover'
 import {
-  Popover,
   PopoverAnchor,
   PopoverContent,
 } from '~components/common/PopoverContent'
@@ -40,12 +40,8 @@ const TranscendencePopover = ({
 
   const popoverRef = React.createRef<HTMLDivElement>()
 
-  const classes = classNames({
-    Transcendence: true,
-  })
-
   const levelClasses = classNames({
-    Pending: stage != currentStage,
+    [styles.pending]: stage != currentStage,
   })
 
   useEffect(() => {
@@ -77,16 +73,20 @@ const TranscendencePopover = ({
   return (
     <Popover open={open} onOpenChange={onOpenChange}>
       <PopoverAnchor>{children}</PopoverAnchor>
-      <PopoverContent className={classes} ref={popoverRef} tabIndex={tabIndex}>
+      <PopoverContent
+        className={styles.transcendence}
+        ref={popoverRef}
+        tabIndex={tabIndex}
+      >
         <TranscendenceStar
-          className="Interactive Base"
+          className="interactive base"
           editable={true}
           interactive={true}
           stage={stage}
           onFragmentClick={handleFragmentClicked}
           onFragmentHover={handleFragmentHovered}
         />
-        <h4>
+        <h4 className="name">
           <span>{t('level')}&nbsp;</span>
           <span className={levelClasses}>{baseLevel + 10 * currentStage}</span>
         </h4>

components/uncap/TranscendenceStar/index.tsx

@@ -46,9 +46,12 @@ const TranscendenceStar = ({
     [styles.stage5]: stage === 5,
   })
 
-  const baseImageClasses = classnames(className, {
+  const baseImageClasses = classnames(
+    {
       [styles.figure]: true,
-  })
+    },
+    className?.split(' ').map((c) => styles[c])
+  )
 
   useEffect(() => {
     setVisibleStage(stage)
@@ -87,7 +90,7 @@ const TranscendenceStar = ({
       onMouseLeave={interactive ? handleMouseLeave : () => {}}
       tabIndex={tabIndex}
     >
-      <div className="Fragments">
+      <div className={styles.fragments}>
         {[...Array(NUM_FRAGMENTS)].map((e, i) => {
           const loopStage = i + 1
           return interactive ? (

package-lock.json

@@ -23,6 +23,7 @@
         "@tiptap/extension-highlight": "^2.0.3",
         "@tiptap/extension-link": "^2.0.3",
         "@tiptap/extension-mention": "^2.0.3",
+        "@tiptap/extension-placeholder": "^2.0.3",
         "@tiptap/extension-typography": "^2.0.3",
         "@tiptap/extension-youtube": "^2.0.3",
         "@tiptap/pm": "^2.0.3",
@@ -7348,6 +7349,19 @@
         "@tiptap/core": "^2.0.0"
       }
     },
+    "node_modules/@tiptap/extension-placeholder": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-2.0.3.tgz",
+      "integrity": "sha512-Z42jo0termRAf0S0L8oxrts94IWX5waU4isS2CUw8xCUigYyCFslkhQXkWATO1qRbjNFLKN2C9qvCgGf4UeBrw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
     "node_modules/@tiptap/extension-strike": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.0.3.tgz",

package.json

@@ -30,6 +30,7 @@
     "@tiptap/extension-highlight": "^2.0.3",
     "@tiptap/extension-link": "^2.0.3",
     "@tiptap/extension-mention": "^2.0.3",
+    "@tiptap/extension-placeholder": "^2.0.3",
     "@tiptap/extension-typography": "^2.0.3",
     "@tiptap/extension-youtube": "^2.0.3",
     "@tiptap/pm": "^2.0.3",

pages/_app.tsx

@@ -1,4 +1,5 @@
 import { appWithTranslation } from 'next-i18next'
+import Head from 'next/head'
 import Link from 'next/link'
 import { useTranslation } from 'next-i18next'
 import { get } from 'local-storage'
@@ -131,6 +132,13 @@ function MyApp({ Component, pageProps }: AppProps) {
   }
 
   return (
+    <>
+      <Head>
+        <meta
+          name="viewport"
+          content="viewport-fit=cover, width=device-width, initial-scale=1.0"
+        />
+      </Head>
       <ThemeProvider>
         <ToastProvider swipeDirection="right">
           <TooltipProvider>
@@ -145,6 +153,7 @@ function MyApp({ Component, pageProps }: AppProps) {
           </TooltipProvider>
         </ToastProvider>
       </ThemeProvider>
+    </>
   )
 }
 

pages/p/[party].tsx

@@ -90,8 +90,8 @@ const PartyRoute: React.FC<Props> = ({
         break
     }
 
-    if (router.asPath !== '/new' && router.asPath !== '/')
-      router.replace(path, undefined, { shallow: true })
+    // if (router.asPath !== '/new' && router.asPath !== '/')
+    //   router.replace(path, undefined, { shallow: true })
   }
 
   // Set the initial data from props

public/locales/en/common.json

@@ -557,6 +557,19 @@
   "tokens": {
     "remix": "Remixed"
   },
+  "toolbar": {
+    "tooltips": {
+      "bold": "Bold",
+      "italic": "Italic",
+      "strike": "Strikethrough",
+      "highlight": "Highlight",
+      "link": "Add a link",
+      "youtube": "Add a Youtube video",
+      "heading": "Heading {{level}}",
+      "bulletList": "Bullet list",
+      "orderedList": "Numbered list"
+    }
+  },
   "tooltips": {
     "copy_url": "Copy the URL to this team",
     "new": "Create a new team",

public/locales/ja/common.json

@@ -555,6 +555,19 @@
   "tokens": {
     "remix": "リミックスされた"
   },
+  "toolbar": {
+    "tooltips": {
+      "bold": "太字",
+      "italic": "斜体",
+      "strike": "取り消し線",
+      "highlight": "ハイライト",
+      "link": "リンクを挿入",
+      "youtube": "Youtube動画を埋め込む",
+      "heading": "見出し {{level}}",
+      "bulletList": "箇条書き",
+      "orderedList": "番号リスト"
+    }
+  },
   "tooltips": {
     "copy_url": "この編成のURLをコピーする",
     "new": "新しい編成を作成する",

styles/themes.scss

@@ -159,6 +159,14 @@
   --grid-border-color: #{$grid--border--color--light};
 
   // Light - Element theming
+  --null-bg: #{$null--bg--light};
+  --null-bg-hover: #{$null--bg--hover--light};
+  --null-text: #{$null--text--light};
+  --null-raid-text: #{$null--text--raid--light};
+  --null-text-hover: #{$null--text--hover--light};
+  --null-shadow: #{$null--shadow--light};
+  --null-shadow-hover: #{$null--shadow--light--hover};
+
   --wind-bg: #{$wind--bg--light};
   --wind-bg-hover: #{$wind--bg--hover--light};
   --wind-text: #{$wind--text--light};
@@ -373,6 +381,14 @@
   --grid-border-color: #{$grid--border--color--dark};
 
   // Dark - Element theming
+  --null-bg: #{$null--bg--dark};
+  --null-bg-hover: #{$null--bg--hover--dark};
+  --null-text: #{$null--text--dark};
+  --null-raid-text: #{$null--text--raid--dark};
+  --null-text-hover: #{$null--text--hover--dark};
+  --null-shadow: #{$null--shadow--dark};
+  --null-shadow-hover: #{$null--shadow--dark--hover};
+
   --wind-bg: #{$wind--bg--dark};
   --wind-bg-hover: #{$wind--bg--hover--dark};
   --wind-text: #{$wind--text--dark};

styles/variables.scss

@@ -464,6 +464,28 @@ $wind--shadow--dark: fade-out($wind-text-20, 0.3);
 $wind--shadow--light--hover: fade-out($wind-text-00, 0.3);
 $wind--shadow--dark--hover: fade-out($wind-text-00, 0.3);
 
+// Color Definitions: Element / Null
+$null--bg--light: $grey-75;
+$null--bg--dark: $grey-40;
+
+$null--bg--hover--light: $grey-70;
+$null--bg--hover--dark: $grey-30;
+
+$null--text--light: $grey-40;
+$null--text--dark: $grey-90;
+
+$null--text--raid--light: $grey-40;
+$null--text--raid--dark: $grey-90;
+
+$null--text--hover--light: $grey-20;
+$null--text--hover--dark: $grey-90;
+
+$null--shadow--light: fade-out($grey-60, 0.3);
+$null--shadow--dark: fade-out($grey-25, 0.3);
+
+$null--shadow--light--hover: fade-out($grey-50, 0.3);
+$null--shadow--dark--hover: fade-out($grey-10, 0.3);
+
 // Color Definitions: Element / Fire
 $fire--bg--light: $fire-bg-10;
 $fire--bg--dark: $fire-bg-10;

utils/api.tsx

@@ -180,6 +180,17 @@ class Api {
     })
   }
 
+  updateTranscendence(resource: 'character'|'summon', id: string, value: number) {
+    const pluralized = resource + 's'
+    const resourceUrl = `${this.url}/${pluralized}/update_uncap`
+    return axios.post(resourceUrl, {
+      [resource]: {
+        id: id,
+        transcendence_step: value
+      }
+    })
+  }
+  
   userInfo(id: string) {
     const resourceUrl = `${this.url}/users/info/${id}`
     return axios.get(resourceUrl)