granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #148 from jedmund/fix-dialogs

Browse source 
Fix About, Changelog, Roadmap dialogs
This commit is contained in:
Justin Edmund 2023-01-22 21:33:38 -08:00 committed by GitHub
commit af8b94e91a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 629 additions and 404 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
components/AboutModal/index.scss
View file

@ -1,42 +1,28 @@
.DialogWrapper { .About.DialogContent {
position: fixed; gap: 0;
background: none; padding-bottom: $unit;
border: 0;
inset: 0;
top: 0;
display: grid;
place-items: center;
min-height: 100vh;
min-width: 100vw;
overflow-y: auto;
color: inherit;
}
.About.Dialog { & > div:not(.DialogHeader) {
top: 0; display: flex;
animation: none; flex-direction: column;
transform: translate(-50%, 0); gap: $unit-2x;
border-bottom-left-radius: 0; padding: 0 $unit-4x;
border-bottom-right-radius: 0;
margin-top: $unit-10x;
@include breakpoint(phone) {
border-radius: 0;
transform: none;
margin: 0;
} }
section { section {
margin-bottom: $unit; margin-bottom: $unit;
h2 { & > h2 {
font-size: $font-medium;
font-weight: $medium;
margin-bottom: $unit * 3; margin-bottom: $unit * 3;
} }
} }
.DialogDescription { p {
color: var(--text-secondary);
font-size: $font-regular; font-size: $font-regular;
line-height: 1.24; line-height: 1.3;
margin-bottom: $unit; margin-bottom: $unit;
&:last-of-type { &:last-of-type {
@ -80,6 +66,12 @@
display: flex; display: flex;
gap: $unit-2x; gap: $unit-2x;
flex-grow: 1; flex-grow: 1;
h3 {
font-weight: 600;
max-width: 70%;
line-height: 1.3;
}
} }
svg { 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%;
}

323
components/AboutModal/index.tsx
View file

@ -1,7 +1,14 @@
import React from 'react' import React from 'react'
import Link from 'next/link' import Link from 'next/link'
import { useTranslation } from 'next-i18next' 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 CrossIcon from '~public/icons/Cross.svg'
import ShareIcon from '~public/icons/Share.svg' import ShareIcon from '~public/icons/Share.svg'
@ -14,181 +21,173 @@ const AboutModal = () => {
const { t } = useTranslation('common') const { t } = useTranslation('common')
return ( return (
<Dialog.Root> <Dialog>
<Dialog.Trigger asChild> <DialogTrigger asChild>
<li className="MenuItem"> <li className="MenuItem">
<span>{t('modals.about.title')}</span> <span>{t('modals.about.title')}</span>
</li> </li>
</Dialog.Trigger> </DialogTrigger>
<Dialog.Portal> <DialogContent
<Dialog.Overlay className="ScrollingOverlay"> className="About"
<div className="DialogWrapper"> onOpenAutoFocus={(event) => event.preventDefault()}
<Dialog.Content onEscapeKeyDown={() => {}}
className="About Dialog" >
onOpenAutoFocus={(event) => event.preventDefault()} <div className="DialogHeader">
> <DialogTitle className="DialogTitle">{t('menu.about')}</DialogTitle>
<div className="DialogHeader"> <DialogClose className="DialogClose" asChild>
<Dialog.Title className="DialogTitle"> <span>
{t('menu.about')} <CrossIcon />
</Dialog.Title> </span>
<Dialog.Close className="DialogClose" asChild> </DialogClose>
<span> </div>
<CrossIcon />
</span>
</Dialog.Close>
</div>
<section> <div>
<Dialog.Description className="DialogDescription"> <section>
Granblue.team is a tool to save and share team comps for{' '} <p>
Granblue.team is a tool to save and share team comps for{' '}
<a
href="https://game.granbluefantasy.jp"
target="_blank"
rel="noreferrer"
>
Granblue Fantasy
</a>
.
</p>
<p>
Start adding to a team and a URL will be created for you to share
wherever you like, no account needed.
</p>
<p>
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.
</p>
</section>
<section>
<h2>Feedback</h2>
<p>
This is an evolving project so feedback and suggestions are
greatly appreciated!
</p>
<p>
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!
</p>
<div className="LinkItem">
<Link href="https://discord.gg/qyZ5hGdPC8">
<a
href="https://discord.gg/qyZ5hGdPC8"
target="_blank"
rel="noreferrer"
>
<div className="Left">
<DiscordIcon />
<h3>granblue-tools</h3>
</div>
<ShareIcon className="ShareIcon" />
</a>
</Link>
</div>
</section>
<section>
<h2>Credits</h2>
<p>
Granblue.team was built by{' '}
<a
href="https://twitter.com/jedmund"
target="_blank"
rel="noreferrer"
>
@jedmund
</a>{' '}
with a lot of help from{' '}
<a
href="https://twitter.com/lalalalinna"
target="_blank"
rel="noreferrer"
>
@lalalalinna
</a>{' '}
and{' '}
<a
href="https://twitter.com/tarngerine"
target="_blank"
rel="noreferrer"
>
@tarngerine
</a>
.
</p>
<p>
Many thanks also go to Disinfect, Slipper, Jif, Bless, 9highwind,
and everyone else in{' '}
<a
href="https://game.granbluefantasy.jp/#guild/detail/1190185"
target="_blank"
rel="noreferrer"
>
Fireplace
</a>{' '}
that helped with bug testing and feature requests. (P.S.
We&apos;re recruiting!) And yoey, but he won&apos;t join our crew.
</p>
</section>
<section>
<h2>Contributing</h2>
<p>
This app is open source and licensed under{' '}
<a
href="https://choosealicense.com/licenses/agpl-3.0/"
target="_blank"
rel="noreferrer"
>
GNU AGPLv3
</a>
. 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.
</p>
<ul className="Links">
<li className="LinkItem">
<Link href="https://github.com/jedmund/hensei-api">
<a <a
href="https://game.granbluefantasy.jp" href="https://github.com/jedmund/hensei-api"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
Granblue Fantasy. <div className="Left">
<GithubIcon />
<h3>jedmund/hensei-api</h3>
</div>
<ShareIcon className="ShareIcon" />
</a> </a>
</Dialog.Description> </Link>
<Dialog.Description className="DialogDescription"> </li>
Start adding to a team and a URL will be created for you to <li className="LinkItem">
share wherever you like, no account needed. <Link href="https://github.com/jedmund/hensei-web">
</Dialog.Description>
<Dialog.Description className="DialogDescription">
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.
</Dialog.Description>
</section>
<section>
<Dialog.Title className="DialogTitle">Feedback</Dialog.Title>
<Dialog.Description className="DialogDescription">
This is an evolving project so feedback and suggestions are
greatly appreciated!
</Dialog.Description>
<Dialog.Description className="DialogDescription">
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!
</Dialog.Description>
<div className="LinkItem">
<Link href="https://discord.gg/qyZ5hGdPC8">
<a
href="https://discord.gg/qyZ5hGdPC8"
target="_blank"
rel="noreferrer"
>
<div className="Left">
<DiscordIcon />
<h3>granblue-tools</h3>
</div>
<ShareIcon className="ShareIcon" />
</a>
</Link>
</div>
</section>
<section>
<Dialog.Title className="DialogTitle">Credits</Dialog.Title>
<Dialog.Description className="DialogDescription">
Granblue.team was built by{' '}
<a <a
href="https://twitter.com/jedmund" href="https://github.com/jedmund/hensei-web"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
@jedmund <div className="Left">
</a>{' '} <GithubIcon />
with a lot of help from{' '} <h3>jedmund/hensei-web</h3>
<a </div>
href="https://twitter.com/lalalalinna" <ShareIcon className="ShareIcon" />
target="_blank"
rel="noreferrer"
>
@lalalalinna
</a>{' '}
and{' '}
<a
href="https://twitter.com/tarngerine"
target="_blank"
rel="noreferrer"
>
@tarngerine
</a> </a>
. </Link>
</Dialog.Description> </li>
<Dialog.Description className="DialogDescription"> </ul>
Many thanks also go to Disinfect, Slipper, Jif, Bless, </section>
9highwind, and everyone else in{' '} </div>
<a </DialogContent>
href="https://game.granbluefantasy.jp/#guild/detail/1190185" </Dialog>
target="_blank"
rel="noreferrer"
>
Fireplace
</a>{' '}
that helped with bug testing and feature requests. (P.S.
We&apos;re recruiting!) And yoey, but he won&apos;t join our
crew.
</Dialog.Description>
</section>
<section>
<Dialog.Title className="DialogTitle">
Contributing
</Dialog.Title>
<Dialog.Description className="DialogDescription">
This app is open source and licensed under{' '}
<a
href="https://choosealicense.com/licenses/agpl-3.0/"
target="_blank"
rel="noreferrer"
>
GNU AGPLv3
</a>
. 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.
</Dialog.Description>
<ul className="Links">
<li className="LinkItem">
<Link href="https://github.com/jedmund/hensei-api">
<a
href="https://github.com/jedmund/hensei-api"
target="_blank"
rel="noreferrer"
>
<div className="Left">
<GithubIcon />
<h3>jedmund/hensei-api</h3>
</div>
<ShareIcon className="ShareIcon" />
</a>
</Link>
</li>
<li className="LinkItem">
<Link href="https://github.com/jedmund/hensei-web">
<a
href="https://github.com/jedmund/hensei-web"
target="_blank"
rel="noreferrer"
>
<div className="Left">
<GithubIcon />
<h3>jedmund/hensei-web</h3>
</div>
<ShareIcon className="ShareIcon" />
</a>
</Link>
</li>
</ul>
</section>
</Dialog.Content>
</div>
</Dialog.Overlay>
</Dialog.Portal>
</Dialog.Root>
) )
} }

78
components/ChangelogModal/index.scss
View file

@ -1,15 +1,71 @@
h3.version { .Changelog.DialogContent {
color: $blue; gap: 0;
font-weight: $medium; padding-bottom: $unit-4x;
font-size: $font-medium;
margin-bottom: $unit;
}
.notes { & > div:not(.DialogHeader) {
color: var(--text-primary); padding: 0 $unit-4x;
list-style-type: disc; }
li { .updates {
margin-bottom: $unit-half; 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;
}
} }
} }

178
components/ChangelogModal/index.tsx
View file

@ -1,6 +1,14 @@
import React from 'react' import React from 'react'
import { useTranslation } from 'next-i18next' 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' import CrossIcon from '~public/icons/Cross.svg'
@ -10,45 +18,145 @@ const ChangelogModal = () => {
const { t } = useTranslation('common') const { t } = useTranslation('common')
return ( return (
<Dialog.Root> <Dialog>
<Dialog.Trigger asChild> <DialogTrigger asChild>
<li className="MenuItem"> <li className="MenuItem">
<span>{t('modals.changelog.title')}</span> <span>{t('modals.changelog.title')}</span>
</li> </li>
</Dialog.Trigger> </DialogTrigger>
<Dialog.Portal> <DialogContent
<Dialog.Content className="Changelog"
className="Dialog" onOpenAutoFocus={(event) => event.preventDefault()}
onOpenAutoFocus={(event) => event.preventDefault()} onEscapeKeyDown={() => {}}
> >
<div className="DialogHeader"> <div className="DialogHeader">
<Dialog.Title className="DialogTitle"> <DialogTitle className="DialogTitle">
{t('menu.changelog')} {t('menu.changelog')}
</Dialog.Title> </DialogTitle>
<Dialog.Close className="DialogClose" asChild> <DialogClose className="DialogClose" asChild>
<span> <span>
<CrossIcon /> <CrossIcon />
</span> </span>
</Dialog.Close> </DialogClose>
</div> </div>
<section> <div className="updates">
<Dialog.Description className="DialogDescription"> <section className="version" data-version="1.0">
<h3 className="version">1.0</h3> <div className="top">
<ul className="notes"> <h3>1.0.1</h3>
<li>First release!</li> <time>2023/01/08</time>
<li>Content update - Mid-December 2022 Flash Gala</li> </div>
<li>You can embed Youtube videos now</li> <ul className="notes">
<li>Better clicking - right-click and open in a new tab</li> <li>Extra party fields: Full Auto, Clear Time, and more</li>
<li>Manually set dark mode in Account Settings</li> <li>Support for Youtube short URLs</li>
<li>Lots of bugs squashed</li> <li>Responsive grids and lots of other mobile fixes</li>
</ul> <li>Many other bug fixes</li>
</Dialog.Description> </ul>
</section> </section>
</Dialog.Content> <section className="content version" data-version="2022-12L">
<Dialog.Overlay className="Overlay" /> <div className="top">
</Dialog.Portal> <h3>2022-12 Legend Festival</h3>
</Dialog.Root> <time>2022/12/26</time>
</div>
<div className="update">
<section className="characters">
<h4>New characters</h4>
<div className="items">
<ChangelogUnit
name="Michael (Grand)"
id="3040440000"
type="character"
/>
<ChangelogUnit
name="Makura"
id="3040441000"
type="character"
/>
<ChangelogUnit
name="Ultimate Friday"
id="3040442000"
type="character"
/>
</div>
</section>
<section className="weapons">
<h4>New weapons</h4>
<div className="items">
<ChangelogUnit
name="Crimson Scale"
id="1040315900"
type="weapon"
/>
<ChangelogUnit
name="Leporidius"
id="1040914500"
type="weapon"
/>
<ChangelogUnit
name="FRIED Spear"
id="1040218200"
type="weapon"
/>
</div>
</section>
<section className="summons">
<h4>New summons</h4>
<div className="items">
<ChangelogUnit name="Yatima" id="2040417000" type="summon" />
</div>
</section>
</div>
</section>
<section className="content version" data-version="2022-12F2">
<div className="top">
<h3>2022-12 Flash Gala</h3>
<time>2022/12/26</time>
</div>
<div className="update">
<section className="characters">
<h4>New characters</h4>
<div className="items">
<ChangelogUnit
name="Charlotta (Grand)"
id="3040438000"
type="character"
/>
<ChangelogUnit name="Erin" id="3040439000" type="character" />
</div>
</section>
<section className="weapons">
<h4>New weapons</h4>
<div className="items">
<ChangelogUnit
name="Claíomh Solais Díon"
id="1040024200"
type="weapon"
/>
<ChangelogUnit
name="Crystal Edge"
id="1040116500"
type="weapon"
/>
</div>
</section>
</div>
</section>
<section className="version" data-version="1.0">
<div className="top">
<h3>1.0.0</h3>
<time>2022/12/26</time>
</div>
<ul className="notes">
<li>First release!</li>
<li>You can embed Youtube videos now</li>
<li>Better clicking - right-click and open in a new tab</li>
<li>Manually set dark mode in Account Settings</li>
<li>Lots of bugs squashed</li>
</ul>
</section>
</div>
</DialogContent>
</Dialog>
) )
} }

16
components/ChangelogUnit/index.scss Normal file
View file

@ -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;
}
}

45
components/ChangelogUnit/index.tsx Normal file
View file

@ -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 (
<div className="ChangelogUnit">
<img alt={name} src={generateImageUrl()} />
<h4>{name}</h4>
</div>
)
}
export default ChangelogUnit

3
components/Dialog/index.tsx
View file

@ -23,6 +23,9 @@ export const Dialog = ({ children, ...props }: PropsWithChildren<Props>) => {
function handleOpenChange(open: boolean) { function handleOpenChange(open: boolean) {
if (props.onOpenChange) props.onOpenChange(open) if (props.onOpenChange) props.onOpenChange(open)
if (props.open === undefined) {
toggleLocked(open)
}
} }
return ( return (

8
components/DialogContent/index.scss
View file

@ -28,6 +28,7 @@
overflow-y: scroll; overflow-y: scroll;
max-height: 80vh; max-height: 80vh;
min-width: 580px; min-width: 580px;
max-width: 42vw;
// padding: $unit * $multiplier; // padding: $unit * $multiplier;
position: relative; position: relative;
@ -54,11 +55,16 @@
align-items: center; align-items: center;
gap: $unit-2x; gap: $unit-2x;
justify-content: space-between; justify-content: space-between;
padding: $unit-3x ($unit * $multiplier); padding: $unit-4x ($unit * $multiplier);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 10; z-index: 10;
&.Short {
padding-top: $unit-3x;
padding-bottom: $unit-3x;
}
.left { .left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

4
components/LoginModal/index.scss
View file

@ -2,10 +2,6 @@
gap: $unit; gap: $unit;
min-width: $unit * 52; min-width: $unit * 52;
.DialogHeader {
padding: $unit-4x $unit-3x;
}
form { form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

203
components/RoadmapModal/index.scss
View file

@ -1,114 +1,117 @@
.Roadmap.Dialog { .Roadmap.DialogContent {
max-height: 60vh; gap: 0;
overflow-y: scroll; 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; display: flex;
flex-direction: column; flex-direction: column;
gap: $unit; gap: $unit-2x;
padding: 0 $unit-4x;
h3.priority { section.notes {
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 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $unit; gap: $unit;
margin-bottom: $unit-2x; margin-bottom: $unit-2x;
h4 { p {
font-size: $font-medium; margin-bottom: $unit;
font-weight: $bold;
} }
p { .LinkItem {
font-size: $font-regular; $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;
}
} }
} }
} }

92
components/RoadmapModal/index.tsx
View file

@ -1,7 +1,13 @@
import React from 'react' import React from 'react'
import Link from 'next/link' import Link from 'next/link'
import { useTranslation } from 'next-i18next' 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 CrossIcon from '~public/icons/Cross.svg'
import ShareIcon from '~public/icons/Share.svg' import ShareIcon from '~public/icons/Share.svg'
@ -13,49 +19,50 @@ const RoadmapModal = () => {
const { t } = useTranslation('roadmap') const { t } = useTranslation('roadmap')
return ( return (
<Dialog.Root> <Dialog>
<Dialog.Trigger asChild> <DialogTrigger asChild>
<li className="MenuItem"> <li className="MenuItem">
<span>{t('modals.roadmap.title')}</span> <span>{t('modals.roadmap.title')}</span>
</li> </li>
</Dialog.Trigger> </DialogTrigger>
<Dialog.Portal> <DialogContent
<Dialog.Content className="Roadmap"
className="Roadmap Dialog" onOpenAutoFocus={(event) => event.preventDefault()}
onOpenAutoFocus={(event) => event.preventDefault()} onEscapeKeyDown={() => {}}
> >
<div className="DialogHeader"> <div className="DialogHeader">
<Dialog.Title className="DialogTitle">{t('title')}</Dialog.Title> <DialogTitle className="DialogTitle">{t('title')}</DialogTitle>
<Dialog.Close className="DialogClose" asChild> <DialogClose className="DialogClose" asChild>
<span> <span>
<CrossIcon /> <CrossIcon />
</span> </span>
</Dialog.Close> </DialogClose>
</div> </div>
<section> <div>
<div className="top"> <section className="notes">
<h3 className="priority in_progress">{t('subtitle')}</h3> <p>{t('blurb')}</p>
<p>{t('blurb')}</p> <p>{t('link.intro')}</p>
<p>{t('link.intro')}</p> <div className="LinkItem">
<div className="LinkItem"> <Link href="https://github.com/users/jedmund/projects/1/views/3">
<Link href="https://github.com/users/jedmund/projects/1/views/3"> <a
<a href="https://github.com/users/jedmund/projects/1/views/3"
href="https://github.com/users/jedmund/projects/1/views/3" target="_blank"
target="_blank" rel="noreferrer"
rel="noreferrer" >
> <div className="Left">
<div className="Left"> <GithubIcon />
<GithubIcon /> <h3>{t('link.title')}</h3>
<h3>{t('link.title')}</h3> </div>
</div> <ShareIcon className="ShareIcon" />
<ShareIcon className="ShareIcon" /> </a>
</a> </Link>
</Link>
</div>
</div> </div>
<div className="Separator" /> </section>
<ul className="notes">
<section className="features">
<h3 className="priority in_progress">{t('subtitle')}</h3>
<ul>
<li> <li>
<h4>{t('roadmap.item1.title')}</h4> <h4>{t('roadmap.item1.title')}</h4>
<p>{t('roadmap.item1.description')}</p> <p>{t('roadmap.item1.description')}</p>
@ -82,10 +89,9 @@ const RoadmapModal = () => {
</li> </li>
</ul> </ul>
</section> </section>
</Dialog.Content> </div>
<Dialog.Overlay className="Overlay" /> </DialogContent>
</Dialog.Portal> </Dialog>
</Dialog.Root>
) )
} }

4
components/SignupModal/index.scss
View file

@ -2,10 +2,6 @@
gap: $unit; gap: $unit;
min-width: $unit * 52; min-width: $unit * 52;
.DialogHeader {
padding: $unit-4x $unit-3x;
}
form { form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

5
components/WeaponModal/index.tsx
View file

@ -93,8 +93,10 @@ const WeaponModal = ({
const [ax2Open, setAx2Open] = useState(false) const [ax2Open, setAx2Open] = useState(false)
const [awakeningOpen, setAwakeningOpen] = useState(false) const [awakeningOpen, setAwakeningOpen] = useState(false)
// Hooks
useEffect(() => { useEffect(() => {
setOpen(modalOpen) setOpen(modalOpen)
handleOpenChange(modalOpen)
}, [modalOpen]) }, [modalOpen])
useEffect(() => { useEffect(() => {
@ -346,7 +348,6 @@ const WeaponModal = ({
} }
return ( return (
// TODO: Refactor into Dialog component
<Dialog open={open} onOpenChange={handleOpenChange}> <Dialog open={open} onOpenChange={handleOpenChange}>
<DialogTrigger asChild>{children}</DialogTrigger> <DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent <DialogContent
@ -354,7 +355,7 @@ const WeaponModal = ({
onOpenAutoFocus={(event) => event.preventDefault()} onOpenAutoFocus={(event) => event.preventDefault()}
onEscapeKeyDown={onEscapeKeyDown} onEscapeKeyDown={onEscapeKeyDown}
> >
<div className="DialogHeader"> <div className="DialogHeader Short">
<img <img
alt={gridWeapon.object.name[locale]} alt={gridWeapon.object.name[locale]}
className="DialogImage" className="DialogImage"

6
styles/themes.scss
View file

@ -13,6 +13,9 @@
--separator-bg: #{$separator--bg--light}; --separator-bg: #{$separator--bg--light};
--accent-blue: #{$accent--blue--light};
--accent-yellow: #{$accent--yellow--light};
// Light - Menus // Light - Menus
--dialog-bg: #{$dialog--bg--light}; --dialog-bg: #{$dialog--bg--light};
@ -137,6 +140,9 @@
--separator-bg: #{$separator--bg--dark}; --separator-bg: #{$separator--bg--dark};
--accent-blue: #{$accent--blue--dark};
--accent-yellow: #{$accent--yellow--dark};
// Dark - Dialogs // Dark - Dialogs
--dialog-bg: #{$dialog--bg--dark}; --dialog-bg: #{$dialog--bg--dark};

6
styles/variables.scss
View file

@ -76,6 +76,12 @@ $red: #ff6161;
$yellow: #c89d39; $yellow: #c89d39;
$error: #d13a3a; $error: #d13a3a;
$accent--blue--light: #275dc5;
$accent--blue--dark: #6195f4;
$accent--yellow--light: #c89d39;
$accent--yellow--dark: #f9cc64;
// Colors -- Elements // Colors -- Elements
$wind-text-00: #023e28; $wind-text-00: #023e28;
$wind-text-10: #006a43; $wind-text-10: #006a43;