diff --git a/components/AboutModal/index.scss b/components/AboutModal/index.scss index cd5a8ace..a1c82a2c 100644 --- a/components/AboutModal/index.scss +++ b/components/AboutModal/index.scss @@ -2,13 +2,19 @@ gap: 0; padding-bottom: $unit; - & > div:not(.DialogHeader) { + .content { display: flex; flex-direction: column; gap: $unit-2x; padding: 0 $unit-4x; } + .sections { + display: flex; + flex-direction: column; + gap: $unit-2x; + } + section { margin-bottom: $unit; diff --git a/components/AboutModal/index.tsx b/components/AboutModal/index.tsx index 6a5d7fd3..7935befd 100644 --- a/components/AboutModal/index.tsx +++ b/components/AboutModal/index.tsx @@ -19,6 +19,7 @@ import './index.scss' const AboutModal = () => { const { t } = useTranslation('common') + const headerRef = React.createRef() return ( @@ -29,10 +30,11 @@ const AboutModal = () => { event.preventDefault()} onEscapeKeyDown={() => {}} > -
+
{t('menu.about')} @@ -41,7 +43,7 @@ const AboutModal = () => {
-
+

Granblue.team is a tool to save and share team comps for{' '} diff --git a/components/AccountModal/index.scss b/components/AccountModal/index.scss index c8135020..fda20060 100644 --- a/components/AccountModal/index.scss +++ b/components/AccountModal/index.scss @@ -3,6 +3,7 @@ flex-direction: column; gap: $unit-2x; width: $unit * 64; + overflow-y: hidden; .Fields { display: flex; diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx index 1824bb1e..c10ee25c 100644 --- a/components/AccountModal/index.tsx +++ b/components/AccountModal/index.tsx @@ -85,6 +85,10 @@ const AccountModal = (props: Props) => { const [languageOpen, setLanguageOpen] = useState(false) const [themeOpen, setThemeOpen] = useState(false) + // Refs + const headerRef = React.createRef() + const footerRef = React.createRef() + // UI management function openChange(open: boolean) { setOpen(open) @@ -286,10 +290,12 @@ const AccountModal = (props: Props) => { {}} onEscapeKeyDown={onEscapeKeyDown} > -

+
{t('modals.settings.title')} @@ -310,7 +316,7 @@ const AccountModal = (props: Props) => { {languageField()} {themeField()}
-
+
+
diff --git a/components/CharacterModal/index.scss b/components/CharacterModal/index.scss index 31b1e9aa..f2f35bf6 100644 --- a/components/CharacterModal/index.scss +++ b/components/CharacterModal/index.scss @@ -35,7 +35,7 @@ display: flex; flex-direction: column; gap: $unit-4x; - padding: 0 $unit-4x; + padding: 0 $unit-4x $unit-2x; section { display: flex; diff --git a/components/CharacterModal/index.tsx b/components/CharacterModal/index.tsx index c1b9b90d..d2f31326 100644 --- a/components/CharacterModal/index.tsx +++ b/components/CharacterModal/index.tsx @@ -83,11 +83,17 @@ const CharacterModal = ({ const [open, setOpen] = useState(false) const [formValid, setFormValid] = useState(false) + // Refs + const headerRef = React.createRef() + const footerRef = React.createRef() + // Classes const headerClasses = classNames({ DialogHeader: true, - Scrolled: scrolled, + Short: true, }) + + // Callbacks and Hooks useEffect(() => { setOpen(modalOpen) }, [modalOpen]) @@ -281,10 +287,12 @@ const CharacterModal = ({ {children} event.preventDefault()} onEscapeKeyDown={() => {}} > -
+
{gridCharacter.object.name[locale]} -
+
+
+
+
+
diff --git a/components/Overlay/index.scss b/components/Overlay/index.scss index 6059c821..b94ff228 100644 --- a/components/Overlay/index.scss +++ b/components/Overlay/index.scss @@ -6,6 +6,14 @@ right: 0; bottom: 0; left: 0; + backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0); + animation: 0.24s ease-in fadeInFilter; + animation-fill-mode: forwards; + + &.Job { + animation: none; + backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1); + } &.Visible { background: rgba(0, 0, 0, 0.6); diff --git a/components/Party/index.tsx b/components/Party/index.tsx index fd32525d..07e47403 100644 --- a/components/Party/index.tsx +++ b/components/Party/index.tsx @@ -12,6 +12,7 @@ import CharacterGrid from '~components/CharacterGrid' import api from '~utils/api' import { appState, initialAppState } from '~utils/appState' import { GridType } from '~utils/enums' +import { retrieveCookies } from '~utils/retrieveCookies' import type { DetailsObject } from '~types' import './index.scss' @@ -37,6 +38,9 @@ const Party = (props: Props) => { const { party } = useSnapshot(appState) const [currentTab, setCurrentTab] = useState(GridType.Weapon) + // Retrieve cookies + const cookies = retrieveCookies() + // Reset state on first load useEffect(() => { const resetState = clonedeep(initialAppState) @@ -107,13 +111,17 @@ const Party = (props: Props) => { } // Deleting the party - function deleteTeam(event: React.MouseEvent) { + function deleteTeam() { if (appState.party.editable && appState.party.id) { api.endpoints.parties .destroy({ id: appState.party.id }) .then(() => { // Push to route - router.push('/') + if (cookies && cookies.account.username) { + router.push(`/${cookies.account.username}`) + } else { + router.push('/') + } // Clean state const resetState = clonedeep(initialAppState) diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx index ee7440df..285f8f59 100644 --- a/components/PartyDetails/index.tsx +++ b/components/PartyDetails/index.tsx @@ -9,7 +9,7 @@ import LiteYouTubeEmbed from 'react-lite-youtube-embed' import classNames from 'classnames' import reactStringReplace from 'react-string-replace' -import * as AlertDialog from '@radix-ui/react-alert-dialog' +import Alert from '~components/Alert' import Button from '~components/Button' import CharLimitedFieldset from '~components/CharLimitedFieldset' @@ -40,9 +40,7 @@ interface Props { new: boolean editable: boolean updateCallback: (details: DetailsObject) => void - deleteCallback: ( - event: React.MouseEvent - ) => void + deleteCallback: () => void } const PartyDetails = (props: Props) => { @@ -60,6 +58,7 @@ const PartyDetails = (props: Props) => { const [open, setOpen] = useState(false) const [name, setName] = useState('') + const [alertOpen, setAlertOpen] = useState(false) const [chargeAttack, setChargeAttack] = useState(true) const [fullAuto, setFullAuto] = useState(false) @@ -293,6 +292,14 @@ const PartyDetails = (props: Props) => { toggleDetails() } + function handleClick() { + setAlertOpen(!alertOpen) + } + + function deleteParty() { + props.deleteCallback() + } + function extractYoutubeVideoIds(text: string) { // Initialize an array to store the video IDs const videoIds = [] @@ -381,42 +388,18 @@ const PartyDetails = (props: Props) => { ) } - const deleteButton = () => { + const deleteAlert = () => { if (party.editable) { return ( - - - - - - {t('buttons.delete')} - - - - - - {t('modals.delete_team.title')} - - - {t('modals.delete_team.description')} - -
- - {t('modals.delete_team.buttons.cancel')} - - props.deleteCallback(e)} - > - {t('modals.delete_team.buttons.confirm')} - -
- - - + setAlertOpen(false)} + cancelActionText={t('modals.delete_team.buttons.cancel')} + message={t('modals.delete_team.description')} + /> ) - } else { - return '' } } @@ -553,7 +536,16 @@ const PartyDetails = (props: Props) => {
- {router.pathname !== '/new' ? deleteButton() : ''} + {router.pathname !== '/new' ? ( +
{readOnly} {editable} + {deleteAlert()} ) } diff --git a/components/RoadmapModal/index.scss b/components/RoadmapModal/index.scss index 89e1e5cc..ad57a3b0 100644 --- a/components/RoadmapModal/index.scss +++ b/components/RoadmapModal/index.scss @@ -24,7 +24,7 @@ } } - & > div:not(.DialogHeader) { + .content { display: flex; flex-direction: column; gap: $unit-2x; diff --git a/components/RoadmapModal/index.tsx b/components/RoadmapModal/index.tsx index 61df0b89..0c956bc1 100644 --- a/components/RoadmapModal/index.tsx +++ b/components/RoadmapModal/index.tsx @@ -17,6 +17,7 @@ import './index.scss' const RoadmapModal = () => { const { t } = useTranslation('roadmap') + const headerRef = React.createRef() return ( @@ -27,10 +28,12 @@ const RoadmapModal = () => { event.preventDefault()} onEscapeKeyDown={() => {}} > -
+
{t('title')} @@ -39,7 +42,7 @@ const RoadmapModal = () => {
-
+

{t('blurb')}

{t('link.intro')}

diff --git a/components/SearchModal/index.scss b/components/SearchModal/index.scss index 94eaa0b9..f507f592 100644 --- a/components/SearchModal/index.scss +++ b/components/SearchModal/index.scss @@ -3,8 +3,6 @@ display: flex; flex-direction: column; min-height: 430px; - height: 480px; - gap: 0; padding: 0; @include breakpoint(phone) { @@ -14,17 +12,16 @@ min-height: 100vh; } - #Header { - border-bottom: 1px solid transparent; + .DialogHeader.Search { + align-items: inherit; display: flex; flex-direction: column; gap: $unit; - padding-bottom: $unit * 2; - - &.scrolled { - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); - } + padding: 0; + padding-bottom: $unit-2x; + position: sticky; + top: 0; + left: 0; #Bar { align-items: center; @@ -63,7 +60,6 @@ #Results { margin: 0; - max-height: 356px; padding: 0 ($unit * 1.5); overflow-y: scroll; diff --git a/components/SearchModal/index.tsx b/components/SearchModal/index.tsx index c478c988..e0fa32e9 100644 --- a/components/SearchModal/index.tsx +++ b/components/SearchModal/index.tsx @@ -42,8 +42,10 @@ const SearchModal = (props: Props) => { // Set up translation const { t } = useTranslation('common') - let searchInput = React.createRef() - let scrollContainer = React.createRef() + // Refs + const headerRef = React.createRef() + const searchInput = React.createRef() + const scrollContainer = React.createRef() const [firstLoad, setFirstLoad] = useState(true) const [filters, setFilters] = useState<{ [key: string]: any }>() @@ -356,10 +358,11 @@ const SearchModal = (props: Props) => { {props.children} -

{/* diff --git a/components/WeaponConflictModal/index.tsx b/components/WeaponConflictModal/index.tsx index d1a9a3c7..a93f4345 100644 --- a/components/WeaponConflictModal/index.tsx +++ b/components/WeaponConflictModal/index.tsx @@ -30,6 +30,9 @@ const WeaponConflictModal = (props: Props) => { // States const [open, setOpen] = useState(false) + // Refs + const footerRef = React.createRef() + useEffect(() => { setOpen(props.open) }, [setOpen, props.open]) @@ -67,40 +70,50 @@ const WeaponConflictModal = (props: Props) => {

event.preventDefault()} onEscapeKeyDown={close} > -

{infoString()}

-
-
    - {props.conflictingWeapons?.map((weapon, i) => ( -
  • +
    +

    {infoString()}

    +
    +
      + {props.conflictingWeapons?.map((weapon, i) => ( +
    • + {weapon.object.name[locale]} + {weapon.object.name[locale]} +
      • + ))} +
    + → +
    +
    {weapon.object.name[locale]} - {weapon.object.name[locale]} -
    • - ))} -
- → -
-
- {props.incomingWeapon?.name[locale]} - {props.incomingWeapon?.name[locale]} + {props.incomingWeapon?.name[locale]} +
-
-
+
+
+
+
diff --git a/components/WeaponModal/index.tsx b/components/WeaponModal/index.tsx index 4296ce0c..5cec601c 100644 --- a/components/WeaponModal/index.tsx +++ b/components/WeaponModal/index.tsx @@ -93,6 +93,10 @@ const WeaponModal = ({ const [ax2Open, setAx2Open] = useState(false) const [awakeningOpen, setAwakeningOpen] = useState(false) + // Refs + const headerRef = React.createRef() + const footerRef = React.createRef() + // Hooks useEffect(() => { setOpen(modalOpen) @@ -352,10 +356,12 @@ const WeaponModal = ({ {children} event.preventDefault()} onEscapeKeyDown={onEscapeKeyDown} > -
+
{gridWeapon.object.name[locale]} -
+