From 79b70dc9d1c8467364ee0346fe8245d144811c52 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 26 Dec 2022 11:48:18 -0800 Subject: [PATCH] Update About, add Roadmap and Changelog --- components/AboutModal/index.scss | 86 +++++++++++- components/AboutModal/index.tsx | 187 ++++++++++++++++++++------- components/ChangelogModal/index.scss | 15 +++ components/ChangelogModal/index.tsx | 55 ++++++++ components/HeaderMenu/index.scss | 16 +++ components/HeaderMenu/index.tsx | 8 ++ components/RoadmapModal/index.scss | 26 ++++ components/RoadmapModal/index.tsx | 78 +++++++++++ public/icons/Share.svg | 3 + public/icons/discord.svg | 9 ++ public/icons/github.svg | 3 + public/locales/en/common.json | 8 ++ public/locales/ja/common.json | 8 ++ styles/globals.scss | 9 ++ styles/themes.scss | 10 ++ styles/variables.scss | 8 ++ 16 files changed, 480 insertions(+), 49 deletions(-) create mode 100644 components/ChangelogModal/index.scss create mode 100644 components/ChangelogModal/index.tsx create mode 100644 components/RoadmapModal/index.scss create mode 100644 components/RoadmapModal/index.tsx create mode 100644 public/icons/Share.svg create mode 100644 public/icons/discord.svg create mode 100644 public/icons/github.svg diff --git a/components/AboutModal/index.scss b/components/AboutModal/index.scss index abab57b5..938bbb33 100644 --- a/components/AboutModal/index.scss +++ b/components/AboutModal/index.scss @@ -1,6 +1,23 @@ +.DialogWrapper { + position: fixed; + background: none; + border: 0; + inset: 0; + display: grid; + place-items: center; + min-height: 100vh; + min-width: 100vw; + overflow-y: auto; + color: inherit; +} + .About.Dialog { width: $unit * 60; - + top: 0; + transform: translate(-50%, 0); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + margin-top: $unit-10x; section { margin-bottom: $unit; @@ -18,4 +35,71 @@ margin-bottom: 0; } } + + .Links { + display: grid; + gap: $unit; + margin: $unit-2x 0; + } + + div.LinkItem { + margin-top: $unit-2x; + } + + .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; + } + } +} + +.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; } diff --git a/components/AboutModal/index.tsx b/components/AboutModal/index.tsx index 001b42d7..66f8fd94 100644 --- a/components/AboutModal/index.tsx +++ b/components/AboutModal/index.tsx @@ -1,8 +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 CrossIcon from '~public/icons/Cross.svg' +import ShareIcon from '~public/icons/Share.svg' +import DiscordIcon from '~public/icons/discord.svg' +import GithubIcon from '~public/icons/github.svg' + import './index.scss' const AboutModal = () => { @@ -16,55 +21,141 @@ const AboutModal = () => { - event.preventDefault()} - > -
- - {t('menu.about')} - - - - - - + +
+ event.preventDefault()} + > +
+ + {t('menu.about')} + + + + + + +
+ +
+ + 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 Jif, Slipper, Bless, yoey, 9highwind, + and everyone else in{' '} + + Fireplace + {' '} + that helped with bug testing and feature requests. (P.S. We're + recruiting!) + +
+ +
+ + 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.team is a tool to save and share team compositions for{' '} - Granblue Fantasy. - - - Start adding things to a team and a URL will be created for you to - share it wherever you like, no account needed. - - - You can make an account to save any teams you find for future - reference, or to keep all of your teams together in one place. - -
- -
- Credits - - Granblue.team was built by{' '} - @jedmund with a lot of - help from{' '} - @lalalalinna and{' '} - @tarngerine. - -
- -
- Open Source - - This app is open source. You can contribute on Github. - -
- - + ) diff --git a/components/ChangelogModal/index.scss b/components/ChangelogModal/index.scss new file mode 100644 index 00000000..67aac905 --- /dev/null +++ b/components/ChangelogModal/index.scss @@ -0,0 +1,15 @@ +h3.version { + color: $blue; + font-weight: $medium; + font-size: $font-medium; + margin-bottom: $unit; +} + +.notes { + color: var(--text-primary); + list-style-type: disc; + + li { + margin-bottom: $unit-half; + } +} diff --git a/components/ChangelogModal/index.tsx b/components/ChangelogModal/index.tsx new file mode 100644 index 00000000..2991f8fa --- /dev/null +++ b/components/ChangelogModal/index.tsx @@ -0,0 +1,55 @@ +import React from 'react' +import { useTranslation } from 'next-i18next' +import * as Dialog from '@radix-ui/react-dialog' + +import CrossIcon from '~public/icons/Cross.svg' + +import './index.scss' + +const ChangelogModal = () => { + const { t } = useTranslation('common') + + return ( + + +
  • + {t('modals.changelog.title')} +
    • +     + + event.preventDefault()} + > +
    + + {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
      • +
    +     +
    +     + +     +     + ) +} + +export default ChangelogModal diff --git a/components/HeaderMenu/index.scss b/components/HeaderMenu/index.scss index 0299d5c2..873d360d 100644 --- a/components/HeaderMenu/index.scss +++ b/components/HeaderMenu/index.scss @@ -20,6 +20,14 @@ a { color: var(--text-primary); + + &:hover { + text-decoration: none; + } + + &:visited { + color: var(--text-primary); + } } } @@ -97,6 +105,14 @@ a { color: $grey-50; + + &:hover { + text-decoration: none; + } + + &:visited { + color: $grey-50; + } } & > a, diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx index 0c1afa8a..48e719ac 100644 --- a/components/HeaderMenu/index.tsx +++ b/components/HeaderMenu/index.tsx @@ -8,6 +8,8 @@ import * as Switch from '@radix-ui/react-switch' import AboutModal from '~components/AboutModal' import AccountModal from '~components/AccountModal' +import ChangelogModal from '~components/ChangelogModal' +import RoadmapModal from '~components/RoadmapModal' import LoginModal from '~components/LoginModal' import SignupModal from '~components/SignupModal' @@ -86,6 +88,10 @@ const HeaderMenu = (props: Props) => {
    + + +
    +
    {
    + +
    diff --git a/components/RoadmapModal/index.scss b/components/RoadmapModal/index.scss new file mode 100644 index 00000000..06f83b3e --- /dev/null +++ b/components/RoadmapModal/index.scss @@ -0,0 +1,26 @@ +h3.priority { + font-weight: $medium; + font-size: $font-medium; + margin-bottom: $unit; + + &.high { + color: $red; + } + + &.mid { + color: $orange-10; + } + + &.low { + color: $blue; + } +} + +.notes { + color: var(--text-primary); + list-style-type: disc; + + li { + margin-bottom: $unit-half; + } +} diff --git a/components/RoadmapModal/index.tsx b/components/RoadmapModal/index.tsx new file mode 100644 index 00000000..58f530a0 --- /dev/null +++ b/components/RoadmapModal/index.tsx @@ -0,0 +1,78 @@ +import React from 'react' +import Link from 'next/link' +import { useTranslation } from 'next-i18next' +import * as Dialog from '@radix-ui/react-dialog' + +import CrossIcon from '~public/icons/Cross.svg' +import ShareIcon from '~public/icons/Share.svg' +import DiscordIcon from '~public/icons/discord.svg' +import GithubIcon from '~public/icons/github.svg' + +import './index.scss' + +const RoadmapModal = () => { + const { t } = useTranslation('common') + + return ( + + +
  • + {t('modals.roadmap.title')} +
    • +     + + event.preventDefault()} + > +
    + + {t('menu.roadmap')} + + + + + + +
    + +
    +

    High priority

    +
      +
    • URL state for team tabs
      • +
    • + More team details (Full Auto, Auto Guard, Clear Time) and + filters +
      • +
    • + Character mods - Rings, Earrings, Perpetuity Rings, Styles +
      • +
    +
    +
    +

    Medium priority

    +
      +
    • Light Markdown in team details
      • +
    • Transcendence Steps - Eternals and Bahamut
      • +
    • Rearrange items in team
      • +
    • Remove items from team
      • +
    +
    +
    +

    Low priority

    +
      +
    • Unify About, Changelog, Roadmap
      • +
    • Add R characters
      • +
    • Add images for weird units like Aquors
      • +
    • Character substitutions
      • +
    • Deeper gbf.wiki integration
      • +
    +
    +     + +     +     + ) +} + +export default RoadmapModal diff --git a/public/icons/Share.svg b/public/icons/Share.svg new file mode 100644 index 00000000..84d6b1b9 --- /dev/null +++ b/public/icons/Share.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/discord.svg b/public/icons/discord.svg new file mode 100644 index 00000000..52ada2f9 --- /dev/null +++ b/public/icons/discord.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/icons/github.svg b/public/icons/github.svg new file mode 100644 index 00000000..e0258ff9 --- /dev/null +++ b/public/icons/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 0510220b..0ca0493a 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -131,6 +131,12 @@ "about": { "title": "About" }, + "roadmap": { + "title": "Roadmap" + }, + "changelog": { + "title": "Changelog" + }, "conflict": { "character": "Only one version of a character can be included in each party. Do you want to change your party members?", "weapon": { @@ -235,9 +241,11 @@ }, "menu": { "about": "About", + "changelog": "Changelog", "guides": "Guides", "language": "Language", "login": "Log in", + "roadmap": "Roadmap", "saved": "Saved", "settings": "Settings", "signup": "Sign up", diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json index 74888e17..bf7b0471 100644 --- a/public/locales/ja/common.json +++ b/public/locales/ja/common.json @@ -131,6 +131,12 @@ "about": { "title": "このサイトについて" }, + "roadmap": { + "title": "ロードマップ" + }, + "changelog": { + "title": "変更ログ" + }, "conflict": { "character": "同じ名前のキャラクターがパーティに編成されています。
    以下のキャラクターを入れ替えますか？", "weapon": { @@ -236,9 +242,11 @@ }, "menu": { "about": "このサイトについて", + "changelog": "変更ログ", "guides": "攻略", "language": "言語", "login": "ログイン", + "roadmap": "ロードマップ", "saved": "保存した編成", "settings": "アカウント設定", "signup": "登録", diff --git a/styles/globals.scss b/styles/globals.scss index 1d9a0a7e..7e31c512 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -30,8 +30,17 @@ main { } a { + color: $blue; text-decoration: none; + &:hover { + text-decoration: underline; + } + + &:visited { + color: $blue; + } + &.wind { color: var(--wind-bg); } diff --git a/styles/themes.scss b/styles/themes.scss index acc5dfd8..6e639f29 100644 --- a/styles/themes.scss +++ b/styles/themes.scss @@ -45,6 +45,11 @@ --select-separator: #{$select--separator--light}; --option-bg-hover: #{$option--bg--light--hover}; + // Light - About + --link-item-bg: #{$link--item--bg--light}; + --link-item-image-color: #{$link--item--bg--image--light}; + --link-item-image-color-hover: #{$link--item--bg--image--light--hover}; + // Light - Text --text-primary: #{$text--primary--color--light}; --text-secondary: #{$text--secondary--color--light}; @@ -160,6 +165,11 @@ --select-separator: #{$select--separator--dark}; --option-bg-hover: #{$option--bg--dark--hover}; + // Dark - About + --link-item-bg: #{$link--item--bg--dark}; + --link-item-image-color: #{$link--item--bg--image--dark}; + --link-item-image-color-hover: #{$link--item--bg--image--dark--hover}; + // Dark - Text --text-primary: #{$text--primary--color--dark}; --text-secondary: #{$text--secondary--color--dark}; diff --git a/styles/variables.scss b/styles/variables.scss index 17ba813a..5634d2f8 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -192,6 +192,14 @@ $grid--border--color--dark: $grey-40; $switch--nub--bg--light: $grey-80; $switch--nub--bg--dark: $grey-30; +// Color Definitions: Link Items +$link--item--bg--light: $grey-80; +$link--item--bg--dark: $grey-30; +$link--item--bg--image--light: $grey-60; +$link--item--bg--image--dark: $grey-60; +$link--item--bg--image--light--hover: $grey-40; +$link--item--bg--image--dark--hover: $grey-80; + // Color Definitions: Additional Weapons $extra--purple--bg--light: $purple-90; $extra--purple--card--bg--light: $purple-80;