From c0392a1bababaa590ccc8713bc071c00da65360b Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Fri, 30 Jun 2023 22:12:47 -0700 Subject: [PATCH] Update static pages --- components/about/AboutPage/index.module.scss | 20 +- components/about/AboutPage/index.tsx | 76 ++---- .../about/ChangelogUnit/index.module.scss | 2 +- components/about/ChangelogUnit/index.tsx | 2 +- .../about/ContentUpdate/index.module.scss | 74 ++++- components/about/ContentUpdate/index.tsx | 31 ++- components/about/LinkItem/index.module.scss | 77 ++++++ components/about/LinkItem/index.tsx | 37 +++ .../about/RoadmapPage/index.module.scss | 50 +--- components/about/RoadmapPage/index.tsx | 41 +-- .../about/UpdatesPage/index.module.scss | 145 +++++----- components/about/UpdatesPage/index.tsx | 254 ++++++------------ 12 files changed, 407 insertions(+), 402 deletions(-) create mode 100644 components/about/LinkItem/index.module.scss create mode 100644 components/about/LinkItem/index.tsx diff --git a/components/about/AboutPage/index.module.scss b/components/about/AboutPage/index.module.scss index 1dad165b..3bfee6d6 100644 --- a/components/about/AboutPage/index.module.scss +++ b/components/about/AboutPage/index.module.scss @@ -1,4 +1,4 @@ -.About.PageContent { +.about { $width: 520px; padding-bottom: $unit-12x; @@ -9,7 +9,7 @@ gap: $unit-2x; z-index: 5; - .Hero { + .hero { position: absolute; width: 40vw; height: 80vh; @@ -55,22 +55,10 @@ z-index: 2; } } - .Links { + + .links { display: grid; gap: $unit; margin: $unit-2x 0; } - - div.LinkItem { - margin-top: $unit-2x; - } - - .LinkItem { - max-width: calc($width / 3 * 2); - - @include breakpoint(phone) { - max-width: inherit; - width: 100%; - } - } } diff --git a/components/about/AboutPage/index.tsx b/components/about/AboutPage/index.tsx index 4608ea11..ef00416e 100644 --- a/components/about/AboutPage/index.tsx +++ b/components/about/AboutPage/index.tsx @@ -1,6 +1,9 @@ import React from 'react' import Link from 'next/link' import { Trans, useTranslation } from 'next-i18next' +import classNames from 'classnames' + +import LinkItem from '../LinkItem' import ShareIcon from '~public/icons/Share.svg' import DiscordIcon from '~public/icons/discord.svg' @@ -14,8 +17,10 @@ const AboutPage: React.FC = (props: Props) => { const { t: common } = useTranslation('common') const { t: about } = useTranslation('about') + const classes = classNames(styles.about, 'PageContent') + return ( -
+

{common('about.segmented_control.about')}

@@ -33,28 +38,19 @@ const AboutPage: React.FC = (props: Props) => {

{about('about.explanation.0')}

{about('about.explanation.1')}

-
+

{about('about.feedback.title')}

{about('about.feedback.explanation')}

{about('about.feedback.solicit')}

- + } + />
@@ -114,38 +110,20 @@ const AboutPage: React.FC = (props: Props) => {

{about('about.contributing.title')}

{about('about.contributing.explanation')}

- +
+ } + /> + } + /> +

{about('about.license.title')}

diff --git a/components/about/ChangelogUnit/index.module.scss b/components/about/ChangelogUnit/index.module.scss index 6c6a0e8c..ed80793b 100644 --- a/components/about/ChangelogUnit/index.module.scss +++ b/components/about/ChangelogUnit/index.module.scss @@ -1,4 +1,4 @@ -.ChangelogUnit { +.unit { display: flex; flex-direction: column; gap: $unit; diff --git a/components/about/ChangelogUnit/index.tsx b/components/about/ChangelogUnit/index.tsx index 5645fd26..ade0b662 100644 --- a/components/about/ChangelogUnit/index.tsx +++ b/components/about/ChangelogUnit/index.tsx @@ -82,7 +82,7 @@ const ChangelogUnit = ({ id, type, image }: Props) => { } return ( -
+
{item

{item ? item.name[locale] : ''}

diff --git a/components/about/ContentUpdate/index.module.scss b/components/about/ContentUpdate/index.module.scss index 6d8cc907..1ba49359 100644 --- a/components/about/ContentUpdate/index.module.scss +++ b/components/about/ContentUpdate/index.module.scss @@ -1,11 +1,71 @@ -.Content.Version { - .Contents { - margin-bottom: $unit-3x; +.content.version { + display: flex; + flex-direction: column; + gap: $unit-2x; + + .header { + align-items: baseline; + display: flex; + gap: $unit-half; + margin-bottom: $unit-2x; + + h3 { + color: var(--accent-yellow); + font-weight: $medium; + font-size: $font-large; + } + + time { + color: var(--text-secondary); + font-size: $font-small; + font-weight: $medium; + } } - .Notes h4 { - font-weight: $medium; - font-size: $font-regular; - margin-bottom: $unit-2x; + .contents { + margin-bottom: $unit-3x; + display: grid; + grid-template-columns: 1fr; + gap: $unit-4x; + + .characters, + .weapons, + .summons { + display: grid; + grid-template-rows: auto 1fr; + gap: $unit; + + & > h4 { + font-weight: $medium; + font-size: $font-regular; + } + + .items { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: $unit-4x; + } + } + } + + .notes { + h4 { + font-weight: $medium; + font-size: $font-regular; + margin-bottom: $unit-2x; + } + + .list { + display: flex; + flex-direction: column; + color: var(--text-primary); + list-style-type: disc; + list-style-position: inside; + gap: $unit-half; + + li { + font-size: 14px; + } + } } } diff --git a/components/about/ContentUpdate/index.tsx b/components/about/ContentUpdate/index.tsx index 740c2211..094eb3f5 100644 --- a/components/about/ContentUpdate/index.tsx +++ b/components/about/ContentUpdate/index.tsx @@ -1,7 +1,8 @@ import React from 'react' import { useTranslation } from 'next-i18next' -import ChangelogUnit from '~components/about/ChangelogUnit' +import classNames from 'classnames' +import ChangelogUnit from '~components/about/ChangelogUnit' import styles from './index.module.scss' interface UpdateObject { @@ -51,9 +52,9 @@ const ContentUpdate = ({ const items = newItems[key] section = items && items.length > 0 ? ( -
+

{updates(`labels.${key}s`)}

-
{newItemElements(key)}
+
{newItemElements(key)}
) : ( '' @@ -70,9 +71,9 @@ const ContentUpdate = ({ elements = items ? items.map((id) => { return key === 'character' ? ( - + ) : ( - + ) }) : [] @@ -87,9 +88,9 @@ const ContentUpdate = ({ const items = uncappedItems[key] section = items && items.length > 0 ? ( -
+

{updates(`labels.uncaps.${key}s`)}

-
{uncapItemElements(key)}
+
{uncapItemElements(key)}
) : ( '' @@ -100,15 +101,21 @@ const ContentUpdate = ({ } return ( -
-
+
+

{`${updates('events.date', { year: date.getFullYear(), month: `${date.getMonth() + 1}`.padStart(2, '0'), })} ${updates(event)}`}

-
+
{newItemSection('character')} {uncapItemSection('character')} {newItemSection('weapon')} @@ -117,10 +124,10 @@ const ContentUpdate = ({ {uncapItemSection('summon')}
{numNotes > 0 ? ( -
+

{updates('labels.updates')}

-
    +
      {[...Array(numNotes)].map((e, i) => (
    • {updates(`versions.${version}.features.${i}`)} diff --git a/components/about/LinkItem/index.module.scss b/components/about/LinkItem/index.module.scss new file mode 100644 index 00000000..72d4462b --- /dev/null +++ b/components/about/LinkItem/index.module.scss @@ -0,0 +1,77 @@ +.item { + $diameter: $unit-6x; + align-items: center; + background: var(--dialog-bg); + border: 1px solid var(--link-item-bg); + border-radius: $card-corner; + display: flex; + min-height: 82px; + transition: background $duration-zoom ease-in, + transform $duration-zoom ease-in; + + &:hover { + background: var(--link-item-bg); + color: var(--text-primary); + + .shareIcon { + fill: var(--text-primary); + transform: translate($unit-half, calc(($unit * -1) / 2)); + } + } + + &.constrained { + max-width: 520px; + + @include breakpoint(phone) { + max-width: inherit; + width: 100%; + } + } + + &.github:hover .left .icon svg { + fill: var(--text-primary); + } + + &.discord:hover .left .icon svg { + fill: #5865f2; + } + + a { + display: flex; + justify-content: space-between; + padding: $unit-2x; + width: 100%; + + &:hover { + text-decoration: none; + } + + .left { + align-items: center; + display: flex; + gap: $unit-2x; + flex-grow: 1; + + h3 { + font-weight: 600; + max-width: 70%; + line-height: 1.3; + } + } + + svg { + fill: var(--link-item-image-color); + width: $diameter; + height: auto; + transition: fill $duration-zoom ease-in; + + &.shareIcon { + width: $unit-4x; + } + } + } + + h3 { + font-weight: $bold; + } +} diff --git a/components/about/LinkItem/index.tsx b/components/about/LinkItem/index.tsx new file mode 100644 index 00000000..e9114c34 --- /dev/null +++ b/components/about/LinkItem/index.tsx @@ -0,0 +1,37 @@ +import { ComponentProps } from 'react' +import Link from 'next/link' +import classNames from 'classnames' + +import ShareIcon from '~public/icons/Share.svg' +import styles from './index.module.scss' + +interface Props extends ComponentProps<'div'> { + title: string + link: string + icon: React.ReactNode +} + +const LinkItem = ({ icon, title, link, className, ...props }: Props) => { + const classes = classNames( + { + [styles.item]: true, + }, + className?.split(' ').map((c) => styles[c]) + ) + + return ( + + ) +} + +export default LinkItem diff --git a/components/about/RoadmapPage/index.module.scss b/components/about/RoadmapPage/index.module.scss index 90f9ca73..f342a5b3 100644 --- a/components/about/RoadmapPage/index.module.scss +++ b/components/about/RoadmapPage/index.module.scss @@ -1,5 +1,6 @@ -.Roadmap.PageContent { +.roadmap { padding-bottom: $unit-12x; + h3.priority { font-weight: $medium; font-size: $font-large; @@ -32,53 +33,6 @@ margin-bottom: $unit; font-size: $font-medium; } - - .LinkItem { - $diameter: $unit-6x; - background: var(--dialog-bg); - 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; - } - } } ul { diff --git a/components/about/RoadmapPage/index.tsx b/components/about/RoadmapPage/index.tsx index 4468c575..72506318 100644 --- a/components/about/RoadmapPage/index.tsx +++ b/components/about/RoadmapPage/index.tsx @@ -1,9 +1,10 @@ import React from 'react' import Link from 'next/link' -import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' +import classNames from 'classnames' +import LinkItem from '~components/about/LinkItem' import ShareIcon from '~public/icons/Share.svg' import GithubIcon from '~public/icons/github.svg' @@ -15,31 +16,31 @@ const RoadmapPage = () => { const { t: common } = useTranslation('common') const { t: about } = useTranslation('about') + const classes = classNames(styles.roadmap, 'PageContent') + return ( -
      +

      {common('about.segmented_control.roadmap')}

      -
      +

      {about('roadmap.blurb')}

      {about('roadmap.link.intro')}

      - + } + />
      -
      -

      {about('roadmap.subtitle')}

      +
      +

      + {about('roadmap.subtitle')} +

        {[...Array(ROADMAP_ITEMS)].map((e, i) => (
      • diff --git a/components/about/UpdatesPage/index.module.scss b/components/about/UpdatesPage/index.module.scss index 81b6a28e..06bf870e 100644 --- a/components/about/UpdatesPage/index.module.scss +++ b/components/about/UpdatesPage/index.module.scss @@ -1,95 +1,23 @@ -.Updates.PageContent { +.updates { padding-bottom: $unit-12x; - .Version { + .version { display: flex; flex-direction: column; gap: $unit-2x; - h3, - li, - p { - } - - &.Content { - .Header h3 { + &.content { + .header h3 { color: var(--accent-yellow); } - - .Contents { - display: grid; - grid-template-columns: 1fr; - gap: $unit-4x; - - .characters, - .weapons, - .summons { - display: grid; - grid-template-rows: auto 1fr; - gap: $unit; - - & > h4 { - font-weight: $medium; - font-size: $font-regular; - } - - .items { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - gap: $unit-4x; - } - } - } } - .Header { - 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; - } - } - - .Contents { + .contents { display: flex; flex-direction: column; gap: $unit-4x; - &.Bare { - display: flex; - flex-direction: column; - color: var(--text-primary); - list-style-type: disc; - list-style-position: inside; - gap: $unit-half; - - li { - font-size: 14px; - } - } - - section { - display: flex; - flex-direction: column; - gap: $unit-2x; - - h2 { - margin: 0; - } - } - - .Notes { + .features { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: $unit-2x; @@ -122,6 +50,67 @@ } } } + } + + .header { + 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; + } + } + + .list { + display: flex; + flex-direction: column; + color: var(--text-primary); + list-style-type: disc; + list-style-position: inside; + gap: $unit-half; + + li { + font-size: 14px; + } + } + + .Contents { + display: flex; + flex-direction: column; + gap: $unit-4x; + + &.Bare { + display: flex; + flex-direction: column; + color: var(--text-primary); + list-style-type: disc; + list-style-position: inside; + gap: $unit-half; + + li { + font-size: 14px; + } + } + + section { + display: flex; + flex-direction: column; + gap: $unit-2x; + + h2 { + margin: 0; + } + } .Bugs { display: flex; diff --git a/components/about/UpdatesPage/index.tsx b/components/about/UpdatesPage/index.tsx index a98e8a2b..8361ae22 100644 --- a/components/about/UpdatesPage/index.tsx +++ b/components/about/UpdatesPage/index.tsx @@ -1,6 +1,6 @@ import React from 'react' - import { useTranslation } from 'next-i18next' +import classNames from 'classnames' import ContentUpdate from '~components/about/ContentUpdate' import ChangelogUnit from '~components/about/ChangelogUnit' @@ -11,6 +11,8 @@ const UpdatesPage = () => { const { t: common } = useTranslation('common') const { t: updates } = useTranslation('updates') + const classes = classNames(styles.updates, 'PageContent') + const versionUpdates = { '1.0.0': 5, '1.0.1': 4, @@ -54,8 +56,17 @@ const UpdatesPage = () => { } return ( -
        +

        {common('about.segmented_control.updates')}

        + { weapon: ['1040617100', '1040016100'], }} /> -
        -
        +
        +

        1.1.0

        -
        +

        {updates('labels.features')}

        -
          +
            {[...Array(versionUpdates['1.1.0'].updates)].map((e, i) => (
          • {image( @@ -266,7 +277,7 @@ const UpdatesPage = () => {

        Bug fixes

        -
          +
            {[...Array(versionUpdates['1.1.0'].bugs)].map((e, i) => (
          • {updates(`versions.1.1.0.bugs.${i}`)} @@ -276,113 +287,51 @@ const UpdatesPage = () => {
        -
        -
        -

        {`${updates('events.date', { - year: 2023, - month: 2, - })} ${updates('events.uncap')}`}

        - -
        -
        -
        -

        {updates('labels.uncaps.characters')}

        -
        - - -
        -
        -
        -

        {updates('labels.uncaps.weapons')}

        -
        - - -
        -
        -
        -

        {updates('labels.uncaps.summons')}

        -
        - - -
        -
        -
        -
        -
        -
        -

        {`${updates('events.date', { - year: 2023, - month: 1, - })} ${updates('events.legfest')}`}

        - -
        -
        -
        -

        {updates('labels.characters')}

        -
        - - -
        -
        -
        -

        {updates('labels.weapons')}

        -
        - - - - -
        -
        -
        -
        -
        -
        -

        {`${updates('events.date', { - year: 2023, - month: 1, - })} ${updates('events.flash')}`}

        - -
        -
        -
        -

        {updates('labels.characters')}

        -
        - - -
        -
        -
        -

        {updates('labels.weapons')}

        -
        - - -
        -
        -
        -
        -
        -
        -

        {`${updates('events.date', { - year: 2023, - month: 1, - })} ${updates('events.uncap')}`}

        - -
        -
        -
        -

        {updates('labels.uncaps.characters')}

        -
        - -
        -
        -
        -
        -
        -
        + + + + +
        +

        1.0.1

        -
          +
            {[...Array(versionUpdates['1.0.1'])].map((e, i) => (
          • {updates(`versions.1.0.1.features.${i}`)} @@ -390,68 +339,33 @@ const UpdatesPage = () => { ))}
        -
        -
        -

        {`${updates('events.date', { year: 2022, month: 12 })} ${updates( - 'events.legfest' - )}`}

        - -
        -
        -
        -

        {updates('labels.characters')}

        -
        - - - -
        -
        -
        -

        {updates('labels.weapons')}

        -
        - - - -
        -
        -
        -

        {updates('labels.summons')}

        -
        - -
        -
        -
        -
        -
        -
        -

        {`${updates('events.date', { year: 2022, month: 12 })} ${updates( - 'events.flash' - )}`}

        - -
        -
        -
        -

        {updates('labels.characters')}

        -
        - - -
        -
        -
        -

        {updates('labels.weapons')}

        -
        - - -
        -
        -
        -
        -
        -
        + + +
        +

        1.0.0

        -
          +
            {[...Array(versionUpdates['1.0.0'])].map((e, i) => (
          • {updates(`versions.1.0.0.features.${i}`)}