diff --git a/components/AboutModal/index.scss b/components/AboutModal/index.scss index a13fea89..cd5a8ace 100644 --- a/components/AboutModal/index.scss +++ b/components/AboutModal/index.scss @@ -1,42 +1,28 @@ -.DialogWrapper { - position: fixed; - background: none; - border: 0; - inset: 0; - top: 0; - display: grid; - place-items: center; - min-height: 100vh; - min-width: 100vw; - overflow-y: auto; - color: inherit; -} +.About.DialogContent { + gap: 0; + padding-bottom: $unit; -.About.Dialog { - top: 0; - animation: none; - transform: translate(-50%, 0); - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - margin-top: $unit-10x; - - @include breakpoint(phone) { - border-radius: 0; - transform: none; - margin: 0; + & > div:not(.DialogHeader) { + display: flex; + flex-direction: column; + gap: $unit-2x; + padding: 0 $unit-4x; } section { margin-bottom: $unit; - h2 { + & > h2 { + font-size: $font-medium; + font-weight: $medium; margin-bottom: $unit * 3; } } - .DialogDescription { + p { + color: var(--text-secondary); font-size: $font-regular; - line-height: 1.24; + line-height: 1.3; margin-bottom: $unit; &:last-of-type { @@ -80,6 +66,12 @@ display: flex; gap: $unit-2x; flex-grow: 1; + + h3 { + font-weight: 600; + max-width: 70%; + line-height: 1.3; + } } svg { @@ -98,17 +90,3 @@ } } } - -.ScrollingOverlay { - background: rgba(0 0 0 / 0.5); - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: grid; - place-items: center; - overflow-y: auto; - z-index: 40; - padding-top: 10%; -} diff --git a/components/AboutModal/index.tsx b/components/AboutModal/index.tsx index e7842c29..6a5d7fd3 100644 --- a/components/AboutModal/index.tsx +++ b/components/AboutModal/index.tsx @@ -1,7 +1,14 @@ import React from 'react' import Link from 'next/link' import { useTranslation } from 'next-i18next' -import * as Dialog from '@radix-ui/react-dialog' + +import { + Dialog, + DialogClose, + DialogTitle, + DialogTrigger, +} from '~components/Dialog' +import DialogContent from '~components/DialogContent' import CrossIcon from '~public/icons/Cross.svg' import ShareIcon from '~public/icons/Share.svg' @@ -14,181 +21,173 @@ const AboutModal = () => { const { t } = useTranslation('common') return ( - - + +
  • {t('modals.about.title')}
    • -     - - -
    - event.preventDefault()} - > -
    - - {t('menu.about')} - - - - - - -
    + + event.preventDefault()} + onEscapeKeyDown={() => {}} + > +
    + {t('menu.about')} + + + + + +
    -
    - - Granblue.team is a tool to save and share team comps for{' '} +
    +
    +

    + Granblue.team is a tool to save and share team comps for{' '} + + Granblue Fantasy + + . +

    +

    + Start adding to a team and a URL will be created for you to share + wherever you like, no account needed. +

    +

    + However, if you do make an account, you can save any teams you + find for future reference and keep all of your teams together in + one place. +

    +
    + +
    +

    Feedback

    +

    + This is an evolving project so feedback and suggestions are + greatly appreciated! +

    +

    + If you have a feature request, would like to report a bug, or are + enjoying the tool and want to say thanks, come hang out in + Discord! +

    + +
    + +
    +

    Credits

    +

    + Granblue.team was built by{' '} + + @jedmund + {' '} + with a lot of help from{' '} + + @lalalalinna + {' '} + and{' '} + + @tarngerine + + . +

    +

    + Many thanks also go to Disinfect, Slipper, Jif, Bless, 9highwind, + and everyone else in{' '} + + Fireplace + {' '} + that helped with bug testing and feature requests. (P.S. + We're recruiting!) And yoey, but he won't join our crew. +

    +
    + +
    +

    Contributing

    +

    + This app is open source and licensed under{' '} + + GNU AGPLv3 + + . Plainly, that means you can download the source, modify it, and + redistribute it if you attribute this project, use the same + license, and keep it open source. You can contribute on Github. +

    +
      +
    • + - Granblue Fantasy. +
      + +

      jedmund/hensei-api

      +
      +       - - - Start adding to a team and a URL will be created for you to - share wherever you like, no account needed. - - - However, if you do make an account, you can save any teams you - find for future reference and keep all of your teams together - in one place. - -
    - -
    - Feedback - - This is an evolving project so feedback and suggestions are - greatly appreciated! - - - If you have a feature request, would like to report a bug, or - are enjoying the tool and want to say thanks, come hang out in - Discord! - - -
    - -
    - Credits - - Granblue.team was built by{' '} + + +
  • + - @jedmund - {' '} - with a lot of help from{' '} - - @lalalalinna - {' '} - and{' '} - - @tarngerine +
    + +

    jedmund/hensei-web

    +
    +     - . - - - Many thanks also go to Disinfect, Slipper, Jif, Bless, - 9highwind, and everyone else in{' '} - - Fireplace - {' '} - that helped with bug testing and feature requests. (P.S. - We're recruiting!) And yoey, but he won't join our - crew. - -
    • - -
    - - Contributing - - - This app is open source and licensed under{' '} - - GNU AGPLv3 - - . Plainly, that means you can download the source, modify it, - and redistribute it if you attribute this project, use the - same license, and keep it open source. You can contribute on - Github. - - -
    - -
    - - - + + + +
    +
    + + ) } diff --git a/components/ChangelogModal/index.scss b/components/ChangelogModal/index.scss index 67aac905..4a4a3597 100644 --- a/components/ChangelogModal/index.scss +++ b/components/ChangelogModal/index.scss @@ -1,15 +1,71 @@ -h3.version { - color: $blue; - font-weight: $medium; - font-size: $font-medium; - margin-bottom: $unit; -} +.Changelog.DialogContent { + gap: 0; + padding-bottom: $unit-4x; -.notes { - color: var(--text-primary); - list-style-type: disc; + & > div:not(.DialogHeader) { + padding: 0 $unit-4x; + } - li { - margin-bottom: $unit-half; + .updates { + display: flex; + flex-direction: column; + gap: $unit-4x; + } + + .version { + &.content { + .top h3 { + color: var(--accent-yellow); + } + + .update { + display: flex; + flex-direction: column; + gap: $unit-2x; + } + + .characters, + .weapons, + .summons { + display: grid; + grid-template-rows: 1fr auto; + gap: $unit; + } + + .items { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: $unit-4x; + } + } + + .top { + align-items: baseline; + display: flex; + gap: $unit-half; + margin-bottom: $unit-2x; + + h3 { + color: var(--accent-blue); + font-weight: $medium; + font-size: $font-large; + } + + time { + color: var(--text-secondary); + font-size: $font-small; + font-weight: $medium; + } + } + } + + .notes { + color: var(--text-primary); + list-style-type: disc; + list-style-position: inside; + + li { + margin-bottom: $unit-half; + } } } diff --git a/components/ChangelogModal/index.tsx b/components/ChangelogModal/index.tsx index 2991f8fa..a5422610 100644 --- a/components/ChangelogModal/index.tsx +++ b/components/ChangelogModal/index.tsx @@ -1,6 +1,14 @@ import React from 'react' import { useTranslation } from 'next-i18next' -import * as Dialog from '@radix-ui/react-dialog' + +import ChangelogUnit from '~components/ChangelogUnit' +import { + Dialog, + DialogClose, + DialogTitle, + DialogTrigger, +} from '~components/Dialog' +import DialogContent from '~components/DialogContent' import CrossIcon from '~public/icons/Cross.svg' @@ -10,45 +18,145 @@ const ChangelogModal = () => { const { t } = useTranslation('common') return ( - - + +
  • {t('modals.changelog.title')}
    • -     - - event.preventDefault()} - > -
    - - {t('menu.changelog')} - - - - - - -
    + + event.preventDefault()} + onEscapeKeyDown={() => {}} + > +
    + + {t('menu.changelog')} + + + + + + +
    -
    - -

    1.0

    -
      -
    • First release!
      • -
    • Content update - Mid-December 2022 Flash Gala
      • -
    • You can embed Youtube videos now
      • -
    • Better clicking - right-click and open in a new tab
      • -
    • Manually set dark mode in Account Settings
      • -
    • Lots of bugs squashed
      • -
    -     +
    +
    +
    +

    1.0.1

    + +
    +
      +
    • Extra party fields: Full Auto, Clear Time, and more
      • +
    • Support for Youtube short URLs
      • +
    • Responsive grids and lots of other mobile fixes
      • +
    • Many other bug fixes
      • +
    - - - - +
    +
    +

    2022-12 Legend Festival

    + +
    +
    +
    +

    New characters

    +
    + + + +
    +
    +
    +

    New weapons

    +
    + + + +
    +
    +
    +

    New summons

    +
    + +
    +
    +
    +
    +
    +
    +

    2022-12 Flash Gala

    + +
    +
    +
    +

    New characters

    +
    + + +
    +
    +
    +

    New weapons

    +
    + + +
    +
    +
    +
    +
    +
    +

    1.0.0

    + +
    +
      +
    • First release!
      • +
    • You can embed Youtube videos now
      • +
    • Better clicking - right-click and open in a new tab
      • +
    • Manually set dark mode in Account Settings
      • +
    • Lots of bugs squashed
      • +
    +
    +
    + + ) } diff --git a/components/ChangelogUnit/index.scss b/components/ChangelogUnit/index.scss new file mode 100644 index 00000000..b79f2c75 --- /dev/null +++ b/components/ChangelogUnit/index.scss @@ -0,0 +1,16 @@ +.ChangelogUnit { + display: flex; + flex-direction: column; + gap: $unit-half; + + img { + border-radius: $input-corner; + width: 100%; + } + + h4 { + font-size: $font-small; + font-weight: $medium; + text-align: center; + } +} diff --git a/components/ChangelogUnit/index.tsx b/components/ChangelogUnit/index.tsx new file mode 100644 index 00000000..3409c016 --- /dev/null +++ b/components/ChangelogUnit/index.tsx @@ -0,0 +1,45 @@ +import React from 'react' + +import './index.scss' + +interface Props { + id: string + name: string + type: 'character' | 'summon' | 'weapon' +} + +const defaultProps = { + active: false, + blended: false, + contained: false, + buttonSize: 'medium' as const, +} + +const ChangelogUnit = ({ id, type, name }: Props) => { + function generateImageUrl() { + let src = '' + + switch (type) { + case 'character': + src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${id}_01.jpg` + break + case 'weapon': + src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${id}.jpg` + break + case 'summon': + src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${id}.jpg` + break + } + + return src + } + + return ( +
    + {name} +

    {name}

    +
    + ) +} + +export default ChangelogUnit diff --git a/components/Dialog/index.tsx b/components/Dialog/index.tsx index bd814d0f..e7010d8e 100644 --- a/components/Dialog/index.tsx +++ b/components/Dialog/index.tsx @@ -23,6 +23,9 @@ export const Dialog = ({ children, ...props }: PropsWithChildren) => { function handleOpenChange(open: boolean) { if (props.onOpenChange) props.onOpenChange(open) + if (props.open === undefined) { + toggleLocked(open) + } } return ( diff --git a/components/DialogContent/index.scss b/components/DialogContent/index.scss index 5e64706f..4955f130 100644 --- a/components/DialogContent/index.scss +++ b/components/DialogContent/index.scss @@ -28,6 +28,7 @@ overflow-y: scroll; max-height: 80vh; min-width: 580px; + max-width: 42vw; // padding: $unit * $multiplier; position: relative; @@ -54,11 +55,16 @@ align-items: center; gap: $unit-2x; justify-content: space-between; - padding: $unit-3x ($unit * $multiplier); + padding: $unit-4x ($unit * $multiplier); position: sticky; top: 0; z-index: 10; + &.Short { + padding-top: $unit-3x; + padding-bottom: $unit-3x; + } + .left { display: flex; flex-direction: column; diff --git a/components/LoginModal/index.scss b/components/LoginModal/index.scss index 18611ce8..c7cfb390 100644 --- a/components/LoginModal/index.scss +++ b/components/LoginModal/index.scss @@ -2,10 +2,6 @@ gap: $unit; min-width: $unit * 52; - .DialogHeader { - padding: $unit-4x $unit-3x; - } - form { display: flex; flex-direction: column; diff --git a/components/RoadmapModal/index.scss b/components/RoadmapModal/index.scss index 7fc37b7b..89e1e5cc 100644 --- a/components/RoadmapModal/index.scss +++ b/components/RoadmapModal/index.scss @@ -1,114 +1,117 @@ -.Roadmap.Dialog { - max-height: 60vh; - overflow-y: scroll; +.Roadmap.DialogContent { + gap: 0; + padding-bottom: $unit-2x; - .top { + h3.priority { + font-weight: $medium; + font-size: $font-large; + margin-bottom: $unit-4x; + + &.in_progress { + color: $yellow; + } + + &.high { + color: $red; + } + + &.mid { + color: $orange-10; + } + + &.low { + color: $blue; + } + } + + & > div:not(.DialogHeader) { display: flex; flex-direction: column; - gap: $unit; + gap: $unit-2x; + padding: 0 $unit-4x; - h3.priority { - font-weight: $medium; - font-size: $font-large; - - &.in_progress { - color: $yellow; - } - - &.high { - color: $red; - } - - &.mid { - color: $orange-10; - } - - &.low { - color: $blue; - } - } - - p { - margin-bottom: $unit; - } - - .LinkItem { - $diameter: $unit-6x; - border: 1px solid var(--link-item-bg); - border-radius: $card-corner; - - &:hover { - background-color: var(--link-item-bg); - - svg { - fill: var(--link-item-image-color-hover); - } - } - - a { - display: flex; - padding: $unit-2x; - - &:hover { - text-decoration: none; - } - - .Left { - align-items: center; - display: flex; - gap: $unit-2x; - flex-grow: 1; - } - - svg { - fill: var(--link-item-image-color); - width: $diameter; - height: auto; - - &.ShareIcon { - width: $unit-4x; - } - } - } - - h3 { - font-weight: $bold; - max-width: 70%; - line-height: 1.3; - } - } - } - - .Separator { - background: var(--separator-bg); - border-radius: 2px; - margin: $unit-3x 0; - height: 2px; - } - p { - color: var(--text-secondary); - - font-size: $font-regular; - line-height: 1.3; - } - - .notes { - color: var(--text-primary); - list-style-type: none; - - li { + section.notes { display: flex; flex-direction: column; gap: $unit; margin-bottom: $unit-2x; - h4 { - font-size: $font-medium; - font-weight: $bold; + p { + margin-bottom: $unit; } - p { - font-size: $font-regular; + .LinkItem { + $diameter: $unit-6x; + border: 1px solid var(--link-item-bg); + border-radius: $card-corner; + + &:hover { + background-color: var(--link-item-bg); + + svg { + fill: var(--link-item-image-color-hover); + } + } + + a { + display: flex; + padding: $unit-2x; + + &:hover { + text-decoration: none; + } + + .Left { + align-items: center; + display: flex; + gap: $unit-2x; + flex-grow: 1; + } + + svg { + fill: var(--link-item-image-color); + width: $diameter; + height: auto; + + &.ShareIcon { + width: $unit-4x; + } + } + } + + h3 { + font-weight: $bold; + max-width: 70%; + line-height: 1.3; + } + } + } + + p { + color: var(--text-secondary); + + font-size: $font-regular; + line-height: 1.3; + } + + ul { + color: var(--text-primary); + list-style-type: none; + + li { + display: flex; + flex-direction: column; + gap: $unit; + margin-bottom: $unit-2x; + + h4 { + font-size: $font-medium; + font-weight: $bold; + } + + p { + font-size: $font-regular; + } } } } diff --git a/components/RoadmapModal/index.tsx b/components/RoadmapModal/index.tsx index feba1991..61df0b89 100644 --- a/components/RoadmapModal/index.tsx +++ b/components/RoadmapModal/index.tsx @@ -1,7 +1,13 @@ import React from 'react' import Link from 'next/link' import { useTranslation } from 'next-i18next' -import * as Dialog from '@radix-ui/react-dialog' +import { + Dialog, + DialogClose, + DialogTitle, + DialogTrigger, +} from '~components/Dialog' +import DialogContent from '~components/DialogContent' import CrossIcon from '~public/icons/Cross.svg' import ShareIcon from '~public/icons/Share.svg' @@ -13,49 +19,50 @@ const RoadmapModal = () => { const { t } = useTranslation('roadmap') return ( - - + +
  • {t('modals.roadmap.title')}
    • -     - - event.preventDefault()} - > -
    - {t('title')} - - - - - -
    + + event.preventDefault()} + onEscapeKeyDown={() => {}} + > +
    + {t('title')} + + + + + +
    -
    -
    -

    {t('subtitle')}

    -

    {t('blurb')}

    -

    {t('link.intro')}

    - +
    +
    +

    {t('blurb')}

    +

    {t('link.intro')}

    + -
    -
      +
    + +
    +

    {t('subtitle')}

    +

    • {t('roadmap.item1.title')}

      {t('roadmap.item1.description')}

      @@ -82,10 +89,9 @@ const RoadmapModal = () => {
    - - - - +
    + + ) } diff --git a/components/SignupModal/index.scss b/components/SignupModal/index.scss index 7a7fc66a..595141b9 100644 --- a/components/SignupModal/index.scss +++ b/components/SignupModal/index.scss @@ -2,10 +2,6 @@ gap: $unit; min-width: $unit * 52; - .DialogHeader { - padding: $unit-4x $unit-3x; - } - form { display: flex; flex-direction: column; diff --git a/components/WeaponModal/index.tsx b/components/WeaponModal/index.tsx index 00569c73..4296ce0c 100644 --- a/components/WeaponModal/index.tsx +++ b/components/WeaponModal/index.tsx @@ -93,8 +93,10 @@ const WeaponModal = ({ const [ax2Open, setAx2Open] = useState(false) const [awakeningOpen, setAwakeningOpen] = useState(false) + // Hooks useEffect(() => { setOpen(modalOpen) + handleOpenChange(modalOpen) }, [modalOpen]) useEffect(() => { @@ -346,7 +348,6 @@ const WeaponModal = ({ } return ( - // TODO: Refactor into Dialog component {children} event.preventDefault()} onEscapeKeyDown={onEscapeKeyDown} > -
    +