From 6bc34af434cebfef3b3229254af263fb4e9ea89a Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 21 Jan 2023 00:10:41 -0800 Subject: [PATCH] Fix and update Changelog and About modals --- components/AboutModal/index.scss | 62 ++--- components/AboutModal/index.tsx | 323 +++++++++++++-------------- components/ChangelogModal/index.scss | 78 ++++++- components/ChangelogModal/index.tsx | 178 ++++++++++++--- components/ChangelogUnit/index.scss | 16 ++ components/ChangelogUnit/index.tsx | 45 ++++ components/DialogContent/index.scss | 9 +- components/LoginModal/index.scss | 4 - components/RoadmapModal/index.scss | 4 - components/SignupModal/index.scss | 4 - components/WeaponModal/index.tsx | 2 +- styles/themes.scss | 6 + styles/variables.scss | 6 + 13 files changed, 472 insertions(+), 265 deletions(-) create mode 100644 components/ChangelogUnit/index.scss create mode 100644 components/ChangelogUnit/index.tsx 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/DialogContent/index.scss b/components/DialogContent/index.scss index 3355fadb..4955f130 100644 --- a/components/DialogContent/index.scss +++ b/components/DialogContent/index.scss @@ -28,7 +28,7 @@ overflow-y: scroll; max-height: 80vh; min-width: 580px; - max-width: 50vw; + max-width: 42vw; // padding: $unit * $multiplier; position: relative; @@ -55,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 fc168c85..89e1e5cc 100644 --- a/components/RoadmapModal/index.scss +++ b/components/RoadmapModal/index.scss @@ -2,10 +2,6 @@ gap: 0; padding-bottom: $unit-2x; - .DialogHeader { - padding: $unit-4x; - } - h3.priority { font-weight: $medium; font-size: $font-large; 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..5f582189 100644 --- a/components/WeaponModal/index.tsx +++ b/components/WeaponModal/index.tsx @@ -354,7 +354,7 @@ const WeaponModal = ({ onOpenAutoFocus={(event) => event.preventDefault()} onEscapeKeyDown={onEscapeKeyDown} > -
    +